*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    
}
:root {
    --color-1--: #39B7CD;
    --color-2--: #34A6BA;
    --color-3--: #3284B1;
    --color-4--: #2F62A8;
    --color-5--: #033346;
    --color-6--: #3CBF7C;
    --color-7--: #3EC62B;
    --color-8--: #7ED957;
    --color-9--: #60D050;
    --color-10--: rgb(19, 98, 216);
    --color_11--: #dbdbdb;
    --headerH: 60px;
}
body{
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: cover;

}
form{
    width: 100%;
    height: 100%;
}
.contenedor{
    width: 100%;
    height: 100%;
    background-color: #f4f4f9;
    display: flex;



    .izquierda{
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 50px;
    }
    
    .titu{
        width: 500px; 
        height: 90px;
        font-size: 40px;
        text-align: left;
    }
    
    .derecha{
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    
        .form{
            width: 70%;
            height: 500px;
         
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 2%; 
            background-color:white;

    
            .titulo{
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-bottom: 5px;
                color:black;      

    
    
    
                input{
                    width: 90%;
                    height: 40px;
                    border-radius: 5px;
                    padding-left: 10px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    border: 1px solid #ccc;
                    margin-top: 10px; /* Espaciado superior para separar el input del label */
                }
      
            }
                   
        }
    }
    
    .mensaje{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    
    
        
        .input {
            width: 90%;
            height: 210px;
            border-radius: 5px;
            padding-left: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border: 1px solid #ccc;
            margin-top: 20px; /* Espaciado superior para separar el input del label */
        }
     
    }
    
    .subtitulo{
        width: 100%;
        padding-left: 7%;
        color:black;  
        margin-top: 10px;
    }
    
    #enviar{
        width: 60px;
        height: 40px;
        background-color: rgb(137, 219, 192);
        color: white;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border: 1px solid #ccc;
        margin-top: 10px; /* Espaciado superior para separar el input del label */
    }
    
    .letra1{
        width: 500px; 
        height: 88px;
        font-size: 20px;

    }
}
          .texto{

                    width: 90%;
                    height: 100px;
                    border-radius: 5px;
                    padding-left: 10px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    border: 1px solid #ccc;
                    margin-top: 10px; /* Espaciado superior para separar el input del label */
                
                }
.subir{
    width: 100px;
    height: 40px;
    background-color: transparent;
    border: solid 2px var(--color-3--);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.subir:hover{
    background-color: var(--color-3--);
    color: white;
    transition: 0.5s;
}
@media (orientation=portrait) {
    .izquierda{
        display: none !important;
    }
    .contenedor{
        flex-direction: column;
    }

    .derecha{
        width: 100% !important;
    }
}