/*
* CSS Responsive - Móvil + Tablet
*/
@import url(../main.css);
@import url(../media-queries.css);
@import url(../themes.css);

.wrapper {
    grid-template-rows: 10vh 100vh repeat(3,60vh) 1fr;
}
.contenedor-principal {
    justify-content: center;
    align-items:center;
    position:relative;
    z-index:1;
}
.contenedor-principal::before {
    content:'';
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    opacity:.2;
    background-size: cover;
    background-origin: content-box;
    background-repeat:no-repeat;
    background-image: url(../../assets/payobestia.png);
}
.portada {
    grid-template-rows: repeat(3, 1fr);
}
.portada h2 {
    color:var(--textbox-title);
    font-size: 1em;
    align-self:flex-end;
}
.portada h1 {
    font-size:3.2em;
    text-align:center;
}
.portada p {
    margin-top:1vw;
    border-bottom: 1.5px solid var(--barra-border);
    text-align:right;
    align-self:flex-end;
    justify-self:right;
    font-size:0.7em;
}
.barraDeEscribir {
    animation-name: barraDeEscribir;
    -webkit-animation-name: barraDeEscribir;
    animation-duration: 1.2s;
    transition: 1.2s;
    font-size: 1.5em;
    font-weight: bold;
    -webkit-animation-duration: 1.2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    color:var(--barra-color);
}

@-webkit-keyframes barraDeEscribir {
    from {
        opacity:0;
    }

    65% {
        opacity:1;
    }

    to {
        opacity:0;
    }
}

@keyframes barraDeEscribir {
    from {
        opacity:0;
    }

    65% {
        opacity:1;
    }

    to {
        opacity:0;
    }
}
.contenedor-perso {
    justify-content:center;
    align-items:center;
    position:relative;
    z-index:1;
}
.contenedor-perso::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    opacity:.1;
    background-color: var(--bg-cp);
}
.textPersonal {
    grid-gap:1vw;
    margin:2vw;
    width:70%;
    text-align:center;
    grid-template-rows: repeat(auto-fill, 1fr);
}
.textPersonal h3 {
    color:var(--textbox-title);
    font-size:1.2em;
    margin-bottom: 1vh;
}
.textPersonal p{
    font-size:0.65em;
}
.contenedor-hobbies {
    justify-content:center;
    align-items:center;
    position:relative;
    z-index:1;
}
.contenedor-hobbies::before {
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    opacity:.3;
    background-color:var(--bg-ch);
}
.textHobbies {
    grid-template-rows: repeat(auto-fill, 1fr);
    width:65%;
    text-align:center;
    margin: 2vw;
    grid-gap: 1vw;
}
.textHobbies h3 {
    color: var(--hobbies-title);
    font-size: 1.2em;
    margin-bottom:1vh;
}
.textHobbies p {
    font-size:0.65em;
}