html, body {
    background-image: url("../images/ocean_2.png");
    background-size: cover;
    background-color: #eee;
    overflow: hidden ;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
}
canvas {
    width:100%;
    height:100%;
    border:1px solid #d3d3d3;
}
#start {
    z-index: 10;
}
.bottom-btns {
    opacity: 0;
    display: none;
    font-family: Play;
    font-weight: bold;
    border-radius: 20px;
    padding: 20px 20px;
    position: absolute;
    bottom: -0.5%;
    overflow: hidden;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
.smollbtn {
    float: left;
    text-align: center;
    margin: 6px 6px!important;
    height: 60px;
    width: 60px;
    border: 4px solid #062768;
    -webkit-border-radius: 30%;
    -moz-border-radius: 30%;
    border-radius: 30%;
    background: linear-gradient(to bottom, whitesmoke 50%, #EEEEEE 50%);
    outline: none;
}
.bottom-btns a:focus {
    outline:none;
}
@media screen and (max-width: 1800px) {
    /* start of large tablet styles */
    #gameName {
        width: 38%;
    }
}
@media screen and (max-width: 1300px) {
    /* start of large tablet styles */
    #gameName {
        width: 43%;
    }
}
@media screen and (max-width: 767px) {
    /* start of medium tablet styles */
    #gameName {
        width: 63%;
    }
}
@media screen and (max-width: 479px) {
    /* start of phone styles */
    #gameName {
        width: 73%;
    }
}
#gameName {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
}
#userName{
    position: absolute;
    top: 70%;
    left:50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    font-family: Play;
    color: whitesmoke;
}
/* Loading animation */
.lds-dual-ring {
    width: 69px;
    height: 69px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    position: absolute;
    top: 58%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 69px;
    height: 69px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: spin 1.2s linear infinite;
}