:root{
  --main-radius:5px;
  --main-padding:5px;
  --main-border:2px solid #31414E;
}
@font-face { 
	font-family: "PixelOperator"; 
	src: url("Font/PixelOperator.ttf") format("truetype"),
		url("Font/PixelOperator-Bold.ttf") format("truetype");
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
body{
  background-image: url("/Textures/aquagalaxy.gif");
  background-size: auto;
  background-repeat: repeat;
  font-family:"PixelOperator", monospace;
  font-size: 15px;
}
.container{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 0.5fr;
  grid-template-areas:
  "header header header header"
  "sidebar main main main"
  "sidebar main main main"
  "sidebar footer footer footer";
  grid-gap: 1rem;
  margin: 40px;
  min-height: 600px;
  max-height:700px;
  color: #31414E;
}

Header{
  background-image: url("Headers/throne.png");
  grid-area:header;
  border-radius: 20px;
  padding-top:var(--main-padding);
  border:var(--main-border);
  max-height: 169px;
  min-height: 169px;
}
main{
  background: #9BCBC9;
  grid-area:main;
  padding: 10px;
  border:var(--main-border);
  max-height: 398px;
  min-height: 398px;
  overflow-y: scroll;
}
#sidebar{
  background: #9BCBC9;
  grid-area:sidebar;
  border-radius:var(--main-radius);
  padding-top:var(--main-padding);
  border-radius: 20px 0 0 20px;
  border:var(--main-border);
  max-height: 497px;
  min-height: 497px;
}

footer{
  background: #DCEADC;
  grid-area:footer;
  border-bottom-right-radius: 20px;
  padding-top:var(--main-padding);
  border:var(--main-border);
  max-height: 59px;
  min-height: 59px;
}


@media only screen and (max-width: 550px){
  .container{
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1fr;
    grid-template-areas:
    "header"
    "sidebar"
    "main"
    "footer"
  }
}