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

@font-face {
    font-family: "Kongtext";
    src: url(../fonts/kongtext.ttf);
}

.body {
    background: #f9f9f9;
    overflow: hidden;
    user-select: none;
}

.main {
    position: relative;
    width: 100%;
    height: 500px;
    min-width: 800px;
    border-bottom: 3px solid #0173c7;
    color: #0173c7;
    font-family: "Kongtext";
}

.scores {
    position: absolute;
    text-align: right;
    bottom: 200px;
    right: 50px;
    font-size: 36px;
}

.score_high, .score_title {
    color: #519FD8;
}

.dino {
    position: absolute;
    bottom: -18px;
    left: 50px;
    width: 83px;
    height: 88px;
    background-repeat: no-repeat;
    background-image: url(../images/dino-still.png);
    background-position: top center;
    background-size: contain;
    z-index: 9000;
}

.dino-1 {
    background-image: url(../images/dino-1.png);
}

.dino-2 {
    background-image: url(../images/dino-2.png);
}

.dino-still {
    background-image: url(../images/dino-still.png);
}

.dino-down-1 {
    background-image: url(../images/dino-down-1.png);
    width: 110px;
}

.dino-down-2 {
    background-image: url(../images/dino-down-2.png);
    width: 110px;
}

.ground {
    position: absolute;
    right: -100px;
    bottom: -25px;
    height: 20px;
    width: max-content;
}

.rock {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-right: 0;
    background-color: #0173c7;
    width: 5px;
    height: 4px;
}

.bump {
    display: inline-block;
    position: relative;
    height: 4px;
    width: 5px;
}

.bump::after {
    content: "";
    display: inline-block;
    position: relative;
    top: -13px;
    height: 15px;
    width: 68px;
}

.bump-1::after {
    background: #f9f9f9 url(../images/bump-1.png);
}

.bump-2::after {
    background: #f9f9f9 url(../images/bump-2.png);
}

.sky {
    position: absolute;
    right: -120px;
    bottom: 110px;
    height: 100px;
    width: max-content;
}

.cloud {
    position: relative;
    display: inline-block;
    width: 5px;
    height: 5px;
    top: 20px;
}

.cloud::after {
    content: "";
    display: block;
    width: 96px;
    height: 27px;
    background: url(../images/cloud.png);
}

.obstacle {
    display: inline-block;
    height: 4px;
    width: 5px;
    z-index: 900;
}

.obstacle::after {
    content: "";
    display: block;
    position: relative;

}

.cactus-1::after {
    background-image: url(../images/cactus-1.png);
    width: 34px;
    height: 71px;
    top: -58px;
}

.cactus-2::after {
    background-image: url(../images/cactus-2.png);
    width: 68px;
    height: 71px;
    top: -58px;
}

.cactus-3::after {
    background-image: url(../images/cactus-3.png);
    width: 104px;
    height: 71px;
    top: -58px;
}

.cactus-4::after {
    background-image: url(../images/cactus-4.png);
    width: 51px;
    height: 99px;
    top: -86px;
}

.cactus-5::after {
    background-image: url(../images/cactus-5.png);
    width: 102px;
    height: 99px;
    top: -86px;
}

.cactus-6::after {
    background-image: url(../images/cactus-6.png);
    width: 151px;
    height: 99px;
    top: -86px;
}

.bird-1::after {
    background-image: url(../images/bird-1.png);
    width: 90px;
    height: 57px;
}

.bird-2::after {
    background-image: url(../images/bird-2.png);
    width: 90px;
    height: 65px;
    top: 12px;
}

.gameover {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    font-size: 36px;
    visibility: hidden;
    z-index: 10000;
}

.gameover::after {
    content: "";
    display: block;
    width: 89px;
    height: 79px;
    margin: 20px auto;
    background: url(../images/retry.png) no-repeat;
}