body {
    background-color: #0c0c0c !important;
}

#homepage-container {
    background: radial-gradient(circle at -10% -120%, #059379, #07685c, #06403b, #031919, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c) !important;
}

h1 {
    color: white;
    text-align: center;
    font-family: Oswald, Verdana, sans-serif;
    font-size: 3em;
    margin: 0;
}

h5 {
    color: white;
    text-align: center;
    font-family: Oswald, Verdana, sans-serif;
    font-size: 0.7em;
    margin: 0 0 3em 0;
}

.ref-card {
    width: 100%;
    margin: 0 0 3em 0;
    padding: 0 3em;
    font-size: 0.8em;
    animation: appear 5s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
}

.ref-card a,
.ref-card a:visited {
    color: white;
}

.ref-card a:hover {
    color: rgb(213, 213, 213);
}

hr {
    width: 30%;
    border-color: #05c29f;
    margin-top: 1em;
}


h2 {
    color: white;
    font-family: Oswald, Verdana, sans-serif;
    margin: 0;
}

.ref-card-p {
    color: rgb(125, 125, 125);
    font-family: Oswald, Verdana, sans-serif;
    margin: 0;
    white-space: wrap;
}

@keyframes appear {
    0% {
        opacity: 0;
        scale: 0.9;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

@media only screen and (max-width: 690px) {
    h1 {
        font-size: 2em;
    }

    .ref-card {
        animation: none;
        font-size: 1.2em;
    }

    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
    }
}