@charset "UTF-8";
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

#skip {
  z-index: 99999;
  position: absolute;
  left: -10000px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  justify-content: center;
  color: aqua;
  background-color: black;
}
#skip:focus {
  left: 50%;
  top: 15%;
}

div#container {
  background-color: whitesmoke;
  min-height: 101vh;
  display: grid;
  grid-template-columns: 25px 1fr 25px;
  grid-template-rows: 80px 800px 1fr 60px;
  grid-template-areas: "nav nav nav" " header header header " "main main main" "footer footer footer";
}
div#container nav {
  grid-area: nav;
  background-color: rgb(83, 83, 83);
  display: flex;
  justify-content: space-between;
}
div#container nav img {
  display: flex;
  margin-top: 5px;
  margin-left: 5px;
}
div#container nav details summary {
  color: white;
  list-style: none;
  display: flex;
  justify-content: end;
  margin-right: 25px;
  margin-top: 25px;
}
div#container nav details ul {
  z-index: 99999;
  position: absolute;
  top: 90px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  float: right;
  color: white;
  background-color: gray;
  list-style: none;
}
div#container nav details ul > li {
  padding: 7px;
  padding-bottom: 0px;
}
div#container nav details ul > li:visited {
  color: white;
}
div#container nav details ul > li:hover {
  background-color: orangered;
}
div#container nav details ul > li:active {
  background-color: white;
  color: black;
}
div#container nav details summary::before {
  color: white;
  content: "☰";
}
div#container nav details[open] summary::before {
  color: white;
  content: "☰";
}
div#container header {
  grid-area: header;
  background-color: gray;
  color: whitesmoke;
}
div#container main {
  grid-area: main;
  background-color: gray;
}
div#container main #text {
  background-color: gray;
}
div#container footer {
  grid-area: footer;
  background-color: black;
  color: whitesmoke;
  text-align: center;
  padding-top: 15px;
}

@media screen and (min-width: 768px) {
  div#container {
    background-color: lightslategrey;
    min-height: 101vh;
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 80px 1150px 1fr 60px;
    grid-template-areas: "nav nav nav" " . header . " ". main ." "footer footer footer";
  }
}
@media screen and (min-width: 1080px) {
  div#container {
    background-color: lightslategrey;
    min-height: 101vh;
    display: grid;
    grid-template-columns: 350px 1fr 350px;
    grid-template-rows: 80px 1150px 1fr 60px;
    grid-template-areas: "nav nav nav" " . header . " ". main ." "footer footer footer";
  }
}/*# sourceMappingURL=style.css.map */