@font-face{

    font-family:"helvetica";

    src:url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("woff"),

    url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("opentype"),

    url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("truetype");

}



body {

    background-color: #f5f5f5;

    display: flex;

    flex-direction: column;

    font-family: "helvetica", sans-serif;

    margin: 0; 

    box-sizing: border-box;

    min-height: 100vh;

}



.login-container {

    justify-content: center;

    background-color: white;

    padding: 40px 30px 60px;

    margin: 5em auto;

    width: 18.75em;

    height: 25em;

    line-height: 2;

    border-radius: 8px;

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

}



.login-container form {

    display: flex;

    flex-direction: column;

    align-items: center;

}



.login-container input[type="text"],

.login-container input[type="password"] {

    width: 100%;

    padding: 10px;

    margin: 10px 0;

    border: 1px solid black;

    font-size: 14px;

    box-sizing: border-box;

}



.login-container button {

    width: 100%;

    padding: 10px;

    margin: 8px 0;

    background-color: black;

    color: white;

    border: 1px solid black;

    font-size: 14px;

    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    height: 35px;

}



.login-container button:hover {

    background-color: #333;

}



button[type="reg"], button[type="else"]{

    width: 100%;

    padding: 10px;

    margin: 8px 0;

    background-color: white;

    color: black;

    border: 1px solid black;

    font-size: 14px;

    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    height: 35px;

}



button[type="reg"]:hover {

    background-color: #e0e0e0;

}



button[type="else"]:hover {

    background-color: #e0e0e0;

}



.login-container a {

    color: #777;

    font-size: 12px;

    text-decoration: none;

    margin-top: 10px;

    display: inline-block;

}



.login-container a:hover {

    color: #333;

}



.logo {

    padding: 30px 0 20px;

    margin: 0;

    text-align: center

}