BODY {
  --faceSize: 20vmin;
  --spacing: 5vmin;
  margin: 5vh 5vw;
  padding: 0;
  width:90vw;
}

.clock {
  display:block;
  position: absolute;
  top: calc(45vh - (3 * var(--faceSize)+2 * var(--spacing)) / 2) !important;
  left: calc(45vw - (3 * var(--faceSize)+2 * var(--spacing)) / 2) !important;
  right: calc(55vw + (3 * var(--faceSize)+2 * var(--spacing)) / 2);
  bottom: calc(55vh + (3 * var(--faceSize)+2 * var(--spacing)) / 2);
}
.face {
  height: var(--faceSize);
  width: var(--faceSize);
  background-color: var(--color);
  border-radius: 50%;
  position: absolute;
}
.hand {
  width: 0;
  height: 0;
  border-left: calc(var(--faceSize) / 8) solid transparent;
  border-right: calc(var(--faceSize) / 8) solid transparent;
  border-bottom: calc(var(--faceSize) / 2) solid var(--handCol);
  margin-left: calc(var(--faceSize) / 2 - var(--faceSize) / 8);
  transform-origin: bottom center;
  transform: rotate(0deg);
}
.pin {
  height: var(--spacing);
  width: var(--spacing);
  background-color: var(--pinDown);
  border-radius: 50%;
  opacity: 0.2;
  position: absolute;
}
.active {
  background-color: var(--pinUp);
  opacity: 1;
}

button{
  background: var(--buttons);
  border: none;
  padding: 1vw 0.5vw;
  margin: 1vw;
  text-align: center;
  text-decoration: none;
  display:block;
  color: white;
  font-size: 1.3vw;
  width: 20vw;
  border-radius: 4px;
  text-transform: uppercase; 
}
button:hover {
  opacity: .50;
}
.cook{
    position:fixed;
    bottom:5vh;
    margin:auto;
    z-index:2;
}