@font-face {
    font-family: heartFont;
    src: url("ttf/rainyhearts.ttf");
}

@keyframes rainbow_anim {

    0%,
    100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}

img {
    border: 1px solid white;
}

.rainbow-text {
    text-align: center;
    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
    background-clip: text;
    color: transparent !important;
    animation: rainbow_anim 15s ease-in-out infinite;
    background-size: 400% 100%;
}

#main-content {
    grid-area: a;
}

#additional-content {
    grid-area: b;
}

#contact-content {
    grid-area: c;
}

#nav-content {
    grid-area: d;
}

#main-box {
    display: grid;
    grid-template-areas:
        "a a a b"
        "a a a c"
        "a a a d";
}

body {
    font-family: heartFont;
    color: white;
    font-weight: 800;
    font-size: 23px;
    background-color: #0f0f0f;
}