@font-face {
    font-family: 'VCR';
    src: url("../assets/VCR OSD Mono.ttf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body {
    cursor: url("../assets/cursor_ol.png"), auto;
    animation: fadeInUp 2s;
    font-size: 1.25em;
    background: #ffbeb4;
    background-image: url("../assets/gradientbg-export.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-family: VCR, sans-serif;
    color: white;
}
a {
    color: #54954e;
    text-decoration: none;
}
.images {
    padding-bottom: 1em;
}
.container {
    animation: fadeInUp 1.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.break{
    padding: 2em
}
.pronouns{
    transform: translateY(-65%);
}
.biography{
    max-width: 26em;
    padding: 4em;
    transform: translateY(-4em);
}
.footer {
    padding-bottom: 2em;
}
.pfp {
    padding-top: 3em;
    padding-right: 2%;
    display: block;
}
.links {
    transform: translateY(-0.5em);
    word-spacing: 75%;
}
.title {
    padding-top: 3em;
}
/*credit to https://www.geeksforgeeks.org/css/how-to-create-blinking-text-using-css/*/
/*IMPORTANT: we use css for blink instead of js because centering and we dont want to delete text so it redoes centering*/
@keyframes blink {
    0%,49% {
        opacity: 0;
    }

    50%,100% {
        opacity: 1;
    }
}
.blinking-text {
    animation: blink 1s infinite;
}
/*credit to https://dev.to/tiaeastwood/super-simple-css-animation-for-fade-in-on-page-load-2p8m*/
@keyframes fadeInUp {
    0% {
        transform: translateY(25%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}