/*Variables para el tema del sitio web*/
:root{
    --primary:#b94242;
    --secundary:#2e4469;
    --background:#35495e;
    --black-text:rgb(61, 61, 61);
    --white-text:#fff;
    --button-hover:#753838;
}
*{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
body{
    font-family: Arial, Helvetica, sans-serif;

}
nav{
    background-color: var(--primary);
    height: 10vh;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
header h1{
    color: var(--white-text);
    font-size: 20px;
    letter-spacing: 0.5rem;
}
nav ul{
    display: flex;

}
nav ul li{
    border-right: solid 0.1rem var(--black-text);

}
nav ul li:last-child{
    border-right: none;
}
nav ul li a{
    color: var(--white-text);
    font-size: 1.2rem;
    padding: 0.8rem 1rem;
    text-transform: uppercase;
}
nav ul li:hover{
    background-color: var(--button-hover);
    transition: all 0.3s;
}
.drawer{
    color: var(--white-text);
    float: left;
    cursor:pointer;
    display: none;
    border: solid 0.1rem var(--white-text);
    padding: 0.2rem;
    border-radius: 0.1rem;
}
#ckbox{
    display: none;
}
/*Estilos a la parte principal de la web*/
main{
    padding-top: 1rem;
    display: flex;
    justify-content: center;
    align-items:center ;
    height: 80vh;
}
main h1{
    font-size: 1.7rem;
    color :var(var(--black-text));
    text-align: center;
    margin: 1rem;

}
main p{
    color: var(--black-text);
    text-align: center;
    margin: 1rem;
}
main form button{
    margin: 0 0.5rem;
    width: 8rem;
    height: 2.5rem;
    font-size: 1.1rem;
}
.primary-btn{
    background-color: var(--primary);
    color: var(--white-text);
    border-style: none;
}
.outline-btn{
    background-color: var(--white-text);
    color: var(--primary);
    border: solid 0.1rem var(--primary);
}
.primary-btn:hover{
    background-color: var(--white-text);
    color: var(--primary);
    border-style: none;
    transition: all 0.3s;

}
.outline-btn:hover{
    background-color: var(--primary);
    color: var(--white-text);
    border-style: none;
    transition: all 0.3s;
}
main img{
    height: 55vh;

}
footer{
    background-color: var(--primary);
    color: var(--white-text);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
}

/***************************************************************************************************/

@media(max-width:1020px){
    nav{
        justify-content: flex-start;
    }
    .drawer{
        display: block;
    }
    nav h1{
        margin-left: 1rem;
    }
    ul{
        position: fixed;
        width: 50%;
        height: 100vh;
        background-color: var(--background);
        top: 10vh;
        left: -100%;
        text-align: left;
        transition: all 0.5s;
        flex-direction: column;
        align-content: stretch;
    }
    nav ul li{
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        padding-left: 2rem;
        border-bottom: solid 0.1rem rgba(201, 196, 196,0.4);
    }
    #ckbox:checked~.menu-box{
        left: 0px;
    }
    .image{
        display: none;

    }
    footer{
        text-align: center;
    }
    
}