.box {
  max-width: 1100px;
  margin: 100px auto;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 200px minmax(0, 1fr)
}

/* The numbers are used to create some air between the boundary of the box.
  there can be a max of four numbers (top, right, bottom, left)
  HOWEVER, if you do three it becomes (top, left and right, bottom)
  THEN, if you use two it will become (top and bottom, left and right)
  This can be usual for responsiveness on each device, 
  instead of hoping the coordinates for each box is consitent with each device <3
  
  ALSO if you want to center something really quickly it can be done with:
  margin: 0px auto;
  
  Hope this helps, love youuuu*/
  
.thefont {
   font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}

.thefontb {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}


header, main2 {
  border-style: solid;
  border: #7DB4E8 2px;
  border-radius: 5px; 
  background-color: #2768F5;
}

main {
  border-radius: 5px; 
  background-color: gray;
}
  
 nav, footer {
  border-style: solid;
  border: none;
  border-radius: 5px; 
}

header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

nav {
  grid-row: 2 / 6;
  grid-column: 1 / 2;
}

main {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  height: 200px;
  color: white;
}

main2 {
  grid-row: 4 / 6;
  grid-column: 2 / 4;
  overflow: hidden;
  color: white;
}

footer {
  grid-row: 6 / 7;
  grid-column: 1 / 4;
}

/* the height: max-content; that is in the nav and main sections are used to make sure that if one has more text, the other doesn't follow in height.

Think of it like a frame in figma, it's basically telling the frams to still contain and change it's own size based off it's own content's, but it is also saying that it does not follow it's neighbour. if for some reason in the future this is annoying, rember to remove it by making it a C O M M E N T, so if it is still preffered later, that we can easily grab it :) <33 */

img {
  max-width: 100%;
}

ul {
  padding: 0;
}
  
li::marker {
  content: none;
}

body {
  background-image: url("https://i.pinimg.com/originals/cf/ec/88/cfec8819d8376a57c86e3c6e53ed618e.gif");
}


.blinkie {
  border-radius: 5px; 
  height: 20px;
}