@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

body{
    font-family: "Noto Sans JP", sans-serif;
}

#landing{
    background-image: url('img/bg-landing.jpg');
    background-size: cover;
    background-position: top center;
    min-height: 100vh;
    padding-top: 4vh;
}

#landing .logo{
    margin-bottom: 30vh;
}

#landing h2{
    font-size: 3.2em;
    text-align: right;
}

#landing p{
    font-size: 1.8em;
    text-align: left;
    color: #4d4d4d;
}

#landing hr{
    border: 5px solid #df040b;
}

#scrollDos{
    background-image: url('img/bg-scroll2.jpg');
    background-size: cover;
    background-position: top center;
    padding-top: 10vh;
    color: #ffffff
}

hr.spacer{
    border: 0;
    padding: 40px 0;
}

hr.spacerMedio{
    border: 0;
    padding: 20px 0;
}

hr.spacerCuarto{
    border: 0;
    padding: 10px 0;
}

#scrollTres{
    background-image: url('img/bg-scroll3.jpg');
    background-size: cover;
    background-position: top center;
    padding-top: 10vh;
    color: #ffffff
}

#scrollTres h2{
 color: #4d4d4d;
 text-align: center;
 margin-bottom: 40px;
}

#scrollTres img{
    margin-bottom: 20px;
}

#footer{
    background-image: url('img/bg-footer.jpg');
    background-size: cover;
    background-position: top center;
    padding-top: 10vh;
    color: #ffffff
}

@media (max-width: 33.9em) {
    #landing{
        min-height: inherit !important;
        padding-bottom: 10vh;
    }
    #landing .logo{
        margin-bottom: 10vh;
    }
    #landing p{
        text-align: center !important;
        font-size: 1.2em;
    }
    #landing h2{
        text-align: center !important;
    }
    #landing hr{
        margin: auto !important;
    }
    #scrollDos h2{
        text-align: center;
        margin-bottom: 40px;
    }
}