:root {
  --text-color: aliceblue;
  --shadow-color: #003;
  --highlight-color: aquamarine;

  --font-crimson: crimsontext, "Crimson Text", serif;
  --font-cart: cartridge, Times, serif;
  --font-bone: bonefish, Times, serif;
  --font-yuru: yurumoji, Times, serif;
  --font-mame: mamemoji, Times, serif;
  --font-gothic: blacknebula, Times, serif;
  --font-romance: romance-a, Times, serif;
  --font-romance-outline: romance-b, Times, serif;
  --font-emoji: emojifont, "Comic Sans MS", cursive;

  /* Misc */
  --font-comic-sans: "Comic Sans MS", cursive, sans-serif;
  --font-times: "Times New Roman", Times, serif;
}
/* |/\/\/| Animations */
@keyframes fade-out {
  from { opacity: 100%; }
  to { opacity: 0%; }
}

@keyframes fade-in {
  from { opacity: 0%; }
  to { opacity: 100%; }
}

/* |/\/\/| Custom Fonts */
@font-face { font-family: crimsontext;  src: url(/styles/fonts/crimsontext.ttf) format("truetype"); }
@font-face { font-family: crimsontext;  src: url(/styles/fonts/crimsontext-italic.ttf) format("truetype"); font-style: italic; }
@font-face { font-family: crimsontext;  src: url(/styles/fonts/crimsontext-bold.ttf) format("truetype"); font-weight: bold; }
@font-face { font-family: crimsontext;  src: url(/styles/fonts/crimsontext-bolditalic.ttf) format("truetype"); font-weight: bold; font-style: italic;}  
@font-face { font-family: crimsontext;  src: url(/styles/fonts/crimsontext-semibold.ttf) format("truetype"); font-weight: 500; }
@font-face { font-family: crimsontext;  src: url(/styles/fonts/crimsontext-semibolditalic.ttf) format("truetype"); font-style: italic; font-weight: 500; }
@font-face { font-family: cartridge;    src: url(/styles/fonts/cartridge.ttf)   format("truetype"); }
@font-face { font-family: piacevoli;    src: url(/styles/fonts/piacevoli.ttf)   format("truetype"); }
@font-face { font-family: bonefish;     src: url(/styles/fonts/bonefish.ttf)    format("truetype"); }
@font-face { font-family: yurumoji;     src: url(/styles/fonts/yurumoji.ttf)    format("truetype"); }
@font-face { font-family: mamemoji;     src: url(/styles/fonts/mamemoji.ttf)    format("truetype"); }
@font-face { font-family: blacknebula;  src: url(/styles/fonts/blacknebula.ttf) format("truetype"); font-weight: bold; }
@font-face { font-family: emojifont;    src: url(/styles/fonts/emojifont.ttf)   format("truetype"); }

/* |/\/\/| General Styles */
* {
  /* No Antialiasing */
  image-rendering: pixelated;
  font-smooth: never;
  -webkit-font-smoothing : none;

  /* Remove the Default Margins and Padding from EVERYTHING */
  margin: 0;
  padding: 0;
}

body {
  background: var(--shadow-color);
  font-family: var(--font-crimson);
  font-size: 16px;
  color: var(--text-color);
  text-shadow:
      /* No Blur */
      0.125rem 0.125rem var(--shadow-color);
  
  /* Slight Padding */
  padding: 1rem;
}

a {
  color: var(--highlight-color);
}

h1 { margin: .5rem 0; }
h2 { margin: .4375rem 0; }
h3 { margin: .375rem 0; }
h4 { margin: .3125rem 0; }
h5 { margin: .25rem 0; }
h6 { margin: .1875rem 0; }

h1 { padding: .5rem; }
h2 { padding: .4375rem; }
h3 { padding: .375rem; }
h4 { padding: .3125rem; }
h5 { padding: .25rem; }
h6 { padding: .1875rem; }

p  { margin: .5rem; }

ul { list-style-type: none; }

/* add padding, NO LI! */
section, figure, p, ul {
  padding: .25rem;
}

/* |/\/\/| Utilities */
.aa {
  image-rendering: smooth;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.float-left { float: left; }
.float-center { float: center; }
.float-right { float: right; }

.no-spacing {
  margin: 0;
  padding: 0;
}

/* Flex Things*/
.flex, .flex-column, .flex-column-center, .flex-center {
  display: flex;
  gap: .25rem;
}

.flex-column, .flex-column-center { flex-direction: column; }

.flex-center, .flex-column-center {
  justify-content: center;
  align-items: center;
}

.emoji { font-family: var(--font-emoji); }

/* Common Elements */

/* Text: font, color, shadow. */
.text-default   { color: var(--text-color); text-shadow: 0.125rem 0.125rem var(--shadow-color); }
.text-inverted  { color: var(--shadow-color);    text-shadow: 0.125rem 0.125rem var(--text-color); }

/* Boxes, border with a background. */
/* NOTE Custom borders are assigned in the border image section. NOT HERE*/
.box-pink             { background: lightpink;        border: .25rem solid pink; }
.box-lightpink        { background: crimson;        border: .25rem solid lightpink; }


.box-crimson          { background: crimson;        border: .25rem solid crimson; }
.box-lightcoral       { background: crimson;        border: .25rem solid lightcoral; }

.box-green            { background: darkgreen;      border: .25rem solid green; }
.box-lightgreen       { background: green;          border: .25rem solid lightgreen; }

.box-blue             { background: darkblue;       border: .25rem solid blue; }
.box-lightblue        { background: blue;           border: .25rem solid lightblue; }
.box-powderblue       { background: lightblue;      border: .25rem solid powderblue; }
.box-mediumslateblue  { background: slateblue;      border: .25rem solid mediumslateblue; }
.box-royalblue        { background: midnightblue;   border: .25rem solid royalblue; }

.box-blueviolet       { background: indigo;         border: .25rem solid blueviolet; }

.box-orchid           { background: mediumorchid;   border: .25rem solid orchid; }
.box-violet           { background: orchid;         border: .25rem solid violet; }
.box-plum             { background: violet;         border: .25rem solid plum; }
.box-thistle          { background: plum;         border: .25rem solid thistle; }


.box-turquoise        { background: darkturquoise;  border: .25rem solid turquoise; }
.box-mintcream        { background: palegreen;      border: .25rem solid mintcream; }
.box-seashell         { background: linen;          border: .25rem solid seashell; }
.box-tan              { background: tan;            border: .25rem solid tan; }

.box-ut /* Undertale Box */ { background: black;    border: .25rem solid white; }
.box-white            { background: white;          border: .25rem solid white; }

/* Border Images */

/* Backgrounds */
/* .bg { background: url(/images/.jpg); } */
.bg-apple         { background: url(/images/backgrounds/apple.gif); }
.bg-apple2        { background: url(/images/backgrounds/apple2.gif); }

.bg-blinkysquare  { background: url(/images/backgrounds/blinkysquare.gif); }
.bg-bluestar      { background: url(/images/backgrounds/bluestar.gif); }
.bg-bows          { background: url(/images/backgrounds/bows.gif); }

.bg-carpet        { background: url(/images/backgrounds/carpet.gif); }
.bg-carpet2       { background: url(/images/backgrounds/carpet2.png); }
.bg-catghost      { background: url(/images/backgrounds/catghost.png); }
.bg-catpink       { background: url(/images/backgrounds/catpink.png); }

.bg-cloudblue     { background: url(/images/backgrounds/cloudblue.png); }
.bg-cloudblue2    { background: url(/images/backgrounds/cloudblue2.png); }
.bg-cloudgreen    { background: url(/images/backgrounds/cloudgreen.png); }
.bg-cloudorange   { background: url(/images/backgrounds/cloudorange.png); }
.bg-cloudorange2  { background: url(/images/backgrounds/cloudorange2.png); }
.bg-cloudpink     { background: url(/images/backgrounds/cloudpink.png); }
.bg-cloudpurple   { background: url(/images/backgrounds/cloudpurple.png); }
.bg-cloudpurple2  { background: url(/images/backgrounds/cloudpurple2.png); }
.bg-cloudred      { background: url(/images/backgrounds/cloudred.png); }

.bg-comp          { background: url(/images/backgrounds/comp.gif); }
.bg-dream         { background: url(/images/backgrounds/dream.gif); }

.bg-eb            { background: url(/images/backgrounds/eb.png); }
.bg-eb2           { background: url(/images/backgrounds/eb2.png); }
.bg-ebdarkblue    { background: url(/images/backgrounds/ebdarkblue.png); }
.bg-ebdarkdiamond { background: url(/images/backgrounds/ebdarkdiamond.png); }
.bg-ebgygas       { background: url(/images/backgrounds/ebgygas.png); }
.bg-eblightblue   { background: url(/images/backgrounds/eblightblue.png); }
.bg-ebpurple      { background: url(/images/backgrounds/ebpurple.png); }
.bg-ebrainbow     { background: url(/images/backgrounds/ebrainbow.png); }
.bg-ebred         { background: url(/images/backgrounds/ebred.png); }
.bg-ebredline     { background: url(/images/backgrounds/ebredline.png); }
.bg-ebsepia       { background: url(/images/backgrounds/ebsepia.png); }
.bg-ebstars       { background: url(/images/backgrounds/ebstars.png); }
.bg-ebwiggle      { background: url(/images/backgrounds/ebwiggle.png); }
.bg-ebwiggle2     { background: url(/images/backgrounds/ebwiggle2.png); }
.bg-ebwiggle3     { background: url(/images/backgrounds/ebwiggle3.png); }

.bg-fall          { background: url(/images/backgrounds/fall.gif); }
.bg-fall2         { background: url(/images/backgrounds/fall2.gif); }
.bg-flower        { background: url(/images/backgrounds/flower.gif); }
.bg-flower2       { background: url(/images/backgrounds/flower2.gif); }

.bg-galaxy        { background: url(/images/backgrounds/galaxy.gif); }
.bg-greenflower   { background: url(/images/backgrounds/greenflower.png); }
.bg-grntrees      { background: url(/images/backgrounds/grntrees.gif); }
.bg-heartgrid     { background: url(/images/backgrounds/heartgrid.gif); }
.bg-heartpink     { background: url(/images/backgrounds/heartpink.gif); }

.bg-midnight      { background: url(/images/backgrounds/midnight.png); }
.bg-mountain      { background: url(/images/backgrounds/mountain.png); }
.bg-mudkip        { background: url(/images/backgrounds/mudkip.png); }
.bg-multi         { background: url(/images/backgrounds/multi.jpg); }

.bg-nebula        { background: url(/images/backgrounds/nebula.png); }

.bg-pastels       { background: url(/images/backgrounds/pastels.gif); }
.bg-pink          { background: url(/images/backgrounds/pink.png); }
.bg-pinksquare    { background: url(/images/backgrounds/pinksquare.gif); }
.bg-pinksquare2   { background: url(/images/backgrounds/pinksquare2.gif); }
.bg-pinkwall      { background: url(/images/backgrounds/pinkwall.gif); }
.bg-pulse         { background: url(/images/backgrounds/pulse.jpg); }
.bg-puzz          { background: url(/images/backgrounds/puzz.gif); }

.bg-rainbowprism  { background: url(/images/backgrounds/rainbowprism.gif); }
.bg-rattata       { background: url(/images/backgrounds/rattata.png); }
.bg-rbowmusic     { background: url(/images/backgrounds/rbowmusic.gif); }

.bg-rose          { background: url(/images/backgrounds/rose.png); }
.bg-rosetrel      { background: url(/images/backgrounds/rosetrel.gif); }
.bg-rosewall      { background: url(/images/backgrounds/roeswall.gif); }

.bg-salmon        { background: url(/images/backgrounds/salmon.png); }
.bg-sandcritters  { background: url(/images/backgrounds/sandcritters.gif); }

.bg-sky           { background: url(/images/backgrounds/sky.gif); }
.bg-skylight      { background: url(/images/backgrounds/skylight.gif); }
.bg-skypink       { background: url(/images/backgrounds/skypink.gif); }
.bg-skypurple     { background: url(/images/backgrounds/skypurple.gif); }
.bg-skystarlight  { background: url(/images/backgrounds/skystarlight.gif); }

.bg-spinda        { background: url(/images/backgrounds/spinda.jpg); }
.bg-square        { background: url(/images/backgrounds/square.png); }

.bg-starblue      { background: url(/images/backgrounds/starblue.gif); }
.bg-stars2        { background: url(/images/backgrounds/stars2.png); }
.bg-stars3        { background: url(/images/backgrounds/stars3.gif); }
.bg-stars4        { background: url(/images/backgrounds/stars4.gif); }
.bg-starsagain    { background: url(/images/backgrounds/starsagain.gif); }
.bg-starspin      { background: url(/images/backgrounds/starspin.gif); }

.bg-strawbee      { background: url(/images/backgrounds/strawbee.png); }
.bg-trees         { background: url(/images/backgrounds/trees.png); }
.bg-wallpaper     { background: url(/images/backgrounds/wallpaper.gif); }
.bg-water         { background: url(/images/backgrounds/water.gif); }
.bg-wiggly        { background: url(/images/backgrounds/wiggly.gif); }

.rainbow-text, .pastel-rainbow-text, .snowy-text {
  color: transparent;
  text-shadow: none;

  animation: 6s linear calc(3s) infinite rainbow-text;
}

.rainbow-text {
  animation-duration: 6s;
  animation-delay: calc(3s);
  
  background: linear-gradient(to right, #8888ff, #00aaff , #00ff00, #ff55aa, #8888ff, #00aaff);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.pastel-rainbow-text {
  animation-duration: 6s;
  animation-delay: calc(3s);
  
  background: linear-gradient(to right, #c1c1ff, #81d5ff , #7fff7f, #ffa5d2, #bcbcff, #81d5ff);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.snowy-text {
  animation-duration: 2s;
  animation-delay: calc(1s);
  
  background: linear-gradient(to right, Aliceblue, Gainsboro, AntiqueWhite, Silver, MintCream, Aliceblue, Gainsboro);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes rainbow-text {
  0% {    background-position: 0    0; }
  100% {  background-position: 100% 0; }
}