/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 19, 2020, 6:06:24 PM
    Author     : mayagriffith
*/

:root {
  --main-bg-color: rgb(175,236,189);
  --header-color: forestgreen;
  --main-font: Arial, Helvetica, sans-serif;
}
.green{
    color: forestgreen;
}

header{
    background-color: rgb(32,178,170);

}
.small{
    font-size: x-small;
}
.big{
    position: relative;
    text-align:left;
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 3em;
    font-weight: bold;
}

figure{
   /* border: .2em dashed black; */
   /* text-align: center; */
    display: block;
    
}

.right{
    text-align: center;
    width: 40%;
}
sec{
    float: right;
}
h1{
    
    color: white;
    font-size: 2.5em;
    font-family: var(--main-font);
    text-align: center;
    text-transform: uppercase;
    padding-bottom: .5em;
    text-shadow: 3px 3px 1px limegreen;
    margin-top:0px;
    padding: .5em;
    
}
h3{
    text-align: center;
    color: white;
    font-size: 2em;
    font-family: 'Lato', sans-serif;
    
}
.me{
    width: 35%;
    align-content: center;
}
p{
    color: forestgreen;
    font-size: 1.5em;
    font-family: 'Lato', sans-serif;
}
fieldset > p {
     text-indent: 0em;
}


ul>li:nth-child(odd){
    background-color: whitesmoke;
}​


img {
    font-family: var(--main-font);
    max-width: 5%;
    
    }
    
    
 body{
    font-family: var(--main-font);
    background-color: var(--main-bg-color);
    margin:0;
        
    }
h2{
    text-align:center;
    color: var(--header-color);
    font-family: 'Lato', sans-serif;
    
    
   }
 nav{
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
    align-content: center;
    width: 100%;
    font-size: 1.3em;
    font-family: 'Lato', sans-serif;
   

    
}

img{
    width: 250%;
}
nav a { 
        width: 80%;
        color:white;
        text-decoration: none;

} 
nav a:hover { 
        background-color: rgb(44, 46, 48);
        color: var(--main-bg-color);
} 
nav > .activePage{
color: var(--main-bg-color);
}

a{
    color:black;
}
a:hover{
    color:red;
    
}
.side{
    width: 150%
}

.leftside{
  position: absolute;
  left: 0px;
  width: 25%;
  grid-column-start: 1;
  grid-column-end: 2;
}
.picearth{
    width:75%;
}
.rightside{
  background-color: white;
  position: absolute;
  right: 0px;
  margin-top: -3.5em;
  grid-column-start: 3;
  grid-column-end: 4;
  text-align: center;
  margin-bottom: 2em;
}
section > table{
    margin-top: 30em;
    border: none;
    width: 80%;
    margin-left:15%; 
    margin-right:15%;
    padding-top: 30%;
    align-content: center;
}

th{
        font-size: 3em;
        color: white;
        background-color: lightskyblue;
        padding: .5em;
        margin-bottom: 3em;
   
}
td {
  border: none;
}

.probs{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    
        
}
.regular{
    text-align: center;
    font-size: 1.25em;
}


tr:nth-child(even){
    background-color: var(--main-bg-color);
}
tr:nth-child(even):hover{
    background-color: lightblue;
}
tr:nth-child(odd):hover{
    background-color: lightskyblue;
}
tr:nth-child(odd){
    background-color: palegoldenrod;
}
table>caption{
    text-align: left;
    font-size: 1.5em;
    text-decoration: none;
    margin-bottom: 2em;
}
table, td, th {
    border-collapse: collapse;
}


cite{
    font-size: xx-small;
}



form{
    width: 80%;
    margin-left:15%; 
    margin-right:15%; 
}
.round{
    border-radius: 20%;
    max-width: 100%;
    transition: width 1s, height 1s;
}
h2{
    transition: transform 1s;
     transform: scale(2);
     color: black;
     font-weight: bolder;
}
.round:hover {
  width: 120%;
  height: 120%;
}

figcaption>p{
    font-size: smaller
}
figcaption{
    color: gray;
    
}

.grid-layout{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 1em;
  padding: .75em;
}
.row1{
     grid-column:1/2;

}
.row2{
     grid-column:2/4;
}
ol{
    font-size: xx-large;
    color: white;
}
.row3{
     grid-column:1/2;
}
.next{
     grid-column:2/4;
}
.row6{
    grid-column:1/4;
}
.title{
    grid-column:1/4;
}
.table{
  grid-column-start: 1;
  grid-column-end: 4;
}
.pic{
    grid-column-start: 1;
    grid-column-end: 2;
}


.grid-layout:after {
  content: "";
  display: table;
  clear: both;
}


article{
    padding: 2em
}

.fullcontent{
     padding-bottom: 2.5em; 
}
.fullpage{
      position: relative;
       min-height: 100vh;
}
footer{
    padding-top: 2em;
    position: relative;
    bottom: 0;
    width: 100%;
    height: 2.5em;
    text-align: center;

     
}
form{
    background: lightskyblue;
    width: 60%;
    justify-content: space-around;

}
form > fieldset{
    color: white;
}

.submit{
    background-color:lightseagreen; 
   
}

form > legend{
    color: white;
}

form>input{
    background-color: #fcd77c
}
.drop{
    background-color: lightgreen;
}
input:checked {
    color: yellow;
}
.button{
    align-content: center;
}
input[type=text]{
    border:0;
    border-bottom: medium solid forestgreen;
    width: 50%;
    color: white;
    font-size: Medium;
    background: lightskyblue;
    
}
input[type=email]{
    border:0;
    border-bottom: medium solid forestgreen;
    width: 50%;
    color: white;
    font-size: Medium;
    background: lightskyblue;
    
}
.mistake{
    font-size: large;
    color: red;
    text-align: center;
    font-weight: bold;
    
}