/* =======================================================
   ESTILO RETRO TERMINAL MINIMALISTA
   ======================================================= */

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


/* =======================================================
   CUERPO
   ======================================================= */

body{

    background:#000034;
    color:#98D0EB;

    font-family:
        "Courier New",
        "Lucida Console",
        monospace;
    font-size:12px;
    line-height:1.25;
    letter-spacing:-0.3px;
    word-spacing:-35%;
    word-spacing:-2px;
    padding:2px;
}


/* =======================================================
   CONTENEDOR GENERAL
   ======================================================= */

.contenedor-general{

    width:100%;
    max-width:1200px;

    margin:auto;

    display:flex;
    flex-wrap:wrap;
    gap:8px;
}


/* =======================================================
   CAJAS
   ======================================================= */

.caja{

    border:3px solid #0D0C1D;

    background:#05031F;

    padding:6px;

    width:100%;
}


/* =======================================================
   MENÚ LATERAL
   ======================================================= */
.menu-lateral{

    border:3px solid #10FF91;
}


.menu-lateral{
    border color:#10FF91;
    width:fit-content;
    font-size:16px;
    min-width:220px;

    flex:0;
}


/* =======================================================
   BORDE SOLO MENÚ LATERAL
   ======================================================= */

.menu-lateral{

    font-size:18px;
    border:3px solid #10FF91;
}


/* =======================================================
   CONTENIDO
   ======================================================= */

.contenido{
    flex:1;
h3{
    font-size:14px;
}

    min-width:300px;

    display:flex;
    flex-direction:column;
    gap:8px;
}


/* =======================================================
   TEXTOS
   ======================================================= */

h1,h2,h3{
    margin-bottom:3px;

    font-weight:normal;

    text-transform:uppercase;

    letter-spacing:-0.4px;
}

h3{
    font-size:16px;
}



/* =======================================================
   ENLACES
   ======================================================= */

a{

    color:#10FF91;

    font-size:18px;

h3
    text-decoration:none;
}

a:hover{

    text-decoration:underline;
}


/* =======================================================
   RUTA DE NAVEGACIÓN
   ======================================================= */

.ruta{
h3{
    font-size:16px;
}

    margin-bottom:3px;

    opacity:0.8;

    border-bottom:3px dashed #0D0C1D;

    padding-bottom:3px;
}


/* =======================================================
   DETAILS / SUMMARY
   ======================================================= */

details{

    margin-bottom:3px;
}

summary{

    cursor:pointer;

    padding:3px;

    border:3px solid #0D0C1D;

    background:#080522;
}


/* =======================================================
   EFECTO TERMINAL pv -qL 10
   ======================================================= */

.efecto-terminal{

    overflow:hidden;

    white-space:nowrap;

    width:0;

    animation:
        escribir 10s steps(120,end) forwards,
        cursor 0.7s step-end infinite;

    border-right:3px solid #3399FF;
}

@keyframes escribir{

    from{
        width:0;
    }

    to{
        width:100%;
    }
}

@keyframes cursor{

    50%{
        border-color:transparent;
    }
}


/* =======================================================
   IMÁGENES
   ======================================================= */

.imagen-box{

    text-align:center;
}

.imagen-box img{

    width:100%;

    max-width:320px;

    height:auto;

    border:3px solid #0D0C1D;

    image-rendering:auto;

    transition:0.3s;
}


/* =======================================================
   EXPANSIÓN SIMPLE
   ======================================================= */

.imagen-box img:hover{

    transform:scale(1.03);
}


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

@media screen and (max-width:700px){

    .contenedor-general{

        flex-direction:column;
    }

    .menu-lateral{

        width:100%;
    }
   
    h3{
        font-size:12px;
    }

}


/* =======================================================
   ESTÉTICA TERMINAL
   ======================================================= */

::selection{

    background:#000034;

    color:#3399FF;
}