style.css

  @font-face {
    font-family: "Avenir Next";
    font-weight: normal;
    src: url("lib/AvenirNextLTPro-Regular.otf");
}

body {
  background: #212121;
  color: white;
  font-family: 'Avenir Next';
  overflow: hidden;
}

.countdown {
  display: flex;
  justify-content: center;
  margin-top: 110px;
}

.logo {
  display: flex;
  justify-content: center;
}

.digit {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0px 40px;
}

.logo-img {
  margin-top: 80px;
}

.digit-number,
.digit-text {
  margin: 0;
  padding: 0;
  text-align: center;
}

.digit-number {
  font-size: 350px;
}

.digit-text {
  font-size: 105px;
}

.logo-img {
  width: 600px;
  height: 600px;
}

div.circle
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 50vh;
    height: 50vh;
    opacity: 1;
    background-color: white;
    border-radius: 1000px;
    transition: 0.75s ease-in-out all;
}

.svg
{
    position: absolute;
    top: 50%;
    left: 49%;
    width: 60%;
    height: 60%;
    transform: translate(-50%,-50%) scale(1);
}

.svg path
{
    stroke: white;
    stroke-dasharray: 100vh; /* --- 2 * pi * r --- */
    stroke-dashoffset: -75vh;
    transition: stroke-dashoffset 3s linear;
}

@keyframes grow-shrink
{
    0% {transform: translate(-50%,-50%) scale(1);}
    50% {transform: translate(-50%,-50%) scale(1.2);}
    100% {transform: translate(-50%,-50%) scale(1);}
}

@keyframes rainbow
{
    14% {stroke: rgb(255, 0, 0);}
    28% {stroke: rgb(255, 255, 0);}
    42% {stroke: rgb(0, 255, 0);}
    56% {stroke: rgb(0, 255, 255);}
    70% {stroke: rgb(0, 100, 255);}
    84% {stroke: rgb(255, 0, 255);}
    100% {stroke: white;}
}