a,h1,h2,h3 {
  font-family: 'Josefin Sans', sans-serif;
  color: #e0eff2;      
  text-shadow: 1px 1px #00f0f0, 3px 3px 0 #3a50d9, 2px 2px  #FF00FF, 4px 3px #00f0f0;
}


 h4 {
  font-size: .8em;    
  font-family: 'Josefin Sans', sans-serif;
  color: #e0eff2;      
  text-shadow: 1px 1px #00f0f0, 3px 3px 0 #3a50d9, 2px 2px  #FF00FF, 4px 3px #00f0f0;
}
    p.followup1{
color:black   
}

a.overlaytext{
    font-size: 1.8em;
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}
a.overlaytext:hover{
cursor: help;    
animation: grower 2s infinite;
z-index: 5;    
}

@keyframes grower {
    0%{
    transform: scale(1.53,2.);
    }
    25%{
    color:#000;    
    text-shadow:1px 1px 2px #00ffff,2px 3px #ff0000, 3px 4px 2px #00ffff;
    }
    69%{
    color:#020102;
       text-shadow:1px 1px 2px #f000ff,2px 3px 8px #fff000, 3px 4px 2px #00ffff; 
    }
    100%{    
    -ms-transform: scale(2.9, 3.9); /* IE 9 */
    -webkit-transform: scale(2.9, 3.9); /* Safari */
    transform: scale(2.9, 3.9);
    }
}

    p {
  font-family: 'Josefin Sans', sans-serif;
    text-align: center;
    color: #e0eff2;;
    text-shadow: 2px 3px #ff0000;
    font-size:16px;
    padding: 1em;
}
    li {  
  font-family: 'Josefin Sans', sans-serif;
    text-align: left;
    color: #e0eff2;
    text-shadow: 2px 3px #ff0000;
}
        

/* responsive stuff */
/* DESKTOP */
        @media all and (min-width:1279px){
        #mainbody {
        z-index: 4;
        background-image:   url(/images/gridride4.gif);
        background-size: 100%;
        background-repeat: repeat;
        width:1300px;
        
        }
}
        

           
            html {
                    background-color: #ccc;
            }
           
            h1, h2, h3, h4, h5, h6 {
                font-family: 'Josefin Sans', sans-serif;
                    font-weight: normal;
            }
           
            footer {
                font-family: 'Josefin Sans', sans-serif;
                    text-align: center;
                    font-size: 80%;
                
            }
           

#assignmentList{
margin: 0 auto;
border: 3px groove #007;
width: 80%;
max-width: 980px;
padding: 12px;
}

    /* Responsive DESKTOP LAYOUT */
           @media all and (min-width:780px) {
            #mainbody {
                    font-family: 'Josefin Sans', sans-serif;
                    max-width: 960px;
                    margin:auto;
                    padding: 20px;
                    min-height: 450px;
            }
           
               img.miximage{
                border:9px;
                border-style: dotted;   
                max-width: 500px;
               }
               
               
               
            img.me {
                    float: right;
                    display: inline-block;
                    padding: 35px;
            }
            img.featuredmix {
                    display: inline-block;        
                    border:9px;
                    border-style: dotted;
                    top: 0px;
                    max-width: 800px;
            }
               .featuredinstrument{
                   display:inline-block;
                   background: blue;
                   margin:1%;
                   padding:1%;
                   text-shadow: 1px 1px 1px #fff, 2px 2px 2px #000;
                   width:100%;
                   font-size: 1.5em;
                   font-family: 'Josefin Sans', sans-serif;

               }
           
            ul, ol {
                    margin-left: 30px;
            }
           
            p {
                    margin: 10px;
            }
           
            h1, h2, h3, h4, h5, h6 {
                    margin: 1px;
            }
           
            h1.masthead {
                    margin-top: 0;
            }
    }
   
   
    /* Responsive TABLET LAYOUT  */
            @media all and (min-width:481px) and (max-width:1278px) {
            
            #mainbody {
            background-image:url(/images/gridride4.gif);
            background-size: 50%;
             }
           
            img.miximage{
                width: 100%;
                display:block;
                border:9px;
                    border-style: dotted;
                    top: 0px;
                float:left;
               }
               
               
               
            img.me {
                    float: right;
                    display: inline-block;
                    padding: 35px;
            }
            img.featuredmix {
                    display: inline-block;        
                    border:9px;
                    border-style: dotted;
                    top: 0px;
                    max-width: 90%;
            }   
               
             .featuredinstrument{
                   display:inline-block;
                   background: blue;
                   margin:1%;
                   padding:1%;
                   text-shadow: 1px 1px 1px #fff, 2px 2px 2px #000;
                   width:90%;
                   font-size: 1.em;
                 font-family: 'Josefin Sans', sans-serif;
               }
               
               img.featuredinstrument{
               max-width: 90%;
               }
               
            img.me {
                    width:320px;
            }
    }
   
   
    /* Responsive PHONE LAYOUT  */
           @media all and (max-width:480px) {
            #mainbody {
            background-image:url(/images/gridride4.gif);
            background-size: 15%;}
           
            img.miximage{
                max-width: 300px;
                display:block;
                border:9px;
                    border-style: dotted;
                    top: 0px;
                float:left;
               }
               
               
               
            img.me {
                    float: right;
                    display: inline-block;
                    padding: 35px;
            }
            img.featuredmix {
                    display: inline-block;        
                    border:9px;
                    border-style: dotted;
                    top: 0px;
                    max-width: 90%;
            }   
               
             .featuredinstrument{
                   display:inline-block;
                   background: blue;
                   margin:1%;
                   padding:1%;
                   text-shadow: 1px 1px 1px #fff, 2px 2px 2px #000;
                   width:90%;
                   font-size: 1.em;
                   font-family: 'Josefin Sans', sans-serif;
               }
               
               img.featuredinstrument{
               max-width: 90%;
               }
               
            img.me {
                    width:320px;
            }
    }

#mainbody{
color: firebrick;
border:3px;
    border-style:dotted;
    }

h4 {
color:aqua;
}

#sorry {
color:gold;
border-style:dotted;
text-shadow: 2px 2px 3px #ff00f0;
display:inline-block;   
}

#imgslot1 {
border: 40px groove;
}

video { 
    position: fixed;
    top: 100%;
    left: 50%;
    min-width: 10%;
    min-height: 10%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('https://49.media.tumblr.com/602d0146b1b0f1c48e81f5308e258811/tumblr_nxw7hilgqV1qb7jy6o1_500.gif') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

#main{
width:95%;
font-size 1.4em;
}

/* Important styles */
#toggle {
  display: block;
  width: 25%;
  height: 30px;
  margin: 0px auto 0px;
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 6px;
  background-color: #F0F;
  transition: all 0.93s;
  backface-visibility: hidden;
  border-radius: 22px;

}

#toggle span:after,
#toggle span:before {
background-color:  #ff88ff;
background: -webkit-repeating-linear-gradient(190deg,#ff88ff,#ff88ff 7%,green 10%); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(190deg,#ff88ff,yellow 7%,#ff88ff 10%); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(190deg,#ff88ff,yellow 7%,#ff88ff 10%); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(190deg,#ff88ff,yellow 7%,#ff88ff 10%); /* Standard syntax (must be last) */
}


/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(415deg) translate(15px, 5px) scale3d(12,20,11);
}
#toggle.on span:after {
  transform: rotate(-415deg) translate(17px, -8px) scale3d(12,20,11) ;
}
#toggle.on + #submenu {
  opacity: .85;
  visibility: visible;
}

/* submenu appearance*/
#submenu {
  position: relative;
  color: #999;
  width: 200px;
  padding: 10px;
  margin: auto;
  font-family: 'Josefin Sans', sans-serif;

  text-align: center;
  border-radius: 4px;
  background: #a01ff2;  
  /* just for this demo */
  opacity: 0.25;
  visibility: hidden;
  transition: opacity .6s;
}
#submenu:after {
  position: absolute;
  top: -15%;
  left: 9%;
  content: "marks the spot";
  display: block;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  
}

/* Important styles */
#toggle2 {
  display: block;
  width: 25%;
  height: 30px;
  margin: 0px auto 0px;
}

#toggle2 span:after,
#toggle2 span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle2 span:after{
  top: 9px;
}
#toggle2 span {
  position: relative;
  display: block;
}

#toggle2 span,
#toggle2 span:after,
#toggle2 span:before {
  width: 100%;
  height: 6px;
  background-color: #F0F;
  transition: all 0.93s;
  backface-visibility: hidden;
  border-radius: 22px;

}

#toggle2 span:after,
#toggle2 span:before {
background-color:  #ff88ff;
background: -webkit-repeating-linear-gradient(190deg,#ff88ff,#ff88ff 7%,green 10%); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(190deg,#ff88ff,yellow 7%,#ff88ff 10%); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(190deg,#ff88ff,yellow 7%,#ff88ff 10%); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(190deg,#ff88ff,yellow 7%,#ff88ff 10%); /* Standard syntax (must be last) */
}


/* on activation */
#toggle2.on span {
  background-color: transparent;
}
#toggle2.on span:before {
  transform: rotate(415deg) translate(15px, 5px) scale3d(12,20,11);
}
#toggle2.on span:after {
  transform: rotate(-415deg) translate(17px, -8px) scale3d(12,20,11) ;
}
#toggle2.on + #submenu {
  opacity: .85;
  visibility: visible;
}

/* menu appearance*/
#submenu {
  position: relative;
  color: #999;
  width: 200px;
  padding: 10px;
  margin: auto;
    font-family: 'Josefin Sans', sans-serif;
    
  text-align: center;
  border-radius: 4px;
  background: #a01ff2;  
  /* just for this demo */
  opacity: 0.25;
  visibility: hidden;
  transition: opacity .6s;
}
#submenu:after {
  position: absolute;
  top: -15%;
  left: 9%;
  content: "marks the spot";
  display: block;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  
}