/* this is how you make a comment */

@font-face {
  font-family: SixtyFour;
  src:
    url("/assets/fonts/Sixtyfour/Sixtyfour-Regular-VariableFont_BLED,SCAN.ttf") format("truetype"),
    url("/assets/fonts/Sixtyfour/Sixtyfour-Regular-VariableFont_BLED,SCAN.woff") format("woff"),
    url("/assets/fonts/Sixtyfour/Sixtyfour-Regular-VariableFont_BLED,SCAN.woff2") format("woff2");
}
@font-face {
  font-family: AnonPro;
  src:
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Regular.ttf") format("truetype"),
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Regular.woff") format("woff"),
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: AnonPro;
  src:
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Italic.ttf") format("truetype"),
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Italic.woff") format("woff"),
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: AnonPro;
  src:
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Bold.ttf") format("truetype"),
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Bold.woff") format("woff"),
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: AnonPro;
  src:
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-BoldItalic.ttf") format("truetype"),
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-BoldItalic.woff") format("woff"),
    url("/assets/fonts/Anonymous_Pro/AnonymousPro-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: bold;
}

.container{
  display:grid;
  grid-template-areas: 
    "header header header header"
    "sidebar main main main"
    "footer footer footer footer";
  padding: 1rem;
  gap: .5rem;
  max-width: 960px;
  margin:auto;
}

body {
  background-color: black;
  font-family: AnonPro, "Courier New", Monospace;
}

.header{
  grid-area: header;
  background-color: darkgoldenrod;
  font-family: SixtyFour, AnonPro, "Courier New", Monospace;
  font-size: 3rem;
  font-variation-settings:
    "SCAN" 0,
    "BLED" 0; 
  border-radius: 15px;
  padding: 2px;
  text-align: center;
  max-height: min-content;
  align-content: center;
}
.sidebar{
  grid-area: sidebar;
  background-color: rgba(184, 134, 11, 0.33);
  padding: 20px;
  border-radius: 30px;
  margin-top: 7px;
  margin-bottom: 7px;
  width: 260px;
}

.main{
  grid-area: main;
}

div{
  padding:5px;
}

section{
  background-color: darkgoldenrod;
  border-radius: 30px;
  padding:20px;
  align-content: center;
}
section h1{
  margin-top:0;
  margin-bottom:.25rem
}
section p{
  margin-bottom:.25rem;
}
.changelog ul{
  display:contents;
  list-style-type: upper-roman;
  list-style-position: inside;
}

.bloglist ul, section ul{
  display:contents;
  list-style-position: inside;
}
li{
  padding-bottom: .5rem;
}
nav ul{
  list-style-type:none;
  display:contents;
}
nav h2, .changelog h2, .bloglist h2, .resources h2{
  margin-bottom: .5rem;
  margin-top:0;
}
nav, .changelog, .bloglist{
  background-color: darkgoldenrod;
  border-radius: 30px;
  padding: 20px;
  align-content: center;
  margin-bottom: .25rem; 
}

.footer{
  grid-area: footer;
  background-color: rgba(184, 134, 11, 0.33);
  padding: 2px;
  color: white;
  text-align: center;
  border-radius: 100px;
  align-content: center;
  max-height: min-content;
}