html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden
}

.wrapper {
  display: table;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.container {
  display: table-cell;
  vertical-align: middle;
}
.canvas-container {
  position: relative;
  max-width: 1200px;
  min-width: 400px;
  margin: 0 auto;
}

.video-container {
  max-width: 1200px;
  min-width: 800px;
  margin: 0 auto;
}

.border-container {
  max-width: 90%;
  margin: 0 auto;
}

#canvas {
  width: 100%;
  height: auto;
  position:absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -52.5%);
}


body{
background-image: url('../images/html/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}


video{
  position:absolute;
  left: 50.6%;
  top: 47.9%;
  transform: translate(-50%, -50%);
}


.button {
box-shadow:inset 0px 1px 0px 0px #a6827e;
background:linear-gradient(to bottom, #7d5d3b 5%, #634b30 100%);
background-color:#7d5d3b;
border-radius:15px;
border: 4px solid black; 
display:inline-block;
cursor:pointer;
color:	black;
font-family:Trebuchet MS;
font-size:28px;
font-weight:bold;
padding:13px 38px;
text-decoration:none;
text-shadow:0px 1px 29px #4d3534;
}

.active {
  color: #a67d00;
  border: 4px solid #a67d00; 
}

.button:hover {
background:linear-gradient(to bottom, #634b30 5%, #7d5d3b 100%);
background-color:#634b30;
}

#start{
top: 30%;
}

#exit{
top: 70%;
}

#continue{
top: 30%;
}

#options{
top: 40%;
}

#again{
top: 60%;
}

.difficulty{
position: absolute;
left: 30%;
transform: translate(-50%, -50%);
}

#easy{
top: 30%;
}
#normal{
top: 40%;
}
#hard{
top: 50%;
}


#back{
top: 82%;
left: 72%;
}

.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.hide{
display: none;
}


@media screen and (min-width: 2000px) {
  #back{
    top: 65%;
    left: 65%;
  }

  .difficulty{
    left: 35%;
  }

}
@media screen and (max-width: 1220px) {
  #canvas-border{
    display: none;
  }
}