.hero {
    flex: 1;
    display: flex;

    video {
        width: 100%;
        object-fit: cover;
        mask-image: linear-gradient(transparent, black 110%);
    }

    h1 {
        position: absolute;
        top: 50%;
        width: 100%;
        text-align: center;
        margin: 0;
        font-size: 3rem;
        text-shadow: 0 0 .3em #0000002b;
    }

    .hero-content {
        position: absolute;
        top: 50%;
        width: 100%;
        margin: 0;
        text-align: center;

        a {
            background-color: white;
            color: black;
            text-decoration: none;
            font-size: 1.8rem;
            margin-top: 10px;
            display: inline-block;
            padding: 5px 20px;
            border-radius: 50px;
            box-shadow: 0 6px .3em #0000002b;
            font-weight: 600;
            transition: all .3s ease-out;

            &.hidden {
                transform: translate(0, 65px);
                opacity: 0;
            }
        }
    }

    #hero-typer {
        span {
            font-size: 3rem;
            font-weight: 700;
            text-shadow: 0 0 .3em #0000002b;
        }
    }
}