* {
	 padding: 0;
	 margin: 0;
 }
 body {
	 height:100vh;
	 background: #584040;
	 display: flex;
	 align-items: center;
 }
 .contenedor {
    width: 920px;
    height: 280px;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(#b7d6c7, transparent) #ffe2d1;
    transition: background-color 1s linear;
    overflow: hidden;
}

.suelo {
    width: 200%;
    height: 42px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url("../img/suelo.png") repeat-x 0px 0px;
    background-size: 50% 42px;
}

.dino {
    width: 84px;
    height: 84px;
    position: absolute;
    bottom: 22px;
    left: 42px;
    z-index: 2;
    background: url("../img/dino.png") repeat-x 0px 0px;
    background-size: 336px 84px;
    background-position-x: 0px;
}

.dino-corriendo {
    animation: animarDino 0.25s steps(2) infinite;
}

@keyframes animarDino {
    from {
        background-position-x: -84px;
    }
    to {
        background-position-x: -252px;
    }
}

.score{
	width: 50px;
	height: 30px;
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 4;
	color: #d48871;
	font-family: Verdana;
	font-weight: bold;
	font-size: 35px;
	text-align: right;
}

.cactus {
    width: 46px;
    height: 96px;
    position: absolute;
    bottom: 16px;
    left: 600px;
    z-index: 1;
    background: url(../img/cactus1.png) no-repeat;
}

.game-over {
    display: none;
    position: absolute;
    width: 100%;
    text-align: center;
    color: #7e928b;
    font-size: 30px;
    font-family: Verdana;
    font-weight: 700;
}

.replay-btn {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #ff5733;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.replay-btn:hover {
    background-color: #e64c29;
}