/* =========================================================
   HV NOVITAS
   MUZIEK BINGO - OPTIE 2
   MODERN / KLEURRIJK / DISCO
   GEEN DIAGONALE LIJNEN
   ========================================================= */

* {
  box-sizing: border-box;
}


/* =========================================================
   BASIS
   ========================================================= */

html,
body {

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: #050716;

}


#eventRoot {

  width: 100%;
  height: 100%;

  overflow: hidden;

}


/* =========================================================
   KLIKBARE BANNER
   ========================================================= */

.event-link {

  display: block;

  width: 100%;
  height: 100%;

  color: #ffffff;

  text-decoration: none;

}


/* =========================================================
   HOOFDBANNER
   ========================================================= */

.event-banner {

  position: relative;

  isolation: isolate;

  width: 100%;
  height: 100%;

  min-height: 190px;

  overflow: hidden;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    14px
    20px;

  color: #ffffff;

  text-align: center;

  background:

    radial-gradient(
      circle at 8% 50%,
      rgba(0, 217, 255, .60)
      0%,
      rgba(0, 217, 255, .22)
      16%,
      transparent 38%
    ),

    radial-gradient(
      circle at 30% 15%,
      rgba(255, 0, 204, .48)
      0%,
      rgba(255, 0, 204, .18)
      20%,
      transparent 38%
    ),

    radial-gradient(
      circle at 72% 15%,
      rgba(119, 0, 255, .55)
      0%,
      rgba(119, 0, 255, .18)
      24%,
      transparent 42%
    ),

    radial-gradient(
      circle at 95% 55%,
      rgba(255, 0, 153, .58)
      0%,
      rgba(255, 0, 153, .20)
      18%,
      transparent 38%
    ),

    radial-gradient(
      circle at 55% 110%,
      rgba(0, 156, 255, .35)
      0%,
      transparent 45%
    ),

    linear-gradient(
      120deg,
      #030615 0%,
      #07132f 28%,
      #10114a 48%,
      #210a45 72%,
      #050716 100%
    );

  border:
    2px solid
    #4edcff;

  border-radius: 0;

  box-shadow:

    inset 0 0 70px
    rgba(0,0,0,.58),

    0 8px 22px
    rgba(0,0,0,.32);

}


/* =========================================================
   LICHTGLOED
   Geen lijnen / geen diagonale banen
   ========================================================= */

.event-banner::before {

  content: "";

  position: absolute;

  inset: -20%;

  background:

    radial-gradient(
      circle at 18% 35%,
      rgba(0, 238, 255, .24),
      transparent 18%
    ),

    radial-gradient(
      circle at 47% 75%,
      rgba(255, 0, 204, .18),
      transparent 20%
    ),

    radial-gradient(
      circle at 82% 32%,
      rgba(155, 0, 255, .24),
      transparent 19%
    );

  filter:
    blur(24px);

  opacity: .95;

  z-index: 0;

}


/* =========================================================
   KLEURVLEKKEN
   ========================================================= */

.event-banner::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(
      circle at 6% 90%,
      rgba(0, 224, 255, .22),
      transparent 18%
    ),

    radial-gradient(
      circle at 94% 12%,
      rgba(255, 25, 196, .24),
      transparent 18%
    );

  pointer-events: none;

  z-index: 0;

}


/* =========================================================
   DECORATIE
   ========================================================= */

.art {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  z-index: 2;

  pointer-events: none;

}


/* =========================================================
   KLEINE LICHTBOLLETJES
   ========================================================= */

.art::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    radial-gradient(
      circle,
      rgba(255,255,255,.85) 0 1.5px,
      transparent 2px
    ),

    radial-gradient(
      circle,
      rgba(0,238,255,.65) 0 1.5px,
      transparent 2px
    ),

    radial-gradient(
      circle,
      rgba(255,0,204,.65) 0 1.5px,
      transparent 2px
    );

  background-size:
    85px 72px,
    115px 95px,
    145px 110px;

  background-position:
    20px 12px,
    55px 28px,
    90px 45px;

  opacity: .55;

  z-index: 0;

}


/* =========================================================
   DISCOBAL
   ========================================================= */

.disco-ball {

  position: absolute;

  left: 4%;

  top: 50%;

  width: 130px;

  height: 130px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:

    radial-gradient(
      circle at 32% 27%,
      #ffffff 0%,
      #ffffff 8%,
      rgba(255,255,255,.75) 10%,
      transparent 14%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.72) 0 3px,
      transparent 3px 20px
    ),

    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.72) 0 3px,
      transparent 3px 20px
    ),

    linear-gradient(
      135deg,
      #ffffff 0%,
      #a9eaff 18%,
      #5f79ff 34%,
      #d841ff 52%,
      #ff45ba 68%,
      #8e59ff 82%,
      #ffffff 100%
    );

  box-shadow:

    0 0 18px
    rgba(0,225,255,.95),

    0 0 38px
    rgba(211,0,255,.70),

    0 16px 32px
    rgba(0,0,0,.40);

  z-index: 4;

}


/* extra glans */

.disco-ball::before {

  content: "";

  position: absolute;

  width: 38px;

  height: 25px;

  left: 22px;

  top: 18px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.85);

  filter:
    blur(5px);

  transform:
    rotate(-25deg);

}


.disco-ball::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 50%;

  background:

    radial-gradient(
      circle at 28% 25%,
      rgba(255,255,255,.65),
      transparent 14%
    ),

    radial-gradient(
      circle at 72% 75%,
      rgba(0,238,255,.20),
      transparent 22%
    );

}


/* =========================================================
   DISCO-STOKJE
   ========================================================= */

.disco-ball-wrap {

  position: absolute;

  left: 8%;

  top: -4px;

  width: 2px;

  height: 42px;

  background:
    rgba(255,255,255,.85);

  box-shadow:
    0 0 8px
    rgba(255,255,255,.8);

  z-index: 5;

}


/* =========================================================
   MUZIEKNOTEN
   ========================================================= */

.music {

  position: absolute;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 900;

  line-height: 1;

  z-index: 6;

  text-shadow:

    0 0 7px currentColor,

    0 0 18px currentColor,

    0 4px 8px
    rgba(0,0,0,.5);

}


.one {

  left: 25%;

  top: 15%;

  color:
    #00eaff;

  font-size:
    clamp(
      38px,
      4vw,
      60px
    );

  transform:
    rotate(-9deg);

}


.two {

  right: 20%;

  top: 8%;

  color:
    #ff3edb;

  font-size:
    clamp(
      38px,
      4vw,
      60px
    );

  transform:
    rotate(9deg);

}


.three {

  left: 29%;

  bottom: 8%;

  color:
    #8effff;

  font-size:
    clamp(
      25px,
      3vw,
      43px
    );

  transform:
    rotate(8deg);

}


.four {

  right: 29%;

  bottom: 7%;

  color:
    #ff83eb;

  font-size:
    clamp(
      25px,
      3vw,
      43px
    );

  transform:
    rotate(-8deg);

}


/* =========================================================
   BINGO KAARTEN
   ========================================================= */

.bingo-card {

  position: absolute;

  width: 125px;

  height: 82px;

  border:
    3px solid
    rgba(255,255,255,.95);

  border-radius:
    8px;

  background:

    repeating-linear-gradient(
      to right,
      rgba(48,84,150,.78) 0,
      rgba(48,84,150,.78) 2px,
      transparent 2px,
      transparent 25px
    ),

    repeating-linear-gradient(
      to bottom,
      rgba(48,84,150,.78) 0,
      rgba(48,84,150,.78) 2px,
      transparent 2px,
      transparent 19px
    ),

    linear-gradient(
      135deg,
      #ffffff 0%,
      #e8f2ff 100%
    );

  box-shadow:

    0 9px 25px
    rgba(0,0,0,.42),

    0 0 16px
    rgba(0,238,255,.38);

  z-index: 5;

}


.bingo-card::before {

  content: "";

  position: absolute;

  inset: 7px;

  border:
    1px solid
    rgba(0,72,160,.26);

  border-radius: 3px;

}


.bingo-card::after {

  content:
    "BINGO";

  position: absolute;

  left: 50%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  color:
    #1268d7;

  font-size: 15px;

  font-weight: 1000;

  letter-spacing: .12em;

  text-shadow:
    0 1px 0 #ffffff;

}


.card-left {

  left: 9%;

  top: 5%;

  transform:
    rotate(-10deg);

}


.card-right {

  right: 4%;

  bottom: 2%;

  transform:
    rotate(9deg);

}


/* =========================================================
   BINGO BALLEN
   ========================================================= */

.ball {

  position: absolute;

  width: 68px;

  height: 68px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color:
    #162033;

  font-size: 26px;

  font-weight: 1000;

  background:

    radial-gradient(
      circle at 32% 23%,
      #ffffff 0%,
      #ffffff 15%,
      #edf9ff 32%,
      #c9def0 52%,
      #7491ab 77%,
      #364453 100%
    );

  border:
    4px solid
    #00dfff;

  box-shadow:

    0 7px 18px
    rgba(0,0,0,.46),

    0 0 18px
    rgba(0,224,255,.75);

  z-index: 7;

}


.ball::after {

  content: "";

  position: absolute;

  inset: 7px;

  border:
    2px solid
    rgba(255,0,204,.62);

  border-radius: 50%;

}


.ball-left-one {

  left: 7%;

  bottom: -17px;

}


.ball-left-two {

  left: 13%;

  bottom: -26px;

  width: 55px;

  height: 55px;

  font-size: 20px;

  border-color:
    #ff32d7;

  box-shadow:

    0 7px 18px
    rgba(0,0,0,.46),

    0 0 17px
    rgba(255,50,215,.72);

}


.ball-right-one {

  right: 5%;

  bottom: -17px;

}


.ball-right-two {

  right: 11%;

  bottom: -26px;

  width: 55px;

  height: 55px;

  font-size: 20px;

  border-color:
    #ff32d7;

  box-shadow:

    0 7px 18px
    rgba(0,0,0,.46),

    0 0 17px
    rgba(255,50,215,.72);

}


/* =========================================================
   CENTRALE INHOUD
   ========================================================= */

.content {

  position: relative;

  z-index: 20;

  width: 100%;

  max-width: 1250px;

  padding:
    0
    155px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}


/* =========================================================
   BOVENREGEL
   ========================================================= */

.eyebrow {

  margin-bottom: 4px;

  color:
    #ffffff;

  font-size:
    clamp(
      10px,
      1vw,
      14px
    );

  font-weight: 900;

  letter-spacing:
    .25em;

  text-transform:
    uppercase;

  text-shadow:

    0 0 8px
    rgba(0,238,255,.65),

    0 2px 4px
    rgba(0,0,0,.75);

}


/* =========================================================
   TITEL
   ========================================================= */

.title {

  color:
    #ffffff;

  font-size:
    clamp(
      34px,
      4.5vw,
      66px
    );

  font-weight: 1000;

  letter-spacing:
    -.045em;

  line-height:
    .94;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  text-shadow:

    0 3px 0
    #243a71,

    0 6px 14px
    rgba(0,0,0,.72),

    0 0 15px
    rgba(0,220,255,.20);

}


/* =========================================================
   BINGO - KLEURRIJK
   ========================================================= */

.title strong {

  color:
    #ff4bd8;

  background:
    linear-gradient(
      90deg,
      #ff4bd8 0%,
      #ff7cf0 28%,
      #ffe15a 56%,
      #ff8a3c 100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  text-shadow:
    none;

  filter:

    drop-shadow(
      0 3px 0
      rgba(107,28,113,.75)
    )

    drop-shadow(
      0 6px 11px
      rgba(0,0,0,.65)
    );

}


/* =========================================================
   LICHTBALK ONDER TITEL
   ========================================================= */

.rule {

  width: 52%;

  height: 4px;

  margin:
    8px
    auto
    8px;

  border-radius:
    999px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #00eaff 18%,
      #ff32d7 50%,
      #ffe45c 82%,
      transparent
    );

  box-shadow:

    0 0 12px
    rgba(0,224,255,.65),

    0 0 15px
    rgba(255,0,204,.45);

}


/* =========================================================
   DETAILS
   ========================================================= */

.details {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  color:
    #ffffff;

  font-size:
    clamp(
      10px,
      1vw,
      14px
    );

  font-weight: 900;

  letter-spacing:
    .025em;

  text-shadow:

    0 2px 5px
    rgba(0,0,0,.85);

}


.details i {

  color:
    #ff52dd;

  font-style:
    normal;

  font-weight:
    1000;

  text-shadow:

    0 0 8px
    rgba(255,62,219,.85);

}


/* =========================================================
   KLEURIGE LICHTPUNTEN ROND TITEL
   ========================================================= */

.content::before {

  content: "";

  position: absolute;

  left: 50%;

  top: 50%;

  width: 72%;

  height: 90px;

  transform:
    translate(-50%, -50%);

  background:

    radial-gradient(
      ellipse,
      rgba(0,225,255,.18),
      transparent 40%
    ),

    radial-gradient(
      ellipse,
      rgba(255,0,204,.16),
      transparent 65%
    );

  filter:
    blur(7px);

  z-index: -1;

  pointer-events: none;

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {

  .event-banner {

    min-height: 190px;

    padding:
      10px
      7px;

  }


  .content {

    padding:
      0
      72px;

  }


  .title {

    font-size:
      clamp(
        27px,
        7vw,
        42px
      );

    white-space:
      normal;

  }


  .eyebrow {

    letter-spacing:
      .13em;

  }


  .details {

    gap:
      6px;

  }


  .disco-ball {

    width: 82px;

    height: 82px;

    left: 2%;

  }


  .bingo-card {

    width: 87px;

    height: 57px;

  }


  .ball {

    width: 53px;

    height: 53px;

    font-size: 18px;

  }


  .ball-left-two,
  .ball-right-two {

    width: 42px;

    height: 42px;

    font-size: 15px;

  }


  .music {

    font-size:
      34px;

  }

}