/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: 'BrassMono';
    src: url('fonts/BrassMono-Regular.woff2') format('woff2'),
        url('fonts/BrassMono-Regular.woff') format('woff'),
        url('fonts/BrassMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: "Garamondt";
  src: url("./Garamondt-Italic.woff") format("woff"),
      url("./Garamondt-Italic.woff2") format("woff2"),
      url("./Garamondt-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'False Advertising';
    src: url('fonts/FalseAdvertising.woff2') format('woff2'),
        url('fonts/FalseAdvertising.woff') format('woff'),
        url('fonts/FalseAdvertising.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Magicial Game';
    src: url('fonts/Magicial-Game.woff2') format('woff2'),
        url('fonts/Magicial-Game.woff') format('woff'),
        url('fonts/Magicial-Game.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'XeroxMalfunctionBRK';
    src: url('fonts/XeroxMalfunctionBRK.woff2') format('woff2'),
        url('fonts/XeroxMalfunctionBRK.woff') format('woff'),
        url('fonts/XeroxMalfunctionBRK.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'UbuntuSansMono';
    src: url('fonts/UbuntuSansMono-Medium.woff2') format('woff2'),
        url('fonts/UbuntuSansMono-Medium.woff') format('woff'),
        url('fonts/UbuntuSansMono-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sono';
    src: url('fonts/Sono-Regular.woff2') format('woff2'),
        url('fonts/Sono-Regular.woff') format('woff'),
        url('fonts/Sono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'monofur';
    src: url('fonts/Monofur.woff2') format('woff2'),
        url('fonts/Monofur.woff') format('woff'),
        url('fonts/Monofur.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
  font-family:"FontAwesome";
  font-display:block;
  src:url(../webfonts/fa-solid-900.woff2) format("woff2")
}
@font-face {
  font-family:"FontAwesome";
  font-display:block;
  src:url(../webfonts/fa-brands-400.woff2) format("woff2")
}
@font-face {
  font-family:"FontAwesome";
  font-display:block;
  src:url(../webfonts/fa-regular-400.woff2) format("woff2");
  unicode-range:u+f003,
  u+f006,
  u+f014,
  u+f016-f017,
  u+f01a-f01b,
  u+f01d,
  u+f022,
  u+f03e,
  u+f044,
  u+f046,
  u+f05c-f05d,
  u+f06e,
  u+f070,
  u+f087-f088,
  u+f08a,
  u+f094,
  u+f096-f097,
  u+f09d,
  u+f0a0,
  u+f0a2,
  u+f0a4-f0a7,
  u+f0c5,
  u+f0c7,
  u+f0e5-f0e6,
  u+f0eb,
  u+f0f6-f0f8,
  u+f10c,
  u+f114-f115,
  u+f118-f11a,
  u+f11c-f11d,
  u+f133,
  u+f147,
  u+f14e,
  u+f150-f152,
  u+f185-f186,
  u+f18e,
  u+f190-f192,
  u+f196,
  u+f1c1-f1c9,
  u+f1d9,
  u+f1db,
  u+f1e3,
  u+f1ea,
  u+f1f7,
  u+f1f9,
  u+f20a,
  u+f247-f248,
  u+f24a,
  u+f24d,
  u+f255-f25b,
  u+f25d,
  u+f271-f274,
  u+f278,
  u+f27b,
  u+f28c,
  u+f28e,
  u+f29c,
  u+f2b5,
  u+f2b7,
  u+f2ba,
  u+f2bc,
  u+f2be,
  u+f2c0-f2c1,
  u+f2c3,
  u+f2d0,
  u+f2d2,
  u+f2d4,
  u+f2dc
}
@font-face {
  font-family:"FontAwesome";
  font-display:block;
  src:url(../webfonts/fa-v4compatibility.woff2) format("woff2");
  unicode-range:u+f041,
  u+f047,
  u+f065-f066,
  u+f07d-f07e,
  u+f080,
  u+f08b,
  u+f08e,
  u+f090,
  u+f09a,
  u+f0ac,
  u+f0ae,
  u+f0b2,
  u+f0d0,
  u+f0d6,
  u+f0e4,
  u+f0ec,
  u+f10a-f10b,
  u+f123,
  u+f13e,
  u+f148-f149,
  u+f14c,
  u+f156,
  u+f15e,
  u+f160-f161,
  u+f163,
  u+f175-f178,
  u+f195,
  u+f1f8,
  u+f219,
  u+f27a
}


body {
  background-color: #371d1b;
  color: #e7bdb6;
  font-family: "FontAwesome", Monospace;
  line-height: 1.6;
}

.container{
  max-width: 1000px;
  margin: 0 auto;
 /* display: grid;
  grid-gap: 5px;
  grid-template-columns: 150px minmax(0, 1fr); */
}

nav, main, footer {
  border: #291614 4px solid;
  border-radius: 5px;
} 

header {
  font-family: "Magicial Game";
  color:#746260;
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  margin-left: 70px;
  font-size-adjust: .7 ;
}

nav {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  height: max-content;
}

main {
  grid-row: 2 / 3;
  grid-column: 2/3;
  height: max-content;
}

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

 #lol {
   font-family: "Garamondt";
         padding:4px;
 animation: shake 0.5s infinite;
 }
 
 @keyframes shake {
 0% {
 transform: translate(1px, 1px) rotate(0deg);
 }
 10% {
 transform: translate(-1px, -2px) rotate(-1deg);
 }
 20% {
 transform: translate(-3px, 0px) rotate(1deg);
 }
 30% {
 transform: translate(3px, 2px) rotate(0deg);
 }
 40% {
 transform: translate(1px, -1px) rotate(1deg);
 }
 50% {
 transform: translate(-1px, 2px) rotate(-1deg);
 }
 60% {
 transform: translate(-3px, 1px) rotate(0deg);
 }
 70% {
 transform: translate(3px, 1px) rotate(-1deg);
 }
 80% {
 transform: translate(-1px, -1px) rotate(1deg);
 }
 90% {
 transform: translate(1px, 2px) rotate(0deg);
 }
 100% {
 transform: translate(1px, -2px) rotate(0deg);
 }
 }

/* #text {
         padding:100px;
 animation: shake 0.5s infinite;
 }
 
 @keyframes shake {
 0% {
 transform: translate(10px, 10px) rotate(0deg);
 }
 10% {
 transform: translate(-10px, -20px) rotate(-25deg);
 }
 20% {
 transform: translate(-30px, 00px) rotate(10deg);
 }
 30% {
 transform: translate(30px, 20px) rotate(0deg);
 }
 40% {
 transform: translate(50px, -10px) rotate(10deg);
 }
 50% {
 transform: translate(-10px, 20px) rotate(-1deg);
 }
 60% {
 transform: translate(-30px, 10px) rotate(0deg);
 }
 70% {
 transform: translate(30px, 10px) rotate(-20deg);
 }
 80% {
 transform: translate(-10px, -50px) rotate(10deg);
 }
 90% {
 transform: translate(10px, 20px) rotate(0deg);
 }
 100% {
 transform: translate(10px, -40px) rotate(0deg);
 }
 } */