<section class="parent">
  <nav class="tabset">
    <span>Stats</span>
    <span>Map</span>
    <span>Inventory</span>
  </nav>

  <main class="content">
    <ul class="inventory">
      <li>

        <h2>Weapons</h2>
        <ul>
          <li>Sword</li>
          <li>Bow</li>
          <li>Crossbow</li>
          <li>Dagger</li>
        </ul>
      </li>

      <li>
        <h2>Armor</h2>
        <ul>
          <li>Helmet</li>
          <li>Chestplate</li>
          <li>Gauntlets</li>
          <li>Boots</li>
        </ul>
      </li>
      <li>

        <h2>Consumables</h2>
        <ul>
          <li>Health Potion</li>
          <li>Mana Potion</li>
          <li>Elixir</li>
          <li>Food Rations</li>
        </ul>
      </li>

    </ul>
  </main>

  <div class="collectibles">
    <main class="content">
      <ul class="inventory">
        <li>

          <h2>Collectibles</h2>
          <ul>
            <li>Gold Statue</li>
            <li>Emerald Ring</li>
            <li>Ebony Key</li>
          </ul>
        </li>

      </ul>
    </main>

  </div>

  <a href="https://css-tricks.com/almanac/">For more info, visit the Wiki</a>

</section>

<footer>
  <h3>Save Data</h3>
  <ul>
    <li>Player: Red</li>
    <li>Time 14:20</li>
    <li>Collectibles: 4/10</li>
  </ul>
</footer>

@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
  color: #193039;
}

.parent > :not(.content) {
  color: #e24d28;
}

/* Aesthetic Changes */

:root {
  --spacing: 25px;
}

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

html {
  font-family: "Kanit", sans-serif;
  font-size: clamp(12px, 3.5vw, 18px);
}

body {
  background-color: #f9f1dc;
}

.parent {
  position: relative;

  display: flex;
  flex-flow: column;
  gap: var(--spacing);

  padding: var(--spacing);
  border: 1px solid black;

  &::before {
    content: ".parent";
    position: absolute;
    bottom: 0;
    right: 0;

    padding: 5px 10px;
    color: #000;

    background: repeating-linear-gradient(
      45deg,
      #e24d2833,
      #e24d2833 5px,
      #0000 5px,
      #0000 10px
    );
  }
}

.tabset {
  display: flex;
  gap: var(--spacing);

  font-weight: 500;

  span {
    cursor: pointer;
  }

  span:hover {
    transform: scale(1.05);
  }

  span:nth-child(3) {
    border-bottom: 3px solid #e24d28;
  }
}

.content {
  position: relative;

  border: 1px solid black;

  &::before {
    content: ".content";
    position: absolute;
    bottom: 0;
    right: 0;

    padding: 5px 10px;
    color: #000;

    background: repeating-linear-gradient(
      45deg,
      #e24d2833,
      #e24d2833 5px,
      #0000 5px,
      #0000 10px
    );
  }
}

.collectibles .content::before {
  content: ".collectibles .content";
}

.inventory {
  display: flex;
  flex-flow: row wrap;
  gap: calc(var(--spacing) * 3);
  padding: var(--spacing);
}

ul {
  list-style: none;
}

a {
  color: inherit;
  font-size: 0.9rem;
}

footer {
  padding: var(--spacing);

  text-align: right;
  font-size: 1.2rem;
}