/* Typewriter background effect */
.typewriter-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
}

.typewriter-bg::before {
    content: "idk this is some big wall of text that's supposed to look cool\Ayo yo yo yo yo yo yo yo yo yo yo yo yo\Asomething not as repetitive\AThe Fitness Gram Pacer Test is a multi-stage aerobic capacity test that commits shenanigans\Aidk this is some big wall of text that's supposed to look cool\Ayo yo yo yo yo yo yo yo yo yo yo yo yo\Asomething not as repetitive\AThe Fitness Gram Pacer Test is a multi-stage aerobic capacity test that commits shenanigans\Aidk this is some big wall of text that's supposed to look cool\Ayo yo yo yo yo yo yo yo yo yo yo yo yo\Asomething not as repetitive\AThe Fitness Gram Pacer Test is a multi-stage aerobic capacity test that commits shenanigans\ALorem Ipsum Something Something SSD\ATHIS DOESN'T WORK?? WHY?!?! HAS I EVER???\Apxe boot lmao looser I'M NOT REAL I'M NOT REAL I'M NOT REAL\AThis isnt real I'M NOT REAL I'M NOT REAL I'M NOT REAL I'M NOT REAL\AI'M NOT REAl I'M NOT REAL I'M NOT REAL I'M NOT REAL I'M NOT REAL I'M NOT REAL I'M NOT REAL I'M NOT REAL\Athe entire plot of paradigm N-force is the only force for me\AUnable to mixin mod- Try removing \"minecraft\"?\Asomething not as repetitive haha screw you MLC failure that's what you get for buying hynix\2122\AThe Fitness Gram Pacer Test is a multi-stage aerobic capacity test that commits shenanigans\ALorem Ipsum Figma is a graphic design mabober that lets you commit shenanigans\ATHIS DOESN'T WORK?? WHY?!?! HAS I EVER??? (and potentially shenanigans!!)\Apxe boot lmao looser\AThis isnt real\AI'M NOT REAL\Athe entire plot of paradigm\AUnable to mixin mod- Try removing \"minecraft\"?\Aome big wall of text that's supposed to look cool\Ayo yo yo yo yo yo yo yo yo yo yo yo yo\Asomething not as repetitive\AThe Fitness Gram Pacer Test is a multi-stage aerobic capacity test that commits shenanigans\ALorem Ipsum\ATHIS DOESN'T WORK?? WHY?!?! HAS I EVER???\Apxe boot lmao looser";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    white-space: pre-wrap;
    font-family: "Sono", monospace;
    font-size: 14px;
    color: green;
    padding: 2rem;
    line-height: 1.6;
    overflow: hidden;
    text-align: left;
    filter: blur(5px);
    animation: typewriter 15s linear forwards;
}

@keyframes typewriter {
    0% {
        clip-path: inset(0 0 100% 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* themes below are backported from eternalbliss */

body {
    background-color: black;
    color: yellow;
    font-family: "Sono";
    text-align: center;
}

.vapor {
    position: absolute;
    bottom: 0;
    text-align: left;
    font-family: Monospace;
    letter-spacing: 7px;
}

.normalvaporwave {
    font-family: Monospace;
    letter-spacing: 7px;
}

.rssbttn {
    height: 12px;
    width: 12px;
}

.tidbit {
      text-shadow: 0 0 5px gold, 0 0 10px gold;
      text-decoration: underline;
      /* add missing transition for tidbits when hovered over */
      /* since they inherit the same hover animation as links */
      transition: 0.15s color ease;
    }

hr {
    width: 50%;
    color: yellow;
}

#botright {
    position: absolute;
    bottom: 0;
    right: 0;
}

#topright {
    position: absolute;
    top: 0;
    right: 0;
}

#topleft {
    position: absolute;
    top: 0;
    left: 0;
}

h1 {
    color: yellow;
    font-family: "Sono";
    text-align: center;
}

.dafuture {
    color: blueviolet;
    font-family: "Sono";
    font-style: italic;
}

.quote {
    font-family: Times;
}

.side1 {
    color: green;
    font-family: "monospace";
}

.side2 {
    color: blue;
    font-family: "monospace";
}

.side3 {
    color: red;
    font-family: "Comic Sans MS";
}

.meme {
    font-family: "Comic Sans MS";
    color: white;
}

.ohgod {
    font-family: "Libre Barcode 39 Extended Text";
}

.blink {
    animation: blinker 2s linear infinite;
}

.psst {
    color: grey;
    text-decoration: none;
}
/*solve some browser-specific weirdness */
u {
    text-decoration: none;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
#vib {
    animation-name: shake;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    cursor: pointer;
}

#cdny {
    font-style: italic;
}

img#vib {
    animation-name: shake;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    cursor: pointer;
}

.vib {
    animation-name: shake;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    cursor: pointer;
}

.neon {
  text-shadow: 0 0 10px gold , 0 0 20px gold, 0 0 30px gold;
}

p#floatm {
    animation-name: speen;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    cursor: pointer;
}
img {
    max-width: 100%;
    height: auto;
    width: auto\9;
}

.animlogo {
    max-width: 100%;
    height: auto;
    width: auto\9;
    border-radius: 18px;
}

/* for maintenance */
.inactive {
    color: grey;
}

.spin {
    text-align: right;
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

iframe {
    border-radius: 5px;
}
/* make links more readable and interactable */
a:not(.tidbit)  {
    color: #56edf6;
    transition: color 0.15s ease;
}
a:hover {
  color: lightblue !important;
  text-shadow: 0 0 4px lightblue, 0 0 12px rgba(173, 216, 230, 0.6);
}
/* similar styling to make the tiny little hyperlink buttons look a tad bit nicer */
#hyperlinks {
    padding-top: 20px;
}

/*this is the webTV city "back" button */

.back img:hover {
    border: 2px solid lightblue !important;
    border-radius: 5px;
    display: inline-block;
    margin: -2px; /* this must be the same amount as the outline or else the outline will push content on the page down */
}
.back {
    display: block; /*stop image baseline from overflowing*/
    margin: 0 auto;
    border: 2px solid black !important; /* stop page content from being pushed down by the hover outline */
}

button {
    color: gold !important;
    background-color: black !important;
    border: 1px solid gold !important;
    border-radius: 3px !important;
    font-family: "Sono";
    box-shadow: none !important;
    outline: none !important;
}

button:active {
    background-color: #1a1a1a !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@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(-1deg); }
}
@keyframes speen {
    0% { transform: rotate(1deg); }
    10% { transform: rotate(2deg); }
    20% { transform: rotate(3deg); }
    30% { transform: rotate(4deg); }
    40% { transform: rotate(5deg); }
    50% { transform: rotate(6deg); }
    60% { transform: rotate(7deg); }
    70% { transform: rotate(8deg); }
    80% { transform: rotate(9deg); }
    90% { transform: rotate(10deg); }
    100% { transform: rotate(11deg); }
}