/* resetting all elements */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* resetting html element */
html{
    scroll-behavior: smooth;
}
/* style body element */
body{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    background-color: var(--primary-theme);
    line-height: normal;
}
h1, h2, h3, h4, h5, h6{
    margin: 0;
}
p{
    margin-bottom: 0px;
}
a{
    text-decoration: none;
}
a:hover, a:focus{
    text-decoration: none;
}
a:focus {
    outline: none;
}



/* variables */
:root{
    /* font sizes */
    --default-fs: 16px;
    --footer-logo-fs: 1.57vw;     /* 30px */

    /* colors */
    --primary-theme: #F7F3E9;
    --green-theme: #487255;
    --footer-brown: #291A10;
    /* --border-color: #D9D7CF; */
    --border-color: #D6D0BC;
    --border-two-color: #707070;
    --footer-border-color: #392D26;
    --dark-gray-text: #5E5E5E;
    --light-gray-text: #9A9A9A;
    --gold-text: #92743C;

    /* borders */
    --section-border: 2px solid var(--border-color);
    --footer-border: 2px solid var(--footer-border-color);

    /* font families */
    /* --papillon-font: Papillon Script Regular; */
    /* --monoton-font: Monoton; */
    /* --benn-font: Benn; */
    --papillon-font: papillon-fm;
    --volkolak-font: WT Volkolak Sans Poster;
    --montserrat-font: 'Montserrat', sans-serif;
    --monoton-font: monoton-fm;
    --benn-font: benn-fm;
}

/* defining custom fonts */
@font-face {
    font-family: papillon-fm;
    src: url('../assets/fonts/papillon-script-regular-papillo.ttf');
}
@font-face {
    font-family: monoton-fm;
    src: url('../assets/fonts/Monoton-Regular.ttf');
}
@font-face {
    font-family: benn-fm;
    src: url('../assets/fonts/Benn-Free.otf');
}

/* styling background leaf images */
.wrapper-leaf{
    position: absolute;
    z-index: -1;
    opacity: 0.9;
}
.wrapper-leaf > img{
    width: 100%;
}

/* footer */
footer{
    width: 100%;
    display: block;
    background-color: var(--footer-brown);
    color: white;
}
footer > .logo-handles{
    width: 30%;
    height: 100%;
    margin: auto;
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
}
footer > .logo-handles > img{
    width: 30%;
}
footer > .logo-handles > p:nth-child(2){
    font-family: var(--volkolak-font);
    font-weight: bold;
    font-size: var(--footer-logo-fs);
}
footer > .logo-handles > p:nth-child(3){
    font-size: var(--default-fs);
}
.logo-handles > .social-handles{
    width: 100%;
    display: flex;
    justify-content: center;
    column-gap: 20px;
}
.logo-handles > .social-handles > img{
    width: 8%;
}

.footer-info{
    border-top: var(--footer-border);
    padding: 30px 0px;
    display: flex;
    justify-content: center;
    column-gap: 200px;
    font-size: var(--default-fs);
}
.footer-info > div{
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}
.footer-info > div:nth-child(2){
    row-gap: 0px;
}
.footer-info > div:nth-child(1) > p:nth-child(1), .footer-info > div:nth-child(1) > p:nth-child(2){
    text-align: right;
}
.max-text{
    font-family: var(--benn-font);
}


/* media queries */
/* mobile - 0px to 768px */ 
@media screen and (max-width: 768px) {
    
    /* variables */
    :root{
        /* font sizes */
        --default-fs: 3.6vw;
        --footer-logo-fs: 6vw; 
    }

    /* footer */
    footer > .logo-handles{
        width: 65%;
    }
    .logo-handles > .social-handles > img{
        width: 10%;
    }
    .footer-info{  
        column-gap: 50px;
        padding: 30px 20px;
    }
    .footer-info > div{
        row-gap: 30px;
    }
    .footer-info > div:nth-child(2){
        row-gap: 0px;
    }
}