@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");

/* Start generic site styling */
:root {
    --faded-text: rgb(121, 121, 121);
    --header-color: #3498db;
}

h1 {
    font-size: 1em;
}

body {
    background-color:aliceblue;
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
}

header {
    background-color: rgb(184, 227, 255);
    display: grid;
    padding: 1em 1em 1em 1em;
    min-height: 2em;
    border-top: 0.3em solid #3498db;
    margin-bottom: 3em;
}

header a {
    text-decoration: none;
    color: #3498db;
    font-weight: bold;
    font-style: normal;
    font-size: 1.2em;
}

header span {
    display: block;
    font-size: 0.5em;
    color: var(--faded-text);
}

section.loginform {
    background-color: white;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 25%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

section.loginform form {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 2em;
    padding-right: 2em;
    min-height: 15em;
}

section.loginform input[type="text"] {
    width: 100%;
    height: 2em;
    margin-bottom: 2em;
    padding: 0;
}

section.loginform input[type="password"] {
    width: 100%;
    height: 2em;
    margin-bottom: 2em;
    padding: 0;
}

section.loginform input[type="submit"] {
    margin-top: 2em;
}


section.loginform label {
    display: block;
}

section.loginform input {
    display: block;
}

.forgot-password {
    color: var(--faded-text);
    text-align: center;
    font-size: small;   
}

.forgot-password a {
    text-decoration: none;
    color: var(--faded-text);
}

.errorlist {
    list-style: none;
    font-style: italic;
    font-size: small;
    padding: 0;
}

h1 {
    padding-left: 2em;
}

p {
    padding-left: 2em;
    margin-bottom: 2em;
}

.messages {
    font-size: small;
    margin-bottom: 2em;
}

@media (min-width: 630px) {
    body {
        max-width: 630px;
        margin-left: auto;
        margin-right: auto;
    }

}