* {
  margin: 0;
  padding: 0;

  .container {
    height: 100vh;
    display: grid;
    place-items: center;

    & section {
      display: flex;
      flex-direction: column;
      gap: 2em;

      > div:nth-child(1) {
        display: flex;
        .rangeContainer {
          display: grid;
          place-items: center;

          .verticalRange {
            transform: rotate(270deg);
            height: 250px;
            appearance: none;
            width: 100%;
            height: 25px;
            outline: none;
            transition: opacity 0.2s;

            &::-webkit-slider-thumb {
              -webkit-appearance: none;
              appearance: none;
              width: 25px;
              height: 25px;
              background: #1d0e3e;
              cursor: pointer;
            }
          }

          & span {
            margin-top: 4em;
            z-index: 1;
            color: white;
          }
        }
      }

      > div:nth-child(2) {
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 1em;

        & h2 {
          color: white;
        }

        & button {
          border: none;
          padding: 0.5em 1em;
          color: white;
          background: #393939;
          border-radius: 0.25em;
          cursor: pointer;
        }
      }
    }
  }
}