*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    font-family:Arial, Helvetica, sans-serif;

}

.hero{

    width:100%;
    height:100vh;

    background-image:url("../images/hero.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    animation:zoom 18s ease-in-out infinite alternate;

}

.overlay{

    width:100%;
    height:100%;

    background:rgba(0,0,0,.30);

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    color:white;

    text-align:center;

}

h1{

    font-size:5rem;

    letter-spacing:6px;

    text-shadow:0 4px 15px rgba(0,0,0,.5);

}

#typing{

    margin-top:25px;

    font-size:1.6rem;

    min-height:40px;

}

.scroll{

    position:absolute;

    bottom:35px;

    font-size:2rem;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

@keyframes zoom{

    from{

        background-size:100%;

    }

    to{

        background-size:108%;

    }

}

@media (max-width:768px){

    h1{

        font-size:2.8rem;

    }

    #typing{

        font-size:1.2rem;

    }

}