@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --font-family: "Montserrat", sans-serif;
    --font-optical-sizing: auto;
    --font-weight: <weight>;
    --font-style: normal;
    --color-primario: rgb(7, 76, 137);
    --color-secundario: #cf4646;
    --color-terciario: #44a2f0;
    --color-fondo: #f4f4f4;
    --color-texto: #000;
    --fuente-principal: coral;
    --fuente-titulo:normal;
}
*{
    padding: 2;
    width: 3;
}
/*.w-100{width: 60%;}
.w-70{width: 60%;}
.w-70{width: 60%;}
.w-20{width: 30;}
.p-1{padding: 2%;}
.p-2{padding: 2%;}*/
.header{
    background-color: #52f044;
    text-align: center;
    width: 100%;
}

.h1{
    text-align: center;
    background-color: rgb(232, 175, 19);
    text-transform: capitalize;
    padding: 1%;
    vertical-align: middle;
}
.nav{
    /*display: inline-block;*/
    width: 80%;
    padding: 2em;
    transition: color 1s linear, background-color 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}
.a{
    background-color: rgb(213, 23, 213);
    display: inline-block;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    border-radius: 6px;
    padding: 2%;
    margin: 2%;
    box-sizing: border-box;
    background: #f04478;
    box-shadow: 5px 8px 11px #44a2f0;
    transition: color 1s linear, background-color 1s ease-in-out;
}
.a:hover{
    background-color: cornsilk;
    color: darkgreen;
}

.section{
    background-color: var(--color-primario);
    text-align: center;
    padding: 3%;
    color: rgb(41, 7, 24);
    text-align: center;
}
.flex{
    background-color: #f04478;
    display: flex;
    justify-content: space-around;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1em;
}
.div{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1em;
}
.a2{width: 30%; text-decoration: none;}
.img{
    border-radius: 5px;

}
.div2{
    width: 30%;
    text-decoration: none;
    display: flex;
    justify-content: space-evenly;
    padding: 2%;
    font-size: 1em;
    gap: 2em;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
}
.pie-menu{
    background-color: aqua;
    display: flex;
    justify-content: space-evenly;
    border-radius: 2px;
    width: 100%;
    padding: 2%;
    
}

.pie-otros{
    /*display: flex;
    justify-content: space-around;
    flex-wrap: wrap;*/
}
.l{
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}
.rrss{
    background-color: #d43636;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 2px 5px 7px;
    border-radius: 6px;
    gap: 1em;
    padding: 2em;

}
.a3{
    background-color: rgb(180, 193, 203);
    color: #cf4646;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 5px 8px 11px #138aec;
    box-sizing: border-box;
    text-transform: capitalize;
    text-align: center;
    transition: color 1s linear,backround-color 1s ease-in-out;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 1em;
}
.a3:hover{
    background-color: #f04478;
    color: aqua;
}
@media(max-width:600px){
    .flex{
        flex-direction: column;
        gap: 2em;
        text-align: center;
    }
    .pie-otros{
        flex-direction: column;
        gap: 2em;
        text-align: center;
    }
    .pie-menu{
        flex-direction: column;
        gap: 2em;
        align-items: center;
    }
    .nav{
        flex-direction: column;
        align-items: center;
    }
    .div2{
        flex-direction: column;
        align-items: center;
    }
    .a2{
        width: 100%;
    }
    .rrss{
        flex-direction: column;
        .l{
            flex-direction: column;
        }
    }
}