@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');

:root {
    --primary-color: #086788;
    --secondary-color: #07A0C3;
    --accent1-color: #F0C808;
    --accent2-color: #FFF1D0;
    --accent3-color: #DD1C1A;
    --heading-font: "Acme";
    --paragraph-font: Georgia, Helvetica, sans-serif
}

html {
    background-color: var(--secondary-color)
}

body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2em;
    font-size: 16px;
}

img {
    max-width: 100%
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--secondary-color)
}

h2, h3, h4, h5, h6 {
text-align: center;
}

h1 {
    color: var(--accent1-color)
}

p {
    font-family: var(--paragraph-font);
    color: black;
    padding: .5em;
}

main p {
    text-indent: 40px;
}

a {
    margin: 1em;
    min-width: 70px
}

.front-heading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.interior {
    background-color: white;
    padding: 1em;
}

header {
    padding: 1em;
    color: var(--accent2-color);
    background-color: var(--primary-color)
}

nav {
    line-height: 3em;
    font-size: 1.2em;
    margin: 0 11em 0 11em;
}

nav>.options {
    display: flex;
    justify-content: space-between;
}

header .button, footer .button {
    background-color: var(--accent3-color);
    border-style: solid;
    border-color: #777777  #333333 #333333 #777777;
    border-width: 2px;
    text-align: center;
    line-height: 1em;
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 7.5px;
}

a:link,
a:visited {
    color: var(--accent2-color);
    text-decoration: none;
}

a:hover {
    color: black;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    grid-gap: 20px;
    padding: 0 1em 1em 1em;
}

.paragraph {
    /* text-align: center; */
    padding: 1em;
}

.paragraph-image {
    justify-self: center;
}

.top-right {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.top-left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.second-right {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.second-left {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.third-right {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.third-left {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.fourth-right {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

.fourth-left {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.left-side p, .left-side h3, .right-side p, .right-side h3 {
    /* text-align: center; */
    padding: 1em;
}

.right-side image, .left-side image {
    justify-self: center;
}

footer {
    display: grid;
    grid-template-columns: 3fr 4fr 4fr 3fr;
    background-color: var(--primary-color);
    align-items: center;
}

footer h3, footer h4 {
    color: var(--accent1-color)
}

.footer-paragraph {
    text-align: center;
    grid-column: 2 / 3;
}

.footer-paragraph>p {
    color: var(--accent2-color);
    margin: 0;
}

.footer-paragraph>h3 {
    margin: 0;
    padding: .5em 0 .5em 0;
}

.feedback {
    text-align: center;
    grid-column: 3 / 4;
}

.feedback>p>a:link, .feedback>p>a:visited {
    color: var(--accent1-color);
    text-decoration: underline;
}

.feedback>p>a:hover {
    color: var(--secondary-color)
}

.card {
    box-shadow: 1px 1px 4px 1px #777777;
    width: 180px;
    justify-self: center;
    background-color: var(--accent2-color);
    margin: 0;
}

.card>.author>h3 {
    margin: 0;
    color: var(--accent3-color);
}

.card p {
    margin: 0;
    text-align: center;
    text-decoration: underline;
    padding: .25em .25em 0 .25em;
    text-indent: 0;
}

.card a {
    margin: 0;
}

.author {
    display: flex;
    justify-content: center;
    padding: 5px;
}

.author p {
    text-decoration: none;
}

form {
    /* Center the form on the page */
    margin: 3em auto;
    width: 25em;
    /* Form outline */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

form li+li {
    margin-top: 1em;
}

label {
    /* Uniform size & alignment */
    display: inline-block;
    width: 12.5em;
    text-align: left;
    padding: .25em;
}

input,
textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* Uniform text field size */
    width: 18.75em;
    box-sizing: border-box;

    /* Match form field borders */
    border: 1px solid #999;
    padding: .3em
}

input:focus,
textarea:focus {
    /* Additional highlight for focused elements */
    border-color: #000;
}

textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;

    /* Provide space to type some text */
    height: 5em;
}

form .button {
    /* Align buttons with the text fields */
    padding: 1.5em 0 0 3em;
    /* same size as the label elements */
}

form button {
    /* This extra margin represent roughly the same space as the space
       between the labels and their text fields */
    margin-left: .5em;
}

#message {
    color: var(--accent2-color);
    text-align: center;
    padding: 1.5em;
    margin: 1em;
    background-color: var(--secondary-color);
}

li {
    margin: .5rem;
    padding: 0 .25rem 0 .25rem;
}

@media screen and (max-width: 1050px) {
    nav {
        margin: 0 5em 0 5em;
    }
}

@media screen and (max-width: 900px) {

    nav>.options {
        display: block;
        justify-content: center;
    }
    nav {
        margin: 0 1em 0 1em;
    }
    footer {
        display: block;
    }
    .card {
        margin: .5em auto .5em auto;
    }
    .feedback>h4 {
        margin: .25em 0 1.5em 0;
    }
}

@media screen and (max-width: 550px) {

    nav>.options {
        display: grid;
    }
    .wrapper {
        display: block;
    }
    form {
        width: 100%;
        padding: 0;
    }
    label {
        width: 100%;
    }
    input,
    textarea {
        width: 100%;
    }
}