:root{
    --main-font: Courier New;
    --background-img:url(../images2/background-one.png);
    --backy-color: rgba(255,178,102,.5);
    --header-back-color: rgba(47, 114, 62,.7);
    --figcap-color: rgba(255,204,204,.5);
}
html{
    background-image: var(--background-img);
}

/*table style*/
table, td,tr,th
{
    border: 1px solid black;
    border-collapse: collapse;
    
}
td,tr,th{
    border: black dotted;
}
th{
    text-transform: uppercase; 
}
tr:nth-child(even){ 
    background: rgb(234, 75, 75); 
}
tr:nth-child(odd){ 
    background: rgba(24, 162, 148, 0.559); 
}

/*form style8*/
fieldset>p{
    text-indent: 0%;
}

main>header>figure{
    height:25%;
    width:25%;
    float:right;
}
input[type=text], input[type=email], select {
   box-sizing: border-box;
   width: 250px;
   padding: 8px;
   margin-top: 4px;
   border: 1px solid #aaa;
   border-radius: 4px;
    justify-content: start;
}
form>label{
    display:grid;
    justify-content: start;
    font-family:var(--main-font);
    color:antiquewhite;

}
input[type=radio] + label {
   cursor: pointer;
}
input[type=checkbox] + label {
   cursor: pointer;
}
input[type=submit] {
   border: none;
   width: 250px;
   color: white;
   padding: 15px;
   margin: 10px;
   background-color: rgb(148, 87, 76);
   border-radius: 10px;
   cursor: pointer;
}

input[type=submit]:hover {
   background-color: rgb(148, 58, 76);
}

input[type=checkbox]:checked + label::before {
   content: "\2713"; 
   color: antiquewhite;
   background: green; 
   background-color: rgba(148,87,76,.7);
}
input[type=checkbox] {
   appearance: none;
   margin: 0;
}
input[type=checkbox] + label::before {
   content: "\00a0";  
   display: inline-block; 
   width: 12px;
   height: 12px;
   text-align: left;
   line-height: 1em;
   border: 0.125em solid antiquewhite;  
}

input[type=radio]:checked + label::before {
   content: "\2713"; 
   color: antiquewhite;
   background: green; 
   background-color: rgba(148,87,76,.7);
}
input[type=radio] {
   appearance: none;
   margin: 0;
}
input[type=radio] + label::before {
   content: "\00a0";  /* Space */
   border-radius: 10px;
   display: inline-block;
   width: 1em;  height: 1em; 
   text-align: center;
   line-height: 1em;
   background-color: rgba(148,87,76,.7);;
   border: 0.125em solid antiquewhite;
}
input[type=radio]:checked + label::before {
   content: "\2022";  /* Bullet */
   color: white;
   background: green;
}

/*Making h1 all uppercase*/
h1{
    text-transform: uppercase;
}

/*setting font*/
h1,h2,p,figcaption,td,tr,th,h3, li, nav
{
    font-family: var(--main-font);
}

/*formatting*/
h1,h2,h3,p,figcaption,td,tr,th,ol,ul,li,nav{
    padding: 1%;
}
img{
    max-width: 100%;
    border-radius: 5%;
}
figure{
    border-radius: 5%;
    border: 1px solid black;
}
cite{
    font-size: small;
}
p{
    text-indent: 5%;
}
p,figure
{
    margin-left: 8em;
    margin-right:8em;
}
h2
{
    margin-left: 3em;

}
ol{
    margin-left:5em;
}
h1
{
    text-align: center;
}
figcaption
{
    text-align: center;
}
td{
    text-align: right;
}
nav:hover{
    color:antiquewhite;
}
ul>li:nth-child(even){ 
    background: rgb(255, 247, 182,.7); 
    margin-left: -50px;
        border-radius: 10px;
}
ul>li:nth-child(odd){ 
    background: rgb(180, 138, 87,.7); 
    margin-left: -50px;
        border-radius: 10px;
}
main>section>h3{
    margin-left: 5em;
}



/*classes*/
.center
{
    margin-left: auto;
    margin-right: auto;
}
.img1{
    height: 50%;
    width: 50%;
}
.rounded{
    border-radius: 5%;
}
.righty{
    float:right;
}
.centerImg
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.textRighty{
    text-align:right;
}

/*psuedo code*/
a:hover{
    color: rgb(47, 114, 62);
}

/*Back ground colors*/
p,table,td,tr,th,figcaption{
    background-color: var(--backy-color);
}
h2,h3,h4,fieldset{
    background-color: var(--header-back-color);
}
figcaption,caption{
    background-color: var(--figcap-color);
}
.navgrid{
    display:grid;
    grid-template-columns: auto auto auto;
    justify-content: stretch;
    justify-content: space-around;
    font-size: 150%;
    background-color: rgba(148,87,76,.7);
    border-radius: 10px;
}
nav>a{
    color:antiquewhite;
}
.ulgrid{
    display:grid;
    justify-content: center;
}
.twocolumns{
    display: inline-grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "heads heads"; 
    padding: .5%;
    margin: .5%;
    width: 100%; 
}
.tableGrid{
    display:grid;
    grid-template-columns: auto;
    justify-content: stretch;
    justify-content: center;
    justify-content: space-around;
    border-radius:10px;
}