:root {
  --headerFooterSize: 15dvh;
  --headerFooterSizeVh: 15vh;
}


body{
  margin: 0;
  font-family: "Spline Sans Mono", monospace;
  color: rgb(14, 13, 13);
  overflow: hidden;  
  transition: all 1s ease-in-out;
}




main {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: calc(100vh - var(--headerFooterSizeVh) * 2);
  height: calc(100dvh - var(--headerFooterSize) * 2);
  cursor: pointer;
}

#time {
  font-size: 5rem;
  transform: rotate3d();
  color: rgba(31, 28, 28, 0.726);
}

@media only screen and (max-width: 600px) {
  main {
    cursor: default !important;
  }

  #time {
    font-size: 3rem;
    padding: 0 10px 0;
  }
  h1 {
    font-size: 1.7rem;
  }
  span {
    font-size: 0.7rem;
  }
}

header {
  display: flex;
  flex-direction: column;
  height: var(--headerFooterSize);
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0 0 30% 30%;
  background-color: rgba(31, 28, 28, 0.3);
}

footer {
  height: var(--headerFooterSize);
  background-color: rgba(31, 28, 28, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 30% 30% 0 0;
  padding-bottom: 1rem;
}

.hidden {
  color: rgb(14, 13, 13);
  background-color: rgba(31, 28, 28, 0.3);
  font-size: 0.7rem;
  border-radius: 10px;
  padding: 0.7%;
  opacity: 0;
  transition: all 300ms;
}

a {
  margin: 2%;
  color: rgb(14, 13, 13);
}