:root {
    --main-bg-color: rgba(20, 166, 179, 0.8);
    --second-bg-color: rgba(215, 203, 223, 0.8);
    --nav-bg-color: rgba(189, 143, 18, 0.8);
    --main-text-color: rgba(12, 12, 13, 0.8);
    --background-for-odd: rgba(140,234,12,.8);
    --background-for-even: rgba(71, 112, 13, 0.8);
}

* {
    margin: 0;
    padding: 0;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

main,
article,
section,
aside,
h1,
h2,
h3,
h4,
h5,
h6,
nav {
    padding: 2%;
}

html {
    background-image: url(../images/background.jpeg);
    background-color: var(--main-bg-color);
    color: var(--main-text-color);
}

body{
    width: 80%;
    margin: 1% auto;
}

header h1,
header h2 {
    grid-area: header;
    color: rgb(74, 3, 3);
    text-transform: uppercase;
    background-color: var(--second-bg-color);
}

section {
    background-color: var(--main-bg-color);
    border-bottom: medium solid var(--second-bg-color);
    padding: 1% 0;
    text-align: left;
    text-decoration-color: var(--main-text-color);
}
main h1 {
    background-color: var(--second-bg-color);
    padding: 5%;
    text-align: center;
    margin: 1em;

}
nav {
    grid-area: nav;
    background-color: var(--nav-bg-color);
    border-bottom: medium solid var(--main-bg-color);
    padding: 1% 0;
    text-align: center;
}

footer {
    grid-area: footer;
    background-color: var(--second-bg-color);
    border-bottom: medium solid var(--main-bg-color);
    padding: 1% 0;
    text-align: center;

}

figure{
    float: right; 
    text-align: center; 
    width: 80%;    
}

p {
    text-indent: 5%;
    text-align: left;
    margin: 1%;
}

img{
    max-width: 100%;
}

a:hover{
    background-color: var(--second-bg-color);
} 

.rounded {
    border-radius: 2%;
}

.go-right {
    float: right;
    margin-left: 1em;
}

.go-left {
    float: left;
    margin-right: 1em;
}

nav a:link{
    background-color: #fff;
    color:#009;
    text-decoration: none;
}

nav a:hover{
    text-decoration: underline;
}

nav a{
    display: inline-block;
    width: 19%;
}

nav {
    border: thin solid yellow;
    background-color: white;
    text-align: center;
}

ol {
    max-width: 80%;
    margin: auto;
}

ol+p {
    padding-top: 1em;
}

li {
    border: thin solid black;
    padding: .5em;
}

li:nth-child(odd) {
    background-color: var(--background-for-odd);
}

li:nth-child(even) {
    background-color: var(--background-for-even);
}

table {
    border: medium solid green;
    border-collapse: collapse;
    max-width: 100%;
    margin: auto;
}

table+p {
    padding-top: 1em;
}

td,
th {
    border: thin solid black;
    padding: .5em;
}

tr:nth-child(odd) {
    background-color: var(--background-for-odd);
}

tr:nth-child(even) {
    background-color: var(--background-for-even);
}

caption {
    font-variant:small-caps;
    font-weight: bold;
    padding-top: 1em;
}

form {
    background-color: var(--second-bg-color);
    border: thin solid black;
    clear: both;
    max-width: 30em;
    margin: auto;
    padding: 1%;
}

form p {
    text-indent: 0;
}

fieldset {
    padding: 1%;
}

legend {
    margin-top: 1%;
}
body {
    display: grid;
    grid-template-areas: "nav" "header" "main" "footer";
    grid-gap: 1%;
}
main {
    display: grid;
    grid-area: main;   
    grid-template-columns: auto auto;
    grid-template-areas:    "box-4 box-4" 
                            "box-2 box-1" 
                            "box-3 box-3";
    grid-gap: 1%;
}

.box-1{
    grid-area:box-1;
}
.box-2{
    grid-area:box-2;
}
.box-3{
    grid-area:box-3;
}
.box-4{
    grid-area:box-4;
}

input[type=submit] {
    background-color:peru;
    color: rgba(12, 12, 13, 0.8);
    font-size: large;
    padding: 0%;

}
label {
    display: block;
}
.radio label,
.checkbox label {
    display: inline;
}
textarea {
    width: 100%;
}