:root{
    --main-font: Dosis;
    --titel-font: Playtone One;
    --background-img:url(../images2/blackBack.png);
    --backy-color: rgba(67,149,225,255);
    --header-back-color: rgba(194,46,209,255); 
    --figcap-color: rgba(0,212,39);
    --hover-color: rgba(251,139,1,255);
    --light-Blue: rgba(0,153,209,255);
}
html{
   background-image: var(--background-img);
}

/*table style*/
body{
    max-width:100%;
}

/*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: 25em;
   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: 10%;
   color: white;
   padding: 1%;
   margin: .7em;
   background-color: orange;
   border-radius: .7em;
   cursor: pointer;
    margin-left:45%;
}

input[type=submit]:hover {
   background-color: blueviolet;
}

input[type=checkbox]:checked + label::before {
   content: "\2713"; 
   color: antiquewhite;
   background-color: var(--light-Blue);
}
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: purple; 
   background-color: purple;
}
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: purple;
   border: 0.125em solid antiquewhite;
}
input[type=radio]:checked + label::before {
   content: "\2022";  /* Bullet */
   color: white;
   background: pink;
}

/*UL formatting*/
ul{
    display:grid;
    justify-content: left;
    margin-left: 10%;
}

/*Making h1 multicolor*/
h1{
    font-family: var(--tittle-font);
    color: var(--figcap-color);      
}
.red{
    color:red;
}
.orange{
    color: orange;
}
.yellow{
    color: yellow;
}
.green{
    color: violet;
}
.lightB{
    color: var(--light-Blue);
}
.darkB{
    color: blue;
}
.purple{
    color: purple;
}

/*h2********************/
h2
{
    margin-left: 2em;
    margin-bottom: 1em;
    margin-top: 1em;
}
/*setting font*/
h2,p,figcaption,td,tr,th,h3, li
{
    font-family: var(--main-font);
}

/*formatting*/
h1,h2,h3,p,figcaption,td,tr,th,ol,ul,li,nav{
    padding: 1%;
}
h2,h3{
    /*! width:10%; */
    margin-left:5em;
    color: red;
}
img{
    max-width: 200%;
    /*! border-image-width:auto; */
    /*! border-top-left-radius: .7em; */
    /*! border-top-right-radius: .7em; */
}
cite{
    font-size: small;
}
p{
    text-indent: 5%;
}
p,figure
{
    margin-left: 8em;
    margin-right:8em;
}

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;
}

td{
    text-align: right;
}

nav>a:hover{
    color:var(--light-Blue);
}
ul>li:nth-child(even){ 
    background: rgba(238,130,238); 
    margin-left: -100%;
}
ul>li:nth-child(odd){ 
    background: var(--light-Blue); 
    margin-left: -100%;
}

/*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;
}

/*psuedo code*/
a:hover{
    color: var(--hover-color);
}

/*Back ground colors*/
p,table,td,tr,th,figcaption,caption{
    background-color: rgba(25,20,100,.3);
    color: white;
    text-indent: 0%;
}
table{
    margin-left:20%;
}
h3,h4,fieldset{
    background-color: var(--header-back-color);
}
figcaption,caption{
    background-color: rgba(0,0,0,0);
}
.navgrid{
    display:grid;
    grid-template-columns: 7% 7% 11% 7% 3% 3% 3% 3%;
    justify-content: stretch;
    /*! justify-content: space-around; */
    font-size: 150%;
    border-radius: .7em;
    font-family: var(--title-font);
}
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%; 
}
.twocolumns1{
    display: inline-grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "heads heads"; 
    padding: .5%;
    margin: .5%;
    width: 80%; 
}
.overImg2{
    
   width: 90%;
    background-color: white;
     margin-left: 30%;
    margin-bottom: 35%;
    margin-top: 40%;
    
}
.frontImg2{
    width: 150%;
}
.tableGrid{
    display:grid;
    grid-template-columns: auto;
    justify-content: stretch;
    justify-content: center;
    justify-content: space-around;
    border-radius:.7em;
}


.activePage{
    background-image: linear-gradient(45deg, red, orange, yellow, green, var(--light-Blue), purple);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 5%;
    margin-right: 1.3em;
}
.frontImg{
    position: static;
    width: 55%;
    margin-left:40em;
}
.overImg{

     width: 28%;
   position: relative;
    bottom: -50%;
    right: -20%;
    background-color: white;
    padding: 5%;
}
div>p{
    background-color: rgba(1,1,1,0);
    color: purple;
    width: 30em;
    margin-left: 2em;
    margin-right: 2em;
    text-indent: 0%;
}

div>h2{
    width: 22em;
}
.aboutImg{
    width:175%;
    margin-left:-10%
}
.aboutP{
    background-color:rgba(236,196,189,255);
    color: black;
    height: 24%;
    margin-left: 10%;
    position: relative;
    bottom: -30%;
    text-align: center;
    margin-right: 13%;
    padding:5%;
    height: 60%;
}
.aboutP1{
    background-color:rgba(236,196,189,255);
    color: black;
    height: 24%;
    margin-left: 10%;
    position: relative;
    bottom: -30%;
    text-align: center;
    margin-right: 13%;
    padding:5%;
    height: 24%;
}
.formHead{
    color: var(--header-back-color);
}
.formP{
    background-color: rgba(0,0,0,0);
}
p{
    font-size: medium;
    background-color: rgba(0,0,0,0);;
    margin:0;
}
.paragraph{
    background-color: rgba(67,149,225,.7);
    margin-left: 10%;
    margin-right: 10%;
}

.paragraph2{
    background-color: rgba(191,50,209,.7);
    margin-left: 10%;
    margin-right: 10%;
}
.introP{
    text-align: center;
}
.contact{
    background-color: rgba(255,0,0,.8);
}
.radio{
    background-color: rgba(0,153,209,.8);;
}
.checkbox{
    background-color:	rgba(238,130,238,.8);
}
.emailP{
    margin-left: 4%;
}
#txtSubject{
    width:65%;
    height: 65%;
}
.box1{
    color:aqua;
    margin-left: 5%;
}
.box2{
    margin-left:10%;
    margin-right:10%;
    text-align: center;
}
.box3{
    margin-left:10%;
    margin-right:10%;
    text-align: center;
}
.box4{
    margin-left:10%;
    margin-right:10%;
    text-align: center;
}
.feedH{
    margin-left:-90%;
    color: yellow;
}
.footerP{
    background-color: rgba(255,204,255,.8);
    width: 39%;
    margin-top: 5%;
}
iframe{
    width: 100%;
    border:0em;
}