/* headers font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* text font */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

* {
  /* margin: 0; */
  box-sizing: border-box;
}

body {
  font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
  font-size: 20px;
  color: #fff;
  /* background-color: rgb(79, 124, 141); */
  background-image: radial-gradient(rgb(41, 56, 93), rgb(6, 3, 46) 90%);
  /* min-height: 90vh; */

}



.center-content {
  background-image: radial-gradient(rgb(45, 74, 148), rgb(6, 3, 46) 90%);
  justify-self: center;
  margin: auto;
  border-radius: 2rem;
  scale: 100%;
  max-width: 1300px;
  margin-top: 50px;

}



/* GRID STUFF */

.grid-container {
  display: grid;
  grid-auto-columns: 23%;
  justify-content: center;
  align-self: center;
  margin: auto;
  gap: 0.5rem;
  position: relative;

}

.grid-container>div {
  /* background-color: rgb(51, 160, 156); */
  position: relative;
  /* position: absolute; */
  /* padding: 10px; */
  margin: 5px;
}

.header {
  position: relative;
  grid-area: 'header';
  text-align: center;
  font-size: 1rem;
  font-weight: bolder;
}

.image-card {
  grid-area: 'side_image';
  position: relative;
  align-items: center;


}

.image-card>img {
  width: 20vw;
  /* align-self: center top center; */

}

.menu {
  grid-area: 'menu';
  position: relative;
  display: flex;
  flex-wrap: wrap;
  font-family: "Press start 2P";
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  /* width: 100%; */
}

.menu>button {
  /* text-align: center; */
  font: 1em 'Press start 2P', 'Courier New', Courier, monospace;
  color: #FFFFFF;
  cursor: pointer;
  background: #cecece30;
  border-width: 2px;
  border-style: solid;
  border-color: #FFFFFF;
  cursor: pointer;
  /* padding: 15px 32px; */
  animation: textShadow 3.6s infinite;
}

.menu>button:hover {
  background-color: rgb(31, 96, 160);
  /* padding: 0.2vw 0.2vw; */
}

.menu>button:active {
  /* background-color: rgb(4, 43, 81); */
  background-color: #cecece;
  color: rgba(31, 96, 160, 0.75);
}



.main-content {
  grid-area: 'main';
  position: relative;
  line-height: 2rem;
}

.main-content>h1 {
  font-weight: 300;
  font: 28px "Press start 2P";
}

.main-content>h1::before {
  content: "# ";
  left: 0;
}

.main-content>h2 {
  font-weight: 300;
  font: 16px "Press start 2P";
}

.main-content>h2::before {
  content: "## ";
  left: 0;
}

ul {
  list-style-type: none;
  padding: 0rem;
}

li {
  position: relative;
  padding-left: 2rem;
  padding-top: 1rem;
}

li::before {
  content: " > ";
  position: absolute;
  left: 0;
}



a {
  color: white;
  padding: 0.2vw 0.2vw;
}

a:hover {
  background-color: #cecece;
  color: rgba(31, 96, 160, 0.75);
}

.highlights {
  /* justify-content: top; */
  grid-area: highlights;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  font-family: "IBM Plex Mono";
  color: #FFFFFF;
  border: #cecece solid;
  border-width: 3px;
  padding: 20px;
  font-size: 80%;
}

.highlights>h2 {
  padding-bottom: 0px;
  margin: 0px;
}

.footer {
  grid-area: footer;
  position: relative;
  text-align: center;
}

summary {
  color: white;
  padding: 0.2vw 0.2vw;
}

summary:hover {
  background-color: #cecece;
  color: rgba(31, 96, 160, 0.75);
}















hr {

  margin: 0 auto;
  position: relative;
  width: 90%;
  background-color: #cecece;
  box-shadow: 0 0 3px 1px #cecece;
}

/* SCREEN RESOLUTIONS */

@media (max-width:47rem) {

  /* .grid-container {
    grid-template-areas:
      'side_image side_image menu menu'
      'main main main main'
      '. highlights highlights .'
      'footer footer footer footer';
  } */

  html {
    min-width: none;
  }

  .center-content {
    width: 100%;
    /* position: fixed; */
    /* justify-self: top; */
    object-position: inherit;
  }

  /* .grid-container {
    width: 700px;
  } */

  .header {
    visibility: hidden;
    height: 0px;
  }

  .image-card {
    /* position: relative; */

    grid-area: 1 / span 4;
    justify-self: center;
    flex-wrap: wrap;


  }

  .image-card>img {
    width: 50vw;
    height: 33vw;
    object-fit: cover;
    object-position: 0 0;
  }

  .menu {
    grid-area: 2 / span 4;
    /* align-items: center;
    position: relative;
    margin: auto; */
    flex-wrap: wrap;
  }

  .menu>button {
    padding: 8px 10px;
    margin: 2px auto 3px;
    min-width: 25%;
    width: 200px;
    font-size: small;
  }

  .main-content {
    grid-area: 3 / span 4;
    align-items: center;
    position: relative;
    margin: auto;
    justify-self: center;
    width: 90%;
  }

  .highlights {
    grid-area: 4 / span 4;
    /* justify-self: center;
    position: relative;
    margin: auto; */
    width: 70vw;


    justify-self: center;
  }

  .footer {
    grid-area: 5 / span 4;
    align-items: center;
    position: relative;
    margin: auto;
    font-size: 70%;
  }
}

@media (
  /*min-width:760px*/
  min-width:47.01rem) {

  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

  .grid-container {
    grid-template-areas:
      'header header header header'
      'menu menu menu menu'
      'side_image main main main'
      '. highlights highlights .'
      'footer footer footer footer';
  }


  .header {
    grid-area: 1 / span 4;
  }

  .menu {
    grid-area: 2 / span 4;
  }

  .menu>button {
    padding: 8px 10px;
    margin: 20px auto 3px;
    min-width: 25%;
  }

  .image-card {
    grid-area: 3 / span 1;
  }

  .image-card>img {
    max-width: 100%;

  }

  .main-content {
    grid-area: 3 / span 3;
  }

  .highlights {
    grid-area: 4 / span 4;

  }

  .footer {
    grid-area: 5 / span 4;
  }
}

@media (
  /*min-width:961px*/
  min-width:60rem) {

  .grid-container {
    grid-template-areas:
      'header header header header'
      'menu menu menu menu'
      'side_image main main highlights'
      'footer footer footer footer';
  }

  /* tablet, landscape iPad, lo-res laptops ands desktops */
  .header {
    grid-area: 1 / span 4;
  }

  .menu {
    grid-area: 2 / span 4;

  }

  .image-card {
    grid-area: 3 / span 1;
  }

  .image-card>img {
    max-width: 100%;

  }

  .main-content {
    grid-area: 3 / span 2;
  }

  .highlights {
    grid-area: 3 / span 1;
    padding: 10px;
    margin: 20px;
    /* width: 100%; */
    /* justify-content: start; */
    align-content: start;
  }

  .footer {
    grid-area: 4 / span 4;
  }
}

/* In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em===16px, multiply pixels by 1em/16px to get ems. For example, 320px===20em. In response to the comment,
min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens. Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules. */


::selection {
  background: #cecece;
  color: rgba(4, 43, 81, 0.75);
  text-shadow: none;
}


/* crt scan lines from http://aleclownes.com/2017/02/01/crt-display.html */

.crt {
  animation: textShadow 3.6s infinite;
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.05);
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  animation: flicker 0.15s infinite;


}

.crt::before {
  min-height: 100%;
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%),
    linear-gradient(90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06));
  z-index: 100;
  /* background-size: 100% 4px, 0px 100%; */
  background-size: 100% 7px, 0px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }

  10% {
    opacity: 0.23604;
  }

  20% {
    opacity: 0.18128;
  }

  30% {
    opacity: 0.65583;
  }

  40% {
    opacity: 0.26559;
  }

  50% {
    opacity: 0.96019;
  }

  60% {
    opacity: 0.20313;
  }

  70% {
    opacity: 0.53455;
  }

  80% {
    opacity: 0.71428;
  }

  90% {
    opacity: 0.7003;
  }

  100% {
    opacity: 0.24387;
  }
}

@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
      -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
      -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
      -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
      -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
      -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
      -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
      -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
      -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
      -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
      -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
      -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
      -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
      -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
      -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
      -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
      -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
      -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
      -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
      -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
      -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }

  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
      -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 1px;
  }
}