@font-face {
    font-family: 'Montserrat';
    src: url('/static/Montserrat-Regular.ttf') format('truetype');
    font-weight: 900;
}


body{
    font-family: Montserrat;
    margin: 0;
    background-color: #eee;
    
}


div , input , form{
    box-sizing: border-box;
}
/*formulario en movil*/
.contenedor-principal{
    container-type: inline-size ;
    container-name: contenedor;
    padding: 20px;
}

.contenedor{
    min-width: 300px;
    max-width: 500px;
    margin: auto;
    margin-top: 150px;
    color: #fff;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    text-transform: capitalize;
    border: 1px solid #222;
    
}

input{
    width: 100%;
    padding: 10px 6px;
    margin-bottom:20px ;
    border-radius: 10px;
    border: none;
    font-family: inherit;
    border: 1px solid #222;
}

input[type="submit"]{
    background: #fff;
    margin-top: 10px;
    transition: background .2s ;

}
input[type="submit"]:hover{
    background-color: #222;
    color: #fff;
    transition: background .2s ;
}

label{
    line-height:2.1;
}
h1{
    text-align: center;
    font-size: 40px;
    color: #222;
}

/*Formulario en escritorio*/
@container contenedor (min-width: 720px) {
    .contenedor{
        max-width: 1000px;
        min-width: 700px;
        height: 500px;
        display: flex;
        justify-content: space-between;
        padding: 0;
    }
    form{
        width: 600px;
        margin: 50px;
    }
    .contenedor-imagen{
        background-image: url("logo-inicio.png");
        background-size:contain;
        background-position:center;
        background-repeat: no-repeat;
        width: 80%;
        border-top-left-radius:20px;
        border-bottom-left-radius: 20px;
        text-align: center;
        border-right:1px solid #222 ;
    }
}