<main class="app">
  <header class="appbar appbar--hero">

    <div class="appbar__title">
      <h1 class="appbar__title-text">
        Hello
      </h1>
      <p>
        [email protected]
      </p>
    </div>
    <div class="appbar__controls-right">
      <button class="button">
        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.75 3.125H3.9375C3.62109 3.125 3.375 3.40625 3.375 3.6875C3.375 4.00391 3.62109 4.25 3.9375 4.25H15.75C16.3477 4.25 16.875 4.77734 16.875 5.375V14.375C16.875 15.0078 16.3477 15.5 15.75 15.5H3.375C2.10938 15.5 1.125 14.5156 1.125 13.25V4.25C1.125 3.01953 2.10938 2 3.375 2H16.3125C16.5938 2 16.875 1.75391 16.875 1.4375C16.875 1.15625 16.5938 0.875 16.3125 0.875H3.375C1.47656 0.875 0 2.38672 0 4.25V13.25C0 15.1484 1.47656 16.625 3.375 16.625H15.75C16.9805 16.625 18 15.6406 18 14.375V5.375C18 4.14453 16.9805 3.125 15.75 3.125ZM14.3438 9.875C14.3438 9.41797 13.957 9.03125 13.5 9.03125C13.0078 9.03125 12.6562 9.41797 12.6562 9.875C12.6562 10.3672 13.0078 10.7188 13.5 10.7188C13.957 10.7188 14.3438 10.3672 14.3438 9.875Z" fill="white" />
        </svg>
        $0
      </button>
    </div>
  </header>
  <section class="content backdrop scrollview">
    <div class="list">
      <h2 class="list__title">CONTESTS</h2>
      <a class="list__item">
        <svg class="list__icon" width="58" height="56" viewBox="0 0 58 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="58" height="56" rx="28" fill="#E9F0E7" />
          <path d="M35 34.4375C35.8125 33.9375 36.0625 32.5625 36.75 31.8125C37.5 31.125 38.875 30.9375 39.375 30.0625C39.875 29.1875 39.375 27.875 39.625 26.875C39.875 25.9375 40.9375 25.0625 40.9375 24C40.9375 23 39.875 22.125 39.625 21.1875C39.375 20.1875 39.875 18.875 39.375 18C38.875 17.1875 37.5 16.9375 36.75 16.25C36.0625 15.5 35.875 14.125 35 13.625C34.125 13.125 32.8125 13.625 31.8125 13.375C30.875 13.125 30 12 29 12C27.9375 12 27.0625 13.125 26.125 13.375C25.125 13.625 23.8125 13.125 22.9375 13.625C22.125 14.125 21.875 15.5 21.1875 16.25C20.4375 16.9375 19.0625 17.125 18.5625 18C18.0625 18.875 18.5625 20.1875 18.3125 21.1875C18.0625 22.125 17 23 17 24C17 25.0625 18.0625 25.9375 18.3125 26.875C18.5625 27.875 18.0625 29.1875 18.5625 30.0625C19.0625 30.875 20.4375 31.125 21.1875 31.8125C21.875 32.5625 22.0625 33.9375 22.9375 34.4375C23.8125 34.9375 25.125 34.4375 26.125 34.6875C27.0625 34.9375 27.9375 36 29 36C30 36 30.875 34.9375 31.8125 34.6875C32.8125 34.4375 34.125 34.9375 35 34.4375ZM28.9375 34C28.4375 33.75 27.6875 33.0625 26.625 32.75C25.5625 32.5 24.5625 32.6875 24 32.6875C23.6875 32.1875 23.3125 31.1875 22.5625 30.4375C21.8125 29.6875 20.8125 29.3125 20.3125 29C20.3125 28.4375 20.5 27.4375 20.25 26.375C19.9375 25.3125 19.25 24.5625 19 24C19.25 23.5 19.9375 22.75 20.25 21.6875C20.5 20.625 20.3125 19.625 20.3125 19.0625C20.8125 18.75 21.8125 18.375 22.5625 17.625C23.3125 16.875 23.6875 15.875 24 15.375C24.5625 15.375 25.5625 15.5625 26.625 15.3125C27.6875 15 28.4375 14.3125 29 14.0625C29.5 14.3125 30.25 15 31.3125 15.3125C32.375 15.5625 33.375 15.375 33.9375 15.375C34.25 15.875 34.625 16.875 35.375 17.625C36.125 18.375 37.125 18.75 37.625 19.0625C37.625 19.625 37.4375 20.625 37.6875 21.6875C38 22.75 38.6875 23.5 38.9375 24.0625C38.6875 24.5625 38 25.3125 37.6875 26.375C37.4375 27.375 37.625 28.4375 37.625 29C37.125 29.3125 36.125 29.6875 35.375 30.4375C34.625 31.1875 34.25 32.1875 33.9375 32.6875C33.375 32.6875 32.375 32.5 31.3125 32.75C30.25 33.0625 29.5 33.75 28.9375 34ZM34.4375 24C34.4375 21 32 18.5 29 18.5C25.9375 18.5 23.5 21 23.5 24C23.5 27.0625 25.9375 29.5 29 29.5C32 29.5 34.4375 27.0625 34.4375 24ZM29 27.5C27.0625 27.5 25.5 25.9375 25.5 24C25.5 22.125 27.0625 20.5 29 20.5C30.875 20.5 32.4375 22.125 32.4375 24C32.4375 25.9375 30.875 27.5 29 27.5ZM39.3125 35.1875C39.125 34.625 38.5 34.375 38 34.625C37.5 34.8125 37.25 35.375 37.4375 35.875L38.9375 39.75L36 39.3125L34.4375 41.9375L32.875 38.125C32.6875 37.625 32.125 37.375 31.5625 37.5625C31.0625 37.8125 30.8125 38.375 31.0625 38.875L32.625 42.6875C32.9375 43.5 33.625 44 34.5625 44C35.375 44 36.0625 43.5625 36.4375 42.875L37.0625 41.5625L38.4375 41.875C39.1875 42 40 41.75 40.5 41.125C41 40.5625 41.125 39.6875 40.8125 39L39.3125 35.1875ZM26.375 37.5625C25.8125 37.375 25.25 37.625 25.0625 38.125L23.5 41.9375L21.9375 39.3125L19 39.75L20.5 35.875C20.6875 35.375 20.4375 34.8125 19.9375 34.625C19.4375 34.375 18.8125 34.625 18.625 35.1875L17.125 39C16.8125 39.6875 16.9375 40.5625 17.4375 41.125C17.9375 41.75 18.75 42 19.5 41.875L20.875 41.5625L21.5 42.875C21.875 43.5625 22.5625 44 23.4375 44C24.3125 44 25 43.5 25.3125 42.6875L26.875 38.875C27.125 38.375 26.875 37.8125 26.375 37.5625Z" fill="#87BA7B" />
        </svg>
        <div class="list__details">
          <h2>3rd League</h2>
          <p>$1000 | $12/Ticket</p>
          <div class="list__item-footer">
            <button class="button button--secondary">
              Play
            </button>
            <button class="button button--tertiary">
              Share
            </button>
          </div>
        </div>

      </a>
      <a class="list__item">
        <svg class="list__icon" width="58" height="56" viewBox="0 0 58 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="58" height="56" rx="28" fill="#E9F0E7" />
          <path d="M35 34.4375C35.8125 33.9375 36.0625 32.5625 36.75 31.8125C37.5 31.125 38.875 30.9375 39.375 30.0625C39.875 29.1875 39.375 27.875 39.625 26.875C39.875 25.9375 40.9375 25.0625 40.9375 24C40.9375 23 39.875 22.125 39.625 21.1875C39.375 20.1875 39.875 18.875 39.375 18C38.875 17.1875 37.5 16.9375 36.75 16.25C36.0625 15.5 35.875 14.125 35 13.625C34.125 13.125 32.8125 13.625 31.8125 13.375C30.875 13.125 30 12 29 12C27.9375 12 27.0625 13.125 26.125 13.375C25.125 13.625 23.8125 13.125 22.9375 13.625C22.125 14.125 21.875 15.5 21.1875 16.25C20.4375 16.9375 19.0625 17.125 18.5625 18C18.0625 18.875 18.5625 20.1875 18.3125 21.1875C18.0625 22.125 17 23 17 24C17 25.0625 18.0625 25.9375 18.3125 26.875C18.5625 27.875 18.0625 29.1875 18.5625 30.0625C19.0625 30.875 20.4375 31.125 21.1875 31.8125C21.875 32.5625 22.0625 33.9375 22.9375 34.4375C23.8125 34.9375 25.125 34.4375 26.125 34.6875C27.0625 34.9375 27.9375 36 29 36C30 36 30.875 34.9375 31.8125 34.6875C32.8125 34.4375 34.125 34.9375 35 34.4375ZM28.9375 34C28.4375 33.75 27.6875 33.0625 26.625 32.75C25.5625 32.5 24.5625 32.6875 24 32.6875C23.6875 32.1875 23.3125 31.1875 22.5625 30.4375C21.8125 29.6875 20.8125 29.3125 20.3125 29C20.3125 28.4375 20.5 27.4375 20.25 26.375C19.9375 25.3125 19.25 24.5625 19 24C19.25 23.5 19.9375 22.75 20.25 21.6875C20.5 20.625 20.3125 19.625 20.3125 19.0625C20.8125 18.75 21.8125 18.375 22.5625 17.625C23.3125 16.875 23.6875 15.875 24 15.375C24.5625 15.375 25.5625 15.5625 26.625 15.3125C27.6875 15 28.4375 14.3125 29 14.0625C29.5 14.3125 30.25 15 31.3125 15.3125C32.375 15.5625 33.375 15.375 33.9375 15.375C34.25 15.875 34.625 16.875 35.375 17.625C36.125 18.375 37.125 18.75 37.625 19.0625C37.625 19.625 37.4375 20.625 37.6875 21.6875C38 22.75 38.6875 23.5 38.9375 24.0625C38.6875 24.5625 38 25.3125 37.6875 26.375C37.4375 27.375 37.625 28.4375 37.625 29C37.125 29.3125 36.125 29.6875 35.375 30.4375C34.625 31.1875 34.25 32.1875 33.9375 32.6875C33.375 32.6875 32.375 32.5 31.3125 32.75C30.25 33.0625 29.5 33.75 28.9375 34ZM34.4375 24C34.4375 21 32 18.5 29 18.5C25.9375 18.5 23.5 21 23.5 24C23.5 27.0625 25.9375 29.5 29 29.5C32 29.5 34.4375 27.0625 34.4375 24ZM29 27.5C27.0625 27.5 25.5 25.9375 25.5 24C25.5 22.125 27.0625 20.5 29 20.5C30.875 20.5 32.4375 22.125 32.4375 24C32.4375 25.9375 30.875 27.5 29 27.5ZM39.3125 35.1875C39.125 34.625 38.5 34.375 38 34.625C37.5 34.8125 37.25 35.375 37.4375 35.875L38.9375 39.75L36 39.3125L34.4375 41.9375L32.875 38.125C32.6875 37.625 32.125 37.375 31.5625 37.5625C31.0625 37.8125 30.8125 38.375 31.0625 38.875L32.625 42.6875C32.9375 43.5 33.625 44 34.5625 44C35.375 44 36.0625 43.5625 36.4375 42.875L37.0625 41.5625L38.4375 41.875C39.1875 42 40 41.75 40.5 41.125C41 40.5625 41.125 39.6875 40.8125 39L39.3125 35.1875ZM26.375 37.5625C25.8125 37.375 25.25 37.625 25.0625 38.125L23.5 41.9375L21.9375 39.3125L19 39.75L20.5 35.875C20.6875 35.375 20.4375 34.8125 19.9375 34.625C19.4375 34.375 18.8125 34.625 18.625 35.1875L17.125 39C16.8125 39.6875 16.9375 40.5625 17.4375 41.125C17.9375 41.75 18.75 42 19.5 41.875L20.875 41.5625L21.5 42.875C21.875 43.5625 22.5625 44 23.4375 44C24.3125 44 25 43.5 25.3125 42.6875L26.875 38.875C27.125 38.375 26.875 37.8125 26.375 37.5625Z" fill="#87BA7B" />
        </svg>
        <div class="list__details">
          <h2>2nd League</h2>
          <p>$10000 | $120/Ticket</p>
          <div class="list__item-footer">
            <button class="button button--secondary">
              Play
            </button>
            <button class="button button--tertiary">
              Share
            </button>
          </div>
        </div>

      </a>
      <a class="list__item">
        <svg class="list__icon" width="58" height="56" viewBox="0 0 58 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="58" height="56" rx="28" fill="#E9F0E7" />
          <path d="M35 34.4375C35.8125 33.9375 36.0625 32.5625 36.75 31.8125C37.5 31.125 38.875 30.9375 39.375 30.0625C39.875 29.1875 39.375 27.875 39.625 26.875C39.875 25.9375 40.9375 25.0625 40.9375 24C40.9375 23 39.875 22.125 39.625 21.1875C39.375 20.1875 39.875 18.875 39.375 18C38.875 17.1875 37.5 16.9375 36.75 16.25C36.0625 15.5 35.875 14.125 35 13.625C34.125 13.125 32.8125 13.625 31.8125 13.375C30.875 13.125 30 12 29 12C27.9375 12 27.0625 13.125 26.125 13.375C25.125 13.625 23.8125 13.125 22.9375 13.625C22.125 14.125 21.875 15.5 21.1875 16.25C20.4375 16.9375 19.0625 17.125 18.5625 18C18.0625 18.875 18.5625 20.1875 18.3125 21.1875C18.0625 22.125 17 23 17 24C17 25.0625 18.0625 25.9375 18.3125 26.875C18.5625 27.875 18.0625 29.1875 18.5625 30.0625C19.0625 30.875 20.4375 31.125 21.1875 31.8125C21.875 32.5625 22.0625 33.9375 22.9375 34.4375C23.8125 34.9375 25.125 34.4375 26.125 34.6875C27.0625 34.9375 27.9375 36 29 36C30 36 30.875 34.9375 31.8125 34.6875C32.8125 34.4375 34.125 34.9375 35 34.4375ZM28.9375 34C28.4375 33.75 27.6875 33.0625 26.625 32.75C25.5625 32.5 24.5625 32.6875 24 32.6875C23.6875 32.1875 23.3125 31.1875 22.5625 30.4375C21.8125 29.6875 20.8125 29.3125 20.3125 29C20.3125 28.4375 20.5 27.4375 20.25 26.375C19.9375 25.3125 19.25 24.5625 19 24C19.25 23.5 19.9375 22.75 20.25 21.6875C20.5 20.625 20.3125 19.625 20.3125 19.0625C20.8125 18.75 21.8125 18.375 22.5625 17.625C23.3125 16.875 23.6875 15.875 24 15.375C24.5625 15.375 25.5625 15.5625 26.625 15.3125C27.6875 15 28.4375 14.3125 29 14.0625C29.5 14.3125 30.25 15 31.3125 15.3125C32.375 15.5625 33.375 15.375 33.9375 15.375C34.25 15.875 34.625 16.875 35.375 17.625C36.125 18.375 37.125 18.75 37.625 19.0625C37.625 19.625 37.4375 20.625 37.6875 21.6875C38 22.75 38.6875 23.5 38.9375 24.0625C38.6875 24.5625 38 25.3125 37.6875 26.375C37.4375 27.375 37.625 28.4375 37.625 29C37.125 29.3125 36.125 29.6875 35.375 30.4375C34.625 31.1875 34.25 32.1875 33.9375 32.6875C33.375 32.6875 32.375 32.5 31.3125 32.75C30.25 33.0625 29.5 33.75 28.9375 34ZM34.4375 24C34.4375 21 32 18.5 29 18.5C25.9375 18.5 23.5 21 23.5 24C23.5 27.0625 25.9375 29.5 29 29.5C32 29.5 34.4375 27.0625 34.4375 24ZM29 27.5C27.0625 27.5 25.5 25.9375 25.5 24C25.5 22.125 27.0625 20.5 29 20.5C30.875 20.5 32.4375 22.125 32.4375 24C32.4375 25.9375 30.875 27.5 29 27.5ZM39.3125 35.1875C39.125 34.625 38.5 34.375 38 34.625C37.5 34.8125 37.25 35.375 37.4375 35.875L38.9375 39.75L36 39.3125L34.4375 41.9375L32.875 38.125C32.6875 37.625 32.125 37.375 31.5625 37.5625C31.0625 37.8125 30.8125 38.375 31.0625 38.875L32.625 42.6875C32.9375 43.5 33.625 44 34.5625 44C35.375 44 36.0625 43.5625 36.4375 42.875L37.0625 41.5625L38.4375 41.875C39.1875 42 40 41.75 40.5 41.125C41 40.5625 41.125 39.6875 40.8125 39L39.3125 35.1875ZM26.375 37.5625C25.8125 37.375 25.25 37.625 25.0625 38.125L23.5 41.9375L21.9375 39.3125L19 39.75L20.5 35.875C20.6875 35.375 20.4375 34.8125 19.9375 34.625C19.4375 34.375 18.8125 34.625 18.625 35.1875L17.125 39C16.8125 39.6875 16.9375 40.5625 17.4375 41.125C17.9375 41.75 18.75 42 19.5 41.875L20.875 41.5625L21.5 42.875C21.875 43.5625 22.5625 44 23.4375 44C24.3125 44 25 43.5 25.3125 42.6875L26.875 38.875C27.125 38.375 26.875 37.8125 26.375 37.5625Z" fill="#87BA7B" />
        </svg>
        <div class="list__details">
          <h2>1st League</h2>
          <p>$50000 | $560/Ticket</p>
          <div class="list__item-footer">
            <button class="button button--secondary">
              Play
            </button>
            <button class="button button--tertiary">
              Share
            </button>
          </div>
        </div>

      </a>
    </div>
  </section>
  <nav class="navigation">
    <a class="navigation__item navigation--item-current">
      <svg class="navigation__item-icon" width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M20.5 9.28516C20.5 9.10938 20.4297 8.96875 20.2891 8.82812L10.7266 0.390625C10.6211 0.320312 10.4805 0.285156 10.375 0.285156C10.2344 0.285156 10.0938 0.320312 9.98828 0.390625L0.425781 8.82812C0.285156 8.96875 0.25 9.10938 0.25 9.28516C0.25 9.56641 0.496094 9.8125 0.8125 9.8125C0.917969 9.8125 1.05859 9.77734 1.16406 9.67188L2.5 8.51172V16.5625C2.5 17.5117 3.23828 18.25 4.1875 18.25H7C7.91406 18.25 8.6875 17.5117 8.6875 16.5625V12.625H12.0625V16.5625C12.0625 17.5117 12.8008 18.25 13.75 18.25H16.5625C17.4766 18.25 18.25 17.5117 18.25 16.5625V8.51172L19.5508 9.67188C19.6562 9.77734 19.7969 9.8125 19.9375 9.8125C20.2188 9.8125 20.5 9.56641 20.5 9.28516ZM17.125 7.5625V16.5625C17.125 16.8789 16.8438 17.125 16.5625 17.125H13.75C13.4336 17.125 13.1875 16.8789 13.1875 16.5625V12.625C13.1875 12.0273 12.6602 11.5 12.0625 11.5H8.6875C8.05469 11.5 7.5625 12.0273 7.5625 12.625V16.5625C7.5625 16.8789 7.28125 17.125 7 17.125H4.1875C3.87109 17.125 3.625 16.8789 3.625 16.5625V7.5625C3.625 7.5625 3.58984 7.5625 3.58984 7.52734L10.375 1.58594L17.125 7.52734C17.125 7.5625 17.125 7.5625 17.125 7.5625Z" fill="white" />
      </svg>
      <p class="navigation__item-label">
        Home
      </p>
    </a>
    <a class="navigation__item">
      <svg class="navigation__item-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 0.8125C4.32422 0.8125 0.5625 4.60938 0.5625 9.25C0.5625 13.9258 4.32422 17.6875 9 17.6875C13.6406 17.6875 17.4375 13.9258 17.4375 9.25C17.4375 4.60938 13.6406 0.8125 9 0.8125ZM9 16.5625C4.95703 16.5625 1.6875 13.293 1.6875 9.25C1.6875 5.24219 4.95703 1.9375 9 1.9375C13.0078 1.9375 16.3125 5.24219 16.3125 9.25C16.3125 13.293 13.0078 16.5625 9 16.5625ZM9.5625 9.03906V4.75C9.5625 4.46875 9.28125 4.1875 9 4.1875C8.68359 4.1875 8.4375 4.46875 8.4375 4.75V9.25C8.4375 9.42578 8.47266 9.56641 8.57812 9.67188L11.3906 12.4844C11.4961 12.5898 11.6367 12.625 11.8125 12.625C11.9531 12.625 12.0938 12.5898 12.1992 12.4844C12.4102 12.2734 12.4102 11.8867 12.1992 11.6758L9.5625 9.03906Z" fill="#0F3561" />
      </svg>

      <p class="navigation__item-label">
        History
      </p>
    </a>
  </nav>
</main>
@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected];500;700&family=Poppins:[email protected];400;700&display=swap");

$primary: #87ba7b;
$primary-dark: mix(#0f3561, $primary, 35%);
$primary-dark-2: mix(#0f3561, $primary, 45%);
$text-color: #0f3561;
$accent: #0f3561;
$accent-light: mix(#ffffff, $accent, 65%);
$accent-light-2: mix(#ffffff, $accent, 75%);
$accent-light-3: mix(#ffffff, $accent, 80%);
$accent-light-4: mix(#ffffff, $accent, 88%);

$font-family: "Inter", sans-serif;
$font-size: 16px;
$base-size: 1em;
$subtitle-size: 1.2em;
$hero-size: 3em;
$base-weight: 400;
$medium-weight: 500;
$title-weight: 700;

* {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
  padding: 0;
}
h1 {
  font-size: $hero-size;
  font-weight: $title-weight;
}
h2 {
  font-size: $subtitle-size;
  font-weight: $title-weight;
}

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  /* needed for demo only */
  display: flex;
  justify-content: center;
  align-items: center;
  /* needed for demo only */

  height: 100%;
  background-color: $accent-light;
  font: $font-size $font-family;
  line-height: 1.6;

  color: $text-color;
}

.app {
  /* needed for demo only */
  margin: auto;
  width: 375px;
  height: 812px;
  border: 12px solid #999aca;
  border-radius: 48px;
  overflow: hidden;
  /* needed for demo only */

  display: grid;
  position: relative;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  grid-template-areas: "appbar" "content" "tabbar";
  background-color: $primary;
}
.appbar {
  $self: &;
  display: grid;
  grid-area: appbar;
  grid-template-areas: "controls-left title controls-right";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;

  &__controls-left {
    grid-area: controls-left;
  }
  &__title {
    grid-area: title;
  }
  &__title-text {
    font-size: $subtitle-size;
  }
  &__controls-right {
    grid-area: controls-right;
  }
  &--hero {
    padding: 56px 24px;
    background-color: $primary;
    grid-template-areas: "title title controls-right";
    #{ $self }__title-text {
      font-size: $hero-size;
    }
  }
}
.content {
  grid-area: content;
  height: 100%;
  padding: 32px 24px;
  background-color: #ffffff;
}
.scrollview {
  overflow: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.scrollview::-webkit-scrollbar {
  width: 0px;
}
.backdrop {
  border-radius: 24px;
}
.list {
  &__item {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px 0 24px;
    border-bottom: 1px solid $accent-light-2;
    &:last-child {
      border: none;
    }
  }
  &__item-footer {
    margin-top: 16px;
    display: flex;
    gap: 8px;
  }
  &__title {
    margin-bottom: 16px;
  }
}

.button {
  border: none;
  display: flex;
  gap: 8px;
  background-color: $primary-dark;
  padding: 16px 24px;
  font-weight: $medium-weight;
  font-size: $base-size;
  border-radius: 24px;
  color: #ffffff;
  transition: ease-in 0.12s;
  &:active {
    background-color: $primary-dark-2;
  }
  &--secondary {
    color: $accent;
    background-color: $accent-light-2;
    &:active {
      background-color: $accent-light;
    }
  }
  &--tertiary {
    color: $accent;
    background-color: $accent-light-4;
    &:active {
      background-color: $accent-light-3;
    }
  }
}
.navigation {
  display: flex;

  gap: 52px;
  justify-content: center;
  padding: 16px 64px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  background-color: $primary;
  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 24px;
    border-radius: 24px;
  }
  &--item-current {
    background-color: $primary-dark;
    font-weight: $title-weight;
    color: #ffffff;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.