: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*/
body{
    max-width:100%;
}
table, td,tr,th
{
    border: .01em solid black;
    border-collapse: collapse;
    border: black dotted;
    
}
table{
    border: antiquewhite solid;
    width: 50%;
    margin: auto;
    max-width:80%;
}
th{
    text-transform: uppercase; 
}
tr:nth-child(even){ 
    background: rgb(234, 75, 75); 
}
tr:nth-child(odd){ 
    background: rgba(24, 162, 148, 0.559); 
}
table>caption{
    font-family: var(--main-font);
}

/*form style8*/
fieldset>p{
    text-indent: 0%;
}
fieldset{
    font-family:var(--main-font);
    color:antiquewhite;
    width: 50%;
    margin: auto;
}
.formImg{
    height:25%;
    width:25%;
    margin-left: auto;
    margin-right: auto;
}
input[type=text], input[type=email], select {
   box-sizing: border-box;
   width: 30em;
   padding: .7em;
   margin-top: .2em;
   border: .01em solid antiquewhite;
   border-radius: .4em;
    justify-content: start;
}
label{
    /*! display:grid; */
    font-family:var(--main-font);
    color:antiquewhite;
    padding: 2%;
    

}
input[type=radio] + label {
   cursor: pointer;
}
input[type=checkbox] + label {
   cursor: pointer;
}
input[type=submit] {
   border: none;
   width: 30em;
   color: white;
   padding: .7em;
   margin: .7em;
   background-color: rgb(148, 87, 76);
   border-radius: .7em;
   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: .75em;
   height: .75em;
   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: .7em;
   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;
}

/*UL formatting*/
ul{
    display:grid;
    justify-content: center;
}

/*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%;
}
h2,h3{
    width:30%;
    margin: auto;
}
img{
    max-width: 100%;
    /*! border-image-width:auto; */
    border-top-left-radius: .7em;
    border-top-right-radius: .7em;
}
figure{
    border: .01em solid antiquewhite;
    border-radius: .7em;
}
cite{
    font-size: small;
}
p{
    text-indent: 5%;
}
p,figure
{
    margin-left: 8em;
    margin-right:8em;
}
h2
{
    margin-left: 3em;
    margin-bottom: 1em;
    margin-top: 1em;
}
h4{
    width:10%;
    font-family: var(--main-font);
    margin-top: 1em;
    margin-bottom: 1em; 
    color: antiquewhite;
    padding:.5em;
    border-radius:.7em;
}
form>p>input{
    width:50%;
    margin:auto;
    font-family: var(--main-font);
    margin-top: 1em;
    margin-bottom: 1em;
}

ol{
    margin-left:5em;
}
h1
{
    text-align: center;
}
figcaption
{
    margin:auto;
    border-bottom-left-radius: .7em;
    border-bottom-right-radius: .7em;
    
}

td{
    text-align: right;
}

h2,h3,p{
    border-radius: .7em;
}
nava>a:hover{
    color:antiquewhite;
}
ul>li:nth-child(even){ 
    background: rgb(255, 247, 182,.7); 
    margin-left: -3em;
        border-radius: .7em;
}
ul>li:nth-child(odd){ 
    background: rgb(180, 138, 87,.7); 
    margin-left: -3em;
        border-radius: .7em;
}

/*classes*/

.fig1{
    width:40%;
    border-image-width: 50%;
    border-radius: .7em;
    border: .01em solid antiquewhite;
    max-width:100%;
    border-image-width: auto;
    margin:auto;
    margin-top:2em;
}
.center
{
    margin-left: auto;
    margin-right: auto;
}

.righty{
    float:right;
}
.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 auto;
    justify-content: stretch;
    justify-content: space-around;
    font-size: 150%;
    background-color: rgba(148,87,76,.7);
    border-radius: .7em;
}
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:.7em;
}


.activePage{
    background-color: var(--backy-color);
    padding: 5%;
}