@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&display=swap');
body {
    background-color: beige;
    margin: 0;
}

* {
  box-sizing: border-box;
}

#faq-main {
    column-count: 3;
    column-gap: 1rem;
    column-rule: 5px solid brown;
}

#form-main {
    display: flex;
    flex-flow: column;
    align-items: center;
}

#banner {
    width: 100%;
    height: auto;
}

div.labelinput {
    display: flex;
    flex-flow: row wrap;
    margin: 0.5rem 0;
    width: 90%;
}

div.labelinput label {
    width: 30%;
}

div.labelinput input {
    width: 70%;
}

fieldset {
    border: 2px solid brown;
    margin: 0.5rem;
}

fieldset.pinfo {
    display: flex;
    flex-flow: column;
}

table {
    border: 2px solid brown;
    border-collapse: collapse;
}

th, tr, td {
    border: 0;
    margin: 0;
    padding: 0.2rem;
}

th:nth-child(even), tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
    background-color: bisque;
}

h1 {
    color: goldenrod;
    text-align: center;
    letter-spacing: 0.175rem;
    text-decoration-line: overline underline;
    font-family: 'Edu AU VIC WA NT Hand', cursive;
    font-variant: small-caps;
}

p {
    padding: 0.875rem;
    margin: 0;
    text-align: center;
    text-indent: 1.2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2, h4 {
    font-variant: small-caps;
    padding: 0.3rem 0.875rem;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: salmon;
}

nav ul li {
    text-decoration: none;
    text-align: center;
    padding: 0.6rem;
}

nav ul li a {
    text-decoration: inherit;
    color:black;
}

nav ul li:hover {
    background-color: bisque;
}

.odd {
    background-color: blanchedalmond;
}

.even {
    background-color: #f4ffcd;
}

p.odd, p.even {
    margin: 0;
    padding: 0.6rem;
}

p.odd a, p.even a {
    text-decoration: none;
    color:brown;
}

p.odd a:hover, p.even a:hover {
    background-color: burlywood;
}

#container {
    margin: 0.875rem auto;
    padding: 0;
    width: 90%; 
    border: 10px solid brown;
    box-shadow: 10px 10px 5px 5px #00000050;
}

img.shadowmargin {
    max-width: 90%;
    height: auto;
    box-shadow: 10px 10px 5px 5px #00000050;
    margin: 0 0.875rem;
}

img.left  {
    float:left;
}

img.right  {
    float:right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

footer p, footer a {
    background-color: brown;
    color: white;
    padding: 0.3rem;
}

@media screen and (max-width: 600px) {
    nav ul {
        flex-direction: column;
        align-items: stretch;
    }

    #container {
        width: 100%;
        margin: 0;
        border: none;
        box-shadow: none;
    }

    div.labelinput input {
        width: 100%;
    }
}