:root {
  --titletext: "undeRtale";
  --headersize: 44px;
  
  --orange: #FF7F27;
  
  --animlength: 2s;
  --outlinesize: 3px;
}

/* FONTS */
@font-face {
    font-family: "8bitoperator JVE"; 
    src: url("fonts/8bitoperator_jve.woff") format("WOFF");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "MonsterFriend2Fore"; 
    src: url("fonts/MonsterFriend2Fore.woff") format("WOFF");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "MonsterFriend2Center"; 
    src: url("fonts/MonsterFriend2Center.woff") format("WOFF");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "MonsterFriend2Back"; 
    src: url("fonts/MonsterFriend2Back.woff") format("WOFF");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "8bitWonder"; 
    src: url("fonts/8-BIT WONDER.TTF") format("WOFF");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "DotumChe"; 
    src: url("fonts/DotumChe UT (Speech Bubble Font).ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "MarsNeedsCunnilingus"; 
    src: url("fonts/Mars_Needs_Cunnilingus.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "CryptOfTomorrow"; 
    src: url("fonts/CryptOfTomorrow.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}

@font-face {
    font-family: "UndertaleSans"; 
    src: url("fonts/UndertaleSans.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}
@font-face {
    font-family: "UndertalePapyrus"; 
    src: url("fonts/UndertalePapyrus.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    font-smooth: never;
    -webkit-font-smoothing: none;
}



/* STYLING */

html { /* FIREFOX SCROLLBARS */
  scrollbar-color: gray black;
}
html::-webkit-scrollbar { /* OTHER SCROLLBARS */
  background-color: black;
}
html::-webkit-scrollbar-thumb {
  background-color: gray;
}

body {
  font-family: "8bitoperator JVE";
  letter-spacing: 1px;
  font-size: 26px;
  background-color: black;
  color: white;
  text-shadow: calc(var(--outlinesize) * -1) 0 black, 0 var(--outlinesize) black, var(--outlinesize) 0 black, 0 calc(var(--outlinesize) * -1) black;
}
::selection {
  background-color: white;
  color: red;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "8bitWonder";
  font-weight: normal !important;
  letter-spacing: normal;
  margin-top: 5px;
  margin-bottom: 5px;
}
a {
  color: var(--orange);
  text-decoration: none;
}
a:hover {
  color: yellow;
}
s {
  color: gray;
}
small {
  font-size: 0.8em;
  line-height: 0.9
}
b {
  color: yellow;
  font-weight: normal;
}
p, footer {
  margin-top: 5px;
  margin-bottom: 5px;
}
u {
  text-decoration-color: gray;
}
#sans {
  font-family: "UndertaleSans" !important;
}
#papyrus {
  font-family: "UndertalePapyrus" !important;
}
textarea {
  background-color: black;
  color: white;
  
  border: 6px solid white;
  
  max-height: 100px;
  max-width: max-content;
}
.container {
  position: relative;
  height: auto;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  padding-right: 99%;
  border: 6px;
  border-style: solid;
  border-color: gray;
}
iframe {
  border: none;
}

.box {
  padding: 12px;
  margin: 10%;
  margin-top: 20px;
  margin-bottom: 20px;
  
  border: 6px;
  border-style: solid;
  
  background-color: black;
  text-shadow: none;
}

.header {
  position: relative;
  margin-top: 20px !important;
  
  font-family: "MonsterFriend2Center" !important;
  font-size: var(--headersize) !important;
  letter-spacing: normal;
  color: red;
  
  text-align: center;
}
.header:after {
  position: absolute;
  
  font-family: "MonsterFriend2Fore";
  font-size: var(--headersize);
  letter-spacing: normal;
  color: white;
  transform: translate(-100%, 0);
  
  text-align: center;
  text-shadow: none;
  
  content: var(--titletext);
}
.header:before {
  position: absolute;
  
  font-family: "MonsterFriend2Back";
  font-size: var(--headersize);
  letter-spacing: normal;
  color: gray;
  
  z-index:-1;
  content: var(--titletext);
}

.background {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  
  background-image: url("images/bg.png");
  background-attachment: fixed;
  background-repeat: repeat;
}
#front {
  animation: bg-front var(--animlength) linear infinite;
  background-position: 0 0;
  opacity: 0.6;
  z-index:-2;
}
#back {
  animation: bg-back var(--animlength) linear infinite;
  background-position: 100px 117px;
  opacity: 0.4;
  z-index:-3;
}
@keyframes bg-front {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 117px;
  }
}
@keyframes bg-back {
  0% {
    background-position: 100px 117px;
  }
  100% {
    background-position: 0 0;
  }
}
.flex {
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: center;
  
  margin-left: 5%;
  margin-right: 5%;
}
.growshrink {
  flex-grow: 1;
  flex-shrink: 1;
}
#row {
  flex-flow: row wrap;
  gap: 5%;
}
#column {
  flex-flow: column wrap;
  gap: 5px;
}