*{
    margin: 0px;
    padding: 0px;
}
body{
    background-color: rgb(79, 150, 46);
}
#box{
    height: 59vh;
    width: 35vw;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 20%;
    left: 33%;
    background-color: rgb(0, 225, 0,0.5);
    border-radius: 7px;
}
.inbox{
    height: 33.4%;
    width: 33.3%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button{
    background-color: rgb(0, 225, 0,0.9);
    height: 94%;
    width: 94%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    font-size: 550%;
    font-weight: 900;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.button:hover{
    height: 98%;
    width: 98%;
}
.button:active{
    height: 91%;
    width: 91%;
}
#home{
    height: 59vh;
    width: 30vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20%;
    left: 36%;
    background-color: rgb(0, 225, 0,0.5);
    border-radius: 7px;
}
h1{
    color: rgb(172, 255, 39);
    font-family: Arial, Helvetica, sans-serif;
    padding: 20%;
}
#play{
     background-color: rgb(0, 225, 0,0.9);
    height: 15%;
    width: 50%;
    border: 3px solid green;
    border-radius: 3px;
    color: rgb(172, 255, 39);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: 900;
}
#par{
    color: rgb(172, 255, 39);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 200%;
    padding: 20.3%;
}
#Return{
    background-color: rgb(0, 225, 0,0.9);
    height: 15%;
    width: 50%;
    border: 3px solid green;
    border-radius: 3px;
    color: rgb(172, 255, 39);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: 900;
    margin: 2%;
}
#plyagn{
    background-color: rgb(0, 225, 0,0.9);
    height: 15%;
    width: 50%;
    border: 3px solid green;
    border-radius: 3px;
    color: rgb(172, 255, 39);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: 900;
    margin: 2%;
}
#box2{
    height: 59vh;
    width: 35vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20%;
    left: 33%;
    z-index: 1;
    background-color: rgb(0, 225, 0,0.5);
    border-radius: 7px;
}
#tutorial{
    height: 20vh;
    width: 35vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 40%;
    left: 33.5%;
    z-index: 1;
    background-color: rgb(0, 225, 0,0.5);
    border: 2px yellowgreen solid;
    border-radius: 7px;
     color: rgb(172, 255, 39);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: 900;
}
#okay{
     background-color: rgb(0, 225, 0,0.9);
    height: 22%;
    width: 25%;
    border: 3px solid green;
    border-radius: 3px;
    color: rgb(172, 255, 39);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: 900;
    margin: 2%;
}
#turn{
    background-color: rgb(0, 225, 0,0.9);
    height: 10%;
    width: 20%;
    border: 3px solid green;
    border-radius: 3px;
    color: rgb(172, 255, 39);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 200%;
    font-weight: 900; 
    top: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 4%;
    left: 40%;
}

@media (max-width:600px) {
    #home{
    height: 50vh;
    width: 80vw;
    top: 20%;
    left: 9.5%;
}
#tutorial{
    height: 10vh;
    width: 98vw;
    top: 40%;
    left: 0.45%;
}
#okay{
    height: 33%;
    width: 22%;

}
#turn{
    height: 10%;
    width: 50%;
    font-size: 150%;
    top: 4%;
    left: 24%;
}
#box{
    height: 53vh;
    width: 90vw;
    top: 20%;
    left: 5%;
}
#box2{
    height: 53vh;
    width: 90vw;
    top: 20%;
    left: 5%;
}
}