@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --h1: normal 700 4rem/1.2 "Roboto Mono", monospace;   
    --h2: normal 600 2.4rem/1.3 "Roboto Mono", monospace;  
    --h3: normal 500 2rem/1.4 "Roboto Mono", monospace;   
    --h4: normal 500 1.5rem/1.4 "Roboto Mono", monospace;  
    --p: normal 400 1rem/1.6 "Roboto Mono", monospace;     
    --link: normal 500 1rem/1.6 "Roboto Mono", monospace;

    --h1-mobile: normal 700 2.0rem/1.2 "Roboto Mono", monospace;
    --h2-mobile: normal 600 1.2rem/1.25 "Roboto Mono", monospace;
    --h3-mobile: normal 500 1.6rem/1.3 "Roboto Mono", monospace;
    --h4-mobile: normal 500 1.25rem/1.3 "Roboto Mono", monospace;
    --p-mobile:  normal 400 0.95rem/1.45 "Roboto Mono", monospace;
    --link-mobile: normal 500 0.95rem/1.45 "Roboto Mono", monospace;

    --transition: all 0.3s ease-in-out;

    --yellow: #EBEB37;
    --black: #000000;
    --spuma: #FFFFFF;
    --grey: #c1c1c1;

}

body {
    position: relative;
}

body.no-scroll {
    overflow: hidden;
    height: 100vh;
}


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

}

.img-fluid {
    max-width: 100%;
    height: auto;
}

#landing-text {
    margin-top: 120px;
}

#landing-text h1{
    font: var(--h1);
}

#landing-text p{
    font: var(--p);
    font-style: italic;
    margin-top: 20px;
}

#whatsapp-container {
    margin-top: 120px;
}

#envelope-container {
    margin-top: 120px;
}

#whatsapp-icon h2{
    margin-top: 20px;
    font: var(--h2);
}

@media (max-width: 768px) { 
    #landing-text h1{
        font: var(--h1-mobile);
    }

    #landing-text p{
        font: var(--p-mobile);
    }

    #whatsapp-icon h2{
        font: var(--h2-mobile);
    }

    #whatsapp-icon p{
        font: var(--p-mobile);
    }


}