* {
    scrollbar-width: thin;
    scrollbar-color: #3b3b3b #202020;
}

/* This class is applied while fonts are still loading. */
html.wf-loading #hero {
    opacity: 0;
}
/* This class is applied when all fonts are loaded */
html.wf-active #hero {
    opacity: 100%;
}

body {
    background-color: black;
    color: whitesmoke;
    width: 95dvw;
}

#hero-section {
    width: 95dvw;
    height: 100dvh;
    vertical-align: middle;
    align-content: center;
    margin: 0;
    padding: 0;
}

#hero {
    font-size: 7em;
    line-height: 0.85;
    text-align: center;
    font-variant-caps: petite-caps;
    font-weight: bold;
    top: 45dvh;
    width: 98dvw;
    transition: 3s ease-in;
    transition-property: opacity;
}

#hero-titles {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 2em;
    font-variant-caps: all-petite-caps;
    transition: 0.2s ease-in-out;
    position: absolute;
    top: 55dvh;
    /*left: 50vh;    */
    width: 98dvw;
    text-align: center;
}

#arrow-hint {
    position: absolute;
    top: 94dvh;
    /*left: 50vh;    */
    width: 98dvw;
    text-align: center;
    color: rgb(255, 255, 255);
    opacity: 0%;
    transition: 4s ease-in-out 13s;
    transition-property: opacity, visibility;
}

#certifications-page {
    width: 98dvw;
    height: 100dvh;
    vertical-align: top;
}

#certifications-title {
    font-size: 4em;
    line-height: 0.85;
    text-align: center;
    font-variant-caps: petite-caps;
}

.certification {
    font-size: 1em;
    text-align: center;
}

#page-content {
    /* opacity: 0%;
    visibility: hidden; */
    transition: 3s ease-in 500ms;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}