:root {
--themeDarkBlue: #192F5B;
--themeBlue: #1D65A6;
--themeLightBlue: #72A2C0;
--themeGreen: #00743F;
--themeYellow: #F2A104;
}
.font-yellow {
color: yellow;
}
.bc-grey {
background-color: grey;
}
.bc-red {
background-color: red;
}
.bc-yellow {
background-color: lightYellow;
}
.bc-blue {
background-color: lightBlue;
}
.bc-green {
background-color: lightGreen;
}
.container.loginForm {
background-color: var(--themeBlue);
}
.container.loginForm .containerWrapper {
background-color: var(--themeDarkBlue);
}
.container.loginForm p {
color: var(--themeYellow);
}
.container.loginForm button {
background-color: var(--themeYellow);
color: var(--themeDarkBlue);
}
.container.loginForm .alert p {
color: white;
}
.container.loginForm .linkWrapper.register p {
color: white;
}



.container.loginForm {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.container.loginForm .containerWrapper {
min-height: 300px;
padding: 50px 50px;
text-align: center;
border-radius: 25px;
}
.container.loginForm .titleWrapper {
padding-bottom: 20px;
}
.container.loginForm .titleWrapper p {
font-weight: bold;
font-size: 1.5em;
}
.container.loginForm .inputWrapper {
padding: 10px 0;
}
.container.loginForm .inputWrapper input {
padding: 6px 5px;
width: 75%;
text-align: center;
border-radius: 8px;
}
.container.loginForm .inputWrapper.alert {
padding: 0;
}
.container.loginForm .buttonWrapper.login {
padding-top: 40px;
}
.container.loginForm .buttonWrapper.login button {
cursor: pointer;
font-weight: bold;
padding: 10px 20px;
border-radius: 5px;
}
.container.loginForm .linkWrapper.register {
padding-top: 15px;
}



@media only screen and (max-width: 600px) {

}
.registerFormContainer {
background-color: var(--themeBlue);
}
.registerFormContainer .boxWrapper {
background-color: var(--themeDarkBlue);
}
.registerFormContainer p {
color: var(--themeYellow);
}
.registerFormContainer button {
background-color: var(--themeYellow);
color: var(--themeDarkBlue);
}
.registerFormContainer .inputWrapper.alert p {
color: white;
}
.registerFormContainer .registerFormBox .linkWrapper.login p {
color: white;
}



.registerFormContainer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.registerFormContainer .boxWrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
min-height: 300px;
min-width: 60%;
text-align: center;
padding: 50px 0;
border-radius: 25px;
}
.registerFormContainer .promotionBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.registerFormContainer .promotionBox .titleWrapper p {
font-weight: bold;
font-size: 1.5em;
}
.registerFormContainer .promotionBox .descriptionWrapper {
padding: 50px 20px;
}
.registerFormContainer .registerFormBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.registerFormContainer .registerFormBox .inputWrapper {
padding: 10px 0;
}
.registerFormContainer .registerFormBox .inputWrapper input {
padding: 6px 5px;
width: 75%;
text-align: center;
border-radius: 8px;
}
.registerFormContainer .inputWrapper.alert {
padding: 0;
}
.registerFormContainer .buttonWrapper.register {
padding-top: 40px;
}
.registerFormContainer .buttonWrapper.register button {
cursor: pointer;
font-weight: bold;
padding: 10px 20px;
border-radius: 5px;
}
.registerFormContainer .linkWrapper.login {
padding-top: 15px;
}



@media only screen and (max-width: 600px) {

}
.error.page {
background-color: var(--themeDarkBlue);
color: var(--themeYellow);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.error.page .error.container {

}
.font-s {
font-size: 1rem;
}

.font-m {
font-size: 1.5rem;
}

.font-l {
font-size: 2rem;
}

@media only screen and (max-width: 600px) {

.font-s {
font-size: 1rem;
}


}
* {
margin: 0;
padding: 0;
border: 0;
font-family: 'Comfortaa', cursive;
font-size: 16px;
}
html, body {
height: 100%;
}
ul {
list-style-type: none;
margin: 0;
}
a {
text-decoration: none;
cursor: pointer;
}
a:link, a:visited {
color: inherit;
}
input {
border: 1px solid grey;
}
select {
border: 1px solid grey;
}
.nav.container {
background-color: var(--themeDarkBlue);
height: 50px;
display: grid;
grid-template-columns: 100px auto 100px;
}
.nav .title {
color: var(--themeYellow);
font-weight: bold;
align-self: center;
justify-self: center;
}
.nav .links {
align-self: center;
justify-self: center;
}
.nav .links a {
color: var(--themeYellow);
display: inline-block;
margin: 10px;
}
.nav .button {
align-self: center;
justify-self: center;
width: 100%; height: 100%;
}
.nav .button form {
width: 100%; height: 100%;
}
.nav .button button {
background-color: var(--themeDarkBlue);
color: var(--themeYellow);
width: 100%; height: 100%;
}
.page.login {
height: 100%;
}
.registerPage {
height: 100%;
}