html {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}

#html_login {
    background: rgb(86,96,31);
    background: linear-gradient(31deg, rgba(86,96,31,1) 0%, rgba(250,0,106,1) 100%); 
}

#html_register {
    background: rgb(96,73,31);
    background: linear-gradient(31deg, rgba(96,73,31,1) 0%, rgba(0,80,250,1) 100%); 
}

header {
    border-bottom: white 2px solid;
    background-color: rgba(0, 0, 0, 0.2);
    font-size: 20pt;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    transition: ease-in-out 0.4s;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
}

header:hover {
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: rgba(0, 0, 0, 0.3);
    transition: ease-in-out 0.4s;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
}

.header-text {
    margin: auto;
}

h2 {
    margin-top: 40px;
    color: white;
}

a {
    text-decoration: none;
    color: rgb(0, 47, 109);
    transition: ease-in-out 0.4s;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
}

a:hover {
    color: rgb(181, 213, 255);
    transition: ease-in-out 0.4s;
    -webkit-transition: ease-in-out 0.4s;
    -moz-transition: ease-in-out 0.4s;
    -ms-transition: ease-in-out 0.4s;
    -o-transition: ease-in-out 0.4s;
}