* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
  min-height: 100vh;
  position: relative;
  font: normal 1rem Verdana, Geneva, Tahoma, sans-serif;
  background: linear-gradient( 45deg, #ff000088, #ffff0088, #00ff0088, #00ffff88, #0000ff88, #ff00ff88);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  overflow-y: hidden;
  overflow-x: hidden;
}

header {
  height: 20vh;
  border-bottom: solid 1px #000;
}

header,
footer,
h1 {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
header,
footer {
  background-color: #fff3;
}

main {
  width: 100vw;
  min-height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  width: 100%;
  min-height: 60vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

img.watch {
  width: 100%;
}

#watchFace, 
#hours, 
#minutes,
#seconds {
  position: absolute;
  width: 80vh;
  height: 80vh;
}

#minutes {
  transition: 1s;
}

#seconds {
  transition: none;
}

footer {
  bottom: 0;
  height: 10vh;
  text-align: center;
  border-top: solid 1px #000;
}

@media (orientation: portrait) {
  #watchFace, 
  #hours, 
  #minutes,
  #seconds {
    position: absolute;
    width: 80vw;
    height: 80vw;
  }
}