@font-face {
      font-family: 'font';
      src:
        url('/assets/fonts/font.woff') format('woff'),
        url('/assets/fonts/font.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: #fff;
      overflow: hidden;
    }
    body {
      display: flex;
      flex-direction: row;
      height: 100vh;
      min-height: 0;
      padding-top: 80px;
      box-sizing: border-box;
    }
    .logo-container {
      position: fixed;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 190px;
      z-index: 1000;
      user-select: none;
    }
    .logo-container a {
      cursor: help;
    }
    .logo-container img {
      width: 100%;
      height: auto;
    }
    .back-arrow {
      position: fixed;
      top: 0;
      left: 10px;
      font-family: 'font';
      font-size: 4rem;
      color: #cebb26;
      text-decoration: none;
      z-index: 100;
      padding: 5px 10px;
      border-radius: 5px;
      font-weight: lighter;
      transition: background 0.3s;
      cursor: w-resize;
    }
    .top-gradient {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
      z-index: 5;
      pointer-events: none;
    }
    .left-side {
      width: 60%;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
      height: 100vh;
      margin-top: -80px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      min-height: 0;
    }
    .left-side::-webkit-scrollbar {
      display: none;
    }
    .soundcloud-embed {
      width: 100%;
      margin-top: 50px;
    }
    .right-side {
      width: 40%;
      height: 100vh;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      font-family: 'font', sans-serif;
      font-size: 2rem;
      color: #000;
      text-align: center;
      line-height: 1;
      padding: 20px;
      box-sizing: border-box;
    }
    .h2-wrapper {
      position: relative;
      width: 100%;
      z-index: 10;
      margin: 0 0 0 0;
    }
    .right-side h2 {
      font-size: 10rem;
      font-weight: 600;
      margin: 0;
      padding-bottom: 10px;
      background: #fff;
      display: inline-block;
      position: relative;
      z-index: 2;
      color: #cebb26;
      -webkit-text-stroke: 0.5px #fff;
      line-height: 0.8;
      cursor: default;
    }
    .h2-gradient {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 40px;
      background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
      z-index: 1;
      pointer-events: none;
    }
    .scrollable-text {
      flex: 1 1 0;
      overflow-y: auto;
      width: 100%;
      margin-top: 0;
      padding-right: 10px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      min-height: 0;
      box-sizing: border-box;
      cursor: default;
    }
    .scrollable-text::-webkit-scrollbar {
      display: none;
    }
    .highlight-link {
      color: #cebb26;
      font-weight: bold;
      cursor: alias;
      transition: color 0.3s;
    }
    .highlight-link:hover {
      color: #9b8d1f;
    }
    /* Pink selection */
    .right-side h2::selection,
    .scrollable-text::selection {
      color: #9b8d1f;
    }
    .right-side h2::-moz-selection,
    .scrollable-text::-moz-selection {
      color: #9b8d1f;
    }
    @media (max-width: 1200px) {
      html, body {
        overflow: visible !important;
        height: auto;
      }
      body {
        flex-direction: column-reverse;
        padding-top: 100px;
        height: auto;
      }
      .left-side,
      .right-side {
        width: 100%;
        max-width: 100vw;
        padding: 15px;
        overflow: visible !important;
        height: auto !important;
        margin-top: 0;
        min-height: 0;
      }
      .scrollable-text {
        overflow-y: visible !important;
        flex-grow: 0;
        margin-top: 0;
        min-height: auto;
      }
      .left-side {
        margin-top: -80px;
        padding-top: 5px;
      }
      .h2-gradient {
        display: none;
      }
      .right-side h2 {
        font-size: 9rem;
      }
    }
    @media (max-width: 425px) {
      .right-side h2 {
        font-size: 6rem;
        -webkit-text-stroke: 0px #fff;
      }
      .back-arrow {
        font-size: 3rem;
      }
      .logo-container {
      width: 140px;
    }
      .scrollable-text {
    font-size: 1.5rem;
    line-height: 1;
  }
    }