
html {
    overflow: hidden;
}

/* bulma modifications/overrides */
.hero-head, .hero-body, .hero-foot {
    z-index: 1; /* Used for snowflakes */
}

p a {
    color: #be8cd2 !important;
}

p a:hover {
    color: #ce8ce9 !important;
}

/* Homepage Snow */

#snowflakeContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    /* top: 100vh; */
}

.snowflake {
    position: absolute;
    filter: brightness(0) invert(.6);
    z-index: 0;
    top: 100vh;
}

.snowflake:nth-of-type(3n+1) {
    animation: moveSnowUp 10s linear;
    height: 5vw;
    /* width: 5vw; */
}

.snowflake:nth-of-type(3n+2) {
    animation: moveSnowUp 13s linear;
    height: 3vw;
    /* width: 3vw; */
}

.snowflake:nth-of-type(3n+3) {
    animation: moveSnowUp 16s linear;
    height: 2vw;
    /* width: 2vw; */
}

@keyframes moveSnowUp {
    0% {
        transform: rotateZ(0deg);
        top: 100vh;
        opacity: 1;
    }

    80% {
        transform: rotateZ(288deg);
        top: 12vh;
        opacity: 1;
    }

    100% {
        transform: rotateZ(360deg);
        top: -10vh;
        opacity: 0;
    }
}


/* Dynamic typer thing */

@keyframes blinkTyper {
    0% {
        opacity: .8;
    }

    30% {
        opacity: .7;
    }

    100% {
        opacity: 0;
    }
}


#typer::after {
    content: '|';
    animation: blinkTyper .5s infinite alternate;
}

.typerActive::after {
    opacity: .8;
    animation: none !important;
}
