/*Author: 
Course: 
Lesson 9 default_style.css 
*/
/*  900px is a standard RWD for tablet size and should get a higher SEO because the browser can adjust depending on size of screen */
@media screen and (max-width: 900px) {
  div {
    background-color: darkblue; 
    color:white;
    padding: 5px;
  }
}
.dropdownmenu {
    display: inline-block;
    position: relative;
    top: 25px;
    left: 15px;
    margin-top:10px;
    margin-bottom:225px;
  }
  .dropdownmenu span {
    padding: 15px;
    text-align: center;
    background-color: #016aae;
    color:white;
    text-decoration: none;
  }
  .dropdownlinks {
    display: none;
    position: absolute;
    background-color: lightgrey;
    color: white;
    width: 180px;
    top: 32px; 
    border: thin solid darkblue;
    text-align: left
  }
  .dropdownlinks a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 8px;
    text-align: left;
  }
  .dropdownmenu
   span:hover, .dropdownlinks a:hover {
      background-color: #016aae;
      color: white;
  }
  .dropdownmenu:hover .dropdownlinks {
    display: block;
  }

  .header {
    height: 100%; /* manually calculated header height through setting this to x%*/
    width: 100%;
    text-align: center;
    color: yellow;
    background-image:url("");
  }

.slogan {
font-style: italic;  
padding-top: 10px;
padding-bottom: 10px;
margin-left: 0px;
/* Total Height = Height + Padding Top + Padding Bottom + Border Width Top + Border Width Bottom*/
}
  .wrapper {
    text-align: center;
    position: relative;
    width: 900px;
    margin-top:100px;
    margin: 50px auto;
    background-color: grey;
    border: thin solid white;
    font-family: sans-serif;
    font-size: 16px;
    color: limegreen;
    
  }

  .navigation {
    background-color: lightblue;
    padding-top: 15px;
    padding-bottom: 15px;
    /* Total Height = Height + Padding Top + Padding Bottom + Border Width Top + Border Width Bottom*/

  }

  h1{
    background-color: green;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
    color:darkred;
    text-align: center;
    box-sizing: border-box;
    margin:0;
    margin-left: 0px;
    font-family: large sans-serif;
/* Total Height = Height + Padding Top + Padding Bottom + Border Width Top + Border Width Bottom*/
  }
  h2{
    background-color: darkblue;
    width: 100%;
    padding: 10px;
    color: white;
    text-align: center;
    box-sizing: border-box;
    margin:0;
  }
  p {padding-right: 18px;
  /*color: yellow*/}

  /* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}


.card{
  border: 10px solid silver;
  border-style: solid;
  align-content: center;
  width: 350px;
  height: 400px;
}
.head{
  position: absolute;
  top: 18px;
  width: 350px;
  height: 70px;
  background-color: darkblue;
}
.heading{
  font-size: 25px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.content{
  position: absolute;
  top: 88px;
  width: 350px;
  height: 330px;
  background-color: #E6E6FA;
}
.img{
  position: absolute;
  top:150px;
  width: 350px;
  height: 150px;
}
.p{
  color: black;
  font-size: 15px;
  position: absolute;
  left: 8px;
  right: 8px;
}
a{
  position: absolute;
  top: 305px;
}
.nasa{
  position: absolute;
  top: 292px;
  left: 100px;
  color: black;
  font-size: 15px;

}