@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*{
    margin: 0px;
    padding: 0px;
}

.flex-container{
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.flex-container div{
    padding: 25px;
    background-color: #29396d;
    width: 850px;   
    
}
.flex-container div h2{
    margin-top: 10px;
    font-family: 'Roboto', sans-serif;
    color: yellow;
    font-size: 2.5rem;
}
.flex-container div h3{
    margin-top: 20px;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 2rem;
}
.flex-container div h4{
    margin-top: 20px;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 2.5rem;
}
.flex-container div h5{
    margin-top: 20px;
    font-family: 'Roboto', sans-serif;
    color: white;
    font-size: 1.5rem;
}
.flex-container input{
    font-size: 2rem;
    height: 60px;
    padding: 10px;
}

/*Formulario de inscripción*/
.principal {
    width: 890px;
    padding: 20px;
    background-color: #e7e7e7;
    text-align: left;
}
.principal h1{
    font-size: 1.7rem;
    text-align: center;
}
.principal table {
    font-family: 'Roboto', sans-serif;
    font-size: 1.5rem;
}
.principal table input{
    font-size: 1.5rem;
    width: 500px;

}
.principal table td, p{
    padding-bottom: 15px;
    font-size: 1.2rem;
    font-family: Roboto, Arial;
}
.principal table input[type='submit']{
    	width: 200px;
	height: 60px;
	color:#fff;
	margin-top: 25px;
        margin-bottom: 10px;
	background: #144c83;
	background: radial-gradient(#931443, #ea2d2d);
	font-size: 1.6rem;
	border: 0;
        cursor:pointer;
}
.principal table input[type='button']{
    	width: 200px;
	height: 60px;
	color:#fff;
	margin-top: 25px;
        margin-bottom: 10px;
	background: #144c83;
	background: radial-gradient(#144c93, #2da8ea);
	font-size: 1.6rem;
	border: 0;
        cursor:pointer;
}
.principal table input[type='button']:hover{
	background: linear-gradient(#2da8ea, #144c93);
	color:#e7e7e7
}
.principal table input[type="submit"]:hover{
	background: linear-gradient(#ea2d2d, #931443);
	color:#e7e7e7
        cursor:pointer;
}
input[type='file'], input[type='submit'],  input[type='button']{
    	width: 550px;
	height: 75px;
	color:#fff;
	margin-top: 25px;
        margin-bottom: 10px;
	background: #144c83;
	background: radial-gradient(#144c93, #2da8ea);
	font-size: 1.6rem;
	border: 0;
}
.principal table select{
    	width: 100px;
	height: 40px;
	color:#0a0a0a;
	margin-top: 25px;
        margin-bottom: 10px;
	font-size: 1.3rem;
        text-align: center;
	
}


.tarjetaingreso{
    background-color: #1f344d;
    padding: 40px;
    width: 750px;
    height: 300px;
}
.tarjetalogo{
    float:left;
    margin-right: 40px;
    height: 260px;
}
.tarjetatexto{
    color: white;
}
.tarjetatexto P{
    font-size: 18px;
    font-family: Arial;
    
}
.tarjetaingreso h5{
    font-size: 90px;
    font-family: Arial;
    color: #00b1f6;
}
.nota{
    background-color: #bfcdff;
    padding: 24px;
    font-family: Arial;
}
/*Pantallas smartphones*/
@media only screen and (min-width:400px) and (max-width:900px){
    .principal p{
        font-size: 1.5rem;
        color:blue;
    }
    
    .principal table input{
        font-size: 1.9rem;
        width: 500px;
        }
    .principal table{
        font-size: 1.6rem;
        color: blue;
    }
    .principal table input[type='button'], table input[type='submit']{
    	width: 250px;
	height: 80px;
	color:#fff;
	margin-top: 25px;
        margin-bottom: 10px;
	background: #144c83;
	background: radial-gradient(#144c93, #2da8ea);
	font-size: 1.7rem;
	border: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

}