/*
    pallete 
    background-color: rgb(27, 32, 33);
    background-color: rgb(81, 81, 61);
    background-color: rgb(166, 168, 103);
    background-color: rgb(227, 220, 149);
    background-color: rgb(227, 220, 194);
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital@1&family=Merriweather:ital@1&display=swap');
html {
    box-sizing: border-box;
    scroll-snap-type: y mandatory;
    font-family: 'Lato', sans-serif;
}

*, *:before, *:after {
    box-sizing: inherit;
    --principal: #1b2021;
    --secundario: #e3dcc2;
    --terciario: #a6a867;
    --action: #5C278F;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

div.container{
    padding: 0px 48px;
}

body {
    margin: 0px;
    padding: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
}

section {
    height: 100vh;
    scroll-snap-align: start;
}
h2{
    font-size: 32px;
    font-family: 'Merriweather', serif;
}
h1{
    font-size: 32px;
    font-family: 'Merriweather', serif;
}


@media screen and (min-width : 906px){
    .desktop-only {
        visibility:visible;
    }
    .mobile-only {
        visibility:hidden;
        display:none
    }
}

@media screen and (max-width : 906px){
    .desktop-only {
        visibility:hidden;
        display:none
    }
    .mobile-only {
        visibility:visible;
    }
}