body{

    margin:0;

    min-height:100vh;

    background-image:url("https://aronmg.neocities.org/new-mecca-4k.png");

    background-size:cover;

    background-repeat:no-repeat;

    background-attachment:fixed;

    font-family:Arial, sans-serif;

    display:flex;

    flex-direction:column;

}


html{

    scroll-behavior:smooth;

}


h1, h2{

    font-family:"Audiowide", sans-serif;

}


p{

    font-family:"B612 Mono", monospace;

    font-size:18px;

    line-height:1.6;

}


/* Barra */

nav{

    background:black;

    padding:15px;

    text-align:center;

    position:fixed;

    top:0;

    width:100%;

    z-index:1000;

    box-sizing:border-box;

}


nav a{

    font-family:"B612 Mono", monospace;

    color:white;

    margin:20px;

    text-decoration:none;

}


nav a:hover{

    color:orange;

}


nav h2{

    color:white;

}


/* Contenedor */

.caja{

    background:rgba(0,0,0,0.75);

    width:90%;

    max-width:1250px;

    color:white;

    margin:120px auto 50px;

    padding:20px;

    border-radius:10px;

    text-align:center;

    flex:1;

}


/* Secciones */

section{

    margin-bottom:120px;

    scroll-margin-top:120px;

}


/* Enlaces tipo botón */

.link{

    display:block;

    background:rgba(255,255,255,0.08);

    padding:25px;

    margin:20px;

    border-radius:10px;

    color:white;

    text-decoration:none;

    transition:0.2s;

}


.link:hover{

    background:rgba(255,255,255,0.15);

}


/* Controles de Paint y Pong */

.controles{

    background:rgba(255,255,255,0.05);

    padding:20px;

    margin:20px auto;

    border-radius:10px;

    border:1px solid rgba(255,255,255,0.1);

}


.controles label{

    font-family:"B612 Mono", monospace;

    margin:10px;

}


.controles input{

    margin:10px;

}


.controles p{

    margin:10px;

}


/* Botones */

button{

    background:rgba(255,255,255,0.08);

    color:white;

    border:1px solid rgba(255,255,255,0.15);

    border-radius:8px;

    padding:10px 15px;

    font-family:"B612 Mono", monospace;

    font-size:16px;

    transition:0.2s;

}


button:hover{

    background:orange;

    color:black;

    transform:scale(1.05);

    cursor:pointer;

}


/* Canvas */

canvas{

    display:block;

    margin:20px auto;

    background:black;

    border-radius:10px;

    border:2px solid rgba(255,255,255,0.15);

    max-width:100%;

    height:auto;

    box-shadow:0 0 20px rgba(0,0,0,0.5);

}


canvas:hover{

    transform:scale(1.005);

}


/* Paint */

#estado{

    color:orange;

}


/* Footer */

footer{

    background:black;

    color:white;

    text-align:center;

    padding:20px;

}