body {
  background-color:#ebebeb;
  padding: 15px;
  margin: auto;
  width: 95%;
  height: auto;
}
form input {
	border-radius: 8px;
	border-color: blue;
}
#raccoon-pic {
	border: none;
	border-radius: 0px;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  padding: 10px;
}
h1 {
  text-align:center;
  color:black;
  font-size: 44px;
}
h2 {
  text-align:center;
  color:darkblue;
}
table {
	align: center;
}
.nav {
  color:#357382;
  text-align:center;
  list-style-type: none;
}
.nav li {
  background-color: #536B84;
  padding: 5px;
  margin-bottom: 5px;
  color: white;
  border-radius: 20px;
  text-align:center;
}
.gridpic {
  overflow: hidden;
  border-color:black;
  border-style:solid;
  border-width:10px;
  border-spacing: 10px;
}
.gridpic img {
  width: 400px;
}
.nav td {
      padding:20px;
      font-family: "Times New Roman";
	  text-align: center;
        }
    th {background-color:#CD3134;
        color:white;
       }
    h1, h2, h3 {
      font-family: Georgia, 'Times New Roman', Times, serif;
    }
    p {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,       Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
   .family_tree td {
        background-color: #ffc861;
        }
 .dropdown {
  position: relative;
  display: block;
  }
.dropdown-content {
  display: none;
  box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  position: absolute;
  background-color: #19C5E1;
  min-width: 160px;
  border-radius: 10px;
  }
.dropdown:hover .dropdown-content {
  display: block;
  height: auto;
  margin:auto;
  padding: 15px;
}
.dropdown-content a:hover {
  background-color: #008C6B;
}
legend{
	font-weight: bold;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 20px;
}
label{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

.racoonabout {
  background-color: orange; 
  padding: 25px;
}
.rocket {
  size: 100%;
  padding-bottom: 250px;
  margin: auto;
}
.dev {
  display: none;
}

footer {
  margin:auto;
  padding: 15px;
  }

table.yellow_bars {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
  }
.yellow_bars td {
        background-color:yellow; 
        width:20%; 
        height: auto;      
}
[class*="col-"] {
  width: 100%;
}
@media only screen and (max-width : 600px ){
  .col-p-1 {width: 8.33%;}
  .col-p-2 {width: 16.66%;}
  .col-p-3 {width: 25%;}
  .col-p-4 {width: 33.33%;}
  .col-p-5 {width: 41.66%;}
  .col-p-6 {width: 50%;}
  .col-p-7 {width: 58.33%;}
  .col-p-8 {width: 66.66%;}
  .col-p-9 {width: 75%;}
  .col-p-10 {width: 83.33%;}
  .col-p-11 {width: 91.66%;}
  .col-p-12 {width: 100%;}

  .headerpicture img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%;
  border-radius: 2px;
}
}
@media only screen and (min-width : 600px ){
  .col-t-1 {width: 8.33%;}
  .col-t-2 {width: 16.66%;}
  .col-t-3 {width: 25%;}
  .col-t-4 {width: 33.33%;}
  .col-t-5 {width: 41.66%;}
  .col-t-6 {width: 50%;}
  .col-t-7 {width: 58.33%;}
  .col-t-8 {width: 66.66%;}
  .col-t-9 {width: 75%;}
  .col-t-10 {width: 83.33%;}
  .col-t-11 {width: 91.66%;}
  .col-t-12 {width: 100%;}
  
 .headerpicture img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  border-radius: 2px;
}
}

@media only screen and (min-width: 1000px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  
  .headerpicture img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}
}
.iframe_wrapper { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.iframe_wrapper iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

row {
  content: "";
  clear: both;
  display: table;
}