html {
  height: 100%;
}
body {
  display: table;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  min-width: 800px;
  background-color:black;
}
canvas {
  width: 500px;
  height: 500px;
}
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 500px;
  height: 3px;
  background: white;
  outline: none;
  opacity: 0.8;
}

body > div {
  display: table-cell;
}
.left {
  background: url('GIFs/bg.png');
}
.middle {
  background: url('GIFs/bg5.jpg');
  width: 500px;
}
.right {
  background: url('GIFs/bg.png')
}
.sec {

}
h1 {
  color:white;
  font-size:100px;
  text-align: center;
  padding : 0;
  margin : 0;
}
p {
  color:white;font-size:50px;
  font-family: Helvetica
  text-align: center;
  padding : 0;
  margin : 0;
}

.image {
  text-align: center;
  padding : 0;
  margin : 0;
  display:inline-block;
  font-size: 0;
}
.container {
  text-align: center;
  padding : 0;
  margin : 0;
  width=500px;
  font-size: 0;
}

.clock {
      width: 200px;
      height: 200px;
      border: 10px solid white;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
      padding: 2rem;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }

    .clock-face {
      position: relative;
      width:100%;
      height: 100%;
      transform: translateY(-3px); /* account for the height of the clock hands */
    }

    .hand {
      width: 50%;
      height: 6px;
      background: white;
      position: absolute;
      top: 50%;
      transform-origin: 100%;
      transform: rotate(90deg);
      transition: all 0.05s;
      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }