/* FONTS USED */
@font-face {
  font-family: "Figtree";
  src: url(/assets/fonts/static/Figtree-Medium.ttf) format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Figtree";
  src: url(/assets/fonts/static/Figtree-ExtraBold.ttf) format("truetype");
  font-weight: 800;
}

:root {
  --yellow: hsl(47, 88%, 63%);
  --white: hsl(0, 0%, 100%);
  --gray-500: hsl(0, 0%, 42%);
  --gray-950: hsl(0, 0%, 7%);
  --space-300: 24px;
  --space-150: 12px;
  --space-100: 8px;
  --space-50: 4px;
}

/* Box sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  max-width: 1440px;
  font-family: "Figtree", sans-serif;
  background-color: var(--yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

img {
  display: block;
  max-width: 100%;
}

/* UTILITY CLASSES */

/* TYPOGRAPHY STYLES */
.text-preset-1 {
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 800;
}
.text-preset-2 {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 500;
}
.text-preset-3 {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 500;
}
.text-preset-3-bold {
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0px;
  font-weight: 800;
}

/* IMG RESPONSIVE CONTAINER*/
.img-container {
  width: min(336px, 100%);
}

/* CARD CONTAINER */
.card-container {
  margin: 1rem;
  max-width: 384px;
  height: auto;
  background-color: var(--white);
  border-radius: 1.25rem;
  border: 1px solid var(--gray-950);
  box-shadow: var(--space-100) var(--space-100) 0 var(--gray-950);
  padding: var(--space-300);
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.category {
  background-color: var(--yellow);
  color: var(--gray-950);
  border-radius: var(--space-50);
  padding: var(--space-150) var(--space-50);
  max-width: 5.125rem;
  text-align: center;
}

.text-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
}

h1.text-preset-1 {
  color: var(--gray-950);
}
h1.text-preset-1:hover {
  color: var(--yellow);
  cursor: pointer;
}

p.text-preset-2 {
  color: var(--gray-500);
}

.user-profile {
  display: flex;
  gap: var(--space-150);
}
.user-profile .img-container {
  max-width: 2rem;
}