img:hover{
        transform: scale(1.1);
        cursor: pointer;
        touch-action: manipulation;
    }
    img{
        transition: .2s;
        cursor: pointer;
        touch-action: manipulation;
        width:8em;
        height:10em;
    }
    img:active{
        transform: scale(0.7);
        cursor:pointer;
        touch-action: manipulation;
    }
    

    body{

margin:0%;
padding:0%;
background-color:white;
}


#happyp{
    font-size:0.9em;
    margin-top: 20px;
    margin-left: 10px;
}
.container{
margin:100px, auto;
text-align:center;
}
h1{
font-size:4em;
font-family: 'Open Sans',sans-serif;

}

p,h2,h3{

font-family: 'Open Sans',sans-serif !important;
}
div{
    
    
   
    text-align: center;
    
}
.row {
    display: flex;
    padding-left: 0.1em;
    padding-right: 0.1em;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
  }
  
  .column {
    flex-basis: 31%;
    align-items: center;
    
    
    border-radius: 25px !important;
    background-color:white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-left:0.2em;
    margin-right:0.2em;
    padding-bottom:1em;
    padding-left:1em;
  }

#jobbutton{
    background-color: darksalmon;
}

button{
border:none;
padding: 15px 12px;
font-size: 1em;
transition:1.2;
font-family: 'Open Sans',sans-serif;
margin: 7px;
touch-action: manipulation;
}
button:hover{
scale:1.2em;
cursor: pointer;
background-color: black;
color:white;
transition: 0.4s;
}
button:active{
    scale:1.3em;
    cursor: pointer;
    background-color: black;
    color:white;
    transition: 0.4s;
    touch-action: manipulation;
    }
#reset{
    background-color:red;
    color:white;
}
#expenses {
    font-size: 0.8em;
    background-color: 0496FF;
    color:white;
    
    font-family: 'Open Sans',sans-serif;
    
    
}
#shoottype{
    min-width:4.5em;
    min-height:4.5em;
    margin:100px, auto;
    padding:auto;
}
#topscore {
    padding-top:0.4em;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 53px;
}
.column{
  margin-top:0.9em;
  padding-top:0.9em;
}
p{
  margin:0;
  padding:0;
}
#timediv{

max-height:4.5em;
}
#log{
    margin-top: 20px;
    margin-left: 10px;
    min-width:80%;
    
    text-align: center;
}


#clicker{
    background-image: url("images/avatar.png");
    background-size: contain;
    position:relative;
    transition: all .2s ease-in-out;
    height:220px;
    width:220px;


}

#clicker:hover{transform: scale(1.10);
}
#clicker:active{transform: scale(1.10);
}
#clicker > .number{
    z-index: index 99;
    font-size:32px;
    color: green;
    position:absolute;
}
#speedp{
    font-size:1em;
}
#logbox{
    min-height: 6.6em;
}




.slidecontainer {
    width: 85%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .slider {
    /* -webkit-appearance: none; 
    appearance: none; */
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    background: black; /* Grey background */
     /* Remove outline */
    opacity: 1; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }
  
  /* Mouse-over effects */
  .slider:hover {
    opacity: 0.9; /* Fully shown on mouse-over */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }
  
  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }


  .box select {
    background-color: white;
    color: black;
    padding: 12px;
    width: 95%;
    border: none;
    font-size: 1.1em;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    -webkit-appearance: button;
    appearance: button;
    outline: none;
  }
  
  .box::before {
    content: "\f13a";
    font-family: FontAwesome;
   
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    text-align: center;
    line-height: 45px;
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
  }
  
  .box:hover::before {
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .box select option {
    padding: 30px;
  }

  
  
  @media only screen and (max-width: 767px) {
    .check { 
      top:35%; 
      left:35%; 
      transform:translate(-35%, -35%);
    }
  
      .quizimgblock .check img { 
        max-width: 40px; 
        max-height: 40px;
    }
  }
  
  @media (max-width: 858px)  {
    .column {
      flex-basis: 100%;
  }
}