body.halloween {
  background-image: url("../../../images/image-events/halloween/halloween-background.png");
}

.halloween-aviso-bkg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: #141414ee;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.halloween-aviso-bkg.off {
  opacity: 0;
  visibility: hidden;
}

.jack-o-lantern-off {
  width: 350px;
  height: 350px;
  filter: brightness(0.4) grayscale(0.3);
  transition: filter 0.25s ease;
}

.jack-o-lantern-on {
  width: 350px;
  height: 350px;
  filter: brightness(1.1) drop-shadow(0 0 20px #ff9900);
  transition: filter 0.05s ease;
  transform: scale(0.9);
}

.aviso-halloween {
  width: min(700px, calc(100vw - 36px));
  box-sizing: border-box;
  padding: 16px 14px;
  bottom: 20%;
  left: 47.5%;
  position: fixed;
  transform: translateX(-50%);
  text-align: left;
  background: #383232;
  border: #f08036e6 solid 2.5px;
  color: rgb(255, 211, 211);
  border-radius: 8px;
  z-index: 1000;
  font-size: auto;
  font-family: Arial, sans-serif;
  cursor: default;
}
.aviso-halloween p,
.aviso-halloween h1 {
  margin-left: 10px;
  margin-right: 10px;
}

.aviso-halloween h4 {
  margin: 24px 10px;
}

.divisor {
  height: 1px;
  background: #d66012e6;
  margin: 24px 12px;
}

.aviso-halloween h4 {
  margin-right: 15%;
  color: white;
}
.aviso-halloween button {
  margin-left: 80%;
  margin-bottom: 1.5%;
  height: 40px;
  width: 120px;
  background-color: #f08036e6;
  border: #f08036e6 solid 2px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}
#event-alert {
  opacity: 0;
  color: #ff7b00;
  font-size: 2.25rem;
  animation: brilho 1.5s infinite alternate;
  padding-top: 20px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  cursor: default;
}
#event-alert.ativo {
  opacity: 1;
}

@keyframes brilho {
  from {
    text-shadow:
      0 0 5px #ff5e00,
      0 0 10px #ff5e00;
  }

  to {
    text-shadow:
      0 0 20px #ff5e00,
      0 0 30px #ff5e00,
      0 0 40px #ff5e00;
  }
}
.moon-bkg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: #141414ee;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.moon-bkg.off {
  opacity: 0;
  visibility: hidden;
}

.aviso-lua {
  width: min(700px, calc(100vw - 36px));
  box-sizing: border-box;
  padding: 16px 14px;
  bottom: 20%;
  left: 47.5%;
  position: fixed;
  transform: translateX(-50%);
  text-align: left;
  background: #383232;
  border: #f08036e6 solid 2.5px;
  color: rgb(255, 211, 211);
  border-radius: 8px;
  z-index: 1000;
  font-size: auto;
  font-family: Arial, sans-serif;
  cursor: default;
}

.aviso-lua p,
.aviso-lua h1 {
  margin-left: 10px;
  margin-right: 10px;
}

.aviso-lua h4 {
  margin: 24px 10px;
}

.aviso-lua h4 {
  margin-right: 15%;
  color: white;
}

.info-lua {
  width: min(420px, 90%);
  margin: 20px 12px;
  padding: 4px 12px;
  box-sizing: border-box;
  background-color: #8e512f;
  border-radius: 8px;
  text-align: left;
  cursor: default;
}

.info-lua h3 {
  margin: 8px 0;
  color: #fac075;
}

.info-lua h5 {
  margin: 8px 0;
  color: #eecc9f;
}

.aviso-lua button {
  margin-left: 80%;
  margin-bottom: 1.5%;
  height: 40px;
  width: 120px;
  background-color: #f08036e6;
  border: #f08036e6 solid 2px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.blood-moon-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #660606;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 9999;
}

.blood-moon-overlay.ativa {
  opacity: 0.5;
}

.candy-bkg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: #141414ee;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.candy-bkg.off {
  opacity: 0;
  visibility: hidden;
}

.aviso-chuva {
  width: min(700px, calc(100vw - 36px));
  box-sizing: border-box;
  padding: 16px 14px;
  bottom: 20%;
  left: 47.5%;
  position: fixed;
  transform: translateX(-50%);
  text-align: left;
  background: #383232;
  border: #f08036e6 solid 2.5px;
  color: rgb(255, 211, 211);
  border-radius: 8px;
  z-index: 1000;
  font-size: auto;
  font-family: Arial, sans-serif;
  cursor: default;
}

.aviso-chuva p,
.aviso-chuva h1 {
  margin-left: 10px;
  margin-right: 10px;
}

.aviso-chuva h4 {
  margin: 24px 10px;
}

.aviso-chuva h4 {
  margin-right: 15%;
  color: white;
}

.info-chuva {
  width: min(420px, 90%);
  margin: 20px 12px;
  padding: 4px 12px;
  box-sizing: border-box;
  background-color: #8e512f;
  border-radius: 8px;
  text-align: left;
  cursor: default;
}

.info-chuva h3 {
  margin: 8px 0;
  color: #fac075;
}

.info-chuva h5 {
  margin: 8px 0;
  color: #eecc9f;
}

.aviso-chuva button {
  margin-left: 80%;
  margin-bottom: 1.5%;
  height: 40px;
  width: 120px;
  background-color: #f08036e6;
  border: #f08036e6 solid 2px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

.CPC{
  width: min(180px, calc(100vw - 36px));
  height: 120px;
  box-sizing: border-box;
  bottom: 72%;
  left: 7.5%;
  position: fixed;
  transform: translateX(-50%);
  text-align: left;
  background-color: #322535;
  border: #f38bf3 solid 2.25px;
  border-radius: 8px;
  z-index: 2;
  font-size: 10px;
  font-family: Arial, sans-serif;
  cursor: default;
}

.CPC h1,
.CPC h3,
.CPC p,
.progress-bar{
  margin-left: 3.25%;
}

.CPC h1{
  color: #f38bf3;
}

.CPC h3,
.CPC p{
    
  color: #f5caf5;
}

.progress-bar{
  width: 93%;
  height: 6px;
  background-color: #433546;
  border-radius: 10px;
  overflow: hidden;
}

.progress{
  width: 0%;
  height: 100%;
  background-color: #f38bf3;
  transition: width 0.4s ease;
}

.candy-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../../images/image-events/halloween/candy-rain.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

.candy-rain.on {
  opacity: 1;
}

.pop-up-bkg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: #141414ee;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.pop-up-bkg.off {
  opacity: 0;
  visibility: hidden;
}
.pop-up{
  width: min(350px, calc(100vw - 36px));
  height: 170px;
  box-sizing: border-box;
  bottom: 50%;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
  text-align: left;
  background-color: #322535;
  border: #db8bf3 solid 0.5px;
  border-radius: 8px;
  z-index: 2;
  font-size: 10px;
  font-family: Arial, sans-serif;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  cursor: default;
}
.pop-up h1{
  color: gold;
}
.pop-up h3{
  color: #db8bf3;
}
.pop-up h2{
  color: #b5f888;
}
.pop-up h4{
  color: #807283;
}
.info-bonus{
  width: 90%;
  height: 12%;
  box-sizing: border-box;
  background-color: #583961b2;
  border-radius: 8px;
  text-align: center;
  margin-left: 5%;
  margin-bottom: 2.5%;
}
.info-bonus h3{
  color: rgb(247, 221, 172);
}

@media (max-width: 768px) {
  body.halloween {
    background-image: url("../../../images/image-events/halloween/halloween-background-mobile.png");
  }

  .aviso-halloween button {
    margin-left: 60%;
    margin-bottom: 1.5%;
    height: 40px;
    width: 120px;
    background-color: #f08036e6;
    border: #f08036e6 solid 2px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
  }

  
  #event-alert {
    opacity: 0;
    color: #ff7b00;
    font-size: 1.75rem;
    animation: brilho 1.5s infinite alternate;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  #event-alert.ativo {
    opacity: 1;
  }

  @keyframes brilho {
    from {
      text-shadow:
        0 0 5px #ff5e00,
        0 0 10px #ff5e00;
    }

    to {
      text-shadow:
        0 0 20px #ff5e00,
        0 0 30px #ff5e00,
        0 0 40px #ff5e00;
    }
  }

  .aviso-lua button {
    margin-left: 60%;
    margin-bottom: 1.5%;
    height: 40px;
    width: 120px;
    background-color: #f08036e6;
    border: #f08036e6 solid 2px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
  }

  .aviso-chuva button {
    margin-left: 60%;
    margin-bottom: 1.5%;
    height: 40px;
    width: 120px;
    background-color: #f08036e6;
    border: #f08036e6 solid 2px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
  }

  #containerCPC{
    width: 90%;
    max-width: 300px;
    align-items: center;
    justify-content: center;
  }

  .CPC{
    width: min(220px, calc(100vw - 36px));
    height: 110px;
    box-sizing: border-box;
    margin: 5px auto;
    margin-left: 40%;
    position: relative;
    text-align: left;
    background-color: #322535;
    border: #f38bf3 solid 2.25px;
    border-radius: 8px;
    z-index: 2;
    font-size: 10px;
    font-family: Arial, sans-serif;
  }
}