@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&family=Caveat:wght@400;500;600&display=swap');

/*---COMÚN---*/
body {
    font-family: 'Cabin Sketch';
    margin: 0px;
    padding: 0px;
    /*--Los elementos se disponen igual pero navbar no se despega del techo--*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
header {
    width: 100%;
    background-color: white;
    opacity: 95%;
    /*Para fijar la barra arriba*/
    position: fixed;
    z-index: 10;
}
h1 {
    text-align: center;
    font-size: 2.7em;
}
h2, h3 {
    text-align: center;
}
p {
    padding: 0 2em;
    font-size: 1.1em;
}
nav ul {
    margin: auto;
    padding: 0px;
    display: flex;
    justify-content: space-around;
    list-style-type: none;
}
nav li {
    display: inline-block;
    padding: 0.5em;
    font-size: 1.2em;
}
nav li:hover {
    opacity: 50%;
}
a:link {
    text-decoration: none;
    color: black
}
a:visited {
    color: black;
}
footer {
    width: 100%;
    max-width: 900px;
    margin: 5em auto 0 auto;
}
/*---Solo el footer del índice tiene que ser desplazado hacia abajo*/
#indexfooter {
    position: fixed;
    bottom: 0;
}
.footer {
    display: flex;
    justify-content: space-around;
    margin: 1em;
}
.icon img {
    height: 2em;
}
/*---INICIO---*/
.index {
    margin-top: 90px;
}
.img {
    display: flex;
    margin-top: 50px;
}
.index img {
    width: 85%;
    margin: 0.5em auto;
}
/*---BIOGRAFÍA---*/
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 50px;
}
.polaroid {
    width: 300px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    margin: 8px;
    font-family: Caveat;
    font-size: 1.3em;
}
.polaroid:hover {
    transform: translate(2%, 2%);
}
.photo {
    width: 100%;
    height: 280px;
    margin: 0 auto;
    background-size: cover;
    border-radius: 2px;
}
#img1, #img2, #img3, #img4, #img5, #img6, #img7 {
    opacity: 85%;
}
#img1 {
    background-image: url("../assets/img/Biografía/01_MALPICA.jpg");
}
#img2 {
    background-image: url("../assets/img/Biografía/02_CORUÑA.jpg");
}
#img3 {
    background-image: url("../assets/img/Biografía/03_SONIDO.jpg");
}
#img4 {
    background-image: url("../assets/img/Biografía/04_PROGRAMACION.jpg");
}
#img5 {
    background-image: url("../assets/img/Biografía/05_VOLUNTARIADO.JPG");
}
#img6 {
    background-image: url("../assets/img/Biografía/06_VIAJAR.JPG");
}
#img7 {
    background-image: url("../assets/img/Biografía/07_TRABAJO.jpg");
}
#img8 {
    background-image: url("../assets/img/Biografía/09_DJ.jpg");
    opacity: 80%;
}
/*---PORTFOLIO---*/
.portfolio {
    margin-top: 90px;
}
.portfolio h2 {
    padding: 0px 1.5em;
}
.media {
    width: 100%;
}
.column video {
    width: inherit;
}
.mini {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
}
.column img {
    width: 30%;
    padding: 0.5em 0;
}
/*---CONTACTO---*/

.contact {
    width: 100%;
    max-width: 400px;
    margin: 90px auto 0;
}
.contact div {
    margin: 10px auto;
    width: 100%;
    /*--Para dar uniformidad a los elementos--*/
    display: flex;
    flex-direction: column;
}
.contact img {
    opacity: 80%;
    width: 100%;
    border: 2px solid black;
    border-radius: 5px;
}
input, select, textarea {
    height: 2em;
    padding: 0.1em 0.8em;
    margin: 0;
    font-family: 'Cabin Sketch';
    border-radius: 5px;
    border: 2px solid black;
}
#textarea {
    height: 7em;
}
input[type="submit"] {
    font-family: 'Cabin Sketch';
    font-size: 1.3em;
    background-color: rgb(255, 255, 255);
}

/*----------RESPONSIVE FOOTER-------*/
@media (min-width: 600px) {
    #indexfooter {
        position: relative;
        width: 50%;
        margin: auto;
    }
}

/*----------RESPONSIVE GRANDE-------*/

@media (min-width: 768px) {
    /*--COMUN--*/
    header {
        height: 60px;
    }
    nav {
        width: 650px;
        margin: 0 auto;
    }
    nav ul {
        list-style-type: none;
    }
    nav li {
        padding: 0.5em;
        font-size: 2em;
    }
    .index {
        max-width: 1000px;
        margin: 90px auto;
    }
    /*--BIOGRAFÍA--*/
    .gallery {
        max-width: 1100px;
        margin: 90px auto;
    }
    /*--PORTFOLIO--*/
    .portfolio {
        display: flex;
        max-width: 1000px;
        margin: 0px auto;
    }
    h1 {
        font-size: 5em;
        text-align: center;
        margin-bottom: auto;
    }
    .column div {
        max-width: 600px;
        margin: 0 auto;
        padding: 2em;
        box-sizing: border-box;/*--Para que los media no desborden--*/
    }
}

/* VALIDACION */
.red {
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    color: rgb(212, 71, 88);
    text-align: right;
}
.switch_red {
    border: 2px solid rgb(212, 71, 88);
}
.green {
    text-align: center;
    font-size: 2.2em;
    margin-top: 4em;
}