body {
  background: linear-gradient(#022069, #1877b6 15%, #01ddff, #1877b6 85%, #022069);
  margin: 0;
  min-height: 100vh;
}

body,
.binary-clock,
.row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row {
  flex-direction: row-reverse;
}

.block {
  transition: box-shadow .9s;
  margin: min(0.475rem, 2.5vh, 1.6vw);
  display: inline-block;
  height: 24vh;
  width: 24vh;
  max-height: min(10vw, 6.25rem);
  max-width: min(10vw, 6.25rem);
  border-radius: 13%;
  border: solid 3px black;
  background: #2f3e46;
  background: radial-gradient(#2f3e46 9%, #d0c999 11%, #2f3e46 13%,
      #0d1c24 35%, #090800 40%, #2f3e46 60%);
  box-shadow: #0d1c24 .4rem .4rem .2rem,
    inset 0px 0px 1.5rem #0d1c24,
    inset 0px 0px .5rem #090800;
}

.active {
  background:
    radial-gradient(#d0c999 2.5%, #2f3e46 7%, #d0c999 9%, #fbbc89 11%,
      #dd9a1f 30%, #ed8400 34%, #dd9400 37%, #ffefe2 39%,
      #fbbc89 40.5%, #2f3e46 60%);
  /* animation: switch .9s forwards; */
  /* box-shadow: #0d1c24 .4rem .4rem .2rem,
    inset 0px 0px 1.5rem #ff5a1f,
    inset 0px 0px .5rem #ff441f,
    0px 0px .5rem #ff441f,
    0px 0px 1.5rem #ff5a1f; */
  border-color: #441101;
}

.active.second {
  box-shadow: #0d1c24 .4rem .4rem .2rem,
    inset 0px 0px 1.5rem #ff5a1f,
    inset 0px 0px .5rem #ff441f,
    0px 0px .5rem #ff441f,
    0px 0px 1.5rem #ff5a1f,
    -1rem min(8rem, 12.8vw) 2.5rem #eff6ccbb;
}

.active.minute {
  box-shadow: #0d1c24 .4rem .4rem .2rem,
    inset 0px 0px 1.5rem #ff5a1f,
    inset 0px 0px .5rem #ff441f,
    0px 0px .5rem #ff441f,
    0px 0px 1.5rem #ff5a1f,
    -2rem min(22rem, 38.8vw) 3.5rem #eff6ccaa;
}

.active.hour {
  box-shadow: #0d1c24 .4rem .4rem .2rem,
    inset 0px 0px 1.5rem #ff5a1f,
    inset 0px 0px .5rem #ff441f,
    0px 0px .5rem #ff441f,
    0px 0px 1.5rem #ff5a1f,
    -3rem min(36rem, 63.8vw) 4rem #eff6cc99;
}

@keyframes switch {
  from {
    background: radial-gradient(#2f3e46 9%, #d0c999 11%, #2f3e46 13%,
        #0d1c24 35%, #090800 40%, #2f3e46 60%);
  }

  to {
    background:
      radial-gradient(#2f3e46 9%, #d0c999 11%, #2f3e46 13%,
        #ff5a1f 38%, #ff4400 40%, #ff4400 42%, #e26a07 44%,
        #fbbc89 46.5%, #2f3e46 60%);
  }
}

@media screen and (max-width: 720px) {
  :root {
    font-size: 8px;
  }
}