: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{
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    font-style:italic;
    font-size:large
}
body {
    background-image: url(../images/range.jfif);
    background-size:cover;
   }


h1{
    text-transform: uppercase;
    background: rgba(0,1,0,.5);
    padding:.5em;
    color: white;
}

body{
    padding:1%
}

main {
    background-color: rgba(253,252,253,.6);
}
figure{
    float:none;
    text-align: center;
    font-family:serif;
    width: 40%;
}

img{
    max-width: 100%;
}
cite{
    font-size: xx-small;
}
nav a{
    padding: .5%

}

nav a:hover{
    background-color: blue;
    color: cadetblue;
    text-decoration: underline;
}
nav a{
    display: inline-block;
    width: 19%;
}
p {
    text-indent: 3em;
}

nav {
    border: thin solid yellow;
    background-color: rgba(255,255,255,.5);
    text-align: center;
}
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, footer{
    padding: 1% 0;
    text-align: center;
}
figure{
    background-color:red;
    border-radius:5%;
}
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);
  }
  th {
    font-family: sans-serif;
  }
  .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;
}