body {
    display         : flex;
    flex-direction  : column;
    background-image: linear-gradient(rgb(30, 204, 204), rgb(10,10,10));
    height          : 100vh;
}

header {
    padding-top    : 10px;
    padding-bottom : 15px;
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    width          : 420px;
}

header>button {
    background-color: rgb(40, 87, 189);
    color           : white;
    width           : 200px;
    height          : 50px;
    text-decoration : none;
    text-transform  : uppercase;
    text-align      : center;
    border          : none;
}

header>button:hover {
    cursor          : pointer;
    background-color: green;
}

div.main {
    width           : 430px;
    height          : 450px;
    background-color: white;
    box-shadow      : 0 0 10px rgba(0, 0, 0, 0.5);
}

#login {
    width           : 430px;
    height          : 250px;
    background-color: white;
    box-shadow      : 0 0 10px rgba(0, 0, 0, 0.5);
}

div.login {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
}

#login>div {
    padding-top: 20px;
}

div {
    margin        : auto;
    padding-bottom: 15px;
    padding-left  : 10px;
    color         : black;
}

input {
    width      : 400px;
    height     : 40px;
    text-indent: 10px;
    margin-top : 5px;
    font-size: 13pt;
}

input:invalid {
    border: 1px solid red;
}

input:valid {}

input:focus {
    outline: none;
}

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display           : none;
}

button:disabled {
    background-color: rgb(100, 105, 100);
}

button:disabled:hover {
    background-color: rgb(100, 105, 100);
}

button.button {
    margin          : auto;
    background-color: rgb(6, 160, 6);
    font-size       : 17pt;
    color           : white;
    width           : 200px;
    height          : 50px;
    border          : none;
    border-radius   : 5px;
    margin-left     : 10px;
}

button.button:hover {
    cursor          : pointer;
    background-color: green;
}

button.register {
    margin          : auto;
    background-color: rgb(6, 160, 6);
    font-size       : 14pt;
    color           : white;
    height          : 50px;
    border          : none;
    border-radius   : 5px;
    margin-left     : 0px;
}

button.register:hover {
    cursor          : pointer;
    background-color: green;
}

button.auth {
    margin          : auto;
    background-color: rgb(35, 100, 204);
    font-size       : 14pt;
    color           : white;
    width           : 180px;
    height          : 50px;
    border          : none;
    border-radius   : 5px;
    padding-right   : 10px;
}

button.auth:hover {
    cursor          : pointer;
    background-color: rgb(32, 85, 172);
}

img {
    margin: auto;
    width : 420px;
    height: auto;
}