html, body{
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #131313;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
a{
  text-decoration: none !important;
}

ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, figure, form, fieldset, input, legend, pre, abbr, button {
  margin: 0;
  padding: 0;
}

h2, h3{
  font-family: 'Courier New', Courier, monospace;
  font-weight: 200;
}

.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #d2d2d2;
}
.nixie-clock{
  display: flex;
  flex-direction: row;
  margin-left: 30px;
  /* margin-top: -80px; */
  font-family: 'Courier New';
  font-size: 70px;
  color: rgb(243, 209, 83);
  /* 255, 85, 43 */
  text-shadow:  -8px -5px 0.3em rgb(249 24 24 / 59%),
                -5px -2px 0.5em rgb(255 75 0),
                2px 0 0.2em rgba(246, 70, 17, 1),
                0 -3px 0.2em rgba(255, 85, 43, 1);
  opacity: 0;
  animation: fade 0.6s forwards;
  animation-delay: 0.2s;
}
.nixie-clock > .number{
  position: relative;
  letter-spacing: 7px;
  margin: 0px 7px;
}
.nixie-clock > .number:after{
  position: absolute;
  top: 5%;
  left: 20%;
  content: '';
  width: 60%;
  height: 80%;
  background-color: rgb(255 116 55 / 45%);
  filter: blur(20px);
  transform: scale(1.65);
  animation: light-shine 5s alternate-reverse infinite ease;
}
.nixie-clock > .point{
  /* position: relative; */
  /* left: -15px; */
  margin: 5px 20px 0px -20px;
}

.title{
  margin-top: 45px;
  opacity: 0;
  animation: fade 2s forwards;
  animation-delay: 1.3s;
  transition: color 0.3s;
}
.title:active{
  color: rgba(255,255,255,0.4);
}

.subtitle{
  margin-top: 17px;
  opacity: 0;
  animation: fade 2s forwards;
  animation-delay: 1.8s;
  transition: color 0.3s;
  color: rgba(255,255,255,0.1);
}
.subtitle:active{
  color: rgba(255,255,255,0.3);
}

.bottom-bar{
  position: absolute;
  display: flex;
  flex-direction: row;
  bottom: 0;
  height: 35px;
  width: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  align-items: center;
}

.link{
  color: rgb(41, 41, 41);
  -webkit-transition: 0.25s linear background-color, 0.25s linear color;
  transition: 0.25s linear background-color, 0.25s linear color;
  text-decoration: none !important;

  font-size: 13px;
  line-height: 1.17648;
  font-weight: 600;
  letter-spacing: -.022em;
  font-family: 'Courier', Courier, monospace;
  min-width: 28px;
  margin: 0 30px 0 10px;
}
.link:hover{
  color: rgb(59, 59, 59);
}
@keyframes fade{
  from {
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes light-shine{
  0%{
    opacity: 0.6;
  }
  10%{
    opacity: 0.8;
  }
  20%{
    opacity: 0.9;
  }
  30%{
    opacity: 0.65;
  }
  40%{
    opacity: 0.8;
  }
  50%{
    opacity: 0.55;
  }
  60%{
    opacity: 0.66;
  }
  70%{
    opacity: 0.42;
  }
  80%{
    opacity: 0.65;
  }
  90%{
    opacity: 0.7;
  }
  100%{
    opacity: 0.8;
  }
}