@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-VariableFont_wght.ttf') format('truetype'),
         url('../fonts/Exo2-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 200-400;
    font-style: normal;
}
body {
    height: 100vh;
    font-family: 'Exo 2',sans-serif;
    font-weight: 200;
    background-color: #F0F0F0;
}
.flex { /* Align everything vertically and horizontally */
    box-sizing:border-box; /* width+height includes borders and padding */
    display:flex;
    flex-flow:column wrap;
    justify-content:center;
    align-items:center;
    text-align:center
}
.login-container {
    background-color: white;
    width: 280px;
    padding: 20px;
    border-radius: 10px;
    margin:5px;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); /* The card has some shadow */
}
.login-container:hover {
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.50),0 2px 10px 0 rgba(0,0,0,0.3);
}

.login-container h2 {
    margin: 10px 0 30px 0;
    font-weight: 300;
}
.login-container input {
    font-family: 'Exo 2',sans-serif;
    padding: 10px;
    margin: 10px 0 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.login-container button {
    font-family: 'Exo 2',sans-serif;
    font-weight: 400;
    width: 100%;
    padding: 10px;
    margin: 20px 0 30px 0;
    background-color: #28a745;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}
.login-container button:hover {
    background-color: #218838;
}