body {
    margin: 10px;
    padding: 0;
    background: gray url('assets/greenbackground.png') ;
    display: flex; 
    flex-direction: column;
    min-height: 100vh;
}

main {
    display: flex;
    margin: 0 10px 20px; 
    width: 95%; 
    flex: 1;
}

header, nav, footer {
    border: 3px solid black; 
    padding: 10px; 
    margin: 10px; 
    width: 95%; 
    position: relative; 
    text-align: center;
}

header {
    background: #BCE2F0;
}

nav {
    background: #FFD699;
    margin: 0 10px 20px; 
}

footer {
    background: #A9D6E5;
    text-align: left;
    white-space: nowrap;
    overflow-x: auto;
}

aside {
    border: 3px solid black; 
    padding: 10px; 
    width: 33%; 
    background: #f5f5f5;
    float: left; 
    margin-right: 20px; 
}

.section-container {
    width: 65%; 
    float: left; 
}

section {
    border: 3px solid black; 
    padding: 8px; 
    margin-bottom: 15px; 
}

.section-1 {
    background: #DDA8DD;
}

.section-2 {
    background: #FFD699;
}

article {
    border: 1px dashed #A9D6E5; 
    padding: 8px; 
    margin: 5px; 
}

.section-container:after {
    content: "";
    display: block; 
    clear: both; 
}

#header-text {
    font: 700 48px "Dancing Script";
    color: #002828;
}

.section-title {
    font: 700 48px "Dancing Script";
    text-align: center;
}

.center-text {
    font: 28px "Dancing Script";
    text-align: center;
}

section p, aside p {
    font: 28px "Roboto";
}

p > strong {
    font: 32px "Dancing Script";
}

p > span {
    font: italic 24px "Roboto";
}

#nav-links {
    font: 18px "Roboto";
}

nav a {
    color: black;
    text-decoration: none;
    margin: 0 10px; 
}

#nav-links a {
    color: #0000FF;
}

.footer-title {
    font: 20px "Dancing Script";
    display: inline; 
    margin-right: 10px; 
}

footer p {
    font: 14px "Roboto";
    margin: 0; 
    display: inline; 
}

footer a {
    color: #663300;
    text-decoration: none;
    margin: 0 10px; 
    display: inline; 
}

header img {
    width: 200px; 
}

aside video {
    width: 75%; 
    border: 2px solid #80D8DD; 
    margin: 10px auto; 
    display: block; 
}

.section-2 article video {
    width: 100%; 
    border: 2px solid #80D8DD; 
    margin: 10px 0; 
}

.image-gallery {
    display: flex; 
    flex-wrap: wrap;
    margin: 5px 0; 
}

aside .image-gallery {
    display: block; 
}

aside .image-gallery img {
    width: 100%; 
    border: 2px solid #FFB6C9; 
    margin: 0; 
    display: block; 
}

.section-1 .image-gallery img, .section-2 .image-gallery img:not(video + * img) {
    width: 33%; 
    height: 150px;
    border: 2px solid #FFB6C9; 
    object-fit: cover;
}

.section-2 article .image-gallery img:where(video + * img) {
    width: 100%; 
    height: 200px;
    border: 2px solid #FFB6C9; 
    margin: 10px auto; 
    display: block; 
}