/*Colores*/
:root {
    --adown: #3771d754;
    --rojo: #9c0312;
    --azul: #1d3968;
    --rdown: #c11627;
    --gris: #515151;
}

/*Reset*/
* {
    margin: 0;
    padding: 0;
    /*box-sizing: border-box;*/
    font-family: 'Times New Roman', Times, serif;
}

/* Main */
main {
    /*Tamaño de Altura*/
    height: auto;
    padding: 20px 10px;
    position: relative;
    min-width: 660px;
    display: block;
    align-items: center;
}

main .container {
    height: auto;
    width: 100%;
    /*Fondo del conejo*/
    background-image: url("../img/fondo.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

main .container label,
main .container input {
    font-size: 23px;
    padding: 1vh;
    text-align: center;
}

main .container label {
    background-color: white;
    height: auto;
}

main fieldset {
    border: None;
}

main .titulo {
    font-size: 50px;
    margin-bottom: 3vh;
    text-align: center;
    background-color: white;
}

main .correo {
    display: flex;
    margin: 5vh 0;
}

main .containerNombre {
    display: flex;
}

main .nombre {
    display: flex;
    width: 30%;
}

main .nombre input {
    width: 65%;
    margin-right: 1vh;
}

main .apellidos {
    display: flex;
    align-items: center;
}

main .apellidos input {
    width: 24%;
    margin-right: 3vh;
}

main .datos {
    display: flex;
    margin: 5vh 0;
}

main .date,
main .genero {
    display: flex;
}

main .genero .len {
    margin-left: 46vh;
}

main .school {
    display: flex;
}

main .habilidad,
main .liebre {
    display: flex;
}

main .school .len {
    margin-left: 14.5vh;
}

main .blodN,
main .blod,
main .len {
    font-weight: bold;
}

main .back {
    width: 10%;
    margin: 30px 529px 0;
}

main .btn {
    margin: 40px 520px 0;
}

main .btn,
main .back {
    background-color: var(--rojo);
    border-radius: 10px;
    border: 2px solid black;
}

main .btn,
main .back a {
    color: white;
    text-align: center;
    text-decoration: none;
}

main .botones input,
main .back h1 {
    font-size: 5vh;
}

main .botones :hover,
main .back:hover {
    color: black;
    background-color: white;
    box-shadow: 0 0 5px 5px black;
    border-radius: 10px;
}

main .back :hover {
    color: black;
}

/*1356px ONLY*/
@media screen and (max-width: 1357px) {
    main .back {
        width: 10%;
        margin: 30px 533px 0;
    }
}
/*ONLY*/

/*Responsive 'Main'{769px}*/
@media screen and (max-width: 1000px) {

    /*Main*/
    main {
        width: 100%;
        height: auto;
        padding: 25px 13px;
    }

    main fieldset {
        display: block;
        width: 100%;
        justify-items: start;
    }

    main fieldset div {
        margin-top: 5vh;
    }

    /*MODIFICACIÓN DE NETO*/
    main .blodN,
    main .Nblod,
    main .datos,
    main .school {
        display: block;
    }

    main .titulo {
        width: auto;
    }

    main .containerNombre {
        display: block;
    }

    main .nombre input {
        width: auto;
    }

    main .apellidos {
        display: flex;
        padding-left: 0;
    }

    main .apellidos label {
        width: 12%;
    }

    main .apellidos input {
        width: 25%;
    }

    main .genero .len {
        margin-left: 0;
    }

    main .school .len {
        margin-left: 0;
    }

    main .blodN,
    main .blod,
    main .len {
        border: 2px solid black;
    }

    main .habilidad label {
        align-content: center;
    }

    main .btn {
        margin: 15px 0 0 315px;
    }

    main .back {
        width: 15%;
        margin: 20px 0 0 318px;
    }
}

/*Responsive 'Header' {430px}*/
@media screen and (max-width: 550px) {

    /*Main*/
    main {
        padding: 12px;
        margin: 0;
    }

    main .container {
        height: auto;
        width: 100%;
    }

    main .blod {
        width: auto;
    }

    main .apellidos label {
        width: 16%;
    }

    main .apellidos input {
        width: 50%;
    }

    main .btn {
        margin: 5px 0 0 255px;
    }

    main .back {
        margin: 25px 274px 0;
        width: 25%;
    }
}