*{
    margin: 0px;
    border: 0px;
    padding: 0px;
    font-family: 'Times New Roman';
}

body{
    overflow: hidden;
}

.gamecontainer{
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    height:100%;
    width: 100%;
    position: absolute;
    background-size:cover;
    
}
.car{
    position: absolute;
    bottom: 0px;
    height: 200px;
    width: 700px;
    background-image: url(mario1.png);
    background-size:contain;
    background-repeat: no-repeat;
}
@keyframes move{
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
.danger{
    left: 200px;
    top:77vh;
    position: absolute;
    height: 200px;
    width: 700px;
    background-image: url(danger1.png);
    background-size:contain;
    background-repeat: no-repeat;
    animation: danger;
}
.box{
    display: flex;
}
#score{
    padding: 10px;
    position: relative;
    margin-right: 10px;
    margin-top:10px;
    width: 150px;
    height: 30px;
    border-radius: 10px;
    float: right;
    background-color: white;
    color: black;
    opacity: 0.7;
}
.gameover{
    position: relative;
    text-align: center;
    font-size: large;
    font-family: 'Times New Roman';
    top: 300px;
    left: 100px;
    margin: auto;
    height: 30px;
    width: 300px;
    border-radius: 30px;
    background-color: white;
    opacity: 0.7;
    color: black;
    padding: 5px;
    visibility: hidden;
}

.Animatedino{
    animation: dino 0.9s linear;
}

@keyframes dino{
    0%{
        bottom: 0;
    }
    50%{
        bottom:350px;
    }
    100%{
        bottom: 0px;
    }
}

.Animationdanger{
    animation: danger 5s linear infinite;
}

@keyframes danger{
    0%{
        left: 100vw;
    }
    100%{
        left:-10vw;
    }
}