*{
  margin: 0;
  padding: 0;
  pointer-events: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
   display: flex;
   flex-flow: column nowrap;
   background: black;
   background: radial-gradient(circle farthest-side at 0% 50%, rgba(80,80,80, 1) 23.5%, transparent 0) 42px 60px, radial-gradient(circle farthest-side at 0% 50%, black 24%, transparent 0) 38px 60px, linear-gradient(rgba(80,80,80, 1) 14%, transparent 0, transparent 85%, rgba(80,80,80, 1) 0) 0 0, linear-gradient(150deg, rgba(80,80,80, 1) 24%, black 0, black 26%, transparent 0, transparent 74%, black 0, black 76%, rgba(80,80,80, 1) 0) 0 0, linear-gradient(30deg, rgba(80,80,80, 1) 24%, black 0, black 26%, transparent 0, transparent 74%, black 0, black 76%, rgba(80,80,80, 1) 0) 0 0, linear-gradient(90deg, black 2%, rgba(80,80,80, 1) 0, rgba(80,80,80, 1) 98%, black 0%) 0 0 rgba(80,80,80, 1);
   background-size: 80px 120px;
   width: 100vw;
   height:100vh;
   overflow: hidden;
   font-family: 'Montserrat', sans-serif;
   font-size: 62.5%;
}
 .vignette {
   display: flex;
   position: absolute;
   width: 100vw;
   height: 100vh;
   background: radial-gradient(ellipse at center, black 0%, black 60%, transparent), radial-gradient(ellipse at bottom left, black, transparent), radial-gradient(ellipse at bottom right, black, transparent);
}

.countdown {
  display: flex;
  flex-flow: row nowrap;
  opacity: 0;
  align-items: center;
  margin: auto auto 0 auto;
  border: 2px solid white;
  border: 2px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  min-height: inherit;
  animation: fadein 1s linear forwards;
  animation-delay: 1.5s;
  animation-duration: 4s;
}

.notice {
  display: flex;
  color: white;
  font-size: 1rem;
  z-index: 1;
  opacity: 0;
  margin: 0 auto auto auto;
  max-width: 46rem;
  text-align: center;
  animation: fadein 1s linear forwards;
  animation-delay: 3.5s;
  animation-duration: 4s;
}

.line {
  display: flex;
  margin: auto 0;
  height: 6rem;
  width: 1px;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.2);
}

.countdown .days,
.countdown .hours,
.countdown .minutes,
.countdown .seconds {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 1rem 3rem;
  width: 12rem;
}

.countdown .days .value,
.countdown .hours .value,
.countdown .minutes .value,
.countdown .seconds .value {
  display: flex;
  font-size: 5rem;
  font-weight: bold;
  line-height: 4rem;
}


.countdown .days .value::before, .countdown .days .value::after,
.countdown .hours .value::before, .countdown .hours .value::after,
.countdown .minutes .value::before, .countdown .minutes .value::after,
.countdown .seconds .value::before, .countdown .seconds .value::after
{
    content: attr(data-value);
    position: relative;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  top: 0;
    animation-duration: 6s;
    animation-delay: 0s;
    animation-iteration-count: infinite; 
}

.countdown .days .value::before,
.countdown .hours .value::before,
.countdown .minutes .value::before,
.countdown .seconds .value::before
{
  text-shadow: -2px 0 rgba(255,0,0,0.7);
  left: 40%;
  animation-name: glitch-animation-1;
}

.countdown .days .value::after,
.countdown .hours .value::after,
.countdown .minutes .value::after,
.countdown .seconds .value::after
{
  text-shadow: -2px 0 rgba(0,0,255,0.7);
  left: -40%;
  animation-name: glitch-animation-2;
}

.countdown .days .label,
.countdown .hours .label,
.countdown .minutes .label,
.countdown .seconds .label {
  font-size: 1.25rem;
  font-weight: normal;
  font-variant: small-caps;
}

  .download-container {
    display: flex;
    flex-flow: row nowrap;
  }

  .windows {
    background-image: url('https://dothack.com/assets/windows_512.png');
    z-index: 1;
  }

  .linux {
    background-image: url('https://dothack.com/assets/linux_512.png');
    z-index: 1;
  }

  .macos {
    background-image: url('https://dothack.com/assets/macos_512.png');
    z-index: 1;
  }

.nfbody {
  background: black;
}

h1 {
 display: flex;
 margin: auto auto;
 color: white;
 font-size: 5rem;
}

.notfound {
  display: none;
}

/**
* Jira DHW-125
* TODO: Add game1 page styles here
*/

 ul{
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
 ul li{
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   list-style: none;
   width: 20px;
   height: 20px;
   animation: moveupandrotate 25s linear infinite;
   bottom: -150px;
}
 .hexagon {
   width: 24px;
   height: 14px;
   pointer-events: auto;
   
   background: url('../img/hexagon.svg') center/contain no-repeat;
}

 ul li:nth-child(1){
   left: 25%;
   width: 80px;
   height: 80px;
   animation-delay: 0s;
}
 ul li:nth-child(2){
   left: 10%;
   width: 30px;
   height: 30px;
   animation-delay: 2s;
   animation-duration: 12s;
}
 ul li:nth-child(3){
   left: 70%;
   width: 30px;
   height: 30px;
   animation-delay: 4s;
}
 ul li:nth-child(4){
   left: 40%;
   width: 60px;
   height: 60px;
   animation-delay: 0s;
   animation-duration: 18s;
}
 ul li:nth-child(5){
   left: 65%;
   width: 30px;
   height: 30px;
   animation-delay: 0s;
   animation-duration: 22s;
}
 ul li:nth-child(6){
   left: 75%;
   width: 110px;
   height: 110px;
   animation-delay: 3s;
}
 ul li:nth-child(7){
   left: 35%;
   width: 150px;
   height: 150px;
   animation-delay: 7s;
   animation-duration: 30s;
}
 ul li:nth-child(8){
   left: 50%;
   width: 30px;
   height: 30px;
   animation-delay: 15s;
   animation-duration: 45s;
}
 ul li:nth-child(9){
   left: 20%;
   width: 50px;
   height: 50px;
   animation-delay: 2s;
   animation-duration: 35s;
}
 ul li:nth-child(10){
   top: 100vh;
   left: 85%;
   width: 300px;
   height: 300px;
   animation-delay: 0s;
   animation-duration: 20s;
}
 ul li:nth-child(1) .hexagon {
   transform: scale(5.2);
}
 ul li:nth-child(2) .hexagon {
   transform: scale(2);
}
 ul li:nth-child(3) .hexagon {
   transform: scale(2);
}
 ul li:nth-child(4) .hexagon {
   transform: scale(3.8);
}
 ul li:nth-child(5) .hexagon {
   transform: scale(2);
}
 ul li:nth-child(6) .hexagon {
   transform: scale(7.4);
}
 ul li:nth-child(7) .hexagon {
   transform: scale(10);
}
 ul li:nth-child(8) .hexagon {
   transform: scale(2);
}
 ul li:nth-child(9) .hexagon {
   transform: scale(3.2);
}
 ul li:nth-child(10) .hexagon {
   transform: scale(20);
}
 @keyframes moveupandrotate {
   0%{
     transform: translateY(0) rotate(0deg);
     opacity: 0.25;
   }
   100%{
     transform: translateY(-1000px) rotate(360deg);
     opacity: 0;
   }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes glitch-animation-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0.5;
    transform: translateX(-5%);
    clip-path: circle(40% at 30% 70%);
  }
  2% {
    clip-path: ellipse(30% 40% at 60% 20%);
  }
  3% {
    clip-path: inset(15% 35% 75% 5%);
  }
  5% {
    clip-path: circle(50% at 80% 10%);
  }
  7% {
    clip-path: ellipse(70% 25% at 10% 60%);
  }
  8% {
    clip-path: inset(20% 50% 60% 10%);
  }
  10% {
    clip-path: circle(60% at 40% 90%);
  }
  12% {
    clip-path: ellipse(35% 55% at 75% 35%);
  }
  13% {
    clip-path: inset(10% 30% 70% 50%);
  }
  15% {
    clip-path: circle(80% at 10% 40%);
  }
  16% {
    clip-path: ellipse(40% 30% at 60% 70%);
  }
  18% {
    clip-path: inset(30% 60% 70% 10%);
  }
  20% {
    clip-path: circle(70% at 60% 50%);
  }
  22% {
    clip-path: ellipse(60% 20% at 30% 80%);
  }
  23% {
    clip-path: inset(40% 70% 10% 60%);
  }
  25% {
    clip-path: circle(30% at 50% 60%);
  }
  27% {
    clip-path: ellipse(50% 60% at 40% 20%);
  }
  29% {
    clip-path: inset(20% 60% 50% 30%);
  }
  30% {
    clip-path: circle(70% at 80% 30%);
  }
  32% {
    clip-path: ellipse(20% 70% at 60% 60%);
  }
  35%, 100% {
    opacity: 0.5;
    clip-path: inset(10% 50% 40% 70%);
  }
  36%, 100% {
    opacity: 0;
  }
}

@keyframes glitch-animation-2 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0.5;
    transform: translateX(2%);
    clip-path: ellipse(36% 22% at 57% 78%);
  }
  2% {
    clip-path: circle(49% at 42% 53%);
  }
  3% {
    clip-path: polygon(8% 29%, 67% 15%, 21% 88%);
  }
  5% {
    clip-path: inset(12% 63%, 74% 26%);
  }
  7% {
    clip-path: polygon(33% 16%, 81% 73%, 9% 86%);
  }
  8% {
    clip-path: ellipse(51% 49% at 47% 57%);
  }
  10% {
    clip-path: inset(31% 64%, 78% 47%);
  }
  12% {
    clip-path: circle(55% at 64% 40%);
  }
  13% {
    clip-path: ellipse(56% 57% at 39% 48%);
  }
  15% {
    clip-path: polygon(14% 72%, 64% 19%, 91% 88%);
  }
  16% {
    clip-path: inset(52% 34%, 75% 63%);
  }
  18% {
    clip-path: polygon(22% 32%, 76% 65%, 41% 98%);
  }
  20% {
    clip-path: circle(62% at 46% 51%);
  }
  22% {
    clip-path: inset(39% 58%, 66% 48%);
  }
  23% {
    clip-path: ellipse(53% 48% at 77% 75%);
  }
  25% {
    clip-path: polygon(68% 31%, 47% 92%, 19% 13%);
  }
  27% {
    clip-path: circle(71% at 33% 70%);
  }
  29% {
    clip-path: inset(42% 67%, 70% 44%);
  }
  30% {
    clip-path: polygon(18% 77%, 59% 29%, 83% 93%);
  }
  32% {
    clip-path: ellipse(46% 53% at 76% 62%);
  }
  35% {
    opacity: 0.5;
    clip-path: inset(62% 48%, 70% 77%);
  }
  36%, 100% {
    opacity: 0;
  }
}


@media (max-width: 576px) {
     body {
       flex-flow: column-reverse nowrap;
     }

    .countdown {
      flex-flow: column nowrap;
      width: 95%;
      margin: 0 auto auto auto;
    }
    
    .notice {
      margin: auto auto 0 auto;
      font-size: 3vw;
      max-width: 90vw;
    }

    .countdown .days,
    .countdown .hours,
    .countdown .minutes,
    .countdown .seconds {
      padding: 1vw 0;
      width: 100%;
      margin: 0 auto;
    }

    .countdown .days .value,
    .countdown .hours .value,
    .countdown .minutes .value,
    .countdown .seconds .value {
      font-size: 18vw; 
      line-height: 10vw;
      padding: 5vw 0;
    }
    
    .countdown .days .label,
    .countdown .hours .label,
    .countdown .minutes .label,
    .countdown .seconds .label {
      font-size: 7.5vw;
    }
    
    .line {
      margin: 0 auto;
      width: 95%;
      height: 1px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
     body {
       flex-flow: column-reverse nowrap;
     }

    .countdown {
      flex-flow: column nowrap;
      width: 95%;
      margin: 0 auto auto auto;
    }
    
    .notice {
      margin: auto auto 0 auto;
      font-size: 2.2vw;
      max-width: 90vw;
    }

    .countdown .days,
    .countdown .hours,
    .countdown .minutes,
    .countdown .seconds {
      padding: 1vw 0;
      width: 100%;
      margin: 0 auto;
    }

    .countdown .days .value,
    .countdown .hours .value,
    .countdown .minutes .value,
    .countdown .seconds .value {
      font-size: 16vw; 
      line-height: 10vw;
      padding: 5vw 0;
    }
    
    .countdown .days .label,
    .countdown .hours .label,
    .countdown .minutes .label,
    .countdown .seconds .label {
      font-size: 7vw;
    }
    
    .line {
      margin: 0 auto;
      width: 95%;
      height: 1px;
    }
}