@charset "utf-8";
*{margin: 0; padding: 0; box-sizing: border-box; border: none;} html, body{width: 100%; height: 100%; display: flex; flex-flow: row wrap;}
aside{
width: 50%;
height: 100%;
background-color: #2A2F5B;
}
.contain{
display: flex;
justify-content: center;
margin-top: 40%;
}
h4{
text-align: center;
}
img{
width: 60px;
height: 60px;
margin: 0 6px 0 0;
}
h4{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 24px;
font-weight: 200;
color: #fff;
}
main{
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
h2{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 22px;
font-weight: 400;
color: #000;
margin: 0 0 12px 0;
}
form{
display: flex;
flex-direction: column;
}
label{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
color: #000;
margin-bottom: -8px;
}
input{
width: 300px;
height: 34px;
margin: 8px 0 8px 0;
border: solid 1px #ccc;
}
input[type="submit"]{
/* width: 150px; */
width: 300px;
height: 40px;
padding: 8px 25px 8px 25px;
background-color: rgba(42, 47, 91, 1.0);
color: #fff;
}
a{
width: 300px;
height: 40px;
padding: 8px 25px 8px 25px;
text-align: center;
line-height: 24px;
text-decoration: none;
background-color: #EEA300;
font-family: Arial, sans-serif;
font-size: 14px;
color: #fff;
}
input[type="submit"]:hover{
cursor: pointer;
background-color: rgba(42, 47, 91, 0.9);
}
@media (max-width: 604px){
aside{
width: 100%;
height: 30%;
background-color: #2A2F5B;
}
.contain{
display: flex;
justify-content: center;
margin-top: 5%;
}
main{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
input[type="submit"]{
width: 300px;
}
body{
height: 55%;
}
}
@media (max-width: 304px){
input{
width: 220px;
}
input[type="submit"]{
width: 230px;
}
}