* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

body {
    background-color: #EEE;
    color: #222;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* padding: 8px; */
    /* min-height: 100vh; */
}

#container {
    /* border: 4px solid red; */
    /* margin: 8px; */
    /* padding: 8px; */
    min-height: 100vh;
}

header {
    background-color: #bc5d2e;
    color:  #EEE;
    min-height: 100px;
    padding: 8px;

}

.homepage {
    position: absolute;
    top: 8px;
    right: 16px;
    color: greenyellow;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.homepage:hover {
    color: black;
}

h1 {
    text-align: center;
    font-weight: bold;
    text-shadow: 2px 1px 0px #222;
    letter-spacing: 2px;
    font-size: 36pt;
}

header + nav {
    /* border: 4px solid red; */
    padding: 16px;
  
}

header + nav ul {
    list-style: none; /* removes bullets */
    display: flex; /* make a flexbox container */
    flex-flow: row wrap;
    justify-content: center;
    gap: 8px;

}

header + nav ul > li {
    flex: 0 0 auto; /* grow, shrink, basis */
    margin:12px 0;
    
}

header + nav a {
    border: 2px solid #8eb19d;
    padding: 8px 16px;
    color: #222;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
}

header + nav a:hover {
    background-color: #FFC;
}
main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    gap: 12px;
    padding: 12px;
    
}

main > section {
    border: 2px solid #8eb19d;
    flex: 1 0 40%;
    padding: 8px;
    background-color: #f6efa6;
    min-width: 350px;
}

section h2 {
    font-size: 16pt;
    margin-bottom: 8px;
    text-align: center;
}

section p {
    line-height: 1.4;
}

footer {
    background-color: #bc5d2e;
    color:  #EEE;
    min-height: 100px;
    padding: 8px;
    margin-top: 80px;

}