:root{
    --dark-blue-1: #0388ca;
    --main: #d45401;
    --main_darker: #6d2c00;
    --white:#e9d9c7;
    --black: #171717;
    --highlight:#fff;
}

*{
    margin:0;padding:0;overflow-x: hidden
}
/*Headings and paragraphs fonts*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,700;1,700&family=Jost:ital@0;1&display=swap');

h1,h2,h3,h4,h5,nav #nav_links-container ul a,b{font-family: "Josefin Sans", sans-serif;}
p, div{font-family: "Jost", sans-serif;} /*No eliminar DIV*/

body{max-width:100vw;}

nav{
    background:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:10vh;
    padding-left:10vw;
    z-index:100;
}

#nav_links-container{
    width:70%;
    z-index:100;
}

    nav h1{
        color:var(--main) !important;
        z-index:100;
    }

    #menuButton{display:none;z-index:100;}


    nav a:first-of-type{
        display:flex;
        align-items: center;
        justify-content: center;
    }

    nav #nav_links-container ul{
        display:flex;
        list-style: none;
        align-items:center;
        justify-content:space-around;
        z-index:100;
    }

        nav #nav_links-container ul a{
            text-decoration:none;
            color:black;
            font-weight: 700;
        }

        #nav_links-container ul a li{
            color:var(--white);
            font-size:max(1vh,1vw);
            transition:all 200ms ease-in-out;
            z-index:100;
        }

        #nav_links-container ul a li:hover{
            color:var(--main);
            padding:0 1rem;
        }

.button{
    margin:3% 0;
    text-decoration: none;
    background: var(--highlight);
    background: linear-gradient(90deg, rgba(192, 116, 41, 0.73) 0%, rgba(161,89,18,0.7318181818181818) 100%) !important; 
    border:2px solid rgba(192, 116, 41, 0.73) !important;
    width:fit-content;
    height:max(3vw,5vh);
    border-radius:1rem;
    padding:0.5rem 2rem;
}
    .button button{
        background:none;
        border:none;
        cursor:pointer;
        color:var(--white);
        font-weight: 700;
        width: 100%;
        height: 100%;
        font-size: medium;
    }

@media (max-width:900px){

    #nav{
        position:fixed;
    }

    #title{
        width:100vw;
        text-align: center;
        position:fixed;
        top:0;
        height:10vh;
        left:0;
        background-color:#171717cc;
        z-index:100;
    }

    #menuButton{
        display:block;
        position:fixed;
        width:50px;
        right:1rem;
    }

    #nav_links-container{
        display:none;
        width:100vw;
        height:90vh;
        position:fixed;
        top:10vh;
        left:0;
    }
        #nav_links-container ul{
            flex-direction: column;
            height:100%;
            width:100%;
            justify-content: center;
            background-color: #171717cc;
            padding-bottom: 10vh;
        }

            #nav_links-container ul a li{
                font-size:max(2vw,2vh)
            }
}

/*Analytics Advice Bar Styles*/

#analyticsAdvice{
    position:fixed;
    bottom:0;
    width:100vw;
    display:flex;
    align-items: center;
    background-color:var(--black);
    z-index:100;
    border-top:1px solid var(--main);
    padding:1rem 0;
    justify-content: center;
}

    #analyticsAdvice p{
        font-size:max(1vw,2vh);
        margin:0 2rem 0 0;
        color:var(--white);
    }

    #analyticsAdvice a{
        color:var(--white);
    }

    #analyticsButton{
        padding:1rem;
        border:none;
        background-color:var(--main_darker);
        border:1px solid var(--main_darker);
        color:var(--white);
        border-radius:0.5rem;
        font-size:max(1vw,2vh);
        transition:0.2s all ease-in-out;
        cursor:pointer;
    }

    #analyticsButton:hover{
        border:1px solid var(--main);
        color:var(--main);
        background-color:var(--black);
    }

@media (max-width:500px){
    #analyticsAdvice{
        flex-direction: column;
    }

        #analyticsAdvice p{
            margin:0 20px;
        }

        #analyticsButton{
            width:80vw;
            margin-top:1rem;
        }
}



/*Newsletter*/

.newsletter_container{
    margin:0 auto;
    width:800px;
    max-width: 80vw;
    border:1px solid var(--main);
    border-radius:0.5rem;
    padding:3.5%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    .newsletter_container h1{
        font-size:max(3vw,3vh)
    }

    .newsletter_container p{
        font-size:max(1vw,1vh);
    }

    .newsletter_container div{
        margin-top:1rem;
    }

        .newsletter_container input{
            padding:1rem;
            background-color:#171717;
            border: 2px solid var(--main);
            font-size:max(1vw,1vh);
            border-radius:1rem;
            transition:0.5s all ease-in-out;
            color:var(--highlight)
        }

        .newsletter_container input:focus-visible{
            padding:1rem;
            background-color:var(--main);
            border: 2px solid var(--main);
            font-size:max(1vw,1vh);
            color:var(--black);
        }

        .newsletter_container button{
            padding:1rem 2rem;
            background-color:var(--main);
            border:2px solid var(--main);
            border-radius:0.5rem;
            margin:0 0 0 1rem;
            font-size:max(1vw,1vh);
            cursor:pointer;
            transition:all 0.4s ease-in-out;
            color: var(--black);
        }

        .newsletter_container button:hover{
            background-color: var(--black);
            color:var(--main);
        }

@media (max-width:628px){
    .newsletter_container h1{
        font-size:max(5vh,5vw)
    }

    .newsletter_container p{
        font-size:max(3vw,3vh)
    }

    .newsletter_container div{
        display:flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
    }

    .newsletter_container input{
        width:70vw;
        height:2rem;
        font-size:max(3vw,3vh)
    }

    .newsletter_container input:focus-visible{
        font-size:max(3vw,3vh)
    }

    .newsletter_container button{
        width:70vw;
        font-size:max(3vw,3vh)
    }
}

/*estilos extra*/

.arrow-animation {
    
    width: 4vw;
    height: 4vw;
    z-index: 100;
    bottom: 20px;
    left: 50%;
    margin-left: -12px;
    -webkit-animation: bounce-down 1.6s linear infinite;
    animation: bounce-down 1.6s linear infinite;
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    bottom:100px;
    right:10px;
    z-index:1 !important;
}

@media(max-width:768px){
    .arrow-animation{
        bottom:2rem;
        width: 5vh;
        height: 5vh;
    }
}

@-webkit-keyframes bounce-down {
    25% {
         -webkit-transform: translateY(-1rem);
    }
    50%, 100% {
         -webkit-transform: translateY(0);
    }
    75% {
         -webkit-transform: translateY(1rem);
    }
}

@keyframes bounce-down {
     25% {
          transform: translateY(-1rem);
     }
     50%, 100% {
          transform: translateY(0);
     }
     75% {
          transform: translateY(1rem);
     }
}