*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Thin.eot');
  src: url('Poppins-Thin.eot?#iefix') format('embedded-opentype'),
      url('Poppins-Thin.woff2') format('woff2'),
      url('Poppins-Thin.woff') format('woff'),
      url('Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Medium.eot');
  src: url('Poppins-Medium.eot?#iefix') format('embedded-opentype'),
      url('Poppins-Medium.woff2') format('woff2'),
      url('Poppins-Medium.woff') format('woff'),
      url('Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-ExtraBold.eot');
  src: url('Poppins-ExtraBold.eot?#iefix') format('embedded-opentype'),
      url('Poppins-ExtraBold.woff2') format('woff2'),
      url('Poppins-ExtraBold.woff') format('woff'),
      url('Poppins-ExtraBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-ExtraLight.eot');
  src: url('Poppins-ExtraLight.eot?#iefix') format('embedded-opentype'),
      url('Poppins-ExtraLight.woff2') format('woff2'),
      url('Poppins-ExtraLight.woff') format('woff'),
      url('Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-LightItalic.eot');
  src: url('Poppins-LightItalic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-LightItalic.woff2') format('woff2'),
      url('Poppins-LightItalic.woff') format('woff'),
      url('Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Black.eot');
  src: url('Poppins-Black.eot?#iefix') format('embedded-opentype'),
      url('Poppins-Black.woff2') format('woff2'),
      url('Poppins-Black.woff') format('woff'),
      url('Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Bold.eot');
  src: url('Poppins-Bold.eot?#iefix') format('embedded-opentype'),
      url('Poppins-Bold.woff2') format('woff2'),
      url('Poppins-Bold.woff') format('woff'),
      url('Poppins-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-ExtraBoldItalic.eot');
  src: url('Poppins-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-ExtraBoldItalic.woff2') format('woff2'),
      url('Poppins-ExtraBoldItalic.woff') format('woff'),
      url('Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-MediumItalic.eot');
  src: url('Poppins-MediumItalic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-MediumItalic.woff2') format('woff2'),
      url('Poppins-MediumItalic.woff') format('woff'),
      url('Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Italic.eot');
  src: url('Poppins-Italic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-Italic.woff2') format('woff2'),
      url('Poppins-Italic.woff') format('woff'),
      url('Poppins-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-BoldItalic.eot');
  src: url('Poppins-BoldItalic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-BoldItalic.woff2') format('woff2'),
      url('Poppins-BoldItalic.woff') format('woff'),
      url('Poppins-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-SemiBoldItalic.eot');
  src: url('Poppins-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-SemiBoldItalic.woff2') format('woff2'),
      url('Poppins-SemiBoldItalic.woff') format('woff'),
      url('Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Regular.eot');
  src: url('Poppins-Regular.eot?#iefix') format('embedded-opentype'),
      url('Poppins-Regular.woff2') format('woff2'),
      url('Poppins-Regular.woff') format('woff'),
      url('Poppins-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-BlackItalic.eot');
  src: url('Poppins-BlackItalic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-BlackItalic.woff2') format('woff2'),
      url('Poppins-BlackItalic.woff') format('woff'),
      url('Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-ExtraLightItalic.eot');
  src: url('Poppins-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-ExtraLightItalic.woff2') format('woff2'),
      url('Poppins-ExtraLightItalic.woff') format('woff'),
      url('Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-SemiBold.eot');
  src: url('Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
      url('Poppins-SemiBold.woff2') format('woff2'),
      url('Poppins-SemiBold.woff') format('woff'),
      url('Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Light.eot');
  src: url('Poppins-Light.eot?#iefix') format('embedded-opentype'),
      url('Poppins-Light.woff2') format('woff2'),
      url('Poppins-Light.woff') format('woff'),
      url('Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-ThinItalic.eot');
  src: url('Poppins-ThinItalic.eot?#iefix') format('embedded-opentype'),
      url('Poppins-ThinItalic.woff2') format('woff2'),
      url('Poppins-ThinItalic.woff') format('woff'),
      url('Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

body {
  background: #0b1d26;
  font-family: 'Poppins', sans-serif;
}

.title {
  text-align: center;
  margin: 1.2em 0;
  font-size: 2rem;
  color: #0b1d26;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.25;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 1220px;
  margin: 20px auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.square {
  flex: 0 0 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background: transparent;
  border: 2px solid white;
  transition: 0.2s all ease;
  position: relative;
}

.square.square:not(:nth-child(3n)) {
  margin-right: 10px;
}

.square.square:not(:nth-child(n+7)) {
  margin-bottom: 10px;
}

.square.is-active {
  background: white;
}

.square__content {
  font-size: 5rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: 0.5s all ease;
}

.square__overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  font-size: 1rem;
  opacity: 0;
  transition: 0.5s all ease;
}

.final .square__overlay {
  opacity: 1;
}

.final .square__content {
  opacity: 0;
}

.square__start-btn {
  background: #d4af57;
  color: white;
  font-size: 3.5em;
  font-weight: bold;
  cursor: pointer;
  border-color: #d4af57;
}

.square__start-btn div {
  text-align: center;
  line-height: 1;
}

.logo img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}

.logo {
  max-width: 220px;
  max-height: 140px;
}



@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}

.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}
.confetti--animation-slow {
  animation: confetti-slow 2.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 1.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 1.25s linear 1 forwards;
}

.js-container {
  overflow: hidden;
}