.material-icons{
    display: inline-flex;
    vertical-align: top;
}

html {
    scroll-behavior: smooth;
    min-width: 365px;
}

a {
    margin-bottom: 1.5em;
}

canvas {
    position: absolute;
}

#scroll-more {
    z-index: 999;
}

.brand-logo {
    word-break: break-all;
}

@media only screen and (max-width: 600px) {
    #particles-js {
        position: sticky;
        width: 100%;
        height: 25em;
    }

    #typing-text {
        position: absolute;
        top: 48%;
        right: 50%;
        transform: translate(50%,-50%);
        text-align: center;
    }

    #text0 {
        display: inline;
        vertical-align: middle;
        color: white;
        letter-spacing: 1px;
        font-size: 3em;
        text-align: center;
    }

    #text {
        display: inline;
        vertical-align: middle;
        color: white;
        letter-spacing: 1px;
        font-size: 3em;
        text-align: center;
    }

    #cursor {
        display: inline-block;
        vertical-align: middle;
        width: 0.2em;
        height: 4em;
        background-color: white;
        animation: blink .75s step-end infinite;
    }

    #scroll-more {
        position: absolute;
        bottom: 0%;
        right: 50%;
        transform: translate(50%,-50%);
        text-align: center;
        font-size: x-large;
    }
}

@media only screen and (min-width: 600px) {
    #particles-js {
        position: sticky;
        width: 100%;
        height: 40em;
    }

    #typing-text {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%,-50%);
        text-align: center;
    }

    #text0 {
        display: inline;
        vertical-align: middle;
        color: white;
        letter-spacing: 2px;
        font-size: 4em;
        text-align: center;
    }

    #text {
        display: inline;
        vertical-align: middle;
        color: white;
        letter-spacing: 2px;
        font-size: 4em;
        text-align: center;
    }

    #cursor {
        display: inline-block;
        vertical-align: middle;
        width: 0.2em;
        height: 6em;
        background-color: white;
        animation: blink .75s step-end infinite;
    }

    #scroll-more {
        position: absolute;
        bottom: 0%;
        right: 50%;
        transform: translate(50%,-50%);
        text-align: center;
        font-size: xx-large;
    }

}

@media only screen and (min-width: 992px) {
    #particles-js {
        position: sticky;
        width: 100%;
        height: 50em;
    }

    #typing-text {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%,-50%);
        text-align: center;
    }

    #text0 {
        display: inline;
        vertical-align: middle;
        color: white;
        letter-spacing: 2px;
        font-size: 4em;
        text-align: center;
    }

    #text {
        display: inline;
        vertical-align: middle;
        color: white;
        letter-spacing: 2px;
        font-size: 4em;
        text-align: center;
    }

    #cursor {
        display: inline-block;
        vertical-align: middle;
        width: 0.2em;
        height: 6em;
        background-color: white;
        animation: blink .75s step-end infinite;
    }

    #scroll-more {
        position: absolute;
        bottom: 0%;
        right: 50%;
        transform: translate(50%,-50%);
        text-align: center;
        font-size: xxx-large;
    }
}

@keyframes blink {
    from, to {
        background-color: transparent
    }
    50% {
        background-color: white;
    }
}