body {
    font-family: 'JetBrains Mono';
    color: white;
}

#changingBackground {
    background-color: rgb(25, 25, 25);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    box-sizing: border-box;
    animation-name: fadingBackground;
    animation-duration: 5;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

div.content {
    background-color: rgb(25, 25, 25);
    display: none;
    opacity: 0;
    transition: opacity 1s linear;
    justify-content: center;
    position: relative;
    border-radius: 5vw;
    padding: 0vh 3vw 0vh 3vw;
    margin: 2vh 2vw;
    animation: none;
    flex-direction: row;
}

div.content > * {
    text-align: center;
    align-items: center;
    padding: 2vh;
    font-size: 3vh;
}

#topBar {
    display: block;
    padding: 42.7vh 0vw;
    border-radius: 0vw;
    margin: 0vh 0vw;
    opacity: 1;
    left: 0;
    right: 0;
    top: 0;
    background-color: rgb(25, 25, 25);
    animation-name: resizingDiv;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 3s;
    visibility: visible;
}

header {
    width: auto;
    padding: auto;
}

header h1 {
    font-size: 4vh;
    animation-name: fadingText;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    text-align: center;
}

header h1 .rainbowSpan {
    animation-name: rainbowAnimation;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

h2 {
    font-size: 3vh;
}

#aboutMeTitleDiv:hover ~ #arrowDivOne {
    animation-name: learnMoreAnimation;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.arrowDiv {
    width: 3.5vw;
    /* display: none; */
    position: absolute;
    opacity: 0;
    transition: opacity 1s linear;
    /* make, DINGUS */
}

#cutoutDiv {
    position: sticky;
    bottom: 100px;
    left: 5vw;
    width: 3.5vw;
    height: auto;
    background-color: rgb(64, 64, 64);
}

@keyframes fadingBackground {
    from {background-color: rgb(25, 25, 25);}
    to {background-color: rgb(64, 64, 64);}
}

@keyframes resizingDiv {
    from {padding: 42.7vh 0vw;}
    to {border-radius: 5vw; padding: 2vh 0vw; margin: 2vh 2vw;}
}

@keyframes fadingText {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes rainbowAnimation {
    0% {color: red;}
    14% {color: orange;}
    28% {color: yellow;}
    42% {color: green;}
    57% {color: aqua;}
    71% {color: blue;}
    85% {color: indigo;}
    100% {color: violet;}
}

@keyframes learnMoreAnimation {
    from {display: none; left: 0vw; opacity: 0;}
    33% {display: flex; left: 1vw; opacity: .33;}

}