* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        overflow: hidden;
      }

      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
        background: black;
        padding: 30px;
      }

      .container {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: space-between;
        background: black;
        gap: 30px;
        margin-bottom: 30px;
      }

      .top-row {
        display: flex;
        flex: 1 0 0;
        justify-content: space-evenly;
        gap: 30px;
        height: 59vh;
        opacity: 0;
        animation: slideInTop 1s forwards;
      }

      @keyframes slideInTop {
        0% {
          transform: translateY(-100%);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .horizontal-scroll {
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
        background: #e9e3d9;
        padding: 10px;
        white-space: nowrap;
        scrollbar-width: none;
        opacity: 0;
        animation: slideInHorizontal 5s -2s forwards;
      }

      @keyframes slideInHorizontal {
        0% {
          transform: translateX(-100%);
          opacity: 0;
        }
        100% {
          transform: translateX(0);
          opacity: 1;
        }
      }

      .vertical-scroll {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        background: #e9e3d9;
        padding: 10px;
        height: 100%;
        padding: 20px 25px 25px 25px;
        opacity: 0;
        animation: slideInVertical 5s -2s forwards;
      }

      @keyframes slideInVertical {
        0% {
          transform: translateY(100%);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .bottom-row {
        padding-top: 20px;
        height: 30vh;
        background: #e9e3d9;
        font-weight: 300;
        opacity: 0;
        animation: slideInBottom 2s 1s forwards;
      }

      @keyframes slideInBottom {
        0% {
          transform: translateY(100%);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }

      .schrift1 {
        font-size: 280px;
        line-height: 220px;
        font-weight: 900;
      }

      #parts {
        margin-top: -13px;
      }

      .schrift2 {
        font-size: 80px;
        line-height: 80px;
      }

      .horizontal-scroll1 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
      }

      .rows {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 112px;
      }

      #www {
        word-spacing: 251px;
        padding: 0 0 0 30px;
      }

      .at {
        padding: 30px 0 0 30px;
        font-size: 25px;
      }

      #total {
        text-align: center;
      }

      .post {
        margin-top: -115px;
      }

      .flexline {
        display: flex;
        justify-content: space-between;
        padding: 0 30px 0 30px;
        font-size: 30px;
      }

      .horizontal-scroll .content {
        transition: color 0.1s linear;
      }

      .vertical-scroll .content {
        transition: color 0.1s linear;
      }

      @keyframes colorChange {
        0% {
          color: rgb(0, 0, 0);
        }
        50% {
          color: rgb(128, 0, 32);
        }
        100% {
          color: rgb(255, 255, 255);
        }
      }

      .bottom-row .flexline p {
        animation: colorChange 7s infinite alternate ease-in-out;
      }

      .scroll-arrow {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 50px;
        color: #ffffff;
        cursor: pointer;
        animation: bounceArrow 2s infinite ease-in-out;
      }

      @media (max-width: 1120px) {
        .top-row {
          flex-direction: column;
          height: auto;
          gap: 30px;
        }

        .horizontal-scroll,
        .vertical-scroll {
          width: 100%;
          flex: none;
        }

        .vertical-scroll {
          height: 170px;
        }

        .horizontal-scroll1 {
          align-items: flex-start;
          height: 150px;
        }

        .schrift1 {
          font-size: 220px;
          line-height: 220px;
        }

        .schrift2 {
          font-size: 60px;
          line-height: 60px;
        }

        .bottom-row {
          height: auto;
          padding: 20px;
        }

        .flexline {
          font-size: 10px;
          gap: 9px;
          padding: 0;
        }

        .at {
          padding: 0;
          font-size: 11px;
        }

        .rows {
          flex-direction: column;
          gap: 10px;
        }

        .post {
          margin-top: 0;
        }
      }