@import url("https://unpkg.com/@catppuccin/palette/css/catppuccin.css");

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

html {
  color: light-dark(var(--ctp-latte-text), var(--ctp-mocha-text));
  color-scheme: light dark;
  font-family: sans-serif;
  font-size: clamp(1rem, 0.861rem + 0.696vw, 1.2rem);
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

header,
main,
footer {
  display: flex;
  justify-content: center;
}

.container {
  width: 1200px;
}

header {
  background: light-dark(var(--ctp-latte-mantle), var(--ctp-mocha-mantle));
}

header .container {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
}

header h1 {
  color: light-dark(var(--ctp-latte-subtext0), var(--ctp-mocha-subtext0));
}

.hamburger {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.patty {
  background: light-dark(var(--ctp-latte-subtext0), var(--ctp-mocha-subtext0));
  width: 1.5rem;
  height: 0.2rem;
}

main {
  background: linear-gradient(
    120deg,
    var(--ctp-latte-lavender),
    var(--ctp-latte-blue)
  );
  flex-grow: 1;
  padding: 1rem 0;
}

@media (prefers-color-scheme: dark) {
  main {
    background: linear-gradient(
      120deg,
      var(--ctp-mocha-lavender),
      var(--ctp-mocha-blue)
    );
  }
}

main .container {
  display: flex;
  flex-direction: column;
}

.title {
  text-align: center;
  padding: 1rem;
}

main h1,
main h2 {
  color: light-dark(var(--ctp-mocha-mauve), var(--ctp-latte-mauve));
}

main h1 {
  font-size: clamp(2.25rem, 1.467rem + 3.913vw, 4.5rem);
}

.title p {
  color: light-dark(var(--ctp-mocha-text), var(--ctp-latte-text));
  font-size: clamp(1rem, 0.861rem + 0.696vw, 1.4rem);
}

.card-list {
  display: flex;
  flex-direction: row;
  gap: 3em;
  padding: 0 1rem;
}

@media screen and (max-width: 768px) {
  .card-list {
    flex-direction: column;
    gap: 1em;
  }
}

.card-head,
.card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  padding: 1rem;
}

.card-head {
  margin-top: -5rem;
  position: relative;
  top: 5rem;
  transform: translateY(1rem);
}

.card-head img {
  align-self: center;
  width: 50%;
}

.card-head .shadow {
  align-self: center;
  background: radial-gradient(
    50% 50%,
    rgb(from var(--ctp-mocha-crust) r g b / 0.1),
    rgb(0, 0, 0, 0)
  );
  height: 2rem;
  width: 7rem;
}

@media (prefers-color-scheme: dark) {
  .card-head .shadow {
    background: radial-gradient(
      50% 50%,
      rgb(from var(--ctp-latte-crust) r g b / 0.1),
      rgb(0, 0, 0, 0)
    );
  }
}

.card-body {
  background: light-dark(var(--ctp-latte-base), var(--ctp-mocha-base));
  border-radius: 1rem;
  box-shadow:
    0 1px 1px hsl(0deg 0% 0% / 0.075),
    0 2px 2px hsl(0deg 0% 0% / 0.075),
    0 4px 4px hsl(0deg 0% 0% / 0.075),
    0 8px 8px hsl(0deg 0% 0% / 0.075),
    0 16px 16px hsl(0deg 0% 0% / 0.075);
  color: light-dark(var(--ctp-latte-subtext0), var(--ctp-mocha-subtext0));
  padding-top: 5rem;
}

.card-body h2 {
  align-self: center;
}

.card-body button {
  align-self: center;
  background: linear-gradient(
    180deg,
    var(--ctp-latte-sapphire),
    var(--ctp-latte-mauve)
  );
  border: none;
  border-radius: 1rem;
  color: light-dark(var(--ctp-mocha-text), var(--ctp-latte-text));
  padding: 0.5rem 1rem;
}

.card-body button:hover {
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .card-body button {
    background: linear-gradient(
      180deg,
      var(--ctp-mocha-sapphire),
      var(--ctp-mocha-mauve)
    );
  }
}

footer {
  background: light-dark(var(--ctp-latte-crust), var(--ctp-mocha-crust));
  position: sticky;
  top: 100%;
}

footer .container {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 3rem;
}