html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.hidden {
  display: none;
}

#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
}

#ropeMain {
  overflow: hidden;
}

.chandelier-holder {
  position: relative;
  height: 500px;
  padding: 0 .5em;
  margin-top: -190px;
  width: 400px;
  float: right;
}

.chain {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 17px;
  height: 20px;
  width: 2px;
  background-color: #7dacb1;
  transform-origin: top center;
  animation: fall-n-swing 2.5s 1;
  animation-timing-function: ease-in-out;
}

.very-first-chain {
  left: 50% !important;
}

.show-interval-animation .chain {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 17px;
  height: 20px;
  width: 2px;
  background-color: #7dacb1;
  transform-origin: top center;
  animation: interval-n-swing 2.5s linear infinite;
  animation-timing-function: ease-in-out;
}

.show-interval-animation .badge {
  top: 9px;
  left: -24px;
  width: 50px;
  height: 100px;
  background: none;
  outline: none;
  box-shadow: none;
}

.close-btn {
  opacity: 0;
}

.show-interval-animation .close-btn {
  animation: opacityShow 0.5s forwards;
  animation-timing-function: ease-in-out;
  opacity: 0;
  outline: none;
  box-shadow: none;
}

@keyframes opacityShow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.badge {
  top: 9px;
  left: -24px;
  width: 50px;
  height: 100px;
  background: none;
  cursor: pointer !important;
  outline: none;
  box-shadow: none;
}

.badge img {
  width: 100% !important;
}

#badgeElement:hover {
  -webkit-filter: drop-shadow(-1px 1px 1px rgba(183, 152, 116, 0.51)) drop-shadow(0px 1px 1px rgba(183, 152, 116, 0.51));
  filter: drop-shadow(-1px 1px 1px rgba(183, 152, 116, 0.51)) drop-shadow(1px 1px 1px rgba(183, 152, 116, 0.51));
}

.show-collapse-animation .chain {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 17px;
  height: 20px;
  width: 2px;
  background-color: #7dacb1;
  transform-origin: top center;
  animation: hideAnimation 0.5s 1 forwards;
  animation-timing-function: ease-in-out;
}

.show-collapse-animation .badge {
  top: 9px;
  left: -24px;
  width: 50px;
  height: 100px;
  background: none;
  outline: none;
  box-shadow: none;
}

.show-pull-down-animation .chain {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 17px;
  height: 20px;
  width: 2px;
  background-color: #7dacb1;
  transform-origin: top center;
  animation: pullDownAnimation 0.5s forwards;
  animation-timing-function: ease-in-out;
}

.badge .close-btn {
  position: absolute;
  top: -20px;
  right: -10px;
  height: 20px;
  width: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  outline: none;
  box-shadow: none;
}

.badge .close-btn img {
  opacity: 0.2;
  outline: none;
  box-shadow: none;
}

.badge .close-btn img:hover {
  opacity: 1;
}

.show-pull-down-animation .badge {
  top: 9px;
  left: -24px;
  width: 50px;
  height: 100px;
  background: none;
  outline: none;
  box-shadow: none;
}