@keyframes topPart {
    0% {
      transform: rotateX(0deg);
    }
    30% {
      transform: rotateX(-90deg);
    }
    31% {
      transform: rotateX(-90deg);
      visibility: hidden;
    }
    32% {
      transform: rotate(0deg);
      visibility: hidden;
    }
    33% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotateX(0deg);
    }
  }
  @keyframes bottomPart {
    0% {
      visibility: hidden;
    }
    30% {
      transform: rotateX(90deg);
      visibility: hidden;
    }
    31% {
      transform: rotateX(90deg);
    }
    60% {
      transform: rotateX(0deg);
    }
    100% {
      transform: rotateX(0deg);
    }
  }
  
  :root {
      --step--2: clamp(0.70rem, calc(0.81rem + -0.13vw), 0.78rem);
      --step--1: clamp(0.94rem, calc(0.94rem + 0.00vw), 0.94rem);
      --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
      --step-1: clamp(1.35rem, calc(1.24rem + 0.55vw), 1.67rem);
      --step-2: clamp(1.62rem, calc(1.41rem + 1.05vw), 2.22rem);
      --step-3: clamp(1.94rem, calc(1.59rem + 1.77vw), 2.96rem);
      --step-4: clamp(2.33rem, calc(1.77rem + 2.81vw), 3.95rem);
      --step-5: clamp(2.80rem, calc(1.94rem + 4.28vw), 5.26rem);
    --box-height: 1.5em;
  
    }
  
  *,
  *:after,
  *:before {
      box-sizing: border-box;
  }
  
  html,
  body {
    padding: 0;
    margin: 0;
    padding-left: 2vw;
    padding-right: 2vw;
    height: 100%;
    
  }
  
  html {
      font-size: 20px;
  }
  
  body {
    background-image: url(bg6.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  clock-machine {
      display: flex;
      flex-direction: column;
      max-height: 100vh;
      width:50em;
      max-width: 100%; 
      padding-left: 2vw;
      padding-right: 2vw;
  }
  
  dial-row, type-row {
    display:flex;
    justify-content: center;
    height: fit-content;
    font-size: 7em; /*important! relative for rest of image */
  }
  
  
  
  /* PAPER DIALS */
  
  dial-row {
      /* From https://css.glass */
    
  }
  
  paper-dial {
      background-image: linear-gradient(0deg, #e2c479 0% , #dbb658 50%, #af9146 80%),

      linear-gradient(0deg, rgba(35,25,9,1) 0%, rgba(60,43,16,1) 22%, rgba(79,59,33,1) 32%, rgba(92,68,52,1) 41%, rgba(92,68,52,1) 50%, rgba(79,59,33,1) 59%, rgba(73,54,28,1) 69%, rgba(60,43,16,1) 82%, rgba(38,27,10,1) 98%);

      background-size: 100% 0.3em,
                        100% 100%;
      background-position: center,
                            0 0;
      background-repeat: no-repeat;
      
  
      
  
      border: 10px goldenrod inset;
  
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.3em;
  
      max-width: 100%;
      height: fit-content;
      padding: 0.3em;
  
      font-family: 'Albertus';
  
  
  }
  
  
  .box {
    perspective: /*300px;*/ 2.5em;
    transform-style: preserve-3d;
    width: /*120px;*/ 1em;
    height: 1.5em;
  
    line-height: var(--box-height);
    text-align: center;
    border-radius: 0.1em;
    background: lightyellow;
  }
  
  
  .flipper .box::after {
    content: attr(num);
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center bottom;
    width: 1em;
    height: calc(var(--box-height) / 2);
    font-size: var(--fake);
    line-height: var(--box-height);
    text-align: center;
    border-bottom: 1px solid #999;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: inherit;
    overflow: hidden;
    animation: topPart 1s ease-in-out infinite;
  }
  
  .flipper .box::before {
    content: attr(num);
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: center center;
    width: 1em;
    height: var(--box-height);
    font-size: var(--fake);
    line-height: var(--box-height);
    text-align: center;
    border-radius: inherit;
    background: inherit;
    animation: bottomPart 1s ease-in-out infinite;
  }
  
  /* TYPEWRITER */
  type-container {
      max-width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      position: static;
  }
  
  type-writer {
      display: flex;
      justify-content: center;
      align-items: center;
  
      padding: 4vw;
  
      background: #463506;
      border: 1px solid black;
      border-radius: 10px;
  
      width: 3em;
      max-width: 50vw;    
  }
  
  .typewriter__keys {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3em;
      flex-wrap: wrap;
  }
  
  button {
    text-transform: lowercase;
    display: inline-block;
    position: relative;
    aspect-ratio: 1/1;
    font-size: 2.5rem;
    line-height: 1rem;
    margin: 0.1em;
    padding: 0.4em;
    background-color: #884400;
    color: gold;
    font-family: 'Albertus', sans-serif;
    text-align: center;
    border-radius: 100%;
    text-shadow: 0px 0.05em 0px #444400,
                 0.05em 0.05em 0px #444400,
                 0.05em 0px 0px #444400;
    box-shadow: 0px 0px 0px 0.1em gold inset, /*2px -> 0.1em */
                0.05em 0px 0.1em 0.05em black inset,
                0.05em 0.05em 0.1em 0.05em black inset,
                0px 0.1em 0.2em 0.05em black;
    cursor: pointer;
    border: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  .one {
    padding: 0.55em;
  }
  
  button.pressed{
    transform: translate(0px, 0.1em);
    box-shadow: 0px 0px 0px 0.1em gold inset,
                0.05em 0.05em 0.1em 0.05em black inset,
                0.05em 0.05em 0.1em 0.05em black inset;
  }
  
  
  .key.bar{
    width: 2.8em;
    border-radius: 0.6em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    text-transform: capitalize;
    padding-bottom: -1em;
  }
  
  /* GEAR */
  
  .gear {
    width: 0.7em; /*100px*/
    height: 0.7em;
    border: 0.12em solid #7d5d04;
    border-radius: 50%;
  
    position: relative;
    z-index: -1;
    left: -0.4em;
    top: 0.4em;
  }
  
  .gear:before {
    content: "";
    display: block;
    position: absolute;
    top: 0.16em;
    left: 0.55em;
    width: 0.15em;
    height: 0.15em;
    background-color: #7d5d04;
  }
  
  .gear:after {
    content: "";
    display: block;
    position: absolute;
    top: -0.25em;
    left: 0.13em;
    width: 0.15em;
    height: 0.15em;
    background-color: #7d5d04;
  }
  
  .gear-teeth {
    width: 0.15em;
    height: 0.15em;
    position: absolute;
    background-color: #7d5d04;
    transform: rotate(45deg);
  }
  
  .tooth1 {
    top: 0.45em;
    left: 0.4em;
  }
  
  .tooth2 {
    top: 0.45em;
    right: 0.4em;
  }
  
  .tooth3 {
    top: -0.13em;
    left: -0.15em;
  }
  
  .tooth4 {
    background-color: #7d5d04;
    top: -0.15em;
    left: 0.4em;
  }
  
  .tooth5 {
    position: absolute;
    top: 1.15em;
    right: 0.40em;
    width: 0.15em;
    height: 20px0.15em;
    background-color: #7d5d04;
  }
  
  .tooth6 {
    position: absolute;
    top: 0.15em;
    right: 0.6em;
    width: 0.15em;
    height: 0.15em;
    background-color: #7d5d04;
  }
  
  .spin {
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  @-webkit-keyframes spin {
    100% {
      -webkit-transform: rotate(90deg);
    }
  }
  @keyframes spin {
    100% {
      transform: rotate(90deg);
    }
  }
  
  /* RETURN */
  .map {
      position: sticky;
      z-index: 4;
      top: 100vh;
      left:100vw;
      display: flex;
      align-items: center;
      justify-content: center;
      /*positions right but sizing issues */
      padding-bottom: 0.2em;
      text-align: center;
  }
    
  .map a {
      font-family: 'Albertus', sans-serif;
      font-size: var(--step-2);
      /*font-size: 1em;*/
      color: goldenrod;
      text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
      background: none;
      border: none;
      cursor: pointer;
      padding-right: 0.5em;
      padding-bottom: 0.8em;
      text-decoration: none;
      display: block; 
    }