:root {
      --bg: #0b1220;
      --edge: #1b2946;
      --gold: #facc15;
      --green: #16a34a;
      --red: #e11d48;
  }

  body {
      margin: 0;
      padding: 0;
      background: url(../img/bg/noel-afpa3.jpg) no-repeat center center fixed;
      background-size: cover;
  }

  .door .front {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: #fff;
  }

  .door[data-day="1"] .front {
      background-image: url('../img/avent/1.png');
  }

  .door[data-day="2"] .front {
      background-image: url('../img/avent/2.png');
  }

  .door[data-day="3"] .front {
      background-image: url('../img/avent/3.png');
  }

  .door[data-day="4"] .front {
      background-image: url('../img/avent/4.png');
  }

  .door[data-day="5"] .front {
      background-image: url('../img/avent/5.png');
  }

  .door[data-day="6"] .front {
      background-image: url('../img/avent/6.png');
  }

  .door[data-day="7"] .front {
      background-image: url('../img/avent/7.png');
  }

  .door[data-day="8"] .front {
      background-image: url('../img/avent/8.png');
  }

  .door[data-day="9"] .front {
      background-image: url('../img/avent/9.png');
  }

  .door[data-day="10"] .front {
      background-image: url('../img/avent/10.png');
  }

  .door[data-day="11"] .front {
      background-image: url('../img/avent/11.png');
  }

  .door[data-day="12"] .front {
      background-image: url('../img/avent/12.png');
  }

  .door[data-day="13"] .front {
      background-image: url('../img/avent/13.png');
  }

  .door[data-day="14"] .front {
      background-image: url('../img/avent/14.png');
  }

  .door[data-day="15"] .front {
      background-image: url('../img/avent/15.png');
  }

  .door[data-day="16"] .front {
      background-image: url('../img/avent/16.png');
  }

  .door[data-day="17"] .front {
      background-image: url('../img/avent/17.png');
  }

  .door[data-day="18"] .front {
      background-image: url('../img/avent/18.png');
  }

  .door[data-day="19"] .front {
      background-image: url('../img/avent/19.png');
  }

  .door[data-day="20"] .front {
      background-image: url('../img/avent/20.png');
  }

  .door[data-day="21"] .front {
      background-image: url('../img/avent/21.png');
  }

  .door[data-day="22"] .front {
      background-image: url('../img/avent/22.png');
  }

  .door[data-day="23"] .front {
      background-image: url('../img/avent/23.png');
  }

  .door[data-day="24"] .front {
      background-image: url('../img/avent/24.png');
  }

  .door-btn {
      width: 100%;
      height: 0;
      padding-bottom: 110%;
      position: relative;
      border: none;
      background: transparent;
      border-radius: 1rem;
      overflow: hidden
  }

  .inner {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transition: transform .8s cubic-bezier(.2, .7, .1, 1)
  }

  .door.open .inner {
      transform: rotateY(180deg)
  }

  .panel {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      backface-visibility: hidden;
      border-radius: 1rem;
      box-shadow: 0 10px 20px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .2)
  }

  .front {
      background: linear-gradient(145deg, #172554, #0b1730);
      border: 1px solid var(--edge)
  }

  .num {
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 900;
      font-size: 70px;
      text-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);

  }

  .badge-gold {

      color: #0b1220;
      font-weight: 900;
      border-radius: .4rem;

      font-size: 2rem
  }

  .sprigs {
      position: absolute;
      left: 10px;
      bottom: 10px;
      display: flex;
      gap: 6px;
      opacity: .9;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35))
  }

  .sprigs span {
      width: 10px;
      height: 22px;
      border-radius: 10px;
      background: linear-gradient(#15803d, #166534);
      border: 1px solid var(--edge)
  }

  .sprigs span:nth-child(odd) {
      height: 18px
  }

  .back {
      transform: rotateY(180deg);
      background: radial-gradient(1200px 300px at 50% -10%, rgba(250, 204, 21, .25), transparent 60%), linear-gradient(160deg, #0b1220, #9f1c1c 65%);
      border: 1px solid #1f2937;
      padding: 12px;
      text-align: center
  }

  .lock {
      position: absolute;
      top: 27px;
      right: 10px;
      background: rgba(15, 23, 42, .75);
      border: 1px solid #334155;
      border-radius: .6rem;
      padding: .15rem .4rem
  }

  .door.locked .front {
      filter: grayscale(.2) brightness(.85);
      opacity: .9
  }

  .kbd {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      background: #0f172a;
      border: 1px solid #1f2937;
      border-bottom-width: 2px;
      border-radius: 6px;
      padding: .15rem .35rem
  }

  .legend .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block
  }

  .legend .dot.green {
      background: var(--green)
  }

  .legend .dot.red {
      background: var(--red)
  }

  @media(hover:hover) {
      .door:not(.locked):hover .front {
          outline: 2px solid rgba(250, 204, 21, .4);
          outline-offset: -2px
      }
  }

  @supports (-moz-appearance:none) {

      /* Firefox only */
      .lock {
          top: 10px;
      }
  }

  .container {
      background-color: #fff;
  }

  .logo-afpa {
      width: 100px;
  }



  .text-purple {
      color: #e3007e;
  }

  .text-blue {
      color: #23bcec;
  }

  .text-green {
      color: #87bb34;
  }


  .stripe-top,
  .stripe-bottom {
      background: repeating-linear-gradient(45deg, #c81d25 0 10px, #fff 10px 20px, #1f7a1f 20px 30px, #fff 30px 40px);
      height: 6px;
  }

  .stripe-bottom {
      height: 6px;
  }

  .stripe-top {
      height: 6px;
  }


  .border-bottom-stripe {
      position: relative;
  }

  .border-bottom-stripe::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      background: repeating-linear-gradient(45deg,
              #c81d25 0 10px,
              #fff 10px 20px,
              #1f7a1f 20px 30px,
              #fff 30px 40px);
  }
  .b-example-divider{
  height: 2rem;
  width: calc(100% + 1 * var(--bs-gutter-x, 0.25rem));
  margin-left: -12px;
  background-color: #0000001a;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-image: repeating-linear-gradient(
    45deg,
    #d72638 0 10px,
    #3aa655 10px 20px
  )1;
  box-shadow:
    inset 0 .5em 1.5em #0000001a,
    inset 0 .125em .5em #00000026;
}