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


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

}

   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;
   
   gap: 25%;
   justify-content: center;
    }
/*header{
   
}*/
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;
}

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

label{
    display: inline-block;
    text-align: left;
    margin-left: 8px;
}
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: 18px;
height: 18px;
content: "\00a0";
background-color:lightblue;
border-radius: 10px;
}
input[type=radio]:checked{
    background-color:blueviolet;
}
input[type=checkbox]{
    appearance: none;
    margin: 0;
    }
input[type=checkbox]{
    display: inline-block;
width: 18px;
height: 18px;
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: 10px;
    border: 2px solid blue;
    border-radius: 6px;
}
input[type=text]:focus, input[type=email]:focus{
    background-color:lightgreen;
}
input[type=submit]{
    border-radius: 10px;
    border: 2px solid darkblue;
    background-color: lightblue;
    width: auto;
}


h1 {
    background-color: var(--main-background-color);  
    max-width: 75%;
    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: 75%;
    text-indent: 2%;
    padding: 2%;
    margin: 0.5%;
    border: thin solid black;
}
ul, ol{
    background-color: beige;
    padding: 3%;
    margin: 3%;
    border: thin dashed black;
    color:var(--main-color);
}


    figure {
        border: thin solid black;
        border-radius: 10%;
        padding: 3%;
        text-align: center;
        max-width: 100%;
    }

    figcaption {
        font-style: italic;
        text-align: center;
        max-width: 80%;
    }

    img{
        padding: 2%;
        margin-right: 2%;
        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: 0px;
                border: none;
            }

    table{
        border-collapse: collapse;
        width:80%;
        margin:auto;
    }
    table, th{
        border: thin solid lightseagreen;
    }
    tr, td{
        border: thin dashed darkseagreen;
        margin: 2px;
    }

    .even{
        background-color: aquamarine;
    }
    .odd{
        background-color:cornflowerblue;
    } 
    th{
        color:var(--main-color);
    }
    table caption{
        color: var(--main-color);
    }
    table+p{
        padding-top:1em;
    }

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