@font-face {
    font-family: "Courier Prime";
    src: URL('Courier Prime/Courier Prime.ttf') format('truetype');
}

@font-face {
    font-family: 'New Romantics';
    src: URL("new_romantics/ROMANTIC.TTF") format("truetype");
}

@font-face {
    font-family: 'Starborn';
    src: URL('starborn/Starborn.ttf') format('truetype'),
         URL('starborn/Starborn.otf') format('opentype');
}

@font-face {
    font-family: 'Ithornet';
    src: URL('/ithornet/Ithorn%C3%ABt.ttf') format('truetype'),
         URL('/ithornet/Ithorn%C3%ABt.otf') format('opentype');
}

@font-face {
    font-family: 'Angelic War';
    src: URL('/angelic_war/AngelicWar.ttf') format('truetype'),
         URL('/angelic_war/AngelicWar.otf') format('opentype');
}

p { 
font-family: "Courier Prime";
color: #C47393;
}

h1 {
  font-family: "Ithornet";
  color: #F992BB;
  font-size: 100px;
  font-weight: normal;
  letter-spacing: 2px;
}

h2 {
  font-family: "Angelic War";
  color: #F992BB;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

ul.star {
  list-style: none;
  font-family: "Courier Prime";
  color: #C47393;
}

ul.star li::before {
  content: "★";
}

table {
  max-height: 387px;
  border: 2px solid #F5DC92;
}

tr:nth-child(even){
  background-color: #F5DC92;
}

td {
  font-family: "Courier Prime";
  color: #C47393; 
}

th {
  font-family: "Courier Prime";
  color: #F3D376; 
  background-color: #F992BB;
}

.amheader {
  width: 1304px;
  position: absolute;
  top: 48px;
  left: 280px;
}

.banner {
  width: 1283px;
  z-index: 1;
  position: absolute;
  top: 129.19px;
  left: 289px;
}

.pfp {
  position: absolute;
  z-index: 2;
  height: 230px;
  top: 243px;
  left: 347px;
}

.stream-pfp {
  height: 40px;
}

body {
  background-color: #F5DC92;
  margin:30px;
  padding:20px;
  }
  
.container {
  margin-left: auto;
  margin-right: auto;
  
  background-color: #F5DC92;
  
  max-width: 1304px;
}
  
.container {
  display: grid;
  min-height: 100vh;
  gap: 10px;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 80px 1fr 80px;
  grid-template-areas: 
    "hd hd"
    "sd-l main"
    "ft ft";
  min-height: 100vh;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "hd"
      "sd-l"
      "main"
      "ft";
  }
}

header { 
  grid-area: hd; 
  padding: 10px;

  width: 1273px;
  height: 315.73px;
  
  /* background-color: #BC4675; */
}

main { 
  grid-area: main; 
  overflow:auto;
  
  min-width: fit-content;
  min-height: 84px; 
  max-height: 1600px;
  
  padding: 10px; 
  
  margin-top: 343px;
}

.feed {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  align-content: stretch;
  gap: 10px;
}

.feedbox {
  background-color: #F9E8B6;
  border: 5px solid #F9E8B6;
  border-radius: 6px;
  
  width: 930px; 
}

.sidebar-l { 
  grid-area: sd-l; 
  padding: 10px;
  margin-top: 353px;
  background-color: #F9E8B6;
  border-radius: 6px;
}

footer { 
  grid-area: ft; 
  padding: 10px;
  background-color: #F992BB;
}