@font-face {
    font-family:'Marlet';
    src: url('../Fonts/martlet.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
header, footer{
    font-family: 'Courier New', Courier, monospace;
}
body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    height: 100vh;
    text-align: justify;
    font-family: 'Marlet', Courier, monospace;
    
}
h2{
    text-align: center;
    text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
}
footer {
    margin-top: auto;
}
table{
    margin: 0 auto;
    text-align: justify;
}
section {
    padding: 1em;
    margin: 1em;
    border: 2px solid rgb(0, 234, 255);
    padding: 10px;
    background-color: #1a1a1a;
}
.Datos li {
    margin-bottom: 10px;
}
aside {
    border: 2px solid rgb(0, 234, 255);
    border-radius: 10px;
    animation: CambiarAzul 2.5s infinite;
    width: calc(3102px/5);
    margin: 0 auto;
    padding: 10px;
}
.MarletSprite{
    background-image: url(../Sprites/Marlet.png);
    width: calc(3102px/20);
    height: 215px;
    margin:0 auto;
    animation: Animacion 2.5s steps(20) infinite;
}
.Datos{
    text-align: center;
    list-style-type: none;
}
h3{
    text-align: center;
    text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
}
/*Animacion para el cuadro pincipal*/
@keyframes Animacion {
    from { background-position: 0}
    to {background-position: -3102px 0; }
}
@keyframes CambiarAzul {
    from {
        border-color: rgb(0, 208, 255);
    }
    to {
        border-color: rgb(4, 0, 255);
    }
}
/*Configuracion Visual del menu*/
#menuOST {
    text-align: center;
    margin: 1em auto;
    padding: 1em;
    border: 2px solid rgb(0, 208, 255);
    border-radius: 10px;
    background-color: #1a1a1a;
    animation: CambiarAzul 2.5s infinite;
    width: 620px;
}

#menuOST h3 {
    font-size: 24px;
    text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5);
}

#infoOST {
    font-size: 18px;
    margin: 10px 0;
    color: #FFFFFF;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

#controles {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#controles button {
    background-color: #1a1a1a;
    border: none;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
    border: 2px solid rgb(0, 234, 255);
    animation: CambiarAzul 2.5s infinite;
    transition: all 1s ease;
}

#controles button:hover {
    color: yellow;
    transition: all 1s ease;
}
/*Escalado de la pantalla*/
@media (max-width: 768px) {
    body {
        flex-direction: column;
        font-size: 14px;
    }

    header, footer {
        font-size: 16px;
    }

    section {
        margin: 0.5em;
        padding: 0.5em;
    }

    aside {
        width: 100%;
        margin: 0.5em auto;
    }

    .MarletSprite {
        display: none;
    }

    #menuOST {
        width: 100%;
        padding: 0.5em;
    }

    #controles button {
        font-size: 16px;
        padding: 8px 16px;
    }
}