* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Cambria;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        width: 100vw;
        background: url('component/background.jpg') center center/cover;
    }

    .frontContainer{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
    }
    
    .frontContainer > #title{
        position: absolute;
        color: rgb(99, 30, 30);
        letter-spacing: 4px;
        font-size: 3rem;
        font-weight: bold;
        top: 20%;
    }
    
    .frontContainer > .frontBox{
        position: absolute;
        top: 40%;
        display: flex;
        flex-direction: column;
    }
    
    .frontBox > button {
        margin: 15px 0px;
        padding: 10px;
        font-size: 1.5rem;
        border: 2px solid wheat;
        background-color: rgb(143, 67, 67);
        color: white;
        border-radius: 10px;
        transition: transform 0.1s ease-in-out;
    }
    
    .frontBox > button:hover,.frontBox > button:focus{
        transform: scale(1.1);
        box-shadow: 0px 0px 10px black;
    }
    
    .frontBox > button:active{
        background-color: rgb(189, 115, 115);
        color: white;
    }

    .label{
        text-align: center;
        font-size: 1.7rem;
        font-weight: bold;
    }

    .settingContainer{
        background-color: rgb(143, 67, 67);
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0px 0px 30px black;
        display: none;
    }

    .settingContainer > .iconimage{
        height: 50px;
        width: 50px;
        margin: 15px;
        border-radius: 10px;
        padding: 5px;
        transition: transform .2s ease-in-out;
    }

    .settingContainer > .iconimage:hover,.settingContainer > .iconimage:active{
        transform: scale(1.1);
    }

    .settingContainer > #closeimage{
        position: relative;
        height: 40px;
        width: 40px;
        left: 85%;
        transition: transform .2s ease-in-out;
    }

    .settingContainer > #closeimage:hover,.settingContainer > #closeimage:active{
        transform: scale(1.1);
    }

    .aboutContainer{
        background-color: rgba(143, 67, 67, 0.932);
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0px 0px 30px black;
        display: none;
    }

    .aboutContainer > #desc{
        font-weight: bold;
    }

    .aboutContainer > #closeAboutImage{
        position: relative;
        height: 40px;
        width: 40px;
        left: 90%;
        transition: transform .2s ease-in-out;
    }

    .aboutContainer > #hgscore{
        font-size: 1.3rem;
        margin: 20px 0px;
        text-align: center;
    }

    .aboutContainer > #closeAboutImage:hover,.aboutContainer > #closeAboutImage:active{
        transform: scale(1.15);
    }

    .container {
        width: 100%;
        height: 100%;
        display: none;
    }

    .box {
        width: 100%;
    }


    #player {
        background: radial-gradient(rgba(0, 0, 0, 0.815) 10%, rgb(80, 114, 167) 10%, rgb(7, 31, 70) 89%);
        border-radius: 50%;
        height: 30px;
        width: 30px;
        position: relative;
        left: 17%;
        top: 0%;
        transition: .4s;
        border: 2px solid black;
    }

    #box1 {
        height: 65%;
        display: flex;
        align-items: flex-end;
        background: url(component/Background_ball.png) center center/cover;
        background-repeat: no-repeat;
    }

    #box2 {
        height: 35%;
        background: linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(153, 34, 34, 0.911));
    }

    .object {
        background-color: brown;
        position: absolute;
        left: 97%;
        width: 10px;
        border: 2px solid rgb(0, 0, 0);
        box-shadow: 0px 0px 10px black;
        border-top-left-radius: 23px;
        border-top-right-radius: 23px;
    }

    .ani {
        animation: object 7s infinite linear;
    }

    @keyframes object {

        0% {
            left: 99%;
        }

        100% {
            left: 0%;
        }

    }

    .out {
        animation: playerOut 1s 1 linear;
    }

    @keyframes playerOut {
        20% {
            top: -10%;
        }

        80% {
            top: 55%;
            left: 20%;

        }
    }

    #object1 {
        height: 17%;
        animation-delay: -1s;
    }

    #object2 {
        height: 15%;
        animation-delay: 1s;
    }

    #object3 {
        height: 13%;
        animation-delay: 3s;
    }

    #object4 {
        height: 17%;
        animation-delay: 4.5s;
    }

    .msgContainer {
        position: absolute;
        padding: 1%;
        width: 100%;
        font-size: 1rem;
    }

    #msg {
        font-size: 2rem;
        color: white;
        text-align: center;
    }

    #score {
        display: block;
        text-align: center;
        color: white;
        font-size: 20px;
        font-size: 1.5rem;
    }

    #highscore{
        font-size: 1.5rem;
        color: white;
        text-align: center;
    }

    .scoreContainer{
        background-color: rgba(143, 67, 67, 0.932);
        padding: 20px;
        color: white;
        border-radius: 15px;
        box-shadow: 0px 0px 30px black;
        display: none;
    }

    .scoreContainer > p{
        font-size: 22px;
        margin: 9px 0px;
    }
    
    .scoreContainer > #scoreTitle{
        text-align: center;
        font-size: 35px;
        margin: 25px 0px;
    }

    .scoreContainer > img{
        height: 35px;
        width: 35px;
        position: relative;
        margin-top: 10px;
        margin: 0px 25px;
        transition: transform .2s;
    }

    .scoreContainer > img:hover,.scoreContainer > img:active,.scoreContainer > img:focus{
        transform: scale(1.2);
    }

    .scoreContainer > #restartIcon{
        float: left;
    }

    .scoreContainer > #homeIcon{
        float: right;
    }

    @media (max-width : 800px) {
        .frontContainer > #title{
            font-size: 2rem;
        }

        .ani {
            animation: object 5s infinite linear;
        }

        #object1 {
            animation-delay: 0s;
        }

        #object2 {
            animation-delay: 1.5s;
        }

        #object3 {
            animation-delay: 3s;
        }

        #object4 {
            animation-delay: 5s;
        }
    }

    @media (max-width : 300px) {
        .ani {
            animation: object 2.5s infinite linear;
        }

        #object4 {
            display: none;
        }

        #object3 {
            display: none;
        }
    }