header, nav, main, footer, figure, figcaption { display: block; }
body { font-family:Verdana, Arial, sans-serif;
        
}
#wrapper { background-color: #2533AA; 
           color: #000066;
           width: 80%;
           margin: auto;
} 
header { background-color: #FDE000;
        color: #E3DBFF; 
        font-size: 300%; 
        padding: 5px 10px 10px;
}
h1 { background-image: url(cleaner.svg);
    background-size: 100px;
     background-repeat: no-repeat;
   background-color: #2533AA;
   height: 80px;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 300%;
   position: relative;
   color: #079A49;
   padding-left: 120px;
   padding-top: 10px;
   text-shadow: 2px 2px 2px #FDE000;
   margin-bottom: 0;
}
#tag { padding-right: 20px;
       font-size: .80em;
       font-style: italic;
       text-align: right;
       color: #FDE000;
}           
h2 { color: #25336E; 
     font-family: arial, sans-serif;
     font-size: 200%;
}
h3 { color: #666666; 
     font-family: arial, sans-serif;
     font-size: 150%;
}
nav { float: left;
       width: 150px;
       letter-spacing:0.1em;
       font-weight: bold;
} 
nav ul { list-style-type: none; 
         margin: 0;
         padding: 0;
}
nav li { padding: 15px;
}
nav a { text-decoration: none;
}
nav a:link { color: #FFFFFF; }
nav a:visited { color: #FFFFFF; }
nav a:hover {  color: #FDE000;}

main { margin-left: 155px;
        padding: 20px;
        background: #C0C0C0;  
        color: #000000;
        
} 
figure { margin: 10px;
         float: right;

}

figcaption { font-size: 80%;
               font-style: italic;
               text-align: center;
}
footer { font-size:70%;
         text-align: center;
         clear: right;
         padding: 20px;
         background-color: #E3DBFF;
}

label, legend{
     color: #990066; 
     font-family: arial, sans-serif;
     font-size: 200%;
}

fieldset {
  margin: 5px;
  padding: 5px 5px 5px 5px;
  border: 4px solid #990066;
  border-radius: 20px;
  box-shadow: 0 0 10px #606;
  background-color: #aaa;
}
legend {
  padding: 2px 4px;
  
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -10px;
}
fieldset > legend + * {
  clear: both;
}

#message_id {
    position: fixed; 
    bottom: 50px; 
    right: 200px;
}

#hi_there_id{
    position: fixed; 
    bottom: 100px; 
    right: 175px;  
}


#sample_photos_id{
    width: 50%;
}

#before_after_id{
    width: 90%;
}

input {
  font-size: 150%;
}

@media only screen and (max-width: 10240px) {
   body { margin: 0; }
   #wrapper { width: auto; } 
   main { margin-left: 0; }
   nav { float: none; width: auto; }
   nav li { display: inline-block; padding: 0.5em; }
   nav ul { text-align: center; }
   nav a { border-style: none; }
   h1, h2 { font-size: 250%; }
   h3 { font-size: 110%; }
   p { font-size: 90%; } 
   #message_id{right: 25px; bottom: 10px;}
   #hi_there_id{right: 0px; bottom: 60px;}
   legend{font-size: 150%;}
   input{font-size: 125%;}
   
}
@media only screen and (max-width: 768px) {
     h1, h2 { font-size: 200%; }
     p { font-size: 90%; }
     figure { display: none;}
     nav, nav ul, nav li { padding: 0;  }
     nav li { display: block; } 
     nav a { display: block;  padding: 0.5em 0;
               border-bottom: 2px ridge #00005D;
               }

    #message_id{ right: 50px; bottom: 10px;}
    #hi_there_id{right: 25px; bottom: 60px;}  
    legend{font-size: 100%;}
    input{font-size: 110%;}