html {
    scroll-behavior: smooth;
}
body {
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
}






/* ================================================= */
@media only screen and (max-width: 1200px) {
    body {
        padding-top: .5rem;
    }
}
@media only screen and (max-width: 1024px) {
    body {
        /* prev padding-top: .5rem */
        padding-top: .8rem;
    }
}
@media only screen and (max-width: 768px) {
    body {
        /* prev padding-top: .8rem */
        padding-top: 1.3rem;
    }
}
@media only screen and (max-width: 500px) {
    body {
        /* prev padding-top: 1.3rem */
        padding-top: 2rem;
    }
}
@media only screen and (max-width: 410px) {
    body {
        /* prev padding-top: 2rem */
        padding-top: 3rem;
    }
}
/* ================================================= */





/* ================================================= */
@media only screen and (max-width: 1200px) and (min-height: 800px) {
    body {
        padding-top: 3rem;
    }
}
@media only screen and (max-width: 1024px) and (min-height: 800px) {
    body {
        /* prev padding-top: .5rem */
        padding-top: 2rem;
    }
}
@media only screen and (max-width: 768px) and (min-height: 800px) {
    body {
        /* prev padding-top: .8rem */
        padding-top: 4rem;
    }
}
@media only screen and (max-width: 500px) and (min-height: 800px) {
    body {
        /* prev padding-top: 1.3rem */
        padding-top: 3rem;
    }
}
@media only screen and (max-width: 410px) and (min-height: 800px) {
    body {
        /* prev padding-top: 2rem */
        padding-top: 3rem;
    }
}
/* ================================================= */