:root * {
  box-sizing: border-box;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

*::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  background-color: black;
  color: whitesmoke;
  font-family: "Courier New", Courier, monospace;
}

main {
  margin-inline: auto;
  max-width: 600px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

a {
  color: rgb(211, 84, 84);
  font-weight: bold;
}
a:hover {
  color: white;
}
code {
  color: rgb(94, 94, 226);
  font-weight: lighter;
}

.image-container {
  position: relative;
  aspect-ratio: 1;
  width: 400px;
  max-width: 95dvw;
  overflow: visible;
  display: grid;
  place-items: center;
  align-self: center;
}

.image-container h2 {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  color: black;
  filter: blur(12px);
  font-size: 2.5rem;
    transition: filter 0.4s ease;
}
.image-container h2:hover {
    filter: blur(0px);
}

.kiprund {
  position: absolute;
  inset: 0;
  width: 400px;
  max-width: 95dvw;
  aspect-ratio: 1;
  filter: blur(20px);
}

@keyframes rot {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(-360deg);
 }
}

.logo {
  width: 200px;
  max-width: 95dvw;
  aspect-ratio: 1;
  z-index: 2;
  animation-name: rot;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.logo:hover {
  animation-play-state: paused;
}