/* =========================
   GLOBAL STYLES (entire page)
   ========================= */

/* This applies to the whole page */
body {
    font-family: Arial, Helvetica, sans-serif; /* Sets default font */
    margin: 0; /* Removes default browser spacing */
    padding: 0;
    background-color:006648;
    color: white;
} 
html, body {
    height: 100%;
}

main {
    flex: 1;
}
/* =========================
   WRAPPER (main container)
   ========================= */

/* # is used for IDs (only ONE per page) */
#wrapper {
    width: 95%; /* Makes content not stretch full screen */
    margin: 0 auto; /* Centers the content */
    background-color: #006648;
    padding: 20px;
       min-height: 100vh;
       display: flex;
    flex-direction: column;
}

/* =========================
   HEADER
   ========================= */

header {
    background-color:#e66ec0; /* WEIRD COLOR CHANGE */ 
    color: white; /* White text */
    padding: 30px;
}

/* Style the main heading */
header h1 {
    margin: 0; /* Removes extra space */
}

h2 {
    font-size: 75px;
}

/* =========================
   NAVIGATION
   ========================= */

nav {
    margin-top: 15px;
}

/* Style links inside nav */
nav a {
    color: white;
    text-decoration: none; /* Removes underline */
    margin-right: 15px;
}

/* Hover effect when mouse is over links */
nav a:hover {
    text-decoration: underline;
}

/* =========================
   MAIN CONTENT
   ========================= */

main {
    display: flex; /* Places section and aside side-by-side */
    margin-top: 20px;
}

/* Main section content */
main section {
    flex: 3; /* Takes more space */
    padding: 10px;
}

/* Sidebar */
aside {
    flex: 1; /* Smaller width than section */
    background-color: #eaeaea;
    padding: 10px;
    margin-left: 10px;
}

/* =========================
   EXTRA SECTION (below main)
   ========================= */

section {
    margin-top: 20px;
    padding: 10px;
    background-color: #006648;
}

/* =========================
   FOOTER
   ========================= */

footer {
    margin-top: 20px;
    padding: 15px;
    background-color:#e66ec0;
    color: white;
    text-align: center;
}