.instuct{
    padding: 20px;
     
       font-size: 25px;
       font-weight: bold;
       font-family: Avenir, Helvetica, sans-serif;
     
      color: green;
     text-align: center;
 }
 
 .math{ 
   height: 600px;
   width: 100%;
   position: relative;
 }
   .correct,
   .mistakes{
     float: left;
     width: 200px;
     height: 100%;
     svg{
       margin: 0;
       height: 90px;
     }
   }
   .problem{
     display: block;
     border: 4px double green;
     border-radius: 25px;
     width: 300px;
     height: 100%;
     margin: 0 auto;
     padding: 20px;
     
     font-size: 25px;
     font-weight: bold;
     font-family: Avenir, Helvetica, sans-serif;
     
      color: green;
     text-align: left;
   }
   .tree{
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
  }
     .apple {
       display: inline-block;
       cursor: pointer;
       position: absolute;
       }
 
#tryAgainBtn{
    position: absolute;
    left:40%;
    margin-bottom: 20px;
    padding:5px;
    border-radius: 15px;
    color:white;
    font-size: 30px;
    background:red;
    cursor: pointer;
    top: 300px;
    display: none;

}
 /* media query for max-screen 600px*/
 @media screen and (max-width: 600px) {
    body{
        overflow: hidden;
    }
    .math{
        max-width: 100%;
        max-height: 100%;
    }
    .tree{
        height: 80%;
        position: absolute;
        top: 200px;
    
      }
      .apple {
        
        margin-top:200px;

        }
 }