#navigation {
    margin: 0 auto;
    max-width: 1600px;
    text-align: left;
}


#navigation a,
#navigation a:active,
#navigation a:hover,
#navigation a:link,
#navigation a:visited {
    display: inline-block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    background: none;
}

body.loaded #navigation a,
body.loaded #navigation a:active,
body.loaded #navigation a:hover,
body.loaded #navigation a:link,
body.loaded #navigation a:visited {
    transition: all ease-in-out 0.3s;
}

#navigation a:active,
#navigation a:hover {
    color: #fff;
    text-decoration: underline;
    background-color: #42b5f6;
}

#page-container {
    min-height: 1300px;
}

#page-header {
    padding-top: 50px;
    height: 300px;
    text-align: center;
}

#page-title {
    max-width: 1600px;
    margin: 0 auto;
    font-size: 2rem;
    text-align: center;
}

.container {
    min-width: 300px;
    max-width: 1600px;
    margin: 10px auto;
    padding: 20px 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
}

.dark-area {
    color: #fff;
    background-color: rgba(0, 48, 76, 0.8);
}

.dark-area a,
.dark-area a:active,
.dark-area a:hover,
.dark-area a:link,
.dark-area a:visited {
    color: #fff;
    background: none;
    text-decoration: underline;
}

.dark-area a:active,
.dark-area a:hover {
    color: #fff;
    text-decoration: underline;
}

.dark-area .container {
    background-color: transparent;
}

.padded {
    padding: 20px;
}

.flex-columns {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.flex-columns.space-between {
    justify-content: space-between;
}

.flex-columns.flex-stretch {
    align-items: stretch;
}

.flex-columns.flex-center {
    align-items: center;
}

.flex-columns.flex-start {
    align-items: flex-start;
}

.flex-columns.flex-end {
    align-items: flex-end;
}

@media only screen and (max-width: 700px) {
    body {
        background-size: 40%;
    }
    
    .flex-columns {
        flex-wrap: wrap;
    }
}