:root {
    /* TEXT */
    --body-tiny: 1.2rem;
    --body-small: 1.6rem;
    --body-default: 2rem;
    --body-large: 2.4rem;
    --body-massive: 2.8rem;

    --heading-tiny:3.2rem;
    --heading-small:3.6rem;
    --heading-default:4rem;
    --heading-large:4.4rem;
    --heading-massive:4.8rem;

    --display-small:5.2rem;
    --display-default:5.6rem;
    --display-large:6rem;
    --display-massive:6.4rem;

    --spacing-massive-x2:12.8rem;
    --spacing-massive:6.4rem;
    --spacing-large:3.2rem;
    --spacing-medium:1.6rem;
    --spacing-small: .8rem;
    --spacing-tiny: .4rem;

    --border-radius-default: 2rem;
    /* COLOUR */

    --neutral-100:#FCFCFC;
    --neutral-200:#ECECEC;
    --neutral-300:#BCBCBC;
    --neutral-400:#ACACAC;
    --neutral-500:#8C8C8C;
    --neutral-600:#6C6C6C;
    --neutral-700:#4C4C4C;
    --neutral-800:#3C3C3C;
    --neutral-900:#0C0C0C;

    --primary-green-100:#E2FFEB;
    --primary-green-200:#C7FFD7;
    --primary-green-300:#8EF6AD;
    --primary-green-400:#5DE786;
    --primary-green-500:#34CE61;
    --primary-green-600:#1E9A43;
    --primary-green-700:#006F21;
    --primary-green-800:#04511B;
    --primary-green-900:#003510;
    --primary-green-950:#000d04;


    --primary-blue-100:#D4F8FF;
    --primary-blue-200:#A7F1FF;
    --primary-blue-300:#79E1F4;
    --primary-blue-400:#49CFE8;
    --primary-blue-500:#2EB9D3;
    --primary-blue-600:#1BA2BB;
    --primary-blue-700:#12869B;
    --primary-blue-800:#006A7D;
    --primary-blue-900:#00404D;  
    --primary-blue-950:#000f12;  


    --primary-purple-100:#F8EAFE;
    --primary-purple-200:#EDC3FF;
    --primary-purple-300:#DE90FF;
    --primary-purple-400:#BB5DE3;
    --primary-purple-500:#9A3CC1;
    --primary-purple-600:#77219A;
    --primary-purple-700:#5F0883;
    --primary-purple-800:#490964;
    --primary-purple-900:#2C003E;
    --primary-purple-950:#0f0015;


    --utility-red-100:#FFDBDB;
    --utility-red-200:#FFADAD;
    --utility-red-300:#FE7777;
    --utility-red-400:#E94A4A;
    --utility-red-500:#CF2929;
    --utility-red-600:#A11010;
    --utility-red-700:#860707;
    --utility-red-800:#590000;
    --utility-red-900:#410000;


    --utility-orange-100:#FFE6CF;
    --utility-orange-200:#FFD7B0;
    --utility-orange-300:#F6AD68;
    --utility-orange-400:#DD8A3B;
    --utility-orange-500:#DE7615;
    --utility-orange-600:#CC711D;
    --utility-orange-700:#924804;
    --utility-orange-800:#5B2C00;
    --utility-orange-900:#371B00;  

    --base-black:var(--neutral-900);
    --base-white:var(--neutral-100);
    --base-bg-blue:var(--primary-blue-300);
    --base-bg-purple:var(--primary-purple-300);
    --base-bg-green:var(--primary-green-300);
    --base-outline-blue:var(--primary-blue-400);
    --base-outline-purple:var(--primary-purple-400);
    --base-outline-green:var(--primary-green-400);
    --gradient-start: rgba(255, 255, 255, 1);
    --gradient-middle: rgba(255, 255, 255, 0);
    --primary-gradient-400:linear-gradient(to right, var(--primary-purple-400), var(--primary-blue-400), var(--primary-green-400));
    --primary-gradient-500:linear-gradient(to right, var(--primary-purple-500), var(--primary-blue-500), var(--primary-green-500));
    --primary-gradient-400-bottom: linear-gradient(to bottom, var(--primary-purple-400), var(--primary-blue-400), var(--primary-green-400));
    --base-gradient:linear-gradient(to right, var(--primary-purple-400), var(--primary-blue-400), var(--primary-green-400));
    --base-subtle-gradient: linear-gradient(to right, var(--primary-purple-300), var(--primary-blue-300), var(--primary-green-300));
    --base-bg-gradient: linear-gradient(to right, var(--primary-purple-100), var(--primary-blue-100), var(--primary-green-100));
    --base-bg-gradient-dark-v2: linear-gradient(to right, var(--primary-purple-100), var(--primary-blue-100), var(--primary-green-100));
    /* --base-seperation-shadow: 0px -6px 40px  #edc4ff,0px -10px 40px #a3f1ff, 2px -20px 40px #c1ffd3; */
    --base-seperation-shadow: 0px -6px 40px  #f8e8ff,0px -10px 40px #caf7ff, 2px -20px 40px #c1ffd3;
    
    --base-shadow-line: -60vw -5px 40px #f8e8ff, -30vw -10px 40px #d1f8ff, 2px -20px 40px #d8ffe3;
    --base-shadow-line-v2: -70vw -50px 200px #F8EAFE, -20vw -200px 700px #D4F8FF, 60vw -200px 100px #E2FFEB;
    --base-fall-shadow:0px 4px 10px  #edc4ff;
    --base-faded-overlay:linear-gradient(to top, rgba(255,255,255,0.5), transparent);
    --base-deep-shadow:drop-shadow(0px 6px 2px var(--base-black));
    --base-spread-shadow: drop-shadow(0px 10px 20px var(--neutral-500)); 
    --base-drop-shadow: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
    
    --base-colour-spread:drop-shadow(0px -2px 4px var(--primary-green-400)) 
    drop-shadow(2px 2px 4px var(--primary-blue-400))
    drop-shadow(-2px 2px 4px var(--primary-purple-400));


}
.dark {

    --base-black:var(--neutral-300);
    --base-white:var(--neutral-900);
    --base-bg-blue:var(--primary-blue-900);
    --base-bg-purple:var(--primary-purple-900);
    --base-bg-green:var(--primary-green-900);
    --base-outline-blue:var(--primary-blue-800);
    --base-outline-purple:var(--primary-purple-800);
    --base-outline-green:var(--primary-green-800);
    --gradient-start: rgba(12, 12, 12, 1);
    --gradient-middle: rgba(12, 12,12, 0);


    --base-gradient:linear-gradient(to right, var(--primary-purple-800) 0%,var(--primary-blue-800) 50%, var(--primary-green-800) 100%);
    --base-bg-gradient: linear-gradient(to right, var(--primary-purple-900), var(--primary-blue-900), var(--primary-green-900));
    --base-bg-gradient-dark-v2: linear-gradient(to right, var(--primary-purple-950), var(--primary-blue-950), var(--primary-green-950));
    --base-subtle-gradient: linear-gradient(to right, var(--primary-purple-700), var(--primary-blue-700), var(--primary-green-700));
    --base-seperation-shadow: 0px -6px 40px #330047,0px -10px 40px #005d1c, 2px -20px 40px  #025665;
    --base-faded-overlay:linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    --base-deep-shadow:drop-shadow(0px 3px 1px var(--primary-green-400)) 
    drop-shadow(1px 2px 1px var(--primary-blue-400))
    drop-shadow(-1px 1px 1px var(--primary-purple-400));
    --base-spread-shadow: drop-shadow(0px 10px 20px var(--neutral-700));
    --base-line-shadow: -60vw -5px 40px #1a0025, -30vw -10px 40px #001b20, 2px -20px 40px #001606
    --base-colour-spread:drop-shadow(0px -2px 4px var(--primary-green-400)) 
    drop-shadow(2px 2px 4px var(--primary-blue-400))
    drop-shadow(-2px 2px 4px var(--primary-purple-400));
    --base-drop-shadow: drop-shadow(0px 4px 4px rgba(111, 111, 111, 0.25));
    
}
* {
    margin:0;
    padding:0;
    box-sizing:inherit;
}
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-size:62.5%;
    box-sizing:border-box;
    max-width: 100vw;
    margin-right: calc(-1 * (100vw - 100%));
    padding: 0;
    margin:0;
    caret-color: transparent;
}
body {
    margin:0;
    overflow-x:hidden;
    width:100%;
    box-sizing:border-box;
    background-color: #FCFCFC;
    background-color: var(--base-white);
    font-family: 'Signika', serif;
    color:#0C0C0C;
    color:var(--base-black);
}
main, aside {
    overflow-x:hidden; 
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
/*
    7. Remove built-in form typography styles
  */
input, button, textarea, select {
    font: inherit;
    border:none;
  }
/*
    8. Avoid text overflows
  */
p, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
  }
/*
    9. Create a root stacking context
  */
#root, #__next {
    isolation: isolate;
  }
button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
  }
.align-center {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}
.justify-start {
    justify-content: center;
}
.text-center {
    text-align: center;
}
.container {
    width:90%;
    margin: auto;
}
.container-thin {
    width:94%;
    margin: auto;
    background-color: rgba(0,0,0,0);
}
.container-60 {
    width:60%;
    margin: auto
}
@media only screen and (max-width: 1024px) {
.container-60 {
        width: 80%
}
      }
.container-30 {
    width:40%;
    margin: auto
}
@media only screen and (max-width: 1024px) {
.container-30 {
        width: 80%;
        margin: 0 0 0 5%
}
      }
.top-margin {
    margin-top:6.4rem;
}
.top-margin-large {
    margin-top:32rem;
}
.bottom-margin {
    margin-bottom:2rem;
}
.bottom-margin-large {
    margin-bottom:32rem;
}
.hero-image {
   border-radius: 4rem;
}
.hero-margin {
    margin-top:20vh;
    margin-bottom:20vh;
}
.slider {
    margin-top: 6.4rem;
    margin-top: var(--spacing-massive);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    width: 101%;
    overflow-x: hidden;
    padding-bottom: 4rem;
    padding-top: 2rem;


}
.slider__track {
    padding-bottom: 6.4rem !important;
    padding-bottom: var(--spacing-massive) !important;
    }
.slider__track {
    display: flex;
    }
.slider__item {
        margin-top: 12.8rem;
        margin-top: var(--spacing-massive-x2);
        padding-bottom: 3.2rem;
        padding-bottom: var(--spacing-large);

        

    }
.slider__dots .glider-dot {
        border-radius:2px !important
    }
.slider__dots .glider-dot {
        background-color: #8C8C8C;
        background-color: var(--neutral-500)
    }
.slider__dots .glider-dot:nth-child(1n).active {
            background-color: #49CFE8;
            background-color: var(--base-outline-blue); 
        }
.slider__dots .glider-dot:nth-child(2n).active {
            background-color: #BB5DE3;
            background-color: var(--base-outline-purple); 
        }
.slider__dots .glider-dot:nth-child(3n).active {
            background-color: #5DE786;
            background-color: var(--base-outline-green); 
        }
.stand-out-bigger {
    font-size: 2.8rem;
    font-size: var(--body-massive);
    font-weight: 700
}
@media only screen and (max-width: 1440px) {
.stand-out-bigger {
        font-size: 2.4rem;
        font-size: var(--body-large)
}
    }
@media only screen and (max-width: 1024px) {
.stand-out-bigger {
        font-size: 2rem;
        font-size: var(--body-default)
}
    }
.frame {
    margin-top:6.4rem;
    margin-top:var(--spacing-massive);
    margin-bottom:6.4rem;
    margin-bottom:var(--spacing-massive);
}
.frame--no-bottom {
        margin-top:6.4rem;
        margin-top:var(--spacing-massive);
        margin-bottom:0;
        padding-bottom:0;
    }
.grid-post-container {
    display: grid;
    margin-bottom:8rem;
    grid-template-columns: repeat(4, 1fr) /* 3 equal columns */
}
@media (max-width: 768px) {
.grid-post-container {
        display: flex;
        flex-direction: column
}
    }
@media only screen and (max-width: 1440px) {
.grid-post-container {
        grid-template-columns:    repeat(2, 1fr)
}
    }
.grid-post-container {
    grid-column-gap: 1rem;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    grid-row-gap: 8rem;
    row-gap: 8rem; /* Adds vertical gap between rows */
    grid-auto-flow: dense; /* Fills gaps if smaller items can fit */
    padding:4rem 0 4rem 0;
    justify-content: center;
    align-items: center;
}
.grid-post-container__item--long {
            grid-column: span 4; /* Span 2 columns */
            
        }
.grid-post-container__item--mid {
            grid-column: span 2; /* Span 2 columns */
        }
.page-frame {
    margin-top:12.8rem;
    margin-top:var(--spacing-massive-x2);
    margin-bottom:1.6rem;
    margin-bottom:var(--spacing-medium);
}
.mobile-hide {
    visibility: visible;
    display: block;

}
.desktop-hide {
    visibility: hidden;
    display: none;
}
@media only screen and (max-width: 1024px) {
    .mobile-hide {
        visibility: hidden;
        display: none;
    
    }
    .desktop-hide {
        visibility: visible;
        display: block;
    }
  }
.hidden {
    visibility:hidden;
    display:none;
    opacity:0;
}
.max-width-primary {
    max-width: 1440px;
    margin: 0 auto;
}
.max-width-secondary {
    max-width: 1920px;
    margin: 0 auto;
}
.underline {
    overflow: hidden;
    width:16rem;
    margin-top:.8rem;
    margin-top:var(--spacing-small);
    margin-bottom:.8rem;
    margin-bottom:var(--spacing-small);
    border-radius: 2rem;
    border-radius: var(--border-radius-default);
    
}
.underline__inner {
        width: 400px;
        height:10px;
        position: relative;
        animation: slide 4s linear infinite;
        content:"";
        display: block;
        background: linear-gradient(to right, 
                #8EF6AD 0%, 
                #8EF6AD 16.666%, 
                #79E1F4 16.666%, 
                #79E1F4 33.332%, 
                #DE90FF 33.332%, 
                #DE90FF 50%,
                #8EF6AD 50%,
                #8EF6AD 66.666%, 
                #79E1F4 66.666%, 
                #79E1F4 83.332%, 
                #DE90FF 83.332%, 
                #DE90FF 100%
            );
        background: linear-gradient(to right, 
                var(--primary-green-300) 0%, 
                var(--primary-green-300) 16.666%, /* 1/6 */
                var(--primary-blue-300) 16.666%, 
                var(--primary-blue-300) 33.332%, /* 2/6 */
                var(--primary-purple-300) 33.332%, 
                var(--primary-purple-300) 50%,
                var(--primary-green-300) 50%,
                var(--primary-green-300) 66.666%, /* 4/6 */
                var(--primary-blue-300) 66.666%, 
                var(--primary-blue-300) 83.332%, /* 5/6 */
                var(--primary-purple-300) 83.332%, 
                var(--primary-purple-300) 100%
            );
    }
@keyframes slide {
    0% { left: -200px; }
    100% { left: 0px; }
}
@keyframes slide {
    0% { left: -200px; }
    100% { left: 0px; }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInDelay {
    0% { opacity:0; }
    50% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeInLeft {
    from {
      transform: translateX(-200px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
@keyframes fadeInBottom {
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
.bottom-shadow {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
.shadow-line {
  box-shadow:  -60vw -5px 40px #f8e8ff, -30vw -10px 40px #d1f8ff, 2px -20px 40px #d8ffe3;
  box-shadow:  var(--base-shadow-line)
}
.shadow-top {
  /* Horizontal offset, vertical offset, blur radius, spread radius, color */
  box-shadow: 0px -6px 40px  #f8e8ff,0px -10px 40px #caf7ff, 2px -20px 40px #c1ffd3;
  box-shadow: var(--base-seperation-shadow);
  padding-top:1.6rem;
  padding-top:var(--spacing-medium);
}
.slider {
  position: relative;
}
.slider-gradient-overlay {
  background-color: white;
  width: 100%;
  height: 80%;
  position: absolute;
  z-index: 10;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0) 98%,
    rgba(255, 255, 255, 1));
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0) 98%,
    rgba(255, 255, 255, 1)
  );
  background: linear-gradient(
    to left,
    var(--gradient-start),
    var(--gradient-middle) 10%,
    var(--gradient-middle) 98%,
    var(--gradient-start)
  );
  pointer-events: none;
}
.fade-in-left {
    
    animation: fadeInLeft 1s ease-in-out; /* Apply the animation */
}
.fade-in {
    
  animation: fadeIn 1s ease-in-out; /* Apply the animation */
}
.fade-in-delay {
  animation: fadeInDelay .5s ease-in-out; /* Apply the animation */
}
.huge-heading {
  font-size: min(12vw, 20rem);
  font-weight: 700;
  background-image: linear-gradient(to right, #9A3CC1, #2EB9D3, #34CE61);
  background-image: var(--primary-gradient-500); /* Define the linear gradient */
            -webkit-background-clip: text; /* For webkit-based browsers */
            background-clip: text;
            color: transparent; /* Hide the original text */   
}
/* Skeleton Background */
.skeleton {
  background: #e0e0e0;
  background-image: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: shine 1.5s infinite linear;
  width: 100%;
  height: 100%;
  transition: opacity 4s 4s;
  position: absolute;
  border-radius: 1.2rem;
}
.skeleton__loading-text {
    font-size: 2rem;
    font-size: var(--body-default);
    position: absolute;
    bottom:2rem;
    left:2rem;
  }
.skeleton-image {
  background: rgba(224, 224, 224, 0.1); /* Base background color with opacity */
  background-image: linear-gradient(90deg, rgba(224, 224, 224, 0.1) 25%, rgba(240, 240, 240, 0.3) 50%, rgba(224, 224, 224, 0.1) 75%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: shine 1.5s infinite linear;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: all 4s 4s;
  position: absolute;
  border-radius: 1.2rem;
  z-index:5;
}
.skeleton-post {
  background: #e0e0e0;
  background-image: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: shine 1.5s infinite linear;
  border-radius: 1.2rem;
  display: block;
}
.skeleton-post--category {
    margin-bottom:1.2rem;
    display:inline-block;
    border-radius: 2rem;
    height:22px;
    width:80px;
  }
.skeleton-post--date {
    width: 80px;
    height: 14px;
    margin-bottom: .8rem;
  }
.skeleton-post--title {
    width: 280px;
    height: 24px;
    margin-bottom: 2rem;
  }
.skeleton-post--image {
    width:20rem;
    height: 130px;
  }
.skeleton-post--read {
    color:#ACACAC;
    color:var(--neutral-400);
    align-self: end;
  }
/* Skeleton Shine Animation */
@keyframes shine {
  0% {
      background-position: 100% 0;
  }
  100% {
      background-position: -100% 0;
  }
}
.orbit {
  position: relative;
  width:100%;
  height: 200px;
}
.planet {
  position: absolute;
  top: 50%;
  left:60%;
  width:100px;
  height:100px;
  border-radius: .8rem;
  transform-origin: -100px 0 /* Distance from the center */
}
@media only screen and (max-width: 1440px) {
.planet {
    width:60px;
    height:60px;
    transform-origin: -60px 0 /* Distance from the center */
}

  }
.planet1 {
  animation: orbit1 12s linear infinite;
  background-color: #79E1F4;
  background-color: var(--base-bg-blue);
}
.planet2 {
  animation: orbit2 12s linear infinite;
  background-color: #8EF6AD;
  background-color: var(--base-bg-green);
}
.planet3 {
  animation: orbit3 12s linear infinite;
  background-color: #DE90FF;
  background-color: var(--base-bg-purple);
  
}
@keyframes orbit1 {
  0% {
    transform: rotate(120deg);
  }
  100% {
    transform: rotate(480deg);
  }
}
@keyframes orbit2 {
  0% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(600deg);
  }
}
@keyframes orbit3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.featured-post-pod {
    position: relative;
    margin-top:8rem;
    width:100%;
    height:100%;
    margin-bottom: 12rem;
    align-items: center;
    padding:4rem;
    max-width:800px;
    background-color: #FCFCFC;
    background-color: var(--base-white);
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
    filter: var(--base-drop-shadow);
    left:2rem;
    border-radius: 2rem;

}
.featured-post-pod__anchor {
    transition: filter 1s
    }
.featured-post-pod__anchor:hover, .featured-post-pod__anchor:focus {
        filter: drop-shadow(0px -2px 4px #5DE786) 
    drop-shadow(2px 2px 4px #49CFE8)
    drop-shadow(-2px 2px 4px #BB5DE3);
        filter: var(--base-colour-spread);
        outline:none;
    }
.featured-post-pod__date {
        display: block;
        font-size:2rem;
        font-size:var(--body-default);
        margin-bottom: .8rem;
    }
.featured-post-pod__title {
        display: block;
        font-size:4rem;
        font-size:var(--heading-default);
        margin-bottom: 1.2rem
    }
@media only screen and (max-width: 1440px) {
    .featured-post-pod__title {
            font-size:3.6rem;
            font-size:var(--heading-small)
    }
        }
@media only screen and (max-width: 1024px) {
    .featured-post-pod__title {
            font-size:2.8rem;
            font-size:var(--body-massive)
    }
        }
.featured-post-pod__image {
        border-radius: 2rem;
        margin-bottom:1.6rem;
    }
.featured-post-pod__anchor {
        -webkit-text-decoration: none;
        text-decoration: none;
        color:#0C0C0C;
        color:var(--base-black);
    }
.featured-post-pod__read-button {
        display: flex;
        align-items: center;
        grid-gap:.8rem;
        gap:.8rem;
        font-size: 2rem;
        font-size: var(--body-default);
    }
.dark .featured-post-pod__read-icon, .dark .post-pod__read-icon {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
    
}
.slider__item .post-pod {
    width:400px;

}
.slider__item .post-pod--quote {
        width:700px
        
}
@media only screen and (max-width: 768px) {
.slider__item .post-pod--quote {
        width:80vw
        
}
        }
.post-pod {
    margin: 0 4rem;

}
.post-pod--quote {
        position: relative;
        margin-top:4rem;
        display: block;
        margin-top:2rem
    }
.post-pod--quote::before {
            content:"";
            width:20%;
            height:.8rem;
            
            border-radius: 2rem;
            display: block;
            background:linear-gradient(to right, #DE90FF, #79E1F4, #8EF6AD);
            background:var(--base-subtle-gradient);
            margin: 0 auto;
            margin-top:4rem;
        }
.post-pod--quote__text {
            font-size: 2rem;
            font-size: var(--body-default);
            margin-top:2rem;
            text-align: center;
            position: relative;
            display: flex;
            justify-content: center;
            grid-gap:4rem;
            gap:4rem
        }
.post-pod--quote__text::before, .post-pod--quote__text::after {
                font-size: 12rem;
                color: transparent;
                background: linear-gradient(to right, #DE90FF, #79E1F4, #8EF6AD);
                background: var(--base-subtle-gradient);
                -webkit-background-clip: text;
                background-clip: text;
                filter: drop-shadow(0px 4px 4px rgba(0,0,0,.75));
                transform: translateY(-25%);
                height:100px;
                margin-bottom:-50px;
          
            }
.post-pod--quote__text::before {
                content: open-quote;
            }
.post-pod--quote__text::after {
                content: close-quote;
            }
.post-pod--article {

    align-items: center;
    padding:4rem;
    background-color: #FCFCFC;
    background-color: var(--base-white);
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
    filter: var(--base-drop-shadow);
    left:2rem;
    border-radius: 2rem;



    }
.post-pod.show {
        visibility: visible;
        animation: fadeInLeft 1s ease-in-out; /* Apply the animation */
      }
.post-pod__date {
        display: block;
        font-size:1.6rem;
        font-size:var(--body-small);
        margin-bottom:.8rem;
    }
.post-pod__update {
        font-size:2rem;
        font-size:var(--body-default);
        margin-bottom:.8rem;
        font-weight: 700;
        display:block;
    }
.post-pod__read-button {
        display: flex;
        align-items: center;
        grid-gap:.8rem;
        gap:.8rem;
        font-size: 2rem;
        font-size: var(--body-default);
    }
.post-pod__title {
        display: block;
        font-size:2.4rem;
        font-size:var(--body-large);
        margin-bottom: 1.2rem;
    }
.post-pod__caption {
        margin-top:.8rem;
        display: block;
        font-size:3.2rem;
        font-size:var(--heading-tiny);
    }
.post-pod__image {
        border-radius: 2rem;
        margin-bottom:1.6rem;
    }
.post-pod__anchor {
        -webkit-text-decoration: none;
        text-decoration: none;
        color:#0C0C0C;
        color:var(--base-black);
        transition: filter 1s   
    }
.post-pod__anchor:hover, .post-pod__anchor:focus {
            filter: drop-shadow(0px -2px 4px #5DE786) 
    drop-shadow(2px 2px 4px #49CFE8)
    drop-shadow(-2px 2px 4px #BB5DE3);
            filter: var(--base-colour-spread);
            outline:none;
        }
.post-pod:hover .post-pod__square {
        transform: translate(0,2rem) scale(1.5);
        
    }
.post-pod:hover .post-pod__overlay-text {
        transform: scale(1.5);
        
    }
.post-pod__overlay {
        position: absolute;
        transition: all .5s;
        z-index: 2;
        font-size: 2rem;
        font-size: var(--body-default);
        bottom:0;
        padding:1.2rem;
        background: linear-gradient(to top, rgba(255,255,255,0.5), transparent);
        background: var(--base-faded-overlay);
        border-radius: 2rem;
        border-radius: var(--border-radius-default);
        width:100%;
        height:80%;
        display: flex;
        justify-content: start;
        align-items: end;
        pointer-events: none;

    }
.post-pod__overlay-text {
        display: flex;
        transform-origin: bottom left;
        grid-gap:.8rem;
        gap:.8rem;
        grid-gap:var(--spacing-small);
        gap:var(--spacing-small);
        transition: transform .5s;
        align-items: center
    }
@media only screen and (max-width: 768px) {
    .post-pod__overlay-text {
            transition-delay: 2s
    }
        }
@media only screen and (max-width: 768px) {
        .show .post-pod__overlay-text {
            transform: scale(1.1)
        }
            }
.post-pod__overlay-text img {
            width:2rem;
            height:2rem;
        }
.consent-banner {
    position:fixed;
    z-index: 10;
    bottom:2rem;
    width:90%;
    color:#0C0C0C;
    color:var(--base-black);
    box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.75); /* Adjust the values as needed */
    left:5%;
    padding:.4rem;
    border-radius: 2rem;
    background:  linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
    background:  var(--base-gradient);
}
.consent-banner__inner {
        background-color: #FCFCFC;
        background-color: var(--base-white);
        border-radius: 2rem;
        padding:2.8rem 2.8rem;
    }
.consent-banner__description {
        font-size: 2rem;
        font-size: var(--body-default);
        font-weight:600;
    }
.consent-banner__actions {
        display: flex;
        align-items: center;
        grid-gap:4rem;
        gap:4rem;
        font-size: 1.6rem;
        font-size: var(--body-small)
    }
@media (max-width: 768px) {
    .consent-banner__actions {
        grid-gap:2rem;
        gap:2rem;
        justify-content: space-between
    }
        }
.consent-banner__link {
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-decoration-color: #9A3CC1;
        text-decoration-color: var(--primary-purple-500);
        text-decoration-thickness: 2px;
        color:#0C0C0C;
        color:var(--base-black);
    }
.consent-banner__decline {
        font-size: 1.6rem;
        font-size: var(--body-small);
        cursor: pointer;
        transition: transform 1s;
        border-radius: 4rem
        
    }
.consent-banner__decline:hover {
            transform:scale(1.1);
        }
.consent-banner__decline:focus {
            transform:scale(1.1);
            outline: solid 1px;

        }
.consent-banner__small {
        margin:1.2rem 0;
        display: block;
        font-size: 1.2rem;
        font-size: var(--body-tiny);
    }
.switch {
    border-radius:2rem;
    background-color: #fcfcfc;
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
    padding: 4px;
    width:10.8rem;
    height:3.2rem;
    position: absolute;
    top:2rem;
    right:16rem;
    cursor: pointer;
    caret-color: transparent;
    outline: solid rgba(0, 0, 0, 0);
    outline-offset: 40px;
    justify-content: center;
    transition: outline-offset .2s, outline .2s
    }
.switch:focus {
      outline: solid #0C0C0C;
      outline: solid var(--base-black);
      outline-offset: 10px;
    }
.switch__button {
        border-radius:2rem;
        background:  linear-gradient(to right, #DC88FF 0%, #51E3FF 50%, #3CE76E 100%);
        padding: 2px;
        width:2.4rem;
        position: absolute;
        transition: transform .5s;
        
        top:.4rem;
        filter: drop-shadow(0px -2px 4px #3CE76E) 
        drop-shadow(2px 2px 4px #51E3FF)
        drop-shadow(-2px 2px 4px #DC88FF);
    }
.switch__button-inner {
            height:2rem;
            width:2rem;
            border-radius: 2rem;

        }
.switch__text {
            position: absolute;
            top:50%;
            font-weight: 500;
            font-size: 1.2rem;
            transform:translateY(-50%);
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none;    /* Firefox */     /* Internet Explorer/Edge */
            user-select: none;         /* Standard */
            transition: opacity 1s;
        }
/* transition-delay: .15s; */
.switch__text--light {
                right:1.2rem;
                color:#0c0c0c;
            }
.switch__text--dark {
                left:1.2rem;
                color:#fcfcfc;
            }
.on .switch__text--dark, .off .switch__text--light {
   opacity:1;
   visibility:visible
}
.off .switch__text--dark, .on .switch__text--light {
    opacity:0;
    visibility:hidden;
 }
.on.switch {
    background: #0c0c0c;
    filter: drop-shadow(0px 4px 4px rgba(255,255,255,.25));

}
.off.switch {
    background: #fcfcfc;
    
}
.off .switch__button {
    left:0;
}
.off .switch__button-inner {
    background: #fcfcfc;
}
.on .switch__button-inner {
    background: #0c0c0c;
}
.on .switch__button {
    right:0
}
.footer {
    display:flex;
    width:100%;
    padding: 4rem 2rem;
    overflow: hidden
}
@media (max-width: 1024px) {
.footer {
       display: block
}
      }
.footer__column {
        width:50%;
        position: relative;
        height:48rem
    }
@media (max-width: 1024px) {

    .footer__column {
            width: 100%;
            margin-bottom:8rem
    }
          }
.footer__heading {
        font-size: 3.2rem;
        font-size: var(--heading-tiny);
        font-weight: 700;
    }
.footer__heading--categories {
            font-size:2rem;
            font-size:var(--body-default);
            font-weight: 700;
 
        }
.footer__blue-square {
        position:absolute;
        border-radius: 2rem;
        width:48rem;
        height:48rem;
        background-color: #79E1F4;
        background-color: var(--base-bg-blue);
        top:0;
        left:0;
        padding:6rem;
        display: flex;
        flex-wrap: wrap;
        grid-gap:1.2rem;
        gap:1.2rem;
        justify-content: start

    }
@media (max-width: 480px) {
    .footer__blue-square {
            left: -2.8rem

    }
        }
.footer__links-section {
        width:40%;
    }
.footer__green-square {
        position:absolute;
        padding:4rem;
        border-radius: 2rem;
        width:32rem;
        text-align: center;
        height:32rem;
        background-color: #8EF6AD;
        background-color: var(--base-bg-green);
        top:0;
        right:0;
    }
.footer__legal {
        position: absolute;
        bottom:0;
        right:0;
        width:32rem;
        height:8rem;
        align-content: center;
        padding-left:4rem
    }
@media (max-width: 1024px) {
    .footer__legal {
      left:0
    }
          }
.footer__legal-links {
        display: flex;
        list-style: none;
        grid-gap:1rem;
        gap:1rem;
        font-size: 16px;
        margin-bottom:.4rem;
    }
.footer__information-links {
        display: flex;
        flex-direction: column;
        list-style: none;
        grid-gap:1.2rem;
        gap:1.2rem;
        margin-top:2rem;
        font-size: 16px;
        flex-wrap: wrap;
        margin-bottom:4rem;
    }
.footer__link {
        -webkit-text-decoration: none;
        text-decoration: none;
        color:#0C0C0C;
        color:var(--base-black);
        transform-origin: center;
        transition: all .2s;
        outline: solid rgba(0, 0, 0, 0);
        outline-offset: 40px;
        justify-content: center
    }
.footer__link:hover, .footer__link:focus {
        outline: solid #0C0C0C;
        outline: solid var(--base-black);
        outline-offset: 8px;
        border-radius: 8px;
        }
.footer__follow-links {
        margin-top:2rem;
        font-size: 16px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        grid-gap:2rem;
        gap:2rem;
        justify-content: center
    }
.footer__follow-links img {
            width:48px
            
            
        }
.footer__follow-links a {
            transform-origin: center;
            transition: all .2s;
            outline: solid rgba(0, 0, 0, 0);
            outline: solid rgba(0, 0, 0, 0);
            outline-offset: 40px;
            justify-content: center
        }
.footer__follow-links a:hover, .footer__follow-links a:focus {
            outline: solid #0C0C0C;
            outline: solid var(--base-black);
            outline-offset: 8px;
            border-radius: 8px;
            display:block;
            }
.footer__copyright {
        font-size: 12px;
    }
.footer__purple-square {
        position: absolute;
        bottom: 0;
        left:0;
        width:8rem;
        height:8rem;
        background-color: #DE90FF;
        background-color: var(--base-bg-purple);
        border-radius: 1rem;
        z-index: -1;
    }
.dark .footer__follow-images {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
}
.subscribe {
    height:20rem;
    
    width:100%;

    margin-bottom: 4rem;
}
.subscribe__form-container {
        width:50%;
        
    }
@media (min-width: 769px) and (max-width: 1024px) {


    .subscribe__form-container {
            width: 70%;
        
    }
        }
@media (max-width: 768px) {


    .subscribe__form-container {
            width: 90%;
        
    } 
        }
.subscribe__form-container {
        
        margin:auto;
        padding: 4rem 0;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        grid-gap:2rem;
        gap:2rem;
        
    }
.subscribe__label {
        font-size: 3.2rem;
        font-size: var(--heading-tiny);
        text-align: center;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        filter: var(--base-drop-shadow);
        font-weight: 700
    }
@media (max-width: 480px) {
    .subscribe__label {
        font-size: 2.4rem;
        font-size: var(--body-large)
    }
        }
.subscribe__input-wrapper {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%;
        background-color: #0C0C0C;
        background-color: var(--base-black);
        border-radius: 4rem;
        border: #0C0C0C solid 2px;
        border: var(--base-black) solid 2px;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        filter: var(--base-drop-shadow);
        
    }
.subscribe__field {
        width:100%;
        height:4rem;
        border-radius: 2rem;
        padding: 0 12rem 0 6rem;
        text-align: center;
        font-size: 2rem;
        font-size: var(--body-default);
        font-weight: 800;
        color:#0C0C0C;
        color:var(--base-black);
        background-color: #FCFCFC;
        background-color: var(--base-white)


    }
.subscribe__field:focus {
            filter: drop-shadow(0px -2px 4px #3CE76E) 
            drop-shadow(2px 2px 4px #51E3FF)
            drop-shadow(-2px 2px 4px #DC88FF);
            outline:none;
        }
@media (max-width: 768px) {
    .subscribe__field {
            font-size: 1.6rem;
            font-size: var(--body-small)


    }
        }
@media (max-width: 480px) {
    .subscribe__field {
            padding: 0 2rem


    }
        }
.subscribe__submit {
        position:absolute;
        border-radius: 2rem;
        right:0;
        height:4rem;
        padding:0 2rem;
        background-color:#0C0C0C;
        background-color:var(--base-black);
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(1px);
        cursor: pointer
    }
@media (max-width: 480px) {

    .subscribe__submit {
            transform: translateY(140%);
            right: inherit
    }
        }
.subscribe__submit-text {
        font-size:22px;
        font-weight: 700;
        background-image:linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
        background-image:var(--base-gradient);
        -webkit-background-clip: text; /* For webkit-based browsers */
        background-clip: text;
        color: transparent; /* Hide the original text */
    }
.subscribe__confirmation-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height:100%;
    }
.subscribe__confirmation {
        font-size: 3.2rem;
        font-size: var(--heading-tiny);
        text-align: center;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        filter: var(--base-drop-shadow);
        font-weight: 700;
        animation: fadeIn 2s ease-in forwards;
    }
.audio-player {
    position:fixed;
    width:90%;
    z-index: 2;
    background:  linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
    background:  var(--base-gradient);
    padding: 2px;
    border-radius: 2rem;
    display: inline-block; /* Make the element shrink to content */
    box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.75); /* Adjust the values as needed */
    margin:2rem auto;
    bottom:0;
    visibility: hidden;
    opacity: 0;
    left: 50%;
    transform: translate(-50%,150%);
    transition: opacity 1s, transform 1s

}
@media (max-width: 480px) {
.audio-player {
        width:96%

}
    }
.audio-player.show {
        visibility:visible;
        opacity: 1;
        transform: translate(-50%,0);
        transition: opacity 1s, transform 1s, visibility 1s;
    }
.audio-player__inner {
            background: #0C0C0C;
            background: var(--neutral-900);
            border-radius: 2rem;
            color: #FCFCFC;
            color: var(--neutral-100);
            padding: .8rem 4rem;
            font-size:25px;
            font-weight: bold
            
    }
@media (max-width: 768px) {


    .audio-player__inner {
                padding: .8rem 2rem
            
    }
            }
.audio-player__close-button {
        position:absolute;
        right:2.4rem;
        top:1.2rem;
        font-size: 1.6rem;
        font-size: var(--body-small);
        color: #FCFCFC;
        color: var(--neutral-100);
        padding: .8rem 1.2rem;
        border-radius: 4rem;
        cursor: pointer;
        background-color: #0C0C0C;
        background-color: var(--neutral-900);;

    }
.audio-player__interface {
        display:flex;
        flex-direction: column;
        grid-gap:1.6rem;
        gap:1.6rem;
        grid-gap:var(--spacing-medium);
        gap:var(--spacing-medium);
        padding:1.2rem 0;
    }
.audio-player__time {
        font-size: 16px;
        text-align: center;
        font-weight: 400;
    }
.audio-player__progress-container {
        background-color: #0C0C0C;
        background-color: var(--neutral-900);
        border-radius: 2rem;
        border-radius: var(--border-radius-default);
        height:.2rem;
    }
.audio-player__progress {
        height:.2rem;
        visibility: hidden;
        width:1%;
        border-radius: 2rem;
        border-radius: var(--border-radius-default);
        background:  linear-gradient(to right, #DC88FF 0%, #51E3FF 50%, #3CE76E 100%);
        position: relative;
        display:block;
        transition: width 0.1s ease-out
    }
.audio-player__progress::after {
            content: "";
            position: absolute; /* Position the circle absolutely within the div */
            right: 0; /* Adjust to place the circle at the right end of the div */
            top:-4px;
            width: 1rem; /* Circle width */
            height: 1rem; /* Circle height */
            background-color: #3CE76E; /* Circle color */
            border-radius: 50%; /* Make it a circle */
        }
.audio-player__controls {
        display:flex;
        justify-content: space-between;
        align-items: center
    }
.audio-player__controls > *  {
            flex: 1; /* Make columns evenly sized */
        }
.audio-player__action-container {
        text-align: center;
        display: flex;
        align-items: center;
        grid-gap:2rem;
        gap:2rem;
        justify-content: center
    }
@media (max-width: 768px) {

    .audio-player__action-container {
            grid-gap: 1.2rem;
            gap: 1.2rem
    }
        }
.audio-player__action-button {
        width:48px;
        height:48px;
        cursor: pointer;
        
    }
.audio-player__action-button--forward {
            transform: rotate(180deg);
            cursor: pointer;
        }
.audio-player__action-button--back {
            cursor: pointer;
        }
.audio-player__speed-wrapper {
        display: flex;
        justify-content: flex-end;
        font-weight: 400;

    }
.audio-player__speed {
        border-radius: .8rem;
        font-size: 1.6rem;
        font-size: var(--body-small);
        padding: 0 2rem 0 -.4rem;
        background: #FCFCFC;
        background: var(--neutral-100); 
        text-align: center;
    }
.audio-player__volume-container {
        display: flex;
        grid-gap:.8rem;
        gap:.8rem;
        align-items: center;

    }
.audio-player__volume-icon {
        width:16px;
        height:16px;
    }
.audio-player__volume-bar {
        display: flex;
        align-items: center;
        width: 50%;

        height: 2rem;
        
        
        overflow: hidden;
        border-radius: 2rem
     /* Track: webkit browsers */
  

}
@media (min-width: 481px) and (max-width: 768px) {
    .audio-player__volume-bar {
        width:70%
  

}
     }
@media (max-width: 480px) {
    .audio-player__volume-bar {

        height:1.2rem
  

}

     }
.audio-player__volume-bar input[type="range"] {
      /* removing default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none; 
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  background: #292929;
  /*  slider progress trick  */
  overflow: hidden;
  border-radius: 16px
      
}
.audio-player__volume-bar input[type="range"]::-webkit-slider-runnable-track {
    height: 2rem;
    background: #292929;
    border-radius: 2rem;
  }
.audio-player__volume-bar input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none; 
    /* creating a custom design */
    height: 2rem;
    width: 2rem;
    background-color: #fcfcfc;
    border-radius: 50%;
    border: solid #fcfcfc;
    box-shadow: -407px 0 0 400px #fcfcfc;
      }
.contact {
    background: linear-gradient(to right, #F8EAFE, #D4F8FF, #E2FFEB);
    background: var(--base-bg-gradient-dark-v2);
    padding:12rem 0;
    margin-bottom:3.2rem;
    margin-bottom:var(--spacing-large);
}
.contact__form {
        width:600px;
        padding:4rem 8rem;
        margin: auto;
        background-color: #FCFCFC;
        background-color: var(--base-white);
        border-radius: 2rem;
        display: flex;
        grid-gap:2rem;
        gap:2rem;
        flex-direction: column;
        align-items: center;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        filter: var(--base-drop-shadow)

    }
@media only screen and (max-width: 768px) {

    .contact__form {
            width:80%;
            padding:4rem 4rem

    }
        }
@media only screen and (max-width: 480px) {

    .contact__form {
            width:90%;
            padding:4rem 2rem

    }
        }
.contact__input {
        border: solid #ADADAD 1px;
        background-color: #FCFCFC;
        background-color: var(--base-white);
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        border-radius:4rem;
        width:100%;
        height:3.2rem;
        text-align: center;
        font-size: 2rem;
        font-size: var(--body-default);
        padding: 0 2rem;
        color: #0C0C0C;
        color: var(--base-black)
    }
.contact__input:focus {
            filter: drop-shadow(0px -2px 4px #3CE76E) 
            drop-shadow(2px 2px 4px #51E3FF)
            drop-shadow(-2px 2px 4px #DC88FF);
            outline:none;
            border: none;
        }
.contact__label {
        font-size: 16px;
        font-weight:600;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        color:#0C0C0C;
        color:var(--base-black);
    }
.contact__textarea {
        border: solid #ADADAD 1px;
        background-color: #FCFCFC;
        background-color: var(--base-white);
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        border-radius:2rem;
        width:100%;
        padding:2rem;
        font-size: 2rem;
        font-size: var(--body-default);
        text-align: center;
        resize: none;
        height:20rem;
        color: #0C0C0C;
        color: var(--base-black)
    }
.contact__textarea:focus {
            filter: drop-shadow(0px -2px 4px #3CE76E) 
            drop-shadow(2px 2px 4px #51E3FF)
            drop-shadow(-2px 2px 4px #DC88FF);
            outline:none;
            border: none;
        }
.contact__submit {
        border: solid #ADADAD 1px;
        background-color: #fcfcfc;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        border-radius:4rem;
        width:50%;
        font-weight: 700;
        font-size: 20px;
        height:5.2rem;
        cursor: pointer;
        transition: filter 1s
    }
.contact__submit:focus {
            filter: drop-shadow(0px -2px 4px #3CE76E) 
            drop-shadow(2px 2px 4px #51E3FF)
            drop-shadow(-2px 2px 4px #DC88FF);
            outline:none;
        }
.contact__alert {
        font-size: 2rem;
        font-size: var(--body-default);
        text-align: center;
    }
.logo {
    position: absolute;
    top:16px;
    left:32px;
    z-index: 20;
    border-radius: 5px;
    fill:#0C0C0C;
    fill:var(--base-black);
    transition: all .2s;
    outline: solid rgba(0, 0, 0, 0);
    outline: solid rgba(0, 0, 0, 0);
    outline-offset: 40px;

  }
.logo__anchor:focus > *, .logo__anchor:hover > * {

      outline: solid #0C0C0C;

      outline: solid var(--base-black);
      outline-offset: 12px;
      border-radius: 8px;
      display:block;

    }
.button {
    position: relative;
    background:  linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
    background:  var(--base-gradient);
    padding: 3px;
    -webkit-text-decoration: none;
    text-decoration: none;
    outline-color: rbga(0,0,0,0);
    border-radius: 4rem;
    display: inline-block; /* Make the element shrink to content */
    filter: drop-shadow(0px 6px 2px #0C0C0C);
    filter: var(--base-deep-shadow);
    transition: transform 1s
}
.button:hover {
      transform: scale(1.05);
    }
.button:focus {
      outline: solid #0C0C0C;
      outline: solid var(--base-black);
      transform: scale(1.05);
    }
.button__inner {
            background: #0C0C0C;
            background: var(--neutral-900);
            border-radius: 30px;
            color: var;
            padding: .8rem 4rem;
            font-size:2rem;
            font-size:var(--body-default);
            font-weight: bold;
            cursor: pointer
            
    }
@media (max-width: 480px) {



    .button__inner {
              font-size:1.6rem;
              font-size:var(--body-small)
            
    }
            }
@media (min-width: 481px) and (max-width: 768px) {

            .button__inner--two {
              padding: .8rem 3.2rem
          }
            }
@media (max-width: 480px) {

            .button__inner--two {
              font-size:1.2rem;
              font-size:var(--body-tiny);
              padding: .8rem 1.6em
          }
            }
.button__text {
            background-image: linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
            background-image: var(--primary-gradient-400); /* Define the linear gradient */
            -webkit-background-clip: text; /* For webkit-based browsers */
            background-clip: text;
            color: transparent; /* Hide the original text */   
    }
.module-border-wrap:focus, .module-border-wrap:hover {

    outline: solid black;
    outline-offset: 10px;
    outline-style: outset;
    outline-width: 10px;
    box-shadow: 0px 6px 4px rgba(0, 0, 0, .25);
  
  }
.link {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: #3CE76E;
    border-radius: 5px;
    color:#0C0C0C;
    color:var(--base-black);
    border-radius: .4rem;
    transition: background-color .6s
  }
.link:hover, .link:focus {
      background-color: #8EF6AD;
      background-color: var(--base-bg-green);
      outline:none;
  }
.button-outlined {
    border-radius: 4rem;
    font-size: 2rem;
    font-size: var(--body-default);
    display: flex;
    color: #0C0C0C;
    color: var(--base-black);
    align-items: center;
    grid-gap: 8px;
    gap: 8px;
    border: none;  /* Remove any default border */
    cursor: pointer;
    margin: 2rem 0;
    position: relative
  }
@media (max-width: 480px) {
.button-outlined {
      font-size: 1.6rem;
      font-size: var(--body-small)
  }
    }
.button-outlined {
  
    /* Add a border bottom that will be used as the underline */
  }
.button-outlined::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform:translateX(-50%);
      width: 1%;
      height: 4px;  /* Adjust thickness of the underline */
      background-color: transparent;
      transition: background-color 0.2s, width 1s;
      border-radius: 4px;
    }
.button-outlined:hover::after,
    .button-outlined:focus::after {
      background-color: #0C0C0C;
      background-color: var(--base-black);  /* Underline color on hover/focus */
      width:100%;
    }
.dark .button-outlined__icon {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
}
.pagination {
    width:100%;
    text-align: center;
    font-size: 2rem;
    font-size: var(--body-default);
    height:200px;
}
.pagination__link {
        color: #0C0C0C;
        color: var(--base-black);
        -webkit-text-decoration: none;
        text-decoration: none;
        border-radius: 5px;
        font-size: 1.6rem;
        font-size: var(--body-small);
    }
.pagination__current {
        border-radius: .4rem;
        background-color: #79E1F4;
        background-color: var(--base-bg-blue);
        padding:2rem 2.8rem;
        margin: 0 2rem;
    }
.pagination__subtitle {
        font-size: 1.2rem;
        font-size: var(--body-tiny);
        text-align: center;
        margin-top:1.2rem;
    }
.hamburger{
    cursor: pointer;
    position: absolute;
    top:16px;
    right:32px;
    background: none;
    z-index:20;
    display: flex;
    flex-direction: column;
    grid-gap:.4rem;
    gap:.4rem;
    width:35px;
    transform-origin: center;
    transition: all .2s;
    outline: solid rgba(0, 0, 0, 0);
    outline-offset: 40px;
    justify-content: center
}
.hamburger:hover, .hamburger:focus {
    outline: solid #0C0C0C;
    outline: solid var(--base-black);
    outline-offset: 10px;
    border-radius: 5px;

    }
.hamburger__line {
        transition: transform 1s;
        width:100%;
        border-radius: 1rem;
        background-color: #0C0C0C;
        background-color: var(--base-black);
        height:5px;
      
    }
.hamburger--active .hamburger__line:nth-child(1) {
            transform: rotate(45deg) translate(.5rem,8px) scale(.5);
        }
.hamburger--active .hamburger__line:nth-child(2) {
            transform: scale(0);
    
        }
.hamburger--active .hamburger__line:nth-child(3) {
            transform: rotate(-45deg) translate(.5rem, -8px) scale(.5);
        }
.menu {
    position:absolute;
    display:flex;
    justify-content: space-between;
    z-index:10;
    overflow-x: hidden;
    right:0;
    top:0;
    width:41em;
    height:41rem;
    pointer-events: none;



    
}
.menu--active {
        pointer-events: all;
        opacity:1
    }
@media (max-width: 1024px) {
    .menu--active {
            width:200px;
            height:200px
    }
        }
.menu__links {
        position:absolute;
        top:40%;
        right:50%;
        font-size: 2.8rem;
        font-size: var(--body-massive);
        opacity:0;
        transition-property: opacity;
        transition-delay: 500ms;
        transition-duration: .5s;
        visibility: hidden;
        list-style: none
    }
@media (max-width: 1440px) {

    .menu__links {
            right:56%;
            font-size: 1.6rem;
            font-size: var(--body-small)
    }
        }
.menu__links li {
            margin-bottom:1.2rem;
        }
.menu__links a {
            margin: bottom 2.8em;
            -webkit-text-decoration: none;
            text-decoration: none;
            color: #0C0C0C;
            color: var(--base-black);
            outline: solid rgba(0, 0, 0, 0);
            outline-offset: 40px;
            justify-content: center;
            transform-origin: center
    }
.menu__links a:hover {
            outline: solid #0C0C0C;
            outline: solid var(--base-black);
            outline-offset: 8px;
            border-radius: 8px;
        }
.menu__links--active {
        opacity:1;
        visibility: visible;
    }
.menu__container {
        background-color:#DE90FF;
        background-color:var(--base-bg-purple);
        border-radius:2rem;
        width:120px;
        height:120px;
        top:0;
        right:-2px;
        transition: transform 1s, width 1s, height 1s;
        transform:translate(8%,-24%);
        position:absolute;
        top:0;
        
        right:0;

    }
.menu__container--active {
            background-color:#DE90FF;
            background-color:var(--base-bg-purple);
            border-radius:2rem;
            padding:5rem;
            width:400px;
            height:400px

        }
@media (max-width: 1440px) {
        
        .menu__container--active {
                width:200px;
                height:200px

        }
            }
.submenu {
    position:absolute;
    display:flex;
    justify-content: center;
    top:0;
    left:0;
    justify-content: space-between;
    width:100%;
    z-index:8;
    height:103%;
    overflow-y: auto;
    overflow-x: hidden ;
    pointer-events: none;
    transition:all .25s;
    padding-bottom:12rem;
    visibility: hidden;
    opacity:0;
    
    background-color:#FCFCFC;
    
    background-color:var(--base-white)
            /* Custom scrollbar for WebKit browsers */


}
.submenu::-webkit-scrollbar {
                width: 12px; /* Width of the scrollbar */
                z-index:20;
            }
.submenu::-webkit-scrollbar-track {
                background: #8C8C8C;
                background: var(--neutral-500); /* Background of the scrollbar track */
                border-radius: 10px; /* Rounded corners for the track */
                margin: 12rem;
            }
.submenu::-webkit-scrollbar-thumb {
                background: linear-gradient(to bottom, #BB5DE3, #49CFE8, #5DE786);
                background: var(--primary-gradient-400-bottom); /* Gradient for the thumb */
                border-radius: 10px; /* Rounded corners for the thumb */
            }
.submenu::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(to bottom, #BB5DE3, #49CFE8, #5DE786);
                background: var(--primary-gradient-400-bottom); /* Gradient for the thumb */
            }
.submenu__pod {
            display:flex;
            grid-gap:2rem;
            gap:2rem;
            align-items: center;
            justify-content: start;
            width:600px;

 

            
        }
@media (min-width: 769px) and (max-width: 1024px) {


        .submenu__pod {
            width:440px;

 

            
        }
            }
@media (min-width: 481px) and (max-width: 768px) {


        .submenu__pod { 
                width:440px;

 

            
        }
            }
@media (max-width: 480px) {


        .submenu__pod {
                width:320px;

 

            
        }
            }
.submenu__pod {
            padding:2rem;
            background-color: #FCFCFC;
            background-color: var(--base-white);
            filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
            filter: var(--base-drop-shadow);
            left:2rem;
            border-radius: 2rem;
            transition: filter 1s;

 

            
        }
.submenu__pod-content {
            width:340px;
            
        }
.submenu__pod-anchor {
            -webkit-text-decoration: none;
            text-decoration: none;
            color:#0C0C0C;
            color:var(--base-black)
        }
.submenu__pod-anchor:hover, .submenu__pod-anchor:focus {
                filter: drop-shadow(0px -2px 4px #5DE786) 
    drop-shadow(2px 2px 4px #49CFE8)
    drop-shadow(-2px 2px 4px #BB5DE3);
                filter: var(--base-colour-spread);
                outline: none;
            }
.submenu__pod-image {
            width:20rem;
            border-radius: .8rem
        }
@media (max-width: 1024px) {

        .submenu__pod-image {
                width:10rem
        }
            }
.submenu__pod-date {
            font-size:1.2rem;
            font-size:var(--body-tiny);
            display: block;
            margin-bottom:.8rem;
            
        }
.submenu__pod-title {
            font-size:2rem;
            font-size:var(--body-default);
            display: block;
            margin-bottom:2rem;
            font-weight: 700;
            
        }
.submenu__topbar {
        width:100%;
        left:12px;
        background: linear-gradient(to bottom, #FCFCFC, #FCFCFC, #FCFCFC,#FCFCFC,rgba(255,255,255,0));
        background: linear-gradient(to bottom, var(--base-white), var(--base-white), var(--base-white),var(--base-white),rgba(255,255,255,0));
        position:fixed;
        display: flex;
        justify-content:center;
        z-index:9;
        padding:2.8rem 0 6.4rem 0

    }
@media (min-width: 769px) and (max-width: 1024px) {

    .submenu__topbar {
            justify-content:end;
            margin-right: 0

    }
        }
.submenu--active {
        pointer-events: all;
        opacity:1;
        visibility: visible
    }
.submenu--active .submenu__pod-child {
                animation: fadeInLeft 1s ease forwards alternate;
                opacity: 0;
                border-radius: 5px;

        }
.submenu__pods {
        display: flex;
        flex-direction: column;
        align-items: center;
        width:100%;
        margin-top:12rem;
        font-size: 16px;
        grid-gap:4rem;
        gap:4rem;
        margin-right: 316px
          
}
@media (min-width: 769px) and (max-width: 1024px) {


    .submenu__pods {

        margin-left: 12rem;
        margin-right: 0;
        align-items: start
          
}
        }
@media (max-width: 768px) {


    .submenu__pods {
            margin-right:0;
        margin-top:260px
          
}
        }
.searchbox {
    position: relative;
    width:400px;
    margin-right: 316px
}
@media (min-width: 769px) and (max-width: 1024px) {
.searchbox {
        margin-left: 12rem;
        width:440px
}
      }
@media (max-width: 768px) {
.searchbox {
        width:300px;
        margin-top:160px;
        margin-right: 0
}

      }
.searchbox__input {
        width:100%;
        background-color: #FCFCFC;
        background-color: var(--base-white);
        border-radius: 2rem;
        border: solid #ADADAD 1px;
        font-size: 16px;
        padding:.5rem 2rem .5rem 1rem;
        color: #0C0C0C;
        color: var(--base-black);
        font-weight: 800;
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2)
    }
.searchbox__input:focus {
            filter: drop-shadow(0px -2px 4px #3CE76E) 
            drop-shadow(2px 2px 4px #51E3FF)
            drop-shadow(-2px 2px 4px #DC88FF);
            outline:none;
            border: none;
        }
.searchbox__icon {
    position: absolute; /* Position the icon inside the container */
    right:10px;
    top:50%;
    transform: translateY(-50%  );
    width:2rem;
    opacity:.5;
    fill:#0C0C0C;
    fill:var(--base-black);
    stroke:#0C0C0C;
    stroke:var(--base-black);
    }
.dark .searchbox__icon {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
}
.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    top:2rem;
    border-radius: 1.2rem;
    background-color: #FCFCFC;
    background-color: var(--base-white);
    color: #0C0C0C;
    color: var(--base-black);
    opacity: 0;
    font-size: 2rem;
    font-size: var(--body-default);
    transform: translateX(-50%);
    font-weight: bold;
    -webkit-text-decoration: none;
    text-decoration: none;
    filter: drop-shadow(0px -2px 4px #3CE76E) 
    drop-shadow(2px 2px 4px #51E3FF)
    drop-shadow(-2px 2px 4px #DC88FF)
}
.skip-to-main-content-link:focus {
        z-index:1;
        opacity: 1;
        left:50%
        
    }
.bento-container {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}
.bentobox {
    display: grid;
    grid-template-columns: repeat(4, calc(23vw - 4px)); /* 4 columns */
    grid-template-rows: repeat(3, calc(23vw - 4px)); /* 3 rows */
    grid-gap: .8rem;
    gap: .8rem; /* Gap between grid items */
    font-size: 2.8rem;
    font-size: var(--body-massive);
    position: relative;
    transition: transform 1s, opacity 1s;
    margin-top:8rem;
    justify-content: center;
    padding-right:32px;
    padding-left:32px;
    margin-left:4px;
    margin-right:4px;
    padding-bottom:16rem
}
@media (max-width: 1024px) {
.bentobox {
        font-size: 1.6rem;
        font-size: var(--body-small)
}
    }
@media (min-width: 1441px) {
.bentobox {
    grid-template-columns: repeat(4, 340px); /* 4 columns */
    grid-template-rows: repeat(3, 340px) /* 3 rows */
}
    }
.bentobox__social-icon {
        filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
        padding:3.2rem
    
        
    }
@media (max-width: 768px) {



    .bentobox__social-icon {
            padding:0;
            filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg)
    
        
    }
        }
.bentobox__item {
            /* Define styles for grid items */
            align-content: center;
            padding: 5.8rem 4.8rem;
            text-align: center;
            box-shadow: 10px 20px 40px rgba(0, 0, 0, 0.2)
    }
@media (max-width: 1024px) {
    
    .bentobox__item {
                padding:  2rem
    }

                .bentobox__item:last-child {
                    grid-column: 4; /* Place item at the first column and spans 2 columns */
                    grid-row: 1; /* Place item at the second row */
                  }
              }
.bentobox__item--span-2 {
            grid-column: span 2; /* Span across 2 columns */
            text-align: left

            
        }
@media (max-width: 1024px) {

        .bentobox__item--span-2 {
                text-align: center;
                cursor: pointer

            
        }
              }
.bentobox__item--span-h-2 {
                grid-row: span 2; /* Span across 2 rows */
                align-content: flex-start;
                text-align: left

                
        }
@media (max-width: 1024px) {
        .bentobox__item--span-h-2 {
                    text-align: center;
                    grid-column: span 2; /* Span across 2 columns */
                    grid-row: span 1; /* Span across 2 rows */
                    align-content: flex-start;
                    align-content: center;
                    cursor: pointer

                
        }
                    
                  }
.cell {
    border-radius: 2rem;
    border: solid .4rem;
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25))
}
@media (min-width: 1025px) and (max-width: 1440px) {
.cell {
        font-size: 2rem;
        font-size: var(--body-default)
}
    }
.cell--purple {
        background-color: rgba(222, 144, 255, 0.1);
        border-color: rgba(222, 144, 255, 0.4);
        transition: transform 1s
    }
@media (max-width: 1024px) {




    .cell--purple {
        transform:scale()
    }
        .cell--purple:hover, .cell--purple:focus {
            transform:scale(1.025);
        }
    }
.cell--green {
        background-color: rgba(142, 246, 173,0.1);
        border-color: rgba(142, 246, 173,0.4);
        transition: transform 1s
    }
@media (max-width: 1024px) {
        .cell--green:hover, .cell--green:focus {
           transform:scale(1.025);
        }
    }
.cell--blue {
        background-color: rgba(121, 225, 244, 0.1);
        border-color: rgba(121, 225, 244, 0.4);
        transition: transform 1s
    }
@media (max-width: 1024px) {
        .cell--blue:hover, .cell--blue:focus {
            transform:scale(1.025);
        }
    }
.cell--gradient {
        background:  linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
        background:  var(--base-gradient);
        padding: .4rem;
        color:#FCFCFC;
        color:var(--base-white);
        border: none
        
        
    }
.cell--gradient a {
            transition: filter 1s, transform 1s;
            -webkit-text-decoration: none;
            text-decoration: none
        }
.cell--gradient a:hover, .cell--gradient a:focus {
                filter: drop-shadow(0px -2px 4px #3CE76E) 
                drop-shadow(2px 2px 4px #51E3FF)
                drop-shadow(-2px 2px 4px #DC88FF);
                outline:none;
            }
.cell--inner-black {
        background: #0c0c0c;
        border-radius: 2rem;
        color: white;
        height:100%;
        font-size:3.2rem;
        font-size:var(--heading-tiny);
        align-content: center;
        padding:2rem;

    }
.cell--inner-white {
        background: #FCFCFC;
        background: var(--base-white);
        border-radius: 2rem;
        color:#0C0C0C;
        color:var(--base-black);
        height:100%;
        padding:2rem;
        font-size:2.4rem;
        font-size:var(--body-large);
        align-content: center
        
    }
@media (max-width: 480px) {

    .cell--inner-white {
            font-size: 1.2rem;
            font-size: var(--body-tiny);
            padding:1.2rem
        
    }
        }
@media (min-width: 481px) and (max-width: 768px) {

    .cell--inner-white {
            font-size: 1.6rem;
            font-size: var(--body-small);
            padding:1.2rem
        
    }
        }
@keyframes scaleUp {
    from {
      transform: scale(0.1);
    }
    to {
      transform: scale(1);
    }
}
.bentobox__close-button {

    position: absolute;
    top: 2rem;
    right:2rem;
    visibility: hidden;
    font-size: 2rem;
    font-size: var(--body-default);

}
.open {
    text-align: center;
    position: absolute;
    width:100%;
    height:calc(23vw * 3 + 8px);
    z-index:1;
    padding:4rem;
    transition:background-color .25s, border-color .25s
}
.open:focus {
        transform:scale(1)
    }
.open.cell--purple {
        background-color: #DE90FF;
        background-color: var(--base-bg-purple);
        border-color: #BB5DE3;
        border-color: var(--base-outline-purple);
    }
.open.cell--blue {
        background-color: #79E1F4;
        background-color: var(--base-bg-blue);
        border-color: #49CFE8;
        border-color: var(--base-outline-blue);
    }
.open.cell--green {
        background-color: #8EF6AD;
        background-color: var(--base-bg-green);
        border-color: #5DE786;
        border-color: var(--base-outline-green);
    }
.open .bentobox__item {
        padding:4rem;
    }
.open .bentobox__close-button {


        visibility: visible;

    }
.open .desktop-hide {
        visibility:hidden;
    }
.open .mobile-hide {
        visibility:visible;
        display: block;
        text-align: left;
        opacity: 1;

    }
.hero {
    width:84%;
    margin: auto;
    max-width: 1600px;
    grid-gap: 6.4rem;
    gap: 6.4rem;
    grid-gap: var(--spacing-massive);
    gap: var(--spacing-massive);
    display:flex;
    max-width:1440px;
    margin-top:12rem;
    margin-bottom:8rem;
    height:calc(100vh - (12rem + 8rem));
    justify-items: center;
    justify-content: center;
    min-height:80vh
}
@media only screen and (max-width: 1024px) {
.hero {
        height:80%;
        display:block;
        grid-gap: 0;
        gap: 0;
        margin-top:20rem
}

        }
.hero__content {
        height:100%;
        display: flex;
        justify-content: center;
        flex-direction: column
        
    }
@media only screen and (max-width: 1024px) {

    

    .hero__content {
            justify-content: start;
            flex-direction: column
        
    }
        }
.hero__column {
    width:50%;
    display: flex;
    align-items: center
    }
.hero__column:first-child {
        margin-bottom: 4rem;
    }
@media only screen and (max-width: 1024px) {

    .hero__column {
        width: 100%;
        align-items: start
    }
        }
.hero__main-heading {
        font-size: 3.6rem;
        font-size: var(--heading-small);
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        filter: var(--base-drop-shadow);
        margin-bottom:.4rem;
        transform: translateX(-4px);
    }
.hero__main-heading--bigger {
            font-size: 6.4rem;
            font-size: var(--display-massive)
        }
@media only screen and (max-width: 1024px) {

        .hero__main-heading--bigger {
                font-size: 4.4rem;
                font-size: var(--heading-large)
        }
            }
.hero__under-main-heading {
        display:block;
        margin-top:.8rem;
        margin-bottom:.4rem;
        font-size: 2.4rem;
        font-size: var(--body-large);
    }
.hero__sub-heading {
        font-size: 3.2rem;
        font-size: var(--heading-tiny);
        font-weight: 600;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
    }
.hero__sub-heading--smaller {
            font-size: 2.4rem;
            font-size: var(--body-large);
            margin-bottom:.8rem;
        }
.hero__date {
        font-size: 1.6rem;
        font-size: var(--body-small);
        margin-bottom:1.2rem;
    }
.hero__standout {
        font-size: 2.8rem;
        font-size: var(--body-massive);
        font-weight: 700;
        margin-bottom:1.6rem;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        filter: var(--base-drop-shadow)
    }
@media only screen and (max-width: 1024px) {

    .hero__standout {
            font-size: 2.4rem;
            font-size: var(--body-large)
    }
        }
.hero__abstract {
        font-size: 2rem;
        font-size: var(--body-default);
        padding-bottom:.8rem;
    }
.hero__attribution {
        display: flex;
        align-items: center;
        grid-gap:1.6rem;
        gap:1.6rem;
        font-size: 1.6rem;
        font-size: var(--body-small);
        margin-top:1.6rem;
        margin-bottom:1.6rem;
    }
.hero__image-solo {
        border-radius: 4rem;
    }
.hero__video-container {
        width: 100%; /* Set your desired width */
        transition: all 2s;
        border-radius: 4rem;
        transition: transform 1s
        
    }
@media only screen and (max-width: 1024px) {

    .hero__video-container {
        min-height:100%
        
    }
        }
.hero__video {
        width: 100%;
        overflow: hidden;
        border-radius: 20px;
        border-color: #000;
        background-color: #FCFCFC;
        background-color: var(--base-white);
        filter:drop-shadow(0px 10px 20px #8C8C8C);
        filter:var(--base-spread-shadow); 
        transition: transform 1s

        
    }
.hero__video.minimized:hover {
                transform: scale(1.04);
            }
.hero__video-image-facade {
        border-radius: 1.2rem;
        pointer-events: none;
        position:absolute;
        transition: all 4s 4s;
        z-index:3;
    }
.hero__video-close-button {
        visibility: hidden;
        opacity:0;
        display:none;
        outline: solid rgba(0, 0, 0, 0);
        outline-offset: 40px;
        justify-content: center;
        transition: outline-offset .2s, outline .2s
    }
.hero__video-close-button:hover, .hero__video-close-button:focus {
              outline: solid #0C0C0C;
              outline: solid var(--base-black);
              outline-offset: 10px;
            
        }
.hero__video-close-button.show {
            position: absolute;
            display:block;
            visibility: visible;
            opacity: 1;
            bottom:2.4rem;
            font-size: 1.6rem;
            font-size: var(--body-small);
            color: #FCFCFC;
            color: var(--base-white);
            padding: .8rem 1.2rem;
            border-radius: 4rem;
            background-color: #0C0C0C;
            background-color: var(--base-black);
            cursor: pointer;
        }
.hero__attribution-image {
        width:24px;
        height:24px;
        border-radius: 5px;
    }
.hero__button-container {
        display:flex;
        margin-top:.8rem;
        align-items: center;
        grid-gap:3.2rem;
        gap:3.2rem;
        grid-gap:var(--spacing-large);
        gap:var(--spacing-large);
    }
.hero__video-overlay {
        position: absolute;
        width:100%;
        height:100%;
        z-index:2;
        transition: opacity 3s;
        cursor: pointer;
        background: #FCFCFC;
        background: var(--base-white);
        opacity:.3;
      };
/* Base styling for the blockquote */
.quote {

    position: relative;
    margin-top:4rem;
    display: block;
    margin-top:2rem
}
.quote::before {
        content:"";
        width:20%;
        height:.8rem;
        
        border-radius: 2rem;
        display: block;
        background:linear-gradient(to right, #DE90FF, #79E1F4, #8EF6AD);
        background:var(--base-subtle-gradient);
        margin: 0 auto;
        margin-top:4rem;
    }
.quote__cite {
        display:block;
        text-align: center;
        margin-top:1.2rem;
        font-size: 1.6rem;
        font-size: var(--body-small);
    }
.quote__text {
        font-size: 2.4rem;
        font-size: var(--body-large);
        margin-top:2rem;
        text-align: center;
        position: relative;
        display: flex;
        justify-content: center;
        grid-gap:4rem;
        gap:4rem
    }
.quote__text::before, .quote__text::after {
            font-size: 20rem;
            color: transparent;
            background: linear-gradient(to right, #DE90FF, #79E1F4, #8EF6AD);
            background: var(--base-subtle-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            filter: drop-shadow(0px 4px 4px rgba(0,0,0,.75));
            transform: translateY(-50%);
            height:100px;
            margin-bottom: -50px;
      
        }
.quote__text::before {
            content: open-quote;
        }
.quote__text::after {
            content: close-quote;
        }
.inline-quote {
    margin-top:2rem;
    font-size: 2.4rem;
    font-size: var(--body-large);
    position: relative;
    background: linear-gradient(to right, #F8EAFE, #D4F8FF, #E2FFEB);
    background: var(--base-bg-gradient);
    border-left: solid 8px #9A3CC1;
    border-left: solid 8px var(--primary-purple-500);
    padding:4rem 4rem 4rem 8rem;
    border-radius: 4px

}
.inline-quote::before {
        content: open-quote;
        position: absolute;
        font-size: 10rem;
        top:1rem;
        color: transparent;
        background: linear-gradient(to right, #DE90FF, #79E1F4, #8EF6AD);
        background: var(--base-subtle-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.75));
        left:2rem;
    }
.inline-quote cite {
        margin-top:1.2rem;
        font-size: 2rem;
        font-size: var(--body-default);
        display: block;
    }
.tab-container {
    width: 100%;
    margin: 0 auto;
    border-radius: 2rem;
    padding:2px;
    background-color: #FCFCFC;
    background-color: var(--base-white);
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
    filter: var(--base-drop-shadow);
    border: solid 1px #ECECEC;
    border: solid 1px var(--neutral-200);

    
}
.tabs {
    display: flex;
    width:100%;
    grid-gap:.4rem;
    gap:.4rem;
    border-radius: 2rem;
    background-color: #FCFCFC;
    background-color: var(--base-white);
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
    filter: var(--base-drop-shadow);
}
.tab-link {
    width:100%;
    font-size: 2.4rem;
    font-size: var(--body-large);
    font-weight: 800;
    border: none;
    padding: 2.8rem 2rem;
    cursor: pointer;
    background-color: #FCFCFC;
    background-color: var(--base-white);
    transition: filter 1s, border-radius 1s;
    border-radius: 2rem;
    color:#0C0C0C;
    color:var(--base-black);
}
.tab-link:hover {
    filter: drop-shadow(0px -1px 2px #7affa2) 
    drop-shadow(1px 1px 2px #acf1ff)
    drop-shadow(-1px 1px 2px #eabaff);
    outline:none;
    border: none;
    border-radius: 2rem;
}
.tab-link.active {
    filter: drop-shadow(0px -2px 4px #3CE76E) 
    drop-shadow(2px 2px 4px #51E3FF)
    drop-shadow(-2px 2px 4px #DC88FF);
    outline:none;
    border: none;
    z-index:1;
    border-radius: 2rem;
}
.tab-content {
    display: none;
    padding: 4rem 2rem 2rem 2rem;
    border-top: none;
    
}
.tab-content.active {
    display: block;
}
.accordion {
    margin-top:2rem;
    border-radius: .8rem;

}
.accordion__panel {
        border: solid 2px #ACACAC;
        border: solid 2px var(--neutral-400);
        width:100%;
        transition: margin 1s, box-shadow 1s;
        border-radius: .8rem;
        box-shadow: 
        0px -2px 4px rgba(60, 231, 110, 0),
        2px 2px 4px rgba(81, 227, 255, 0),
        -2px 2px 4px rgba(220, 136, 255, 0)
            
        
        
    }
.accordion__panel:hover {
            box-shadow: 
            0px -2px 4px rgba(60, 231, 110, 0.4),
            2px 2px 4px rgba(81, 227, 255, 0.4),
            -2px 2px 4px rgba(220, 136, 255, 0.4);
        }
.accordion__panel.active {
            box-shadow: 
            0px -4px 4px rgba(60, 231, 110, 0.7),
            4px 4px 4px rgba(81, 227, 255, 0.7),
            -4px 4px 4px rgba(220, 136, 255, 0.7);
            margin:2rem 0;
        }
.accordion__panel.active .accordion__header {
                border-bottom: solid 2px #ACACAC;
                border-bottom: solid 2px var(--neutral-400)
        }
.accordion__panel.active .accordion__header::after {
                transform: rotate(180deg);
            }
.accordion__panel.active .accordion__content {
                height:100%;
                display: block;
                max-height: 500px;

            }
.accordion__header {
        width:100%;
        font-size:3.6rem;
        font-size:var(--heading-small);
        padding: 2rem 4rem;
        background-color: #FCFCFC;
        background-color: var(--base-white);
        color:#0C0C0C;
        color:var(--base-black);
        display: flex;
        border-radius: .8rem;
        align-items: center;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
        border-bottom: solid 2px transparent;
        justify-content: space-between;
        transition: border-bottom 1s ease-in;
        border-bottom: solid 2px transparent;
        cursor: pointer
        
    }
.accordion__header::after {
            content:"";
            background: url("data:image/svg+xml,%3Csvg width='20' height='10' viewBox='0 0 20 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' d='M2 1.5L10 8.5L18 1.5' /%3E%3C/svg%3E%0A");
            background-size: cover; /* Adjust as needed */
            width:20px;
            height:10px;
            display: inline-block;
            transition: transform .5s ease;
            
        }
.accordion__content {
        height:0%;
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s
    }
.accordion__content > * {
            padding: 4rem
        }
.accordion__content > *:first-of-type {
                padding-top:4rem;
            }
.accordion__content > *:last-of-type {
                padding-bottom:4rem;
            }
.dark .accordion__header::after {
    background: url("data:image/svg+xml,%3Csvg width='20' height='10' viewBox='0 0 20 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' d='M2 1.5L10 8.5L18 1.5' /%3E%3C/svg%3E%0A");
}
.table {
    margin: 2rem auto;
    font-size: 1.6rem;
    font-size: var(--body-small);
    background-color: transparent;
    overflow-x: auto

        /* Custom scrollbar for WebKit browsers */
}
.table::-webkit-scrollbar {
        width: 12px; /* Width of the scrollbar */
    }
.table::-webkit-scrollbar-track {
        background: #f1f1f1; /* Background of the scrollbar track */
        border-radius: 10px; /* Rounded corners for the track */
    }
.table::-webkit-scrollbar-thumb {
        background: linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
        background: var(--primary-gradient-400); /* Gradient for the thumb */
        border-radius: 10px; /* Rounded corners for the thumb */
    }
.table::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
        background: var(--primary-gradient-400); /* Gradient for the thumb */
    }
.table {

    filter: drop-shadow(0px 10px 20px #8C8C8C);

    filter: var(--base-spread-shadow);
}
.table table {
        margin-bottom:2rem;
        background-color: #FCFCFC;
        background-color: var(--base-white);
        border-radius: 2rem;
        overflow: hidden;
        background-color: #0C0C0C;
        background-color: var(--neutral-900);
        border-bottom: solid 5px #DE90FF;
        border-bottom: solid 5px var(--base-bg-purple);

       
    }
.table tbody tr:nth-of-type(1n) {
        background: linear-gradient(to right, #F8EAFE, #D4F8FF, #E2FFEB);
        background: var(--base-bg-gradient);
    }
.table tbody tr:nth-of-type(2n) {
        background: #FCFCFC;
        background: var(--base-white);
    }
.table tbody::after {
        height:20px;
        width:100%;
        background-color: aqua;
        
    }
.table th, .table td {
        padding: 1.2rem 2.4rem;
        
    }
.table th {
        background-image: linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
        background-image: var(--primary-gradient-400); /* Define the linear gradient */
        -webkit-background-clip: text; /* For webkit-based browsers */
        background-clip: text;
        color: transparent; /* Hide the original text */


        
       
    }
.table tfoot td {
        border-top: solid 4px #ECECEC;
        border-top: solid 4px var(--neutral-200);
        background-color: #FCFCFC;
        background-color: var(--base-white);

    }
.table caption {
        padding:4rem 0;
    }
.category {
    margin-bottom:1.6rem;
    display:inline-block;
    border-radius: 2rem;
    padding: .4rem .8rem;
    font-size: 1.2rem;
    font-size: var(--body-tiny);
    font-weight: 600; 
    width:8rem;
    text-align: center;
}
.category--personal {
        background-color: #0C0C0C;
        background-color: var(--base-black);
        color:#FCFCFC;
        color:var(--base-white);

    }
.category--life {
        background-color: #8EF6AD;
        background-color: var(--base-bg-green);
        color:#0C0C0C;
        color:var(--base-black);
    }
.category--digital {
        background-color: #DE90FF;
        background-color: var(--base-bg-purple);
        color:#0C0C0C;
        color:var(--base-black);
    }
.category--world {
        background-color: #79E1F4;
        background-color: var(--base-bg-blue);
        color:#0C0C0C;
        color:var(--base-black);
    }
.block {
    width:100%;

}
.block__width-50 {
        width:50%;
        max-width:800px;
        margin:auto;
        padding: 4rem 0
    }
@media only screen and (max-width: 768px) {

    .block__width-50 {
            width:90%
    }
        }
.block__width-25 {
        width:25%;
        margin:auto;
    }
.block__width-75 {
        width:75%;
        margin:auto;
    }
.flex {
    display: flex;
}
.gap-small {
    grid-gap:2rem;
    gap:2rem;
}
.content-area a {
        color:#0C0C0C;
        color:var(--base-black);
        -webkit-text-decoration: underline;
        text-decoration: underline;
        padding: .4rem;
        border-radius: .4rem;
        transition: background-color .6s
        
    }
.content-area a:nth-child(n) {
            text-decoration-color: #5DE786;
            text-decoration-color: var(--primary-green-400)
        }
.content-area a:nth-child(n):hover {
                background-color: #8EF6AD;
                background-color: var(--base-bg-green);
            }
.content-area a:nth-child(2n) {
            text-decoration-color: #49CFE8;
            text-decoration-color: var(--primary-blue-400)
        }
.content-area a:nth-child(2n):hover {
                background-color: #79E1F4;
                background-color: var(--base-bg-blue);

            }
.content-area a:nth-child(3n) {
            text-decoration-color: #BB5DE3;
            text-decoration-color: var(--primary-purple-400)
        }
.content-area a:nth-child(3n):hover {
                background-color: #DE90FF;
                background-color: var(--base-bg-purple);
            }
.content-area p {
        padding-bottom:1.6rem;
        padding-top:1.6rem;
        font-size: 2rem;
        font-size: var(--body-default);
        
    }
.content-area .heading-decorative {
        font-size: 6.4rem;
        font-size: var( --display-massive);
        font-weight: 700;
        background-image: linear-gradient(to right, #9A3CC1, #2EB9D3, #34CE61);
        background-image: var(--primary-gradient-500); /* Define the linear gradient */
                  -webkit-background-clip: text; /* For webkit-based browsers */
                  background-clip: text;
                  color: transparent; /* Hide the original text */   
    }
.content-area h2,.content-area h3,.content-area h4,.content-area h5,.content-area h6 {
        padding-bottom:.8rem;
        padding-top:4.6rem;
    }
.content-area h2 {

        font-size: 4.4rem;

        font-size: var(--heading-large);
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,.25));
    }
.content-area h3 {
        font-size: 3.6rem;
        font-size: var(--heading-small);
    }
.content-area img {
        border-radius:2rem;
    }
.content-area figcaption {
        margin-top:.8rem;
        font-style: italic;
        font-size: 1.2rem;
        font-size: var(--body-tiny);
    }
.content-area ul, .content-area ol {
        margin-top:2rem;
        font-size:2rem;
        font-size:var(--body-default);
        list-style-position: outside; 
        padding-left: 2.8rem;
    }
.content-area ul li, .content-area ol li {
            margin:.8rem 0;
            text-indent: 0; /* Ensures text does not move under the bullet */
        }
.content-area ul {
        list-style-type: square;
    }
.content-area mark {
        background: linear-gradient(to right, #F8EAFE, #D4F8FF, #E2FFEB);
        background: var(--base-bg-gradient);
        color:#0C0C0C;
        color:var(--base-black);
    }
.content-area .lead {
        font-size:2.8rem;
        font-size:var(--body-massive)
    }
@media (max-width: 768px) {
    .content-area .lead {
            font-size:2.4rem;
            font-size:var(--body-large)
    }
        }
.bg-green {
    background-color: #8EF6AD;
    background-color: var(--base-bg-green);
}
.bg-blue {
    background-color: #79E1F4;
    background-color: var(--base-bg-blue);
}
.bg-white {
    background-color: #FCFCFC;
    background-color: var(--base-white);
}
.bg-purple {
    background-color: #DE90FF;
    background-color: var(--base-bg-purple);
}
.bg-pure-white {
    background-color: #FCFCFC;
    background-color: var(--neutral-100);
}
.frame {
    padding: 4rem 0;
}
.gradient-pod {
    box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.25); /* Adjust the values as needed */
    padding:.4rem;
    border-radius: 2rem;
    margin-bottom:2rem;
    background:  linear-gradient(to right, #BB5DE3, #49CFE8, #5DE786);
    background:  var(--base-gradient);
}
.gradient-pod__inner {
        background-color: #FCFCFC;
        background-color: var(--base-white);
        border-radius: 2rem;
        padding:2.8rem 4rem;
    }