/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/


* { box-sizing: border-box; }

img { display: block; }



.header{
   position: sticky;
   top:0px;
   z-index:-200;
   position: -webkit-sticky;
  
}


.header img {
      width: 100%;
      height: 800px;


}



.container {
   width: 100%;
   padding: 5%;

}

.quizbox{
   /*border: 6px solid #f3d250;*/
   background-color: #ececec;
   border-radius: 25px;
   width: 40%;
   min-height: 60%;
   padding: 20px;
   margin: 15px auto;
   position: relative;
   left: -1000px;
   font-family: 'Happy Monkey', cursive;
    box-shadow: 5px 3px 4px black;

}

.question{
   background-color: #f78888;
   padding: 10px; 
   color: #ececec;
}

.answer{
   line-height: 1.6em;
   margin-left: 10px;
}

.headshot {
  width: 20%;
}

.eachanswerq1 , .eachanswerq2, .eachanswerq3, .eachanswerq4 {

   border-radius: 50px;
   margin: 4%;
   cursor:grab;
   box-shadow: 5px 3px 4px black;
   padding: 2%;


}

.pop {
   height:10%;
   width: 10%;
   display: none;
}

.results{
   border: 2px solid teal;
   width: 90%;
   min-height: 450px;
   margin-top: 20px; 
   margin-left: 20px;
   padding: 2%;
   color: black;

}

.results img{
  padding: 3;
   width: 100%;

}


.anwsers {
   border: 2px solid blue 
   width:20px;
   height: 10px;
}


.body{
   width: 100%;
   background-color:pink;
   display: flex;
   flex-wrap: wrap;
   height: 40%;
  /* padding: 16px;
   margin:16px;*/

}


.desk {
   position: relative;
   overflow: hidden;
   width: 33%;

  

 }

.desk img {
   padding: 82px;
   width: 100%;


}


.caption {
   font-family: 'Homemade Apple', cursive;
   font-size: 2em;
   position: absolute;
   bottom: 10%;
   left: 36%;
   color: snow;
   display: none;


}


.ca3-scroll-down-arrow {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2hldnJvbl90aGluX2Rvd24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiBmaWxsPSJ3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTE3LjQxOCw2LjEwOWMwLjI3Mi0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwYzAuMjcsMC4yNjgsMC4yNzEsMC43MDEsMCwwLjk2OWwtNy45MDgsNy44M2MtMC4yNywwLjI2OC0wLjcwNywwLjI2OC0wLjk3OSwwbC03LjkwOC03LjgzYy0wLjI3LTAuMjY4LTAuMjctMC43MDEsMC0wLjk2OWMwLjI3MS0wLjI2OCwwLjcwOS0wLjI2OCwwLjk3OSwwTDEwLDEzLjI1TDE3LjQxOCw2LjEwOXoiLz48L3N2Zz4=);
   background-size: contain;
   background-repeat: no-repeat;
}

.ca3-scroll-down-link {
   height: 60px;
   width: 80px;
   margin: 0px 0 0 -40px;
   line-height: 60px;
   position: absolute;
   left: 50%;
   bottom: 0px;
   font-size: 70px;
   -webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
   -moz-animation:    ca3_fade_move_down 2s ease-in-out infinite;
   animation:         ca3_fade_move_down 2s ease-in-out infinite;
}




.footer {
  margin:auto;
  padding:20px;
  max-width:100%;
  background-color: #fbf579;
  font-family: 'Happy Monkey', cursive;
}


/*animated scroll arrow animation*/
@-webkit-keyframes ca3_fade_move_down {
  0%   { -webkit-transform:translate(0,-20px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,20px); opacity: 0; }
}


/*media query for responsive design */

@media only screen and (max-width: 640px) {

.quizbox{
   width: 90%;

}



.caption {
   font-family: 'Homemade Apple', cursive;
   font-size: 20px;
   position: absolute;
   bottom: 10%;
   left: 36%;
   color: snow;
   display: none;


}

body { 
  background:radial-gradient(circle, rgba(251,203,63,1) 32%, rgba(227,177,231,0.9066001400560224) 62%);
 }

.header img {     
  height:50%;


}

}