/*styling.css*/
html{
    height: 100%;
    background: radial-gradient(circle, #fff, #ccc);
    background: -webkit-radial-gradient(circle, #fff, #ccc);   
    background: -o-radial-gradient(circle, #fff, #ccc);   
    background: -moz-radial-gradient(circle, #fff, #ccc);
}
#container{
    height: 600px;
    /* width: 750px; */
    width: 600px;
    background-color: #9DD2EA;
    margin: 10px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 0px 0px #009de4;
    -moz-box-shadow: 0px 4px 0px 0px #009de4;
    -webkit-box-shadow: 0px 4px 0px 0px #009de4;
/*        box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]*/
    position: relative;
}
@media (max-width: 576px) {
    #container {
        width: 100% !important;
        
        height: 800px !important;
        margin: 10px 0px !important;
        padding: 10px !important;
    }
    #fruitsContainer{
        width: 380px !important;
        height: 600px !important;
        margin: 50px 5px 10px 5px !important;
    }
    #instruction{
        width: 300px !important;
    }
    /* #score{
        left:320px !important;
    } */
    /* #gameOver{
        width: 300px !important;
        left: 15px !important;
    } */
    .fruit{
        width: 75px !important;
        height: 75px !important;
    }
  }
#score{
    background-color: #F1FF92;
    color: #888E5F;
    padding: 11px;
    /* position: absolute; */
    /* left: 700px; */
    display: flex;
    float: right;
    margin-right: 25px;
    box-shadow: 0px 4px 0px #9da853;
    -moz-box-shadow: 0px 4px 0px #9da853;
    -webkit-box-shadow: 0px 4px 0px #9da853;
}

#correct{
    float:right;
    background-color: #42e252;
    color: white;
    padding: 1rem;
    display: none;
}

#wrong{
    float:right;
    background-color: #de401a;
    color: white;
    padding: 11px;
    display: none;
}

#fruitsContainer{
    /* width: 650px; */
    width: 98%;
    height: 75%;
    margin: 50px auto 10px auto;
    background-color: white;
    box-shadow: 0px 4px #535aa8;
    -moz-box-shadow: 0px 4px #535aa8;
    -webkit-box-shadow: 0px 4px #535aa8;
    font-size: 100px;
    text-align: center;
    font-family: cursive, sans-serif;
    color: black;
    position: relative;
    overflow: hidden;
}

#instruction{
    width: 80%;
    height: 10%;
    background-color: #B481D9;
    margin: 10px auto;
    text-align: center;
    line-height: 45px;
    box-shadow: 0px 4px #8153a8;
    -moz-box-shadow: 0px 4px #8153a8;
    -webkit-box-shadow: 0px 4px #8153a8;
}

#startreset{
    width: 100px;
    height: 5%;
    padding: 10px;
    background-color: rgba(255,255,255,0.5);
    margin: 0 auto;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;   
}

#trialsLeft{
    width: 80px;
    padding: 10px;
    /* position: absolute; */
    /* display: flex; */
    float: left;
    background-color: #F1FF92;
    border-radius: 3px;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
/*    visibility: hidden;*/
    display: none;
}
.flash{
    z-index: 20;
    display: none;
    position: absolute;
}
#gameOver{
    /* height: 200px;
    width: 500px; */
    /* height: 70%; */
    width: 90%;
    height: 90%;
    background: linear-gradient(#F3CA6B, #F3706C);
    background: -webkit-linear-gradient(#F3CA6B, #F3706C);
    background: -o-linear-gradient(#F3CA6B, #F3706C);
    background: -moz-linear-gradient(#F3CA6B, #F3706C);
    color: white;
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    /* position: absolute; */
    margin: 5%;
    /* top: 10%;
    left: 5%; */
    z-index: 2;
    display: none;
    
}

.life{
    width: 16px;
    height: 16px;
    margin: 0 5px;
}

.fruit{
    display: none;
    width: 100px;
    height: 100px;
    position: absolute;
}
#poweredby{
    background-color: transparent;
    margin: 1.5rem auto 0px auto ;
    font-size: 0.875rem;
    text-align: center;
    position: relative;
}
.rotated {
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -o-transform: rotate(45deg); /* Opera */
  }
  .scaled{
    -webkit-transform: scale(1e-5);  /* Saf3.1+, Chrome */
    -moz-transform: scale(1e-5);  /* FF3.5+ */
    -ms-transform: scale(1e-5);  /* IE9 */
    -o-transform: scale(1e-5);  /* Opera 10.5+ */
     transform: scale(1e-5);
}