:root{
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #ffc107;
    --secundario: #93d4db;
    --gris: #757575;
    --anaranjado: #d46515;
}
/*GLOBALES*/
html{
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-snap-type: y mandatory;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body{
    font-size: 16px;  /*1rem = 10 px pero mejor adaptabilidad*/
    font-family: "Krub", sans-serif;
    background-color: aliceblue;
    margin: 0;
    padding: 0;
    /*background-image: url("imagenes/esferadecolores.jpg");*/
    background-image: url(imagenes/descargar.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: sans-serif;
    height: 100vh;
    width: 100%;
    }



.ok {
        text-align: center;
        width: 100%;
        padding: 12px;
        background-color: #1e6;
        color: #fff
    }
    


    
    .loginbox{
        width: 320px;
        height: 420px;
        background: #00000060;
        color: rgb(40, 177, 227);
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        padding: 70px 30px;
        border-radius: 1rem;
    }
    .avatar{
                width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        top: -50px;
        left: calc(50% - 50px);
    }
    .loginbox h1{
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 22px;
            }
            .loginbox label{
                 margin: 0;
        padding: 0;
        font-weight: bold;
        display: block;
            }
            .loginbox input{
                width: 100%;
                margin-bottom: 20px;
            }
        /*.loginbox input[type="text"],
            .loginbox input[type="password"]{
                border: none;
                border-bottom: 1px solid #fff;
                background-color: transparent;
                outline: none;
                height: 40px;
                color: #fff;
                font-size: 16px;
                
            }*/
            .loginbox input[type="submit"]{
                border: none;
                outline: none;
                height: 48px;
                font-size: 18px;
                border-radius: 20px;
            }
            .loginbox a{
                text-decoration: none;
                font-size: 12px;
                line-height: 20px;
                color: darkgray;
            }
            .loginbox a:hover{
                color: #fff;
            }
            .bad {
                position: absolute;
                bottom: 3%;
                text-align: center;
                width: 100%;
                padding: 12px;
                background-color: #a22;
                color: #fff;
                
            }