/* PAGE-SPECIFIC STYLES FOR THE ABOUT PAGE */
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
body {
  position: relative;
  /* Ensure body is positioned relative */
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/assets/jesterbox/galery/Untitled_1.1.46.png");
  background-size: cover !important;
  background-attachment: fixed;
  background-position: center !important;
  filter: blur(5px) brightness(50%);
  z-index: -1;
  /* Ensure the pseudo-element is behind the content */
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs {
    padding: var(--sectionPadding);
    opacity: 1;
  }
  #sbs .cs-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: auto;
    column-gap: 2rem;
    /* max-width: (1280/16rem); */
    width: 80%;
    row-gap: 2.5rem;
  }
  #sbs .cs-left {
    /* scaling the font size with the view width */
    display: flex;
    flex-direction: column;
    font-size: min(2.31vw, 0.7em);
    text-align: left;
    width: 50%;
  }
  #sbs .cs-right {
    display: flex;
    flex-direction: column;
    margin: auto;
    text-align: left;
    height: auto;
    width: 50%;
    position: relative;
  }
  #sbs .cs-topper {
    margin-bottom: 0.25rem;
    text-align: left;
    padding-top: 1rem;
  }
  #sbs .cs-title {
    max-width: 50rem;
    text-align: left;
  }
  #sbs .cs-text {
    color: var(--bodyTextColor);
    text-align: left;
    font-size: clamp(0.2rem, 1vw, 2rem);
    white-space: wrap;
  }
  #sbs .cs-detail {
    color: var(--textAccent);
    flex-grow: 1;
  }
  #sbs .cs-explanation {
    z-index: 1000;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
  }
  #sbs .cs-explanation.changed {
    z-index: 1000;
    max-height: 300px;
    opacity: 1;
    height: auto;
    visibility: visible;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 360px) {
  #sbs .cs-container {
    flex-flow: row;
    justify-content: center;
  }
  #sbs .cs-left {
    font-size: min(1.2vw, 1em);
    flex: none;
    width: 50%;
  }
  #sbs .cs-right {
    margin: 0;
  }
}