:root {
    --site-color-1: #1C1C1C;
    --site-color-2: #48ACF0;
    --site-color-3: #558564;
    --site-color-4: #379634;
    --site-color-5: #ECEBE4;

}

* {
    background-color: var(--site-color-1);
}

body,
main,
div[class^="container"] {
    background-color: rgba(0, 0, 0, 0) !important;
}

.semi-trans {
    background-color: rgba(28, 28, 28, .60) !important;
}


.trans {
    background-color: rgba(0, 0, 0, 0) !important;
}

.pagespan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: 'https://sidneyraabe.github.io/FE_website/images/flerf.png';
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


p,
li,
label {
    font-family: 'Noto Sans Display', Arial, Helvetica, sans-serif;
    color: var(--site-color-5);
}

#site-top-navbar {
    background-color: var(--site-color-1);
    display: flex;
    font-family: 'Nova Square', sans-serif, Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 5rem !important;
    text-decoration: underline;
}

h1,
h2,
h3,
.title-font,
i {
    font-family: 'Nova Square', sans-serif, Arial, Helvetica, sans-serif;
    color: var(--site-color-5);
}

.nav a {
    color: var(--site-color-5);
    transition: color 0.5s ease;
    font-family: 'Nova Square', sans-serif, Arial, Helvetica, sans-serif;

}

.nav a:hover {
    color: var(--site-color-4);
}

.nav a.active:hover {
    color: var(--site-color-1);
}

#submit {
    background-color: var(--site-color-3) !important;
}

input,
textarea {
    background-color: var(--site-color-1) !important;
    color: var(--site-color-5) !important;
}

hr {
    border-color: var(--site-color-5) !important;
}

footer {
    padding: 0 !important;
    margin-bottom: 0px !important;
    bottom: 0;
    width: auto;
    background: rgba(0, 0, 0, 0) !important;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}