@font-face {
    font-family: 'VCR';
    src: url("../assets/Nintendo-DS-BIOS.ttf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color:white;

    font-family: VCR, sans-serif;
    animation: fadeInUp 1.5s;

    background-position: bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../assets/wheat.gif");
}

hr {
    max-width: 100%;
    display: block;
    align-items: center;
    border: 0;
    border-radius: 10em;
    background-color: #ffff;
    height: 4px;
    width: 20em;
    margin: 20px auto; /* Centers the line with top/bottom spacing */
}

p {
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
}

footer {
    padding-bottom: 2em;
}

.image{
    width: 5em;
    border-radius: 5%;
    flex-shrink: 0;
    align-self: center;
}

.pfp{
    border-radius: 5%;
    max-width: 45vw;
}
.container {
    animation: fadeInUp 1.5s;
}
.text{
    max-width: 20em
}


/*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;
    }
}
/*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;
    }
}