:root{
    --main-background-color: lightgreen;
    --second-color: green;
    --main-color: darkgreen;
    --hover-color: lightgrey;
}


body{
    padding: 1%;
   font-family:Verdana, Tahoma, sans-serif;
   margin: auto;
   border: thin solid var(--main-color);
   background-color: rgb(210, 240, 210);
   max-width: 70vw;

}

   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; 
        grid-area: nav;
        position: relative;
        display: grid;
    grid-template-rows: auto;
   grid-template-columns: auto auto auto auto auto;
   gap: 10vw;
   justify-content: center;
    }
    .activePage{
        color:red;
    }

main{
    
    display: grid;
    grid-template-rows: auto auto auto;
   grid-template-columns: auto auto auto;
   align-content: start;
   grid-template-areas:
   "head head head"
   "section section section"
   "section section section"
   ;
}

.form-main{
    display: grid;
    grid-template-rows: auto auto ;
   grid-template-columns: auto;
   align-content: start;
   grid-template-areas:
   "form-head"
   "form-section"
   ;
}

.form-section{
    display: grid;
    grid-template-rows: auto auto;
   grid-template-columns: auto auto;
   align-content: start;
   grid-template-areas:
   "form-h2 form-h2"
   "form aside"
    "form aside"
    ;

}
h1{
    grid-area:head;
}

.mistake{
    background-color: red;
}

#form-h2{
    grid-column: 1 / 2
}
.form-fieldset{
    grid-area:form
}
main h1.form-head{
    grid-area: form-head
}
aside{
    grid-area: aside;
}
footer{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-area: foot;
}

label{
    display: inline-block;
    text-align: left;
    margin-left: 2%;
}
input[type=radio], input[type=submit], input[type=checkbox], select{
    cursor: pointer;
}
    input[type=radio]{
    appearance: none;
    margin: 0;
    }
input[type=radio]{
    display: inline-block;
width: 10pt;
height: 10pt;
content: "\00a0";
background-color:lightblue;
border-radius: 5%;
}
input[type=radio]:checked{
    background-color:blueviolet;
}
input[type=checkbox]{
    appearance: none;
    margin: 0;
    }
input[type=checkbox]{
    display: inline-block;
width: 10pt;
height: 10pt;
content: "\00a0";
color:white;
background-color:lightblue;
border: thin solid black;
}
input[type=checkbox]:checked{
    background-color:blueviolet;
    content: "\2713";
    color: black;
}



input[type=text], input[type=email], select, textarea {
    box-sizing: border-box;
    width: auto;
    padding: 5%;
    border: 1pt solid blue;
    border-radius: 3%;
}
input[type=text]:focus, input[type=email]:focus{
    background-color:lightgreen;
}
input[type=submit]{
    border-radius: 5%;
    border: 1pt solid darkblue;
    background-color: lightblue;
    width: auto;
}


h1 {
    background-color: var(--main-background-color);  
    text-transform:uppercase;
    border: thin solid black;
}
.checker{
    color:white;
    background-color: aquamarine;
    background-image: url("../images/Chess-background.png");

}

h2{
    background-color: var(--main-background-color);
    max-width: 75%;
    border: thin solid black;
}
.form-h2{
    grid-area:form-h2;
}

p{
    background-color: aliceblue;
    max-width: 90%;
    text-indent: 2%;
    padding: 2%;
    margin: 0.5%;
    border: thin solid black;
}
ul, ol{
    background-color: beige;
    margin: 3%;
    border: thin dashed black;
    color:var(--main-color);
}
h3{
    margin: 3%;
}

    figure {
        border: thin solid black;
        border-radius: 10%;
        padding: 3%;
        margin: auto;
        max-width: 100%;
    }

    figcaption {
        font-style: italic;
        margin: auto;
        max-width: 80%;
    }

    img{
        border: thin solid black;
        max-width: 100%;
        border-radius: 10%;
    }
        .right{
        
            max-width:20%;
            border: thin dashed lightseagreen;
        }

            form, fieldset p{
                margin: auto;
            }
            form p {
                text-indent: 0%;
                border: none;
            }

    table{
        border-collapse: collapse;
        margin:auto;
    }
    td:hover, li:hover{
        background-color: var(--hover-color);
    }
    table, th{
        border: thin solid lightseagreen;
    }
    tr, td{
        border: thin dashed darkseagreen;
        margin: 2%;
    }
tr:nth-child(even){
    background-color: aquamarine;
}
tr:nth-child(odd){
    background-color:cornflowerblue;
}
    .even{
        background-color: aquamarine;
    }
    .odd{
        background-color:cornflowerblue;
    } 
    th, table caption{
        color:var(--main-color);
    }
    table+p{
        padding-top:1em;
    }

 a:hover{
     background-color:var(--hover-color);
}
cite{
    font-size: xx-small;
}