* {

    box-sizing: border-box;
    user-select: none;

}

body    {

    margin: 0;
    border: 0;
    background-color: rgb(18, 8, 8);
    color: white;
    height: 100vh;
    min-height: 550px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;

}

#practicas   {

    position: absolute;
    top: 10px;
    left: 10px;

    padding: 2px;

    background-color: rgb(255, 217, 0);
    color: black;

    border: 2px solid red;
    border-radius: 5px;

    text-decoration: none;
    font-style: normal;
    font-size: 150%;

}

#red    {

    width: 850px;
    height: 80%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;

    border: 3px solid red;
    border-radius: 8px;

}

#ayuda  {

    width: 100%;
    height: 15%;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    align-content: center;

}

.boton  {

    width: 20%;
    height: 80%;
    
    background-color: rgb(7, 11, 44);
    color: rgb(255, 255, 255);
    border: 2px solid red;
    border-radius: 8px;

    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out

}

.boton:hover    {

    background-color: rgb(58, 58, 58);
    color: rgb(255, 57, 57);

}

#display    {

    width: 55%;
    height: 100%;
    padding-top: 3px;

}

.texto  {

    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

}

#simulacion {

    width: 100%;
    height: 85%;

    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;

}

canvas  {

    border: 3px solid red;
    border-radius: 8px;

}

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

    #practicas   {

        position: inherit;
        margin-bottom: 8px;
    
    }

    #red    {

        width: 98%;
        min-width: 250px;

    }

    #ayuda  {

        flex-wrap: wrap;

    }

    .boton  {

        width: 48%;
        height: 35px;

        margin-top: 8px;

    }

    #display    {

        width: 100%;
        height: 40px;
        padding-left: 3%;
        margin-top: 3px;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

    }

    #nodos, #tiempo  {

        width: 50%;

    }

    #info   {

        width: 100%;

    }

    #red, #ayuda, #simulacion    {

        height: auto;

    }

    canvas  {

        width: 95%;
        margin-bottom: 8px;

    }
    
}

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

    #nodos, #tiempo  {

        width: 100%;

    }

    #display    {

        height: auto;

    }

    .texto  {

        font-size: 3vw;

    }

}

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

    .texto  {

        font-size: 7.512px;

    }
    
}