@font-face {
  font-family: "Roc Grotesk";
  src: url("../fonts/RocGrotesk-Medium.woff2") format("woff2"), url("../fonts/RocGrotesk-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roc Grotesk";
  src: url("../fonts/RocGrotesk-Regular.woff2") format("woff2"), url("../fonts/RocGrotesk-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roc Grotesk Wide";
  src: url("../fonts/RocGrotesk-WideExtraLight.woff2") format("woff2"), url("../fonts/RocGrotesk-WideExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roc Grotesk";
  src: url("../fonts/RocGrotesk-Bold.woff2") format("woff2"), url("../fonts/RocGrotesk-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roc Grotesk";
  src: url("../fonts/RocGrotesk-Light.woff2") format("woff2"), url("../fonts/RocGrotesk-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roc Grotesk Wide";
  src: url("../fonts/RocGrotesk-WideBold.woff2") format("woff2"), url("../fonts/RocGrotesk-WideBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-black:#000000;
  --color-white:#ffffff;
  --color-yellow:#E8C603;
  --color-green:#92A523;
  --color-lime:#C2DB2D;
  --color-red:#E04B2A;
  --color-orange:#EC8627;
}

* {
  margin: 0;
  padding: 0;
}

body {
  color: var(--color-black);
  font-size: 100%;
  line-height: 1.4;
  background-color: var(--color-yellow);
  font-family: "Roc Grotesk";
  transition: background-color 0.3s ease-in;
}

.body--active {
  background-color: var(--color-green);
}

img {
  max-width: 100%;
}

.container {
  max-width: 468px;
  margin: 0 auto;
  padding: 1.4375rem 1.625rem;
}

header {
  display: flex;
  margin-bottom: 40px;
}

header .brand {
  margin-left: auto;
}

.js-player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 1;
}

.cta-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.cta-block h1 {
  width: 100%;
  text-transform: uppercase;
  font-family: "Roc Grotesk Wide";
  font-weight: bold;
  font-size: 3.625rem;
  line-height: 1.1;
}
.cta-block h1:first-child {
  text-align: left;
  font-size: 3.625rem;
}
.cta-block h1:last-child {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--color-black);
  text-align: right;
}

.btn {
  position: relative;
  display: flex;
  width: 9rem;
  height: 9rem;
  margin: 0.25rem 0 1.3125rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: 0px 2px 2px 0px rgba(255, 255, 255, 0.2) inset, 0px 40px 40px 0px rgba(0, 0, 0, 0.55);
  z-index: 3;
  background-size: 100%;
}
.btn--inactive {
  background-color: var(--color-red);
  background-image: url("../images/ico-bug-live.svg");
  transition: background-color 0.3s ease-in;
}
.btn--active {
  background-color: var(--color-orange);
  background-image: url("../images/ico-bug-dead.svg");
  animation: pulse 2500ms infinite ease-in-out 0ms;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    background-color: var(--color-orange);
  }
  50% {
    transform: scale(1.19);
    background-color: var(--color-lime);
  }
  100% {
    transform: scale(1);
    background-color: var(--color-orange);
  }
}
.info-text {
  margin-top: 2.3125rem;
}
.info-text h2, .info-text p {
  font-size: 1rem;
  line-height: 1.5;
}
.info-text h2 {
  font-weight: 700;
}
.info-text p {
  font-weight: 350;
}

.card {
  position: relative;
  margin-top: 1.5625rem;
  padding: 1.25rem 0.75rem;
  text-align: center;
  font-size: 0.875rem;
}
.card img {
  display: block;
  width: 100%;
}
.card p {
  padding: 0 0.875rem;
}
.card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  mix-blend-mode: overlay;
  border-radius: 1.875rem;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  z-index: -1;
}

footer {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
  margin-top: 3.5rem;
  opacity: 0.5;
  align-items: center;
  justify-content: flex-start;
}

.bug {
  --transition-time:0.3s;
  --transition-style:ease-out;
  position: fixed;
  offset-rotate: 0deg;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0px 13px 6px rgba(0, 0, 0, 0.25));
}
.bug--1 {
  top: 2rem;
  left: calc(50% - 4rem);
  offset-path: path("M 10 12 C 4.3333 21.6666 -4.2 41.4 7 43 C 21 45 21.3388 54.7494 21.998 62 C 22.998 72.9996 27.998 71 75.998 78 C 97.998 82.9996 73.998 121 61.998 112 C 49.998 103 73.998 90 67.998 72 C 61.998 54 51.998 63 48.998 56 C 45.998 49 59.998 45 57.998 38 C 55.998 31 41.998 40 35.998 16 C 29.998 -8 12.1937 8 10 12 Z");
  animation: move 4500ms infinite linear 0ms;
  transition: left var(--transition-time) var(--transition-style);
}
.body--active .bug--1 {
  left: -4rem;
}
.bug--2 {
  bottom: 15%;
  left: calc(50% - 7rem);
  offset-path: path("M 100.0002 72 C 100.0002 72 90.4002 10.4 80.0002 20 C 67.0002 32 66.0002 74.0006 46.0002 54.0006 C 26.0002 34.0006 24.1418 -6.1378 8.0002 10.0005 C -9.0029 27.0002 11.6639 101.8614 28.0002 69.9994 C 47.9964 30.9994 40.966 8.4581 53.997 7.9994 C 60.2156 7.7804 64.9966 23.9994 55.9966 40.9994 C 46.0002 62.9994 60.8764 97.5966 73.9972 97.9994 C 84.992 98.3368 81.9972 82.9994 94.9972 81.9994 C 101.7064 81.4832 100.0002 72 100.0002 72 Z");
  animation: move 3500ms infinite linear 0ms;
  transform: scaleX(-1);
  transition: left var(--transition-time) var(--transition-style);
}
.body--active .bug--2 {
  bottom: 0;
  left: -1rem;
}
.bug--3 {
  bottom: 10%;
  right: calc(50% - 8rem);
  offset-path: path("M 11.9999 11.9996 C 17.5412 24.0002 30.6 43.9996 16.9999 51.9996 C -0.0001 61.9996 -1.0001 79.9996 9.9999 88.9996 C 21 97.9996 43.003 98.9996 41.003 88.9996 C 39.003 78.9996 21.003 85.9996 24.003 97.9996 C 27.003 109.9996 59.003 109.9996 56.003 94.9996 C 53.003 79.9996 57.003 73.9996 65.003 77.9996 C 69.3362 80.9998 76.003 84.9444 76.003 76 C 76.003 65.0004 87.003 63.9998 87.003 58.0002 C 87.003 52.0004 79.8694 52.644 76.003 51.9996 C 64.003 49.9996 68.003 42.9996 79.003 42.9996 C 90.003 42.9996 88.406 31.9996 82.003 31.9996 C 63.003 31.9996 82.003 16.6156 82.003 8.9997 C 82.003 1.0007 55.003 -0.9999 46.003 3.9996 C 38.534 8.1486 41.006 17.0002 30.003 11.0002 C 18.9999 5.0002 5.997 -1.001 11.9999 11.9996 Z");
  animation: move 6500ms infinite linear 0ms;
  transition: right var(--transition-time) var(--transition-style);
}
.body--active .bug--3 {
  bottom: 5%;
  right: -5%;
}
.bug--4 {
  top: 50%;
  right: calc(50% - 4rem);
  transform: scale(1.5) scaleX(-1);
  offset-path: path("M 100.0002 72 C 100.0002 72 94.1536 20 80.0002 20 C 63.9966 20 66.0002 74.0006 46.0002 54.0006 C 26.0002 34.0006 24.1418 -6.1378 8.0002 10.0005 C -9.0029 27.0002 11.6639 101.8614 28.0002 69.9994 C 47.9964 30.9994 40.966 8.4581 53.997 7.9994 C 60.2156 7.7804 67.9568 16.2811 55.9966 40.9994 C 40.9966 72 60.8764 97.5966 73.9972 97.9994 C 84.992 98.3368 81.9972 82.9994 94.9972 81.9994 C 101.7064 81.4832 100.0002 72 100.0002 72 Z");
  animation: move 5000ms infinite linear 0ms;
  transition: right var(--transition-time) var(--transition-style);
}
.body--active .bug--4 {
  right: 0%;
}
.bug--5 {
  right: calc(50% - 9rem);
  top: 15%;
  transform: scale(1.7);
  offset-path: path("M 70.7816 3.0496 C 70.7816 3.0496 18.7816 8.8961 18.7816 23.0496 C 18.7816 39.0532 72.7822 37.0496 52.7822 57.0496 C 32.7822 77.0496 -7.3562 78.908 8.7822 95.0496 C 25.7818 112.0528 100.643 91.386 68.781 75.0496 C 29.781 55.0534 7.2398 62.0838 6.781 49.0528 C 6.562 42.8342 15.0627 35.093 39.781 47.0532 C 70.7816 62.0532 96.3782 42.1734 96.781 29.0526 C 97.1184 18.0579 81.781 21.0526 80.781 8.0527 C 80.2648 1.3433 70.7816 3.0496 70.7816 3.0496 Z");
  animation: move 6500ms infinite linear 0ms;
  transition: right var(--transition-time) var(--transition-style);
}
.body--active .bug--5 {
  right: -2rem;
}
.bug--6 {
  top: 30%;
  left: calc(50% - 10rem);
  transform: scale(1.2) scaleX(-1);
  offset-path: path("M 1.8313 32.2682 C 1.8313 32.2682 7.6779 84.2682 21.8314 84.2682 C 37.835 84.2682 35.8314 30.2678 55.8314 50.2678 C 75.8314 70.2678 77.6896 110.406 93.8314 94.2678 C 110.8344 77.2682 90.1676 2.4069 73.8314 34.2688 C 53.8352 73.2688 60.8656 95.8102 47.8344 96.2688 C 41.616 96.4878 33.8748 87.9872 45.835 63.2688 C 60.835 32.2682 40.9552 6.6716 27.8344 6.2689 C 16.8396 5.9314 19.8344 21.2688 6.8344 22.2688 C 0.1251 22.785 1.8313 32.2682 1.8313 32.2682 Z");
  animation: move 3500ms infinite linear 0ms;
  transition: left var(--transition-time) var(--transition-style);
}
.body--active .bug--6 {
  left: -6rem;
}
.bug--7 {
  top: 15%;
  left: calc(50% - 4rem);
  transform: scale(1.4) scaleX(-1);
  offset-path: path("M 70.7816 3.0496 C 70.7816 3.0496 18.7816 8.8961 18.7816 23.0496 C 18.7816 39.0532 72.7822 37.0496 52.7822 57.0496 C 32.7822 77.0496 -7.3562 78.908 8.7822 95.0496 C 25.7818 112.0528 100.643 91.386 68.781 75.0496 C 29.781 55.0534 7.2398 62.0838 6.781 49.0528 C 6.562 42.8342 15.0627 35.093 39.781 47.0532 C 70.7816 62.0532 96.3782 42.1734 96.781 29.0526 C 97.1184 18.0579 81.781 21.0526 80.781 8.0527 C 80.2648 1.3433 70.7816 3.0496 70.7816 3.0496 Z");
  animation: move 3100ms infinite linear 0ms;
  transition: left var(--transition-time) var(--transition-style);
}
.body--active .bug--7 {
  left: -3rem;
}
.bug--8 {
  top: 45%;
  left: calc(50% - 10rem);
  transform: scale(1.4) scaleX(-1);
  offset-path: path("M 11.9999 11.9996 C 17.5412 24.0002 30.6 43.9996 16.9999 51.9996 C -0.0001 61.9996 -1.0001 79.9996 9.9999 88.9996 C 21 97.9996 43.003 98.9996 41.003 88.9996 C 39.003 78.9996 21.003 85.9996 24.003 97.9996 C 27.003 109.9996 59.003 109.9996 56.003 94.9996 C 53.003 79.9996 57.003 73.9996 65.003 77.9996 C 69.3362 80.9998 76.003 84.9444 76.003 76 C 76.003 65.0004 87.003 63.9998 87.003 58.0002 C 87.003 52.0004 79.8694 52.644 76.003 51.9996 C 64.003 49.9996 68.003 42.9996 79.003 42.9996 C 90.003 42.9996 88.406 31.9996 82.003 31.9996 C 63.003 31.9996 82.003 16.6156 82.003 8.9997 C 82.003 1.0007 55.003 -0.9999 46.003 3.9996 C 38.534 8.1486 41.006 17.0002 30.003 11.0002 C 18.9999 5.0002 5.997 -1.001 11.9999 11.9996 Z");
  animation: move 3700ms infinite linear 0ms;
  transition: left var(--transition-time) var(--transition-style);
}
.body--active .bug--8 {
  left: -2rem;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
.hidden {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
}/*# sourceMappingURL=main.css.map */