/*selector + propiedad + valor

selector {propiedad:valor
}
*/
*{ margin: 0; padding: 0;}
p{
    color:blue; 
    font-size: 24px; margin: 50px; 
    font-family:"Poiret One", sans-serif;
}
h1{color: #b2d6f9;text-align: center;font-weight:bold; text-transform: uppercase;}

.class{color:chocolate;font-family: "poiret one", sans-serif;}

#id{color: coral;font-family: "poiret one", sans-serif;}

body{background-color: azure;}

ul{list-style: none; ;font-family: "poiret one", sans-serif; font-size: larger; font-weight: 200;}

a{text-decoration: none; color:chocolate}

.logo{height: 25vh; width: auto;padding: 15px;}
.whats {height: 10vh; width: auto;}
.instagram {height: 10vh; width: auto;}
.facebook {height: 10vh; width: auto;}
.tiktok {height: 10vh; width: auto;}
.foto {height: auto; width: 50vh;}
.fotoprincipal{height: auto; width: 80vh;}

footer { border: 2px solid rgb(241, 241, 252); 
background-image: url(./img/logo.jpg); background-position: contain;
display: flex; justify-content: space-around; align-items: center; /*padding: 15px; /*height: 15px;*/
}
h2{font-family:"Poiret One", sans-serif ; color: cadetblue;}
h3{font-family:"Poiret One", sans-serif ; color: cadetblue;}


@media (max-width: 430px;){
    footer {
        display: flex;
        flex-direction: column; 
        flex-flow: row - wrap;
        height: fit-content;    
    }

    .instagram{height: 2px;
    }
    
    footer h2{ 
            display: none;
            font-size: 1rem;
    }

    .whats{height: 2px;
    }

}


div{
    background-color: rgb(255, 255, 255); 
    margin: 0vh; 
    height: auto; 
    width: 100vh;
}

.caja {margin: 15px; background-color: blueviolet; height: 15vh; width: 25vw;}

header{
    display: flex; 
    justify-content: space-around; 
    height: 15vh; 
    position: sticky; 
    top: 0; 
    padding: 15px; a
    lign-items: center;
    z-index: 1;
}

.nav{
    /*width: 40vw*/; display: flex; justify-content: space-around;
}

@media (max-width: 430px) {
    header {flex-direction: column;} 
    header h1 {display: none;} 
    header li{border: 1px solid rgb(169, 169, 240);} 
    ul {gap: 5px}
    header li{font-size: 20px}
    .logo{height: 75px;}
}

/*MAIN:*/
.flex{
    height: auto;; 
    width: auto;
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    padding: 50px; 
    gap: 500px
    margin: 100px;

}
.a{flex-basis: 50vw}

@media (max-width: 430px) {
    .flex {
        flex-direction: column;
        margin-top: 15px; margin: 20px; 
    }
    .foto{height: auto; width: 70vh;}
    p{font-size: 2rem;}
}

.img-carousel{width: auto; height: 80vh;}


.contacto {
    padding: 15px;
    display: flex;
    gap: 15px;
    justify-content: space-around;
}

form{
    display: grid;
    grid-template-areas: 
    "nom . nombre nombre"
    "ed . edad edad"
    "em . email email"
    "pas . password password"
    "selector . ch ch"
    "nac . fecha fecha"
    "com . gracias gracias"
    ". reset enviar."
    ;
}

iframe{
    height: 50vh; width: 50vh; 
    padding: 5vh; 
    align-items: center;

}


input{
    grid-area: input;
    width: 50vw;
}

label{grid-area: label;}

.nom{grid-area: nom;}
.nombre{grid-area: nombre;}
.ed{grid-area: ed;}
.edad{grid-area: edad;}
.em{grid-area: em;}
.email{grid-area: email;}
.pas{grid-area: pas;}
.password{grid-area: password;}
.selector{grid-area: selector;}
.ch{grid-area: ch;}
.nac{grid-area: nac;}
.fecha{grid-area: fecha}
.com{grid-area: com;}
.gracias{grid-area: gracias;}
.enviar{grid-area: enviar; }
.reset{grid-area: reset; width: 100px;}

@media (max-width: 430px) {
    .contacto{
        flex-direction: column;
        padding-top: 15vh;
        align-items: center;
    }
    form{
        grid-template-areas: 
        "nom"
        "nombre"
        "ed"
        "edad"
        "em"
        "email"
        "pas"
        "password"
        "selector"
        "ch"
        "nac"
        "fecha"
        "com"
        "gracias"
        "enviar"
        "reset"
        ;
        justify-items: center;
    }

    label{font-size: 1.5rem;}
    input {
        height: 5vh; 
        font-size: 1.5rem;
        width: 80vw;
    }

    textarea{
        width: 80vw;
        font-size: 1.5rem;
    }

    iframe{width: 90vw;}

    footer { 
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}