* {
    margin: auto;
    padding: auto;
    scroll-behavior: smooth;
    max-width: 100%;
}

#hero {
    width: 100vw;
    animation: animate 20s ease-in-out infinite;
    height: 80vh;
    background-position: center;
    background-size: cover;
}

#hero-title {
    font-size: 6rem;
    color: rgb(76, 125, 169);
}

@media screen and (max-width: 575px) {
    #hero-title {
        font-size: 3rem;
    }
    #hero {
        height: 50vh;
    }
}

@keyframes animate {
    0% {
        /* photo by Drew Dizzy Graham from unsplash.com */
        background-image: url(imgs/raphael-mittendorfer-2sP8aDcqOWU-unsplash.jpg);
    }

    42% {
        /* photo by Ilja Tulit from unsplash.com */
        background-image: url(imgs/ilja-tulit-Rdy1AqzqcMU-unsplash.jpg);
    }

    75% {
        /* photo by Tucker Good from unsplash.com */
        background-image: url(imgs/tucker-good-fE2l1tR-Mec-unsplash.jpg);
    }

    100% {
        /* photo by Raphael Mittendorfer from unsplash.com */
        background-image: url(imgs/raphael-mittendorfer-2sP8aDcqOWU-unsplash.jpg);
    }
}



#description {
    padding-top: 2rem;
    text-align: center;
    color: rgb(56, 56, 56);
}

#logo {
    border-radius: 50%;
    width: 3rem;
}


#description-about a {
    text-decoration: none;
    transition: font-size ease-in-out 0.5s;
}

#description-about a:hover {
    font-size: 1.6rem;
}


#top-button:hover {
    cursor: pointer;
}

#detail-image {
    height: 350px;
    width: 70vw;
    object-fit: cover;
}

#video {
    margin-top: 2rem;
}

.email {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#top-button {
    margin-top: 3rem;
}

#description-about {
    width: 45vw;
}

#details a {
    text-decoration: none;
}