.wrapper {
    position: relative
}

.canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.canvas-background {
    border: 1px solid black;
}

.canvas-player {
    border: 0px solid black;
}

.canvas-obstacle {
    border: 0px solid black;
}

.hitbox {
    border: 1px solid black;
}
.endScores {
    color: rgb(0,0,0);
    padding: 70px 0;
    text-align: center;
}

.slide_button {
  position: absolute;
  bottom: 1;
  right: 0;
  width: 10%;
  
  z-index: 100;
}

.force_button {
  position: absolute;
  top: 175px;
  right: 0;
  width: 10%;
  z-index: 100;
}

.playPause {
    position: absolute;
    top: 0%;
    left: 50%;
    height: 50px;
    width: 50px;
}

.label {
    position: absolute;
    z-index: 100;
    left: 0%;
}
.level {
    top: 0px;
}

.score {
    top: 40px;
}

.countdown {
    top: 80px;
    color: blue;
}

.img{
 /* display:block;*/
  width:100%; height:100%;
/*  object-fit: cover;*/
}

.button_website1, .button_website2, .button_website3, .button_website4, .button_website5, .button_website6 {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	background-color:#f9f9f9;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	width: 150px;
	height: 50px;
	position: absolute;
 }

.button_website1, .button_website2, .button_website3, .button_website4 {
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	font-size: 16px;
	padding: 12px 24px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	text-align: center;
}

.button_website2 {
	top: 50%;
	left: 60%;
}

.button_website1 {
	top: 50%;
	left: 40%;
}

.button_website3 {
	top: 60%;
	left: 50%
}

.button_website4 {
	top: 50%;
	left: 50%
}

.button_website5 {
    top: 75%;
    left: 45%;
}

.button_website6 {
    top: 65%;
    left: 45%;
}

 .EndScores1, .EndScores2 {
    left: 45%;
    color: white;
    font-size: 200%;
    font-family: arial;
}

.EndScores1 {
    position: absolute;
    top: 55%;
}

.EndScores2 {
    position: absolute;
    top: 45%;
}

.highScores {
    position: absolute;
    color: white;
    font-size: 150%;
    left: 45%;
    top: 5%;
}

.loading {
    position: absolute;
    left: 42%;
    top: 10%;
}

.Button {
    position:absolute;
    top: 70%;
    left: 46%;
}

#name {
    color: blue;
    text-align: left;
}

#score {
    color: chartreuse;
    text-align: center;
}

#level {
    color: yellow;
    text-align: right;
}