:root{
    --main-bg-color: aquamarine;
    --main-font-color: black;
    --table-bg-color-odd: rgb(255, 255, 255,.5);
    --table-bg-color-even: rgb(147, 147, 147,.5);;
}
html{
    color: var(--main-font-color);
    font-style:italic;
    font-size:large;

}
.outer-container{
    display: grid;
    grid-template-columns: 50% 50%;
}
.picture-container figure {
    width: 100%;
}
.picture-container{
    width: 77%;
}
.text-container p{
    /*! font-size: 150%; */
    /*! padding-right: 25%; */
    /*! padding-top: 10%; */
}
.text-container{
    /*! background-color: lightgreen; */
    width: 94%;
}
body {
    background-size:cover;
}
.heading{
    /*! text-transform: uppercase; */
    /*! background: rgba(0,1,0,.5); */
    /*! padding:1.5em; */
    color: white;
    width: 51%;
    /*! float: right; */
    /*! text-align: left; */
    font-size: 272%;
}body{
     padding:1%
 }main {
      /*! background-color: rgba(253,252,253,.6); */
      margin-top: 17%;
  }
.main-text p{
    
}
figure{
    /*! float:none; */
    /*! text-align: center; */
    /*! font-family:serif; */
    width: 40%;
}img{
     max-width: 100%;
 }
.main-text{
    width: 65%;
    padding-left: 21%;

}
.main-text p{
    text-align: center;
    font-size: 180%;
}
.address{
    width: 101%;
    /*! float: right; */
    text-align: right;
}
cite{
    font-size: xx-small;
}
nav a{
    padding: .5%}nav a:hover{
                     background-color: lightgreen;
                     color: black;
                     text-decoration: underline;
                 }
nav a{
    display: inline-block;
    width: 19%;
}
.info{
    display: grid;
    width: 99%;
    grid-template-columns: auto auto;
}

.text-container p {
    font-size: 157%;
    margin: 18%;
    text-align: center;
}nav a {
     border: solid green;
     background-color: rgba(255,255,255,.5);
     text-align: center;
     color: brown;
 }
.logo img {
    max-width: 100%;
    border: 1px solid black;
    border-radius: 5%;
}th{
     background-color: rgb(67, 120, 24,.5);
 }
tr:nth-child(2n+1){
    background-color: var(--table-bg-color-odd);
}
tr:nth-child(2n){
    background-color: var(--table-bg-color-even);
}li:nth-child(odd){
     background-color: var(--table-bg-color-odd);
 }
li:nth-child(even){
    background-color: var(--table-bg-color-even);
}
nav{
    position: fixed;  
}

footer{

    background: forestgreen;
    padding: 3%;
}
footer p{
    text-align: center;
}

nav{

    background: forestgreen;
    display: inline-grid;
    grid-template-columns: 20% auto;
}

figure{
    /*! background-color:brown; */
    /*! border-radius:25%; */
    /*! width: 39%; */
}

th, td {
    border: .1em dashed green;
    padding: 1em;
}
table {
    border-collapse: collapse;
    text-align: left;
    border: solid green;
    max-width: 100%;
}
tr:hover{
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
}

.detail {
    float: right;
}
form{
    margin: 0%;
    padding: 2%;
    max-width: 100%;
}
form p{
    text-indent: 0;
}
label{
    display:block;
}input[type="radio"]{
     padding: 5%;
 }
input[type="checkbox"]{
    padding: 5%;
}
input[type="text"]{
    background-color: brown;
}
textarea{
    width: 100%;
}
textarea:hover{
    background-color: greenyellow;
}
select{
    width: 100%
}.grid-layout main{
     display: grid;
     grid-template-areas:
"Definitions Definitions Conclusion"
"types-carry-table types-carry-table types-carry-table"
"pros-list pros-list pros-list"
"cons-list cons-list cons-list"
"rounded-free-states rounded-free-states rounded-free-states";
 }.grid-layout .Definitions{
      grid-area: Definitions;
  }.grid-layout .Conclusion{
       grid-area: Conclusion;
   }
.grid-layout .types-carry-table{
    grid-area: types-carry-table;
}.grid-layout .rounded-free-states{
     grid-area: rounded-free-states;
 }.grid-layout .pros-list{
      grid-area: pros-list;
  }.grid-layout .cons-list{
       grid-area: cons-list;
   }
.crazy-table{
    box-shadow: 1em 1em;
}
.crazy-conclusion{
    text-shadow: green .2em .2em;
}
.crazy-picture{
    animation-duration: 1s;
    animation-delay: 2s;
    animation-name: move;
    animation-iteration-count: infinite;
}
.crazy-heading{
    background:linear-gradient(red, green);
    transition: width -5s, height -5s;
    transition-delay: 500ms;
}
.crazy-heading:hover{ width: 10em;
    height: 2em;
}
@keyframes move {
    from { transform: rotate(-45deg) scale(0.5, 0.5); }
    to { transform: rotate(45deg) scale(1.5, 1.5); }
}input[type=submit]{
     font-family: sans-serif;
     padding: 1%;
 }
input[type=submit]:hover{
    background-color: yellow;
}
.activePage{
    border-bottom: black;
}