* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #282828;
  background: url(https://i.ibb.co/KhvfYt1/gif.gif) 75% 0% / 140% no-repeat;
  animation: bg 25s linear infinite paused;
}

.bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 100%;
  animation: bg 20s infinite;
}

@keyframes bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
}

#hexs polygon {
  transition: opacity 0.25s ease;
}

#hexs polygon.center {
  opacity: 0.7;
  cursor: pointer;
}

#hexs polygon.center:hover {
  opacity: 0.2;
}

#startText,
#restartText {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  fill: #fff;
  user-select: none;
  pointer-events: none;
}

#restartText {
  opacity: 0;
}

#restartPolygon {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
  cursor: pointer;
  opacity: 0;
}

.page-nav {
  z-index: 300;
}