* {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
}
html {
    /*background-color: rgb(34, 34, 34);*/
    background-color: rgb(163, 218, 255);
    color: rgb(0, 0, 0);
}
/* Game ------------------------------------ */
#score {
    z-index: 0;
    text-align: center;
    width: 100%;
    height: 50%;
    font-size: 200%;
    position: absolute;
    padding-top: 80px;
    pointer-events: none;
}
#timer {
    z-index: 0;
    text-align: left;
    width:100%;
    height: 50%;
    position: absolute;
    padding-top: 80px;
    pointer-events: none;
}
#controls {
    position: absolute;
    text-align: right;
    opacity: 50%;
    top: 8%;
    pointer-events: none;
}
#gameover {
    z-index: 12;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 25%;
    left: 25%;
    border: 10px solid #0F0F0F;
    border-radius: 5px;
    background-color: #0F0F0F;
    display: none;
    animation: display_gameover 1s;
}
#gameover h1 {
    color: #ffffff;
    text-align: center;
}
#gameover h2 {
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 15%;
    
}
#gameover h3 {
    color: #fff893;
    text-align: center;
    position: absolute;
    font-size: 250%;
    top: 25%;
    
}
#gameover h4 {
    color: #ffffff;
    font-size: 150%;
    text-align: center;
    position: absolute;
    top: 45%;

}
#yes a{
    border: 3px solid rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    border-radius: 5px;
    padding: 15px 40px 15px 40px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    position: relative;
    top: -35%;
    left: 25%;
}
#no a{
    border: 3px solid rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    border-radius: 5px;
    padding: 15px 40px 15px 40px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    position: relative;
    top: -135%;
    left: 65%;
}
#yes a:hover{
    border: 3px solid rgb(0, 120, 175);
    background-color: rgb(0, 120, 175);
}
#no a:hover{
    border: 3px solid rgb(0, 120, 175);
    background-color: rgb(0, 120, 175);
}
/* Matching ------------------------------------ */
#normalIcon {
    border: solid rgba(0, 0, 0, 0.562) 3px;
    z-index: 10;
    background-image: url("img/normalTree.png");
    image-rendering: pixelated;
    opacity: 80%;
    background-size: 100px;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20%;
    right: 47.2%;
}
#cherryIcon {
    display: none;
    border: solid rgba(0, 0, 0, 0.562) 3px;
    z-index: 5;
    background-image: url("img/cherryBlossom.png");
    image-rendering: pixelated;
    opacity: 80%;
    background-size: 100px;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20%;
    right: 47.2%;
}
#orangeIcon {
    display: none;
    border: solid rgba(0, 0, 0, 0.562) 3px;
    z-index: 5;
    background-image: url("img/orangeTree.png");
    image-rendering: pixelated;
    opacity: 80%;
    background-size: 100px;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20%;
    right: 47.2%;
}
#blueIcon {
    display: none;
    border: solid rgba(0, 0, 0, 0.562) 3px;
    z-index: 5;
    background-image: url("img/blueTree.png");
    image-rendering: pixelated;
    opacity: 80%;
    background-size: 100px;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 20%;
    right: 47.2%;
}
/* Tree types ------------------------------------ */
#normalTree {
    z-index: 10;
    background-image: url("img/normalTree.png");
    image-rendering: pixelated;
    background-size: 80px;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 49%;
    right: 50px
}
#cherryBlossom {
    z-index: 10;
    background-image: url("img/cherryBlossom.png");
    image-rendering: pixelated;
    background-size: 80px;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 49%;
}
#orangeTree {
    z-index: 10;
    background-image: url("img/orangeTree.png");
    image-rendering: pixelated;
    background-size: 80px;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 49%;
    right: 30%;
}
#blueTree {
    z-index: 10;
    background-image: url("img/blueTree.png");
    image-rendering: pixelated;
    background-size: 80px;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 49%;
    right: 60%;
}
/* Animations ------------------------------------ */
.tree_correct {
    animation: tree_click_correct .5s;
}
.tree_incorrect {
    animation: tree_click_incorrect .5s;
}
@keyframes tree_click_correct {
    0% {
        transform: scale(1);
    }
    25% {
        transform: rotate(45deg);
    }
    40% {
        filter: brightness(1.75);
        transform: scale(1.25) rotate(90deg);
    }
    50% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(90deg) scale(1);
    } 
}
@keyframes tree_click_incorrect {
    0% {
        transform: scale(2);
    }
    40% {
        filter: brightness(10%);
    }
    100% {
        transform: scale(1);
    } 
}
@keyframes display_gameover {
    0% {
        transform: scale(.75);
    }
    50% {
        transform: scale(1);
    }
    70% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    } 
}
/* Ground ------------------------------------ */
#ground {
    z-index: 2;
    background-image: url("img/grass.png");
    image-rendering: pixelated;
    background-size: 50px;
    background-repeat: repeat-x;
    position: absolute;
    top: 55%;
}
#groundBackground {
    background-color: #564134;
    width: 100%;
    height: 100%;
    position: relative;
    top: 59%;
}