html, body {margin: 0; height: 100%; overflow: hidden}

    .box {
        text-align: center;
    }

    .logo {
        max-width: 100px; 
    }

    .text, .tease {
        position: relative;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 25px; 
        margin-top: 10px;

        color: #A20000;
        text-shadow: -1px -1px 0.5px #F9B54C, 1px -1px 0.5px #F9B54C, -1px 1px 0.5px #F9B54C, 1px 1px 0.5px #F9B54C;
    }

    /* i cant do css, see /static/js/main.js */
    .ellipsis1, .ellipsis2, .ellipsis3, .tease {
        display: none;
      }

    /* https://codepen.io/imran-coder/pen/GRQQqZz */
    .hero_area {
        position: relative;
        height: 100vh;
        background-color: #A20000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .waves {
        position: absolute;
        width: 100%;
        height: 15vh;
        min-height: 100px;
        max-height: 150px;
        bottom: 0;
        left: 0;
    }

    .parallax>use {
        animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
    }

    .parallax>use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }

    .parallax>use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }

    .parallax>use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .parallax>use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

    @keyframes move-forever {
        0% {
            transform: translate3d(-90px, 0, 0);
        }

        100% {
            transform: translate3d(85px, 0, 0);
        }
    }

    @media (max-width: 768px) {
        .waves {
            height: 40px;
            min-height: 40px;
        }
    }
    /* https://codepen.io/imran-coder/pen/GRQQqZz */