@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Protest+Strike&display=swap);
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --font:"Poppins", sans-serif;
  --clr-dark:#121325;
  --clr-background:#eef0f8;
  --clr-background-special:#f6fcff;
  --clr-light:#7a92a5;
  --clr-disabled: #ccc;
  --clr-text:#242424;
  --clr-text-menu:#96a8b7;
  --clr-table-head-text:#b5b5c3;
  --clr-table-border:#ebedf3;
  --clr-border: #eee;
  --clr-border-hover: #ddd;
  --clr-section-border: transparent;
  --clr-button-text:#fff;
  --clr-primary:#389cff;
  --clr-primary-hover:#1a8cff;
  --clr-blue:#389cff;
  --clr-red:#e33631;
  --clr-green:#38c271;
  --clr-secondary:#e4ebf1;
  --clr-secondary-hover:#d5dfe7;
  --content-width:1680px;
  --content-width-small:800px;
  --shadow-intensity: 0.05;
  --shadow: 0px 0px 30px 0px rgba(82,63,105,var(--shadow-intensity));
}

html, body {
  margin: 0;
  padding: 0;
  width: 100% dvw;
  min-height: 100dvh;
  overflow: hidden;
}

body {
  font-weight: 500;
  line-height: 1.6;
  font-size: 13px;
  text-align: left;
  background: var(--clr-background);
  color: var(--clr-text);
  font-family: var(--font);
  overflow-x: hidden;
  overflow-y: hidden;
}

.main-container {
  width: 100%;
  display: flex;
  padding: 0;
  margin: 0;
  transition: width 200ms ease;
}

.layout-container {
  margin-left: auto;
  height: 100dvh;
  width: 100dvw;
  background: var(--clr-background);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1, h2, h3, h4 {
  margin-bottom: 1em;
}

h1, .h1 {
  font-size: 1.75rem;
  line-height: 2rem;
}
h1 span, .h1 span {
  font-size: 1rem;
  line-height: 2rem;
  vertical-align: middle;
  color: #ccc;
}

h2, .h2 {
  font-size: 1.375rem;
  line-height: 1.75rem;
}

h3, .h3 {
  font-size: 1rem;
  line-height: 1.25rem;
}

p {
  margin-bottom: 1em;
}

a {
  color: var(--clr-primary);
}

strong {
  font-weight: 700;
}

hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 24px 0;
  padding: 0;
  width: 100%;
  display: block;
}

.container {
  float: left;
  width: 100%;
}

.image-container {
  float: left;
}
.image-container.square img {
  aspect-ratio: 1;
}
.image-container.landscape img {
  aspect-ratio: 16/10;
}
.image-container.portrait img {
  aspect-ratio: 9/14;
}
.image-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.transition {
  position: fixed;
  left: 0;
  top: 0;
  width: 100dvw;
  height: 100dvh;
  background: #3277a5;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
  opacity: 0;
  flex-direction: column;
}
.transition.active {
  display: flex;
  opacity: 1;
}
.transition img {
  width: 100%;
  max-width: 50dvw;
}
.transition .logo-stayntouch {
  margin-top: 3dvh;
  max-width: 40dvw;
}

.mainscreen > * {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  user-drag: none;
}
.mainscreen img {
  user-drag: none;
}
@keyframes hoveringEffect {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(1dvh);
  }
}
@keyframes pulsateButton {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.mainscreen .promo {
  width: 100dvw;
  height: 33dvh;
  padding: 4% 5%;
  position: relative;
  background-image: url(../images/background_arena.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top 28% center;
  border-top: 30px solid #fff;
}
.mainscreen .promo .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.mainscreen .promo .bottom {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.mainscreen .promo .bottom img {
  width: 100%;
  margin-top: auto;
}
.mainscreen .promo .intro {
  font-weight: 700;
  color: #fff;
  font-size: clamp(26px, 7dvw, 120px);
  line-height: 1.1;
  width: 100%;
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
  text-shadow: 0px 0px clamp(5px, 7dvw, 15px) rgba(0, 0, 0, 0.9);
}
.mainscreen .promo .intro span {
  color: #ff9b00;
  text-shadow: 0px 0px clamp(5px, 7dvw, 15px) rgb(255, 255, 255);
}
.mainscreen .promo button,
.mainscreen .promo .button {
  margin: 2dvh auto 0;
  font-size: clamp(19px, 3vw, 60px);
  font-weight: 700;
  line-height: clamp(24px, 4vw, 80px);
  padding: 2% 6%;
  border-radius: 0.25em;
  border: none;
  color: #fff;
  color: #000;
  background: linear-gradient(180deg, #fdce44 25%, #cf821c 100%);
  border: 0.15em solid #662e09;
  animation: pulsateButton 0.75s infinite ease-in-out alternate;
}
.mainscreen .promo .moon {
  background: #ea6f52;
  width: 200%;
  height: 150%;
  border-radius: 50%;
  position: absolute;
  left: -50%;
  top: 80%;
  z-index: 0;
}

.mainscreen .presentation {
  width: 100dvw;
  height: 67dvh;
  background: #03080f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.mainscreen .presentation .slides-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
}
.mainscreen .presentation .slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 2dvw 4dvw;
}
.mainscreen .presentation .slide .top {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 4dvh 0;
}
.mainscreen .presentation .slide h1 {
  color: #fff;
  font-size: clamp(26px, 7dvw, 150px);
  line-height: 1.2;
  text-align: center;
  margin: 0;
}
.mainscreen .presentation .slide-bottom {
  position: fixed;
  bottom: 33dvh;
  width: 100%;
  z-index: -1;
  opacity: 1;
}
.mainscreen .presentation .transition-slide {
  background: #03080f;
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 67dvh;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /*
  .logo_stayntouch {
      margin-top:4dvh;
      max-width:50dvw;
  }
  */
}
.mainscreen .presentation .transition-slide img {
  width: 100%;
  max-width: 67dvw;
}
.mainscreen .presentation .text {
  font-size: clamp(26px, 7dvw, 80px);
  line-height: 1.2;
}

#slide-1 .logo {
  padding: 0 60px;
  width: 100%;
  max-width: 1100px;
}

#slide-2 .flex-container {
  display: flex;
  flex-direction: row;
  width: 80%;
  gap: 4rem;
}
#slide-2 .top {
  padding-bottom: 4rem;
}
#slide-2 .text {
  width: 80%;
  text-align: center;
  margin-bottom: 4dvh;
  color: #fff;
}
#slide-2 .text strong {
  color: #f5a03c;
}
#slide-2 .left {
  width: 50%;
}
#slide-2 .left img {
  width: 100%;
  margin-right: auto;
  max-width: 96%;
  box-shadow: 0px 7px 50px rgba(0, 0, 0, 0.12);
}
#slide-2 .right {
  width: 50%;
}
#slide-2 .right img {
  width: 100%;
  margin-left: auto;
  max-width: 96%;
  box-shadow: 0px 7px 50px rgba(0, 0, 0, 0.1);
}
#slide-2 .bottom {
  margin-top: 3dvh;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0px 7px 50px rgba(0, 0, 0, 0.08);
}

#slide-3 .stagger-list {
  list-style: none;
  padding: 0;
  margin: 0;
  --grid-layout-gap: 2dvw;
  --grid-column-count: 3;
  --grid-item--min-width: 300px;
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
#slide-3 li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08);
  padding: 50px 40px;
  background: #fff;
}
#slide-3 li .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-bottom: 1rem;
}
#slide-3 li .icon img {
  width: 100%;
  max-height: 100px;
}
#slide-3 li .text {
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
  text-align: center;
}

/*
#slide-4 {
    .top {
        padding-top:4rem;
        padding-bottom:3rem;
    }

    .map {
        margin-top:6dvw;
        width:100%;
        position:relative;
    }

    .worldmap {
        width:100%;
    }

    .overlays,
    .markers {
        position: absolute;
        bottom:4.5rem;
        width:100%;
        height:84%;
    }

    .overlay {
        position: absolute;
        z-index:1;
        width:24%;
        aspect-ratio: 1;
        background:#f5a03c80;
        border-radius:50%;
        border:4px solid #f5a03c90;

        &.america {
            left:14%;
            top:13%;
        }

        &.europe {
            left:35.5%;
            top:2%;            
        }

        &.asia {
            left:57%;
            top:16%;
        }

        &.australia {
            left:74%;
            top:54%;
        }
    }

    .marker {
        position: absolute;
        z-index:2;
        background:#fff;
        width:90px;
        aspect-ratio: 1;
        border-radius:50%;
        display:flex;
        align-items: center;
        justify-content: center;
        box-shadow:0px 0px 20px rgba(0,0,0,0.08);

        &.one {
            left:24%;
            top:36%;
        }

        &.two {
            left:45%;
            top:25%;
        }

        &.three {
            left:43%;
            top:31%;
        }  

        &.four {
            left:59%;
            top:45%;
        }

        &.five {
            left:72%;
            top:62%;
        }

        img {
            height:60px;
            rotate: 45deg;
        }
    }

    .offices {
        position: relative;
        z-index:2;
        padding:0 4rem;
        width:60%;
        margin-top:6dvw;
    }

    h3 {
        text-align: center;
        margin-bottom:1rem;
        background:#fff;
        width:300px;
        border-radius:8px;
        font-size:32px;
        padding:10px 0;
        margin:0 auto 1rem;
        box-shadow:0px 0px 30px rgba(0,0,0,0.08);
    }

    ul {
        list-style:none;
        padding:0;
        margin:0;
        width:100%;
        @include grid(2,2dvw, 300px)
    }

    li {
        text-align: center;
        background:#fff;
        display:flex;
        flex-direction: column;
        border-radius:10px;
        font-size:26px;
        padding:30px 30px;
        box-shadow:0px 0px 30px rgba(0,0,0,0.08);

        .title {
            font-size: 36px;
            font-weight: 700;
            line-height: 36px;
            margin-bottom: 1rem;
        }
    }
}
*/
#slide-4 .text-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 1600px;
  z-index: 2;
  position: relative;
}
#slide-4 .text-list li {
  margin-bottom: 2.5rem;
  background: #fff;
  border-radius: 20px;
  padding: 3dvw 4dvw;
}
#slide-4 .text-list li h3 {
  display: flex;
  align-items: center;
  font-size: 34px;
  font-size: clamp(26px, 7dvw, 70px);
  line-height: 1.2;
  margin: 0;
}
#slide-4 .text-list li .icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
}
#slide-4 .text-list li .icon img {
  width: 100%;
  max-height: 60px;
  margin-right: 2rem;
  filter: invert(61%) sepia(76%) saturate(408%) hue-rotate(349deg) brightness(96%) contrast(99%);
}
#slide-4 .text-list .text {
  font-size: clamp(26px, 7dvw, 50px);
  line-height: 1.4;
  margin-top: 2dvw;
}
#slide-4 .text-list .text strong {
  color: #000;
}

@media screen and (max-width: 1280px) {
  .mainscreen .promo {
    border-top: 10px solid #fff;
  }
  .mainscreen .promo .intro {
    font-size: clamp(25px, 5dvw, 120px);
    line-height: 1;
  }
  .mainscreen .promo button,
  .mainscreen .promo .button {
    font-size: clamp(14px, 3vw, 60px);
    line-height: 1;
  }
  .mainscreen .presentation .text {
    font-size: 40px;
    line-height: 1.2;
  }
  #slide-1 .logo {
    max-width: 680px;
  }
  #slide-2 .top {
    padding-bottom: 1rem;
  }
  #slide-2 .flex-container {
    width: 80%;
    gap: 1rem;
  }
  #slide-3 .content {
    width: 90%;
  }
  #slide-3 .stagger-list {
    --grid-layout-gap: 2dvw;
    --grid-column-count: 3;
    --grid-item--min-width: 150px;
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
  }
  #slide-3 li {
    padding: 40px 30px;
  }
  #slide-3 li .icon {
    width: 24px;
    height: 24px;
  }
  #slide-3 li .text {
    font-size: 20px;
    line-height: 24px;
  }
  #slide-4 .text-list .text {
    font-size: 24px;
  }
  #slide-4 .text-list li {
    border-radius: 10px;
    margin-bottom: 1rem;
  }
  #slide-4 .text-list li h3 {
    font-size: 38px;
  }
  #slide-4 .text-list li .icon {
    height: 30px;
  }
  #slide-4 .text-list li .icon img {
    max-height: 30px;
    margin-right: 1rem;
  }
}
@media screen and (max-width: 480px) {
  .mainscreen .promo {
    border-top: 6px solid #fff;
  }
  .mainscreen .promo .intro {
    font-size: clamp(25px, 5dvw, 120px);
    line-height: 1;
  }
  .mainscreen .promo button,
  .mainscreen .promo .button {
    font-size: clamp(14px, 3vw, 60px);
    line-height: 1;
  }
  .mainscreen .presentation .text {
    font-size: 18px;
  }
  #slide-1 .logo {
    max-width: 320px;
  }
  #slide-3 .content {
    width: 100%;
  }
  #slide-3 .stagger-list {
    --grid-layout-gap: 6px;
    --grid-column-count: 3;
    --grid-item--min-width: 100px;
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
  }
  #slide-3 li {
    padding: 14px;
  }
  #slide-3 li .icon {
    width: 14px;
    height: 14px;
    margin-bottom: 10px;
  }
  #slide-3 li .text {
    font-size: 10px;
    line-height: 10px;
  }
  #slide-4 .text-list .text {
    font-size: 12px;
  }
  #slide-4 .text-list li {
    border-radius: 6px;
    margin-bottom: 0.5rem;
  }
  #slide-4 .text-list li h3 {
    font-size: 16px;
    justify-content: flex-start;
  }
  #slide-4 .text-list li .text {
    width: 100%;
  }
  #slide-4 .text-list li .icon {
    height: 20px;
    width: 20px;
    margin-right: 20px;
  }
  #slide-4 .text-list li .icon img {
    max-height: 20px;
    margin-right: 0;
  }
}
.whack-an-alien {
  background-image: url(../images/whack/background_arena.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  font-family: "Protest Strike", sans-serif;
}
.whack-an-alien > * {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  user-drag: none;
}
.whack-an-alien img {
  user-drag: none;
}
.whack-an-alien .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100dvw;
  z-index: 10;
  opacity: 0.25;
}
.whack-an-alien .top {
  height: 42dvh;
  width: 100%;
  padding-top: 7%;
  position: relative;
}
.whack-an-alien .bottom {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 58dvh;
  width: 100%;
  overflow: hidden;
}
.whack-an-alien .title {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 4em;
}
.whack-an-alien .title img {
  width: 100%;
  max-width: 1790px;
}
.whack-an-alien .planet {
  position: absolute;
  width: 15dvw;
  max-width: 330px;
  right: 8.5dvw;
  top: 2dvh;
  animation: hoveringEffect 4s infinite ease-in-out alternate;
}
.whack-an-alien .planet img {
  width: 100%;
}
.whack-an-alien .intro {
  font-size: clamp(26px, 7dvw, 40px);
  line-height: clamp(26px, 7dvw, 40px);
  width: 100%;
  max-width: 80dvw;
  text-align: center;
  margin: 40px auto 0.5dvh;
  color: #000;
}
.whack-an-alien .intro span {
  color: #ff9b00;
}
.whack-an-alien .countdown {
  position: absolute;
  z-index: 1;
  top: 10%;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 500ms 1000ms ease-out;
  transform: translateY(2.5rem);
  font-size: clamp(46px, 10dvw, 200px);
  line-height: clamp(46px, 10dvw, 200px);
}
.whack-an-alien .countdown.show {
  transition: all 500ms 500ms ease-out;
  transform: translateY(0);
  opacity: 1;
}
.whack-an-alien .startbutton {
  position: relative;
  z-index: 2;
  transition: all 250ms ease-out;
}
.whack-an-alien .startbutton.disabled {
  opacity: 0;
  transform: translateY(50px);
}
.whack-an-alien .totalscore {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1rem;
  padding: 2% 4%;
  opacity: 0;
  font-size: clamp(26px, 6dvw, 150px);
  line-height: clamp(26px, 6dvw, 150px);
  transform: translateY(1.5rem);
  transition: all 250ms ease-out;
}
.whack-an-alien .totalscore.show {
  transition: all 500ms 1500ms ease-out;
  transform: translateY(0);
  opacity: 1;
}
.whack-an-alien .gameboard {
  width: 100%;
  height: 100%;
}
.whack-an-alien .moon {
  background: #ea6f52;
  width: 200%;
  height: 150%;
  border-radius: 50%;
  position: absolute;
  left: -50%;
  top: 0;
  z-index: 0;
}
.whack-an-alien .holes {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 140px auto 0;
}
.whack-an-alien .hole {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  aspect-ratio: 16/11;
  width: 48%;
  margin: 0 auto -4%;
}
.whack-an-alien .hole .hole-top,
.whack-an-alien .hole .hole-bottom {
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.whack-an-alien .hole .hole-bottom {
  z-index: 3;
  pointer-events: none;
}
.whack-an-alien .hole .hit {
  position: absolute;
  font-size: 8dvw;
  z-index: 1;
  bottom: 0%;
  line-height: 1;
  opacity: 1;
  color: #000;
}
.whack-an-alien .hole .alien {
  position: absolute;
  z-index: 2;
  top: 90%;
  width: 100%;
  margin: 0 auto;
}
.whack-an-alien .hole .alien img {
  height: 100%;
  width: 46%;
  position: relative;
  margin: 0 auto;
}
.whack-an-alien .clouds {
  position: absolute;
  bottom: -3%;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
  z-index: 2;
}
.whack-an-alien .clouds img {
  position: relative;
  max-width: 116%;
  transform: translateX(-8%);
  animation: cloudEffect 20s infinite ease-in-out alternate;
}
.whack-an-alien .controls {
  position: relative;
  margin: 4% 5px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.whack-an-alien .game {
  width: 600px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.whack-an-alien .hole.up .alien {
  top: -8%;
}
.whack-an-alien .hole.hit .hit {
  opacity: 0;
  bottom: 50%;
  transition: all 500ms ease-in;
}
.whack-an-alien .alien {
  background-size: 60%;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  transition: all 0.4s;
}
.whack-an-alien .debug {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 14px;
  font-size: 9px;
  font-weight: 700;
  display: none;
  position: absolute;
  right: 40px;
  top: 40px;
  padding: 10px;
  color: #fff;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.95);
}
.whack-an-alien .debug.show {
  display: block;
}
.whack-an-alien button,
.whack-an-alien .button {
  font-size: clamp(19px, 3vw, 60px);
  line-height: clamp(24px, 4vw, 80px);
  padding: 2% 6%;
  border-radius: 0.25em;
  border: none;
  color: #fff;
  color: #000;
  background: linear-gradient(180deg, #fdce44 25%, #cf821c 100%);
  border: 0.15em solid #662e09;
}
.whack-an-alien .endscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
}
.whack-an-alien .endscreen.active {
  z-index: 10;
  visibility: visible;
}
.whack-an-alien .endscreen.active .fader {
  opacity: 1;
}
.whack-an-alien .endscreen.active .message {
  opacity: 1;
  transform: translateY(0);
}
.whack-an-alien .endscreen .fader {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 250ms ease-out;
}
.whack-an-alien .endscreen .message {
  width: 100%;
  max-width: 80%;
  background: #fff;
  border-radius: 2vw;
  padding: 6%;
  position: relative;
  z-index: 2;
  transform: translateY(2em);
  opacity: 0;
  transition: all 500ms 150ms ease;
  font-size: clamp(19px, 3vw, 60px);
  line-height: clamp(24px, 4vw, 80px);
}
.whack-an-alien .endscreen h2 {
  font-weight: 400;
  margin-bottom: 4%;
  font-size: clamp(26px, 5dvw, 100px);
  line-height: clamp(26px, 5dvw, 100px);
}
.whack-an-alien .endscreen button {
  margin-top: 1rem;
}

@keyframes hoveringEffect {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(1dvh);
  }
}
@keyframes cloudEffect {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-12%);
  }
}
@media screen and (max-width: 400px) {
  .whack-an-alien .intro {
    margin: 16px auto 0.5dvh;
  }
  .whack-an-alien .holes {
    margin: 50px auto 0;
  }
}
.wheel-o-fortune {
  height: 100dvh;
  width: 100%;
  background-image: url(../images/background_arena.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
}
.wheel-o-fortune > * {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  user-drag: none;
}
.wheel-o-fortune img {
  user-drag: none;
}
.wheel-o-fortune .top {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  height: 100dvh;
}
.wheel-o-fortune .bottom {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 35dvh;
  width: 100%;
}
.wheel-o-fortune .bottom img {
  width: 100%;
  margin-top: auto;
}
.wheel-o-fortune .wheel-wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.wheel-o-fortune .wheel {
  aspect-ratio: 1/1;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.wheel-o-fortune .sunburst {
  position: absolute;
  z-index: -1;
  bottom: 0;
  animation: rotate 40s infinite linear;
  transform-origin: center center;
  transform-style: preserve-3D;
  scale: 1.8;
  opacity: 0.5;
}
.wheel-o-fortune .wheelbase {
  position: absolute;
  z-index: -1;
  bottom: 0;
}
.wheel-o-fortune .intro {
  margin-top: 5dvh;
  font-weight: 700;
  font-size: clamp(22px, 5dvw, 110px);
  line-height: 1.1;
  width: 100%;
  max-width: 86dvw;
  text-align: center;
  margin: 4dvh auto 3dvh;
  color: #fff;
  text-shadow: 0px 0px clamp(5px, 7dvw, 10px) rgba(0, 0, 0, 0.6);
}
.wheel-o-fortune .intro span {
  color: #ff9b00;
  text-shadow: 0px 0px clamp(5px, 7dvw, 10px) rgba(255, 255, 255, 0.8);
}
.wheel-o-fortune button,
.wheel-o-fortune .button {
  font-size: clamp(19px, 3vw, 60px);
  line-height: clamp(24px, 4vw, 80px);
  padding: 2% 6%;
  border-radius: 0.25em;
  border: none;
  color: #fff;
  font-weight: 700;
  background: #36a8f5;
}
.wheel-o-fortune .start {
  /*
  background:#F8C828;
  border:clamp(8px, 1vw, 20px) solid #c20606;
  color:#d60808;
  */
  background: linear-gradient(180deg, #fdce44 25%, #cf821c 100%);
  border: clamp(8px, 1vw, 20px) solid #c20606;
  color: #d60808;
  text-transform: uppercase;
  font-size: clamp(22px, 7dvw, 60px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  border-radius: 200px;
  margin-top: 2dvh;
  z-index: 2;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
  transition: all 250ms ease-out;
}
.wheel-o-fortune .start.disabled {
  opacity: 0;
  transform: translateY(50px);
}
.wheel-o-fortune .endscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
}
.wheel-o-fortune .endscreen .prizeimage {
  height: 15dvh;
  margin: 0 auto;
  margin-bottom: 2dvh;
  min-height: 200px;
}
.wheel-o-fortune .endscreen.active {
  z-index: 10;
  visibility: visible;
}
.wheel-o-fortune .endscreen.active .fader {
  opacity: 1;
}
.wheel-o-fortune .endscreen.active .message {
  opacity: 1;
  transform: translateY(0);
}
.wheel-o-fortune .endscreen.active .event-code {
  margin: 60px 0 40px;
}
.wheel-o-fortune .endscreen.active .event-code h2 {
  font-size: 40px;
  margin-bottom: 10px;
}
.wheel-o-fortune .endscreen.active .event-code strong {
  font-size: 40px;
}
.wheel-o-fortune .endscreen .fader {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 250ms ease-out;
}
.wheel-o-fortune .endscreen .message {
  width: 100%;
  max-width: 80%;
  background: #fff;
  border-radius: 2vw;
  padding: 6%;
  position: relative;
  z-index: 2;
  transform: translateY(2em);
  opacity: 0;
  transition: all 500ms 150ms ease;
  font-size: clamp(19px, 3vw, 60px);
  line-height: clamp(24px, 4vw, 80px);
}
.wheel-o-fortune .endscreen h2 {
  font-weight: 700;
  margin-bottom: 4%;
  font-size: clamp(26px, 5dvw, 100px);
  line-height: clamp(26px, 5dvw, 100px);
}
.wheel-o-fortune .endscreen .buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wheel-o-fortune .endscreen .popupbutton {
  display: flex;
  flex-wrap: wrap;
  padding: 3% 6%;
  margin: 0 2%;
  background: linear-gradient(180deg, #fdce44 25%, #cf821c 100%);
  border: clamp(4px, 1vw, 6px) solid #662e09;
  color: #d60808;
  text-transform: uppercase;
  font-size: clamp(22px, 7dvw, 36px);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  border-radius: 200px;
  margin-top: 2dvh;
  z-index: 2;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
  transition: all 250ms ease-out;
}
.wheel-o-fortune .endscreen .popupbutton.disabled {
  opacity: 0;
  transform: translateY(50px);
}
.wheel-o-fortune .endscreen button {
  margin-top: 1rem;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media screen and (max-width: 768px) {
  .wheel-o-fortune .intro {
    margin: 4dvh auto 1dvh;
  }
  .wheel-o-fortune .wheel-wrapper {
    width: 90%;
  }
  .wheel-o-fortune .start {
    box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.25);
    margin-top: -10px;
    border: 6px solid #c20606;
  }
  .wheel-o-fortune .endscreen .prizeimage {
    min-height: 100px;
    max-height: 180px;
  }
  .wheel-o-fortune .endscreen .popupbutton {
    font-size: 20px;
    border: 4px solid #c20606;
  }
}
@media screen and (max-width: 480px) {
  .wheel-o-fortune .start {
    border: 4px solid #c20606;
  }
  .wheel-o-fortune .endscreen.active .event-code h2 {
    font-size: 30px;
  }
  .wheel-o-fortune .endscreen.active .event-code strong {
    font-size: 40px;
  }
}