/*==============================
RESET
==============================*/

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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial,Helvetica,sans-serif;
    background:white;
}


/*==============================
PANTALLA NEGRA
==============================*/

#inicio{

    position:fixed;

    inset:0;

    background:#000;

    color:#fff;

    z-index:2;

    cursor:pointer;

}

#centro{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

}


/*==============================
ESQUINAS
==============================*/

.esquina{

    position:absolute;

    font-size:78px;

    font-weight:300;

    user-select:none;

    cursor:pointer;

    z-index:100;

}

.arriba-izq{

    top:50px;

    left:70px;

}

.arriba-der{

    top:50px;

    right:70px;

}

.abajo-izq{

    bottom:40px;

    left:70px;

}

.abajo-der{

    bottom:43px;

    right:70px;

}

.negro{

    color:#111;

}


/*==============================
PORTAFOLIO
==============================*/

#portfolio{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:3;

    transform:translateY(100%);

    transition:transform 1.2s ease-in-out;

}

#portfolio.mostrar{

    transform:translateY(0);

}


/*==============================
PROYECTOS
==============================*/

#proyectos{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:900px;

    display:grid;

    grid-template-columns:repeat(3,220px);

    justify-content:center;

    align-items:center;

    gap:70px;

}

.proyecto{

    width:220px;

    text-decoration:none;

    transition:transform .35s;

}

.proyecto:hover{

    transform:scale(1.05);

}

.proyecto img{

    width:220px;
    height:220px;

    object-fit:contain;

    display:block;

    border-radius:0;

    box-shadow:none;

}


.sin-proyectos{

    width:100%;

    text-align:center;

    color:#777;

    font-size:18px;

}


/*==============================
RESPONSIVE
==============================*/

@media(max-width:900px){

    .esquina{

        font-size:45px;

    }

    .arriba-izq,
    .abajo-izq{

        left:25px;

    }

    .arriba-der,
    .abajo-der{

        right:25px;

    }

#proyectos{

    width:100%;

    grid-template-columns:repeat(2,150px);

    gap:30px;

}

.proyecto img{

    width:150px;
    height:150px;

}

    .proyecto{

        width:150px;

    }

 .proyecto img{

    width:220px;

    height:220px;

    object-fit:contain;

    display:block;

    margin:auto;

}

}


/*==============================
SOBRE MI
==============================*/

#about{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:10000;

    display:none;

}

#about.mostrar{

    display:block;

}

.contenido{

    width:700px;

    max-width:90%;

    margin:120px auto;

}

.contenido h1{

    font-size:55px;

    margin-bottom:40px;

}

.contenido p{

    font-size:22px;

    line-height:1.8;

}

.volver{

    position:absolute;

    top:40px;

    left:40px;

    font-size:40px;

    cursor:pointer;

}

#btnAbout{

    position:absolute;

    z-index:9999;

}