*{
  margin: 0;
  border: none;
  padding: 0;
  box-sizing: border-box;
}
#canvas1 {
  position: absolute;
  background-color: rgb(100,100,100);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}
#title1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 120px;
  line-height: 110px;
  white-space: nowrap;
  border-top: 5px solid black;

}
#title1::before {
  content: "are cool";
  position:absolute;
  bottom: -70px;
  font-size: 40px;
  text-align: center;
  width: 100%;
}

/* css for clock */

#ClockFace {
  background: white;
  width: 100%;
  height: 100%;
  z-index: 6;

}

#clockWrapper {
  background: grey;
  display: flex;
  justify-content: center;



}
.canvasCup{
  position: absolute;
  background: blue;

}


#canvasBase {
  position: absolute;
  background: white;
  z-index: 0;
}
#canvasLayer1 {
  position: absolute;
  z-index: 3


}