/*
 * Global styles
 */
body {
    background-color: #252433;
    display: grid;
    margin: 0;
    font: 500 100%/1.5 system-ui;
}
body, a, a:visited {
    color: #D5DEED;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/*
 * Media queries
 */
@media only screen and (max-device-width: 480px) {
    body {
        font-size: 4rem;
    }
    footer > section {
        flex-direction: column;
        text-align: center;
    }
}

/*
 * Top/nav/header
 */
nav {
    background-color: #02894B;
    padding: 1.15rem 0;
}
header li,
footer li {
    list-style-type: none;
}
header hgroup {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
header h1 {
    font-size: 3rem;
}
nav ul {
    display: flex;
    margin: 0;
}
nav ul,
header hgroup {
    padding-left: 1.65rem;
    padding-right: 1.65rem;
}
nav li {
    padding: 0 0.7rem;
}
nav ul li:last-child {
    margin-left: auto;
}

/*
 * Main content
 */
main {
    background-color: #D5DEED;
    color: #252433;
    display: grid;
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
}

section:nth-child(odd) img  {
    float: left;
    margin-right: 2.5rem;
}
section:nth-child(even) img {
    float: right;
    margin-left: 2.5rem;
}
section img {
    height: 17rem;
    margin-bottom: 1rem;
}

main hgroup {
    color: #02894B;
}
main hgroup h3 {
    font-size: 2rem;
    margin-top: 1.2rem;
}

main, footer {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
}

/*
 * Footer styles
 */
footer {
    padding-top: 1rem;
}
footer h5 {
    text-decoration: underline;
}
footer p {
    text-align: center;
    opacity: 0.63;
    font-size: 0.7rem;
    padding: 1rem 0;
}
footer > section {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2rem;
}
footer section > div *:last-child {
    font-size: 0.7rem;
}
footer #payment {
    opacity: 0.5;
}
footer section *:first-child {
    margin-top: 0;
}
footer section *:last-child {
    margin-bottom: 0;
}
footer section div {
    /* border: 1px solid black; */
    border-radius: 5px;
    padding: 1rem;
}
footer section ul {
    padding-left: 0;
}
