/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* PAGE */

body{
font-family:Arial, Helvetica, sans-serif;
background:#dcdcdc;
}

/* CENTER CONTAINER */

.login-container{
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}

/* LOGIN BOX */

.login-card{

width:320px;

background:#ffffff;

border:1px solid #999;

box-shadow:0 2px 5px rgba(0,0,0,0.2);

padding:25px;

text-align:center;

}

/* LOGO */

.logo{

font-size:40px;
font-weight: 900;
margin-bottom:10px;
color: #cc0000;

}

/* TITLE */

.login-card h2{

font-size:20px;

margin-bottom:20px;

color:#333;

}

/* ERROR */

.error{

background:#ffdede;

color:#cc0000;

padding:8px;

border:1px solid #cc0000;

margin-bottom:15px;

font-size:14px;

}

/* FORM */

.login-form input{

width:100%;

padding:8px;

margin-bottom:12px;

border:1px solid #999;

font-size:14px;

}

/* BUTTON */

.login-form button{

width:100%;

padding:9px;

background:#008000;

color:#000000;

border:none;

font-size:15px;

font-weight:bold;

cursor:pointer;

}

.login-form button:hover{

background:#4a4802;
color: #ffffff;

}

/* MOBILE */

@media (max-width:480px){

.login-card{
width:90%;
}

}