/************ MOBILE - 360PX *************/
/*****************************************/
@media only screen and (min-width: 0em) {
    /************** BANNER *******************/
    /*****************************************/
    #banner {
        /* 175px - 260px top */
        padding: clamp(10.9375rem, 20vw, 16.25rem) 1rem clamp(6.25rem, 14vw, 12vw);
        /* clips svg wave from causing overflow issues */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #banner .container {
        text-align: center;
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }
    #banner .int-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        padding: 1.25rem;
        color: var(--textLight);
        position: relative;
    }
    #banner .background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #banner .background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: var(--primaryDark);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #banner .wave {
        /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
        width: 48rem;
        height: auto;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        z-index: -1;
    }
    /************** CONTENT ******************/
    /*****************************************/
    @keyframes floatAnimation {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-2rem);
        }
        100% {
          transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-3rem);
        }
        100% {
          transform: translateY(0);
        }
    }
    #content {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #content .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 40px - 64px */
        gap: clamp(2.5rem, 4vw, 4rem);
        position: relative;
    }
    #content .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 46.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #content .title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #content h2,
    #content h3,
    #content h4,
    #content h5,
    #content h6 {
        font-weight: 700;
        text-align: inherit;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
    }
    #content h2 {
        font-size: 2rem;
        margin-top: 2rem;
    }
    #content h3 {
        font-size: 1.5rem;
        color: var(--primary);
    }
    #content h4,
    #content h5,
    #content h6 {
        font-size: 1.25rem;
    }
    #content .button-solid {
        margin-bottom: 2rem;
    }
    #content .bubbles {
      /* this scales the children inside of it down. They're all in ems so they pull from the parent font size for their value of em, in this case, the value of em is tied to the viewwidth size and stops growing when the font size is equal to 1em, which it pulls from the nearst parent with a declred font size (which is the html tag, and that tag is 16px by default) */
      font-size: min(2.9vw, 0.9em);
      position: absolute;
      z-index: -1;
    }
    #content .bubbles1 {
      width: 42.5em;
      height: 47.25em;
      right: 10em;
      /* changes to 172 at large desktop */
      bottom: -37.25rem;
    }
    #content .bubbles1:before {
      /* white border bubble */
      content: "";
      width: 38.875em;
      height: 38.875em;
      background: transparent;
      border: 2px solid var(--accentColor);
      border-radius: 50%;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      animation-name: floatAnimation;
      animation-duration: 7s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
    }
    #content .bubbles1:after {
      /* purple bubble */
      content: "";
      width: 34.125em;
      height: 34.125em;
      opacity: 0.8;
      border-radius: 50%;
      border-color: #1a1a1a;
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -1;
      animation-name: floatAnimation2;
      animation-duration: 10s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      display: none;
    }
    #content .no-margin {
        margin: 0;
    }
    #content .color {
        color: var(--primary);
    }
    #content p {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #content p:last-of-type {
        margin-bottom: 2rem;
    }
    #content p a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: underline;
        color: var(--primary);
        filter: brightness(120%);
    }
    #content ol,
    #content ul {
        padding-left: 1.5rem;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #content ul li {
        list-style: none;
        color: inherit;
        position: relative;
    }
    #content ul li:before {
        /* custom list bullet */
        content: '';
        width: 3px;
        height: 3px;
        background: currentColor;
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.75rem;
    }
    #content img {
        width: 100%;
        height: auto;
        display: block;
    }
    #content .image-group {
        width: 32.625em;
        height: 33.75em;
        display: none;
        position: relative;
        z-index: 1;
    }
    #content .background {
        width: 100%;
        height: 100%;
        border-radius: 2.5em;
        border: 12px solid var(--primaryDark);
        /* clips the corners of the children around the border radius */
        overflow: hidden;
        /* makes it cover the parent dimensions */
        object-fit: cover;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #content .background img {
        width: 100%;
        height: 100%;
        /* makes it cover the parent like a backgorund image */
        object-fit: cover;
        display: block;
    }
    #content .floater {
        width: 44.375em;
        height: auto;
        position: absolute;
        right: 9.375em;
        top: 25em;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
}

/************ TABLET - 768PX *************/
/*****************************************/
@media only screen and (min-width: 48rem) {
    /*************** BANNER ******************/
    /*****************************************/
    #banner .wave {
        width: 100%;
        left: 0;
        transform: none;
    }
    /*************** CONTENT *****************/
    /*****************************************/
    #content .container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    #content .content {
        width: 60%;
        max-width: 43.375rem;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #content .image-group {
        font-size: min(1.3vw, 1em);
        display: block;
    }
}

/************ DESKTOP - 1024PX ***********/
/*****************************************/
@media only screen and (min-width: 64rem) {
    /************** BANNER *******************/
    /*****************************************/
    #banner .int-title{
        padding: clamp(2.75rem, 25vw ,3rem);
    }
    /*************** CONTENT *****************/
    /*****************************************/
    #content .content {
        width: 53%;
    }
}

/***************** DARK MODE *************/
/*****************************************/
body.dark-mode #content {
    background-color: var(--dark);
}
body.dark-mode #content .title,
body.dark-mode #content .h2,
body.dark-mode #content .text {
    color: #fff;
}
body.dark-mode #content .background {
    border-color: var(--accentColor);
}