:root{

    --primary:#C3D69B;
    --primary-dark:#9AC13B;

    --background:#F3F3F3;
    --border:#D5D5D5;

}

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

body{

    font-family:Arial, Helvetica, sans-serif;
    background:var(--background);
    color:#444;

    min-height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

}


.container{

    width:100%;
    max-width:500px;

    margin:auto;

    padding:20px;

}

.card{

    width:500px;
    max-width:100%;

    background:#FFF;

    border:1px solid var(--border);
    border-radius:3px;

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

    padding:30px;

}

.card h2{

    color:var(--primary-dark);

    text-align:center;

    margin-bottom:15px;

}

.card p{

    color:#666;

    text-align:center;

    line-height:1.5;

    margin-bottom:25px;

    font-size:14px;

}


.logo{

    text-align:center;

    margin-bottom:20px;

}

.logo img{

    width:500px;

    max-width:80%;

}

.alert{

    padding:15px;

    margin-bottom:20px;

    border:1px solid #C62828;

    background:#FDECEC;

    color:#C62828;

    border-radius:3px;

}

input[type="text"]{

    width:100%;

    padding:12px;

    border:1px solid #CCC;

    border-radius:3px;

    font-size:15px;

    outline:none;

}

input[type="text"]:focus{

    border-color:var(--primary);

}

button{

    width:100%;

    padding:12px;

    border:none;

    border-radius:3px;

    background:var(--primary);

    color:#FFF;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

}

button:hover{

    background:var(--primary-dark);

}

@media(max-width:600px){

    .card{

        padding:20px;

    }

}