@font-face { 
	font-family: "pixelfont"; 
  src: url("pixelfont/JMH Cthulhumbus Arcade UG.ttf") format("truetype");
  font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
@font-face { 
	font-family: "pixelfontsmall"; 
  src: url("pixelfontsmall/PixelOperator.ttf") format("truetype");
  font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
button {
  background-color: black;
  color: #8fbc8f;
  border: 2px solid #8fbc8f;
}
body {
     background-image: url("images/greenwaterbackground.jpg");
     background-size: 100%;
     padding: 0 20px;
  }
  a{
        color: black;
  }
  a:hover{
        color: white;
  }
  p {
    text-align: justify;
  }
  .box {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px minmax(0,1fr);
  }
  header{
    background-color: #00000090;
    font-family: "pixelfont", serif;
    color: #92e333;
    text-align: center;
    padding: 7px;
    border: 2px solid #92e333;
    border-radius: 15px;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
  }
  nav{
    background-color: #92e333;
    font-family: "pixelfontsmall", serif;
    color: black;
    padding: 7px;
    border: 2px solid black;
    border-radius: 15px;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
    list-style-image: url("gifs/note.gif");
  }
      main{
    background-color: #bcff5f;
    font-family: "pixelfontsmall", serif;
    color: black;
    padding: 7px;
    border: 2px solid black;
    border-radius: 15px;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: max-content;
  }