:root 
{
    --color-base-light: rgba(232, 232, 232, 1);
    --color-base-dark: rgba(69, 69, 69, 1);
    --color-base-darkest: rgb(37, 37, 37);
    --color-primary: rgba(234, 0, 103, 1);
    --color-secondary: rgba(0, 53, 97, 1);
    --color-base-med: rgba(135, 135, 135, 1);
    --color-highlight: rgba(230, 161, 0, 1);
    --color-secondary-light: rgba(1, 110, 194, 1);
    --color-secondary-lighter: rgba(0, 186, 245, 1);

    --shadow: rgba(0, 0, 0, 1);    
    --color-transparent-dark: rgba(69, 69, 69, 0.5);
}

.bi
{
    color: var(--color-base-light);
}

/* Nav Bar */
#nav-container
{
    position: fixed;
    width: 105dvw;
    background-color: var(--color-transparent-dark);
    backdrop-filter: blur(10px);
    padding: 1cap clamp(1cap, 8vw, 8cap);
    z-index: 2000;
}

#navbar-icon
{
    font-size: 4cap;
}

.main
{
    padding-top: 7cap;
}

.card, .card-component
{    
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* this lives on your diver PNG and punches out wherever your logo moves */
    #diver-box {
      position: fixed;
      top: 7cap;
      left: 50%;
      width: 50vw;
      height: auto;
      transform: translateX(-50%);
      z-index: 2;
      pointer-events: none;

      /* this is your pool‐edge mask */
      mask-image: url('../resources/logo_TDC_Decomposed/mask_poolEdge_test.png');
      -webkit-mask-image: url('../resources/logo_TDC_Decomposed/mask_poolEdge_test.png');
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      mask-size: contain;
      -webkit-mask-size: contain;
      mask-mode: alpha;
      -webkit-mask-mode: alpha;

      /* punch it out of the diver */
      mask-composite: exclude;
      -webkit-mask-composite: destination-out;
    }

    /* this is your logo PNG, which “drags” the mask around as you scroll */
    .mask-source {
      position: absolute;
      top: 0cap;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: auto;
      z-index: 1;
      pointer-events: none;
    }

    .scroll-zone {
      position: relative;
      height: 80vh;
      overflow: visible;
    }