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

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

    65% {
        opacity:1;
    }

    to {
        opacity:0;
    }
}

@keyframes barraDeEscribir {
    from {
        opacity:0;
    }

    65% {
        opacity:1;
    }

    to {
        opacity:0;
    }
}

.wrapper {
    grid-template-rows: 10vh 100vh 60vh 1fr;
}

.barraDeEscribir {
    animation-name: barraDeEscribir;
    -webkit-animation-name: barraDeEscribir;
    animation-duration: 1s;
    transition: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    color: var(--barra-color);
}
.contenedor-principal {
    justify-content: center;
    width:100%;
    align-items: center;
    z-index:1;
    position:relative;
}
.contenedor-principal::before {
    content:'';
    position:absolute;
    z-index:-1;
    opacity:.5;
    width:100%;
    height:100%;
    background-size: cover;
    background-origin: content-box;
    background-image: var(--bg-image);
    background-repeat:no-repeat;
}
.portada {
    position:absolute;
    height:60%;
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 0.5vw;
}

.portada h2 {
    text-align: left;
    color: var(--textbox-title);
    font-size:1.2em;
    align-self: flex-end;
}

.portada h1 {
    font-size: 3.2em;
    text-align: center;
}

.portada p {
    text-align: right;
    border-bottom: 1.5px solid var(--barra-border);
    align-self: flex-start;
    justify-self:flex-end;
}

.portada span {
    font-size: 1.2em;
    font-weight: bold;
}