:root {
  --white: oklch(100% 0.00011 271.152);
  --blue: oklch(26.759% 0.07726 269.333);
  --blue-gradient-4: oklch(26.759% 0.07726 269.333 / 0.04);
  --gray-gradient-60: oklch(93.403% 0.00011 271.152 / 0.6);
  --purple: oklch(58.049% 0.23735 282.32);
  --purple-gradient-60: oklch(85.487% 0.07769 291.193 / 0.6);
  --purple-light: oklch(85.487% 0.07769 291.193);
  --purple-lighter: oklch(94.289% 0.02974 292.017);
  --graphite: oklch(59.627% 0.00331 264.676);
  --lavastone: oklch(37.663% 0.00217 324.698);
  --lavender: oklch(69.92% 0.02198 279.742);
  --marble: oklch(84.25% 0.00581 129.115);
  --sand: oklch(73.219% 0.01277 67.483);
  --travertine: oklch(82.133% 0.03093 73.793);
  --obsidian: oklch(27.024% 0.00737 285.844);
}

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

html,
body {
  font-size: 16px;
}

body {
  position: relative;
  margin: 0 auto;
  max-width: 800px;
  line-height: 1.5;
  background-color: var(--purple-lighter);
  color: var(--blue);
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, 3.5vw, 1.375rem);
  font-weight: 600;
}

h3 {
  margin-bottom: 0;
  font-size: clamp(1.125rem, 3.5vw, 1.25rem);
  font-weight: 600;
}

h4 {
  margin-block: .75rem;
  font-size: 1rem;
  font-weight: 500;
}

ul {
  list-style: none;
  margin-top: .75rem;
}

li {
  margin-top: .25rem;
}

p {
  margin-bottom: 0.75rem;
}

li > span {
  color: var(--purple);
}

header {
  position: sticky;
  top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem;
  padding: 1rem 2rem;
  background-color: var(--gray-gradient-60);
  background-color: var(--purple-gradient-60);
  border-radius: 3rem;
}

.logo {
  display: flex;
}

.logo svg {
  display: block;
  height: 2rem;
}

.logo path {
  fill: var(--blue);
}

.logo h1 {
  margin-left: .5rem;
  line-height: 2rem;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.row p {
  margin-bottom: .25rem;
}

.price {
  display: inline-block;
  padding: .5rem 1rem;
  min-width: 5rem;
  background-color: var(--purple-light);
  border-radius: 3rem;
  font-size: .875rem;
  font-weight: 500;
}

.price-0 {
  background-color: var(--purple-gradient-60);
}

.capsule {
  padding: 1.5rem;
  border-radius: 3rem;
  text-align: center;
}

.capsule .row:last-child {
  margin-bottom: 0;
}

.table {
  margin: 2rem;
  padding: 2rem;
  overflow: hidden;
  background-color: var(--white);
  border-radius: 3rem;
}

.table .capsule:nth-child(odd) {
  background-color: var(--blue-gradient-4);
}

.colors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-block: .75rem;
}

.color {
  display: flex;
  align-items: center;
}

.color::before {
  content: "";
  display: block;
  margin-right: 0.5rem;
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.color-graphite::before {
  background-color: var(--graphite);
}

.color-lavastone::before {
  background-color: var(--lavastone);
}

.color-lavender::before {
  background-color: var(--lavender);
}

.color-marble::before {
  background-color: var(--marble);
}

.color-sand::before {
  background-color: var(--sand);
}

.color-obsidian::before {
  background-color: var(--obsidian);
}

.color-travertine::before {
  background-color: var(--travertine);
}

.color-travertine-obsidian::before {
  background: linear-gradient(180deg, var(--travertine) 50%, var(--obsidian) 50%);
}

.capsule.info {
  font-size: .75rem;
}

.info p {
  margin-bottom: .25rem;
}

.info p:last-child {
  margin-bottom: 0;
}

.info span {
  color: var(--purple);
}

@media (max-width: 600px) {
  header {
    margin: 1rem;
    padding: .5rem 1rem;
    justify-content: flex-start;
  }
  .logo svg {
    height: 1.25rem;
  }
  .logo h1 {
    display: none;
    line-height: 1.25rem;
  }
  .table {
    margin: 1rem;
    padding: 1rem;
  }
  .colors {
    flex-wrap: wrap;
  }
}