@font-face {
  font-family: Chalkduster;
  src: url('../font/Chalkduster.eot?#iefix') format('embedded-opentype'),
    url('../font/Chalkduster'),
    url('../font/Chalkduster.woff') format('woff'),
    url('../font/Chalkduster.ttf') format('truetype'),
    url('../font/Chalkduster.svg#svgFontName') format('svg');
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background: #242021;
  font-family: Chalkduster, sans-serif;
  font-size: clamp(1.75rem, -0.875rem + 8.333vw, 3.5rem);
  color: white;
  text-transform: uppercase;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

h1 {
  font-size: 0.75em;
  display: flex;
  justify-content: space-between;
  margin: 2rem 0 1rem 0;
}

h2 {
  font-size: 0.5em;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

h2 a {
  text-decoration: none;
  color: white;
  animation: blinker 4s linear infinite;
}

img {
  height: 70vh;
}

/* Timer */

#countdown {
  position: absolute;
  height: 40px;
  width: 40px;
  top: 16px;
  right: 16px;
}

svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

svg circle {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 4px;
  stroke: white;
  fill: none;
  animation: countdown 5s linear 1 forwards;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }

  to {
    stroke-dashoffset: 113px;
  }
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  img {
    height: unset;
    width: 80%;
  }
}