/* ========================================
    closer to <table>s, closer to God
======================================== */
body {
    font-size: 1vw;
}
.container {
  display: grid;
  gap: 20px;
  padding: 2vw;
  justify-self: center;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: 
    'logo head head head head head'
    'logo blrb blrb blrb blrb blrb'
    'uvid main main main main main'
    'mood main main main main main'
    'navi main main main main main'
    'navi foot foot foot foot upda'
    'navi foot foot foot foot copy';
}
.container div {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
}
.container div div {
  background-color: transparent;
  margin: -5px !important;
}


/* ========================================
                grid areas
======================================== */
.logo {
  grid-area: logo;
  justify-self: center;
  align-self: center;
  width: 95%; 
  filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.527)) 
          drop-shadow(2px -2px 8px rgba(0, 0, 0, 0.534)) 
          drop-shadow(-2px 2px 8px rgba(0, 0, 0, 0.445)) 
          drop-shadow(-2px -2px 8px rgba(0, 0, 0, 0.493));
}
.head {
  grid-area: head;
  align-self: end;
  width: 100%; 
  filter: invert(1);
}
.blrb {
  grid-area: blrb;
  align-self: start;
  /* box style */
  background-color: black !important;
  width: fit-content;
  height: fit-content;
  padding: 0.5vw 1vw !important;
  border: 2px inset;
  border-radius: 100px;
  /* text style */
  color: greenyellow; 
  font-size: 1.5vw;
}
.navi {
  grid-area: navi;
}
.uvid {
  /* box */
  background-color: white !important;
  justify-self: stretch; 
  padding: 1vw !important;
  border: 5px ridge;
  /* text */
  color: black; 
  text-align: center; 
  font-size: 1.4vw
}
.main {
  grid-area: main;
  background-color: black !important;
}
div.main div {
  margin-bottom: 10px !important;
}
.foot {
  grid-area: foot;
  padding: 0px !important;
  border: 2px outset;
  background-color: rgb(182, 182, 182) !important;
}
.mood {
  grid-area: mood;
  justify-self: stretch;
  align-self: center;
  text-align: center;
  border: 1px dotted white;
  font-size: 0.75vw;
  background-color: black !important;
}
.upda {
  grid-area: upda;
  font-size: 1vw;
}
.copy {
  grid-area: copy;
  font-size: 0.75vw;
  background-color: black !important;
 }




 /* ========================================
             MOBILE MEDIA QUERY
======================================== */
@media screen and (max-width: 768px) {
/* ========================================
    closer to <table>s, closer to God
======================================== */

body {
    font-size: 3vw;
}
.container {
  display: grid;
  gap: 2vw;
  padding: 2vw;
  justify-self: center;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: 
    'logo head head head head'
    'logo blrb blrb blrb blrb'
    'uvid main main main main'
    'mood main main main main'
    'navi main main main main'
    'navi foot foot foot foot'
    'navi upda upda copy copy';
}
.container div {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
}
.container div div {
  background-color: transparent;
  margin: -5px !important;
}


/* ========================================
                grid areas
======================================== */
.logo {
  grid-area: logo;
  justify-self: center;
  align-self: center;
  width: 95%; 
  filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.527)) 
          drop-shadow(2px -2px 8px rgba(0, 0, 0, 0.534)) 
          drop-shadow(-2px 2px 8px rgba(0, 0, 0, 0.445)) 
          drop-shadow(-2px -2px 8px rgba(0, 0, 0, 0.493));
}
.head {
  grid-area: head;
  align-self: end;
  width: 100%; 
  filter: invert(1);
}
.blrb {
  grid-area: blrb;
  align-self: start;
  /* box style */
  background-color: black !important;
  width: fit-content;
  height: fit-content;
  padding: 0.5vw 1vw !important;
  border: 2px inset;
  border-radius: 100px;
  /* text style */
  color: greenyellow; 
  font-size: 1.5vw;
}
.navi {
  grid-area: navi;
}
.uvid {
  /* box */
  background-color: white !important;
  justify-self: stretch; 
  padding: 1vw !important;
  border: 5px ridge;
  /* text */
  color: black; 
  text-align: center; 
  font-size: 1.4vw
}
.main {
  grid-area: main;
  background-color: black !important;
}
div.main div {
  margin-bottom: 10px !important;
}
.foot {
  grid-area: foot;
  padding: 0px !important;
  border: 2px outset;
  background-color: rgb(182, 182, 182) !important;
}
.mood {
  grid-area: mood;
  justify-self: stretch;
  align-self: center;
  text-align: center;
  border: 1px dotted white;
  font-size: 0.75vw;
  background-color: black !important;
}
.upda {
  grid-area: upda;
  font-size: 1vw;
}
.copy {
  grid-area: copy;
  font-size: 2vw;
  background-color: black !important;
 }

}