*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

:root{
    --color-primario:#000000;
    --color-secundario:#1a1a1a85;
    --color-botones-de-accion:#ff0000;
    --color-fondos-secundarios:#8a8a8a7b;
    --color-fondo-principal:#ffff;
    --color-titulos:#180000;
    --altura-secciones:100vh;
}

.header{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
    "nombre-logo menu-de-navegacion";
    height: 10vh;
}

.header--fondo{
    background-color: var(--color-fondos-secundarios);
}

.menu-de-navegacion{
    grid-area: menu-de-navegacion;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
}
.menu-de-navegacion a{
    text-decoration: none;
    color: var(--color-primario);
}

.menu-de-navegacion--fondo{
    background-color: var(--color-fondos-secundarios);
}

.menu-de-navegacion--botones a{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    height: 30px;
    width: 100px;
    background-color: var(--color-secundario);
    transition: 0.1s;
}

.menu-de-navegacion--botones a:hover{
    transform: scale3d(1.3, 1.3, 1.3);
    
}

.menu-de-navegacion--botones a:nth-child(5){
    background-color: var(--color-botones-de-accion);
    height: 30px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo{
    height: 30px;
    width: 30px;
    background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;

    animation: animacion-flotar 3s infinite alternate;
}
.logo i{
    font-size: 1.6rem;

}
.nombre-logo{
    grid-area: nombre-logo;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.hero{
    background-color: var(--color-fondo-principal);
    height:var(--altura-secciones);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-titulos);
    flex-direction: column;
}
.hero p{
    font-weight: lighter;
}

.galeria{
    background-color: var(--color-fondo-principal);
    height: var(--altura-secciones);
    display: grid;
    grid-template-columns: repeat(3, 1fr);

}
.targets--hover:hover{
    transform: translate(0 , -10px);
}

.targets{
    background-color: #1A1A1A;
    height: 80%;
    width: 80%;
    display: flex;
    align-self: center;
    justify-self: center;
    transition: 0.5s;
}

.destacado{
    height: var(--altura-secciones);
    background-color: var(--color-fondo-principal);
    display:  grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 
    "titulo titulo"
    "usuario comentario"
    ;
}

.usuario{
    grid-area: usuario;
    justify-self: center;
    align-self: center;
}

.comentario{
    grid-area: comentario;
    font-size: 1.3rem;
    text-align: center;
    justify-self: center;
    align-self: center;
}

.titulo{
    grid-area: titulo;
    font-size: 2rem;
    justify-self: center;
    align-self: center;
}

.contacto{
    height: var(--altura-secciones);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1.5fr;
    grid-template-areas: 
    "nombre correo"
    "cuadro-texto cuadro-texto"
    ;
}


.contacto input{
    height: 50px;
    width: 300px;
}

.cuadro-texto input{
    height: 200px;
    width: 600px;
}

.cuadro-texto input::placeholder{
    position: absolute;
    top: 8px;
    left: 8px;
}
.cuadro-texto button{
    height: 50px;
    width: 200px;
    border-radius: 20px;
    border:  solid 1px;
}

.contacto input:nth-child(1){
    grid-area: nombre;
    justify-self: end;
    align-self: flex-end;
    margin-right: 5px;
    margin-bottom: 5px;
}
.contacto input:nth-child(2){
    grid-area: correo;
    justify-self: start;
    align-self: flex-end;
    margin-left: 5px;
    margin-bottom: 5px;
}
.cuadro-texto{
    grid-area: cuadro-texto;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer{
    height: 50vh;
    background-color: var(--color-fondos-secundarios);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.nombre-logo span::after{
    content: "Welcome";
    animation: word 6s infinite;
    font-size: 1.6rem;
}
@keyframes word{
    0%,33%{
        content: "every";
        color: #ff2600;
    }
    34%,66%{
        content: "one";
        color: #007BFF;
    }
    67%,80%{
        content: "to NovaStudio";
        color: #66ff00;
    }
}


@keyframes animacion-flotar{
    0%{
        transform:translateY(2px);
    }
    50%{
        transform: translateY(-2px);
    }
    100%{
        transform: translateY(0);
    }
}