@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,500;0,6..12,600;0,6..12,700;1,6..12,400&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

* {
  padding: 0px;
  margin: 0px;
}

html {
  color: var(--tx);
  font-family: "Nunito Sans", sans-serif;
  background: var(--bg);
  font-size: 1.1rem;
  padding: 0px 20px;
}

body {
  margin: 100px auto 100px auto;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

h1,
h2,
h3 {
  font-family: "Nunito", sans-serif;
}

a {
  text-decoration: underline;
  color: var(--tx);
  transition: transform 0.1s ease;
  text-decoration-color: var(--tx-2);
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--tx-2);
  color: var(--tx-2);
}

a:active {
  transform: translateY(1px);
}

.content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.content h1 {
  font-size: 2rem;
}

.content img {
  width: 100%;
  border-radius: 0.5rem;
}

mark {
  background-color: #fff5c3;
  color: #634700;
  padding: 0px 0px;
}

article {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  line-height: 1.5rem;
}

blockquote {
  border-left: 3px solid var(--ui);
  padding-left: 1rem;
  margin-left: 1rem;
  max-width: 70%;
}

.badge {
  background-color: var(--bg-2);
  color: var(--tx-2);
  padding: 2px 6px;
  font-size: 0.6rem;
  border-radius: 12px;
}

.star-rating .active {
  color: var(--tx);
}

.star-rating .gold {
  color: gold !important;
}

.star-rating .inactive {
  color: var(--bg-3);
}

.title-subtitle {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 20px;
}

.title-subtitle span {
  font-size: 1.2rem;
  color: var(--tx-2);
}

/* Lists */
ul,
ol {
  padding-left: 0; /* Removes the default padding */
  margin-left: 0; /* Removes the default margin */
  /* list-style-position: inside; */
  margin-left: 2rem;
}

ul li::marker,
ol li::marker {
  display: inline-block;
  color: var(--tx-3);
}

ul li,
ol li {
  margin-bottom: 0.4rem;
}

ul li:last-child,
ol li:last-child {
  margin-bottom: 0rem;
}

pre {
  padding: 1.5rem;
  border-radius: 16px;
  overflow: scroll;
  font-size: 0.8rem;
  line-height: 1.5;
}

:root {
  --bg: rgb(255, 252, 240);
  --bg-2: rgb(247, 243, 227);
  --bg-3: rgb(232, 228, 210);

  --ui: rgb(230, 228, 217);
  --ui-2: rgb(218, 216, 206);
  --ui-3: rgb(206, 205, 195);

  --tx: rgb(16, 15, 15);
  --tx-2: rgb(111, 110, 105);
  --tx-3: rgb(183, 181, 172);

  --blue-2: rgb(225, 239, 247);
  --blue-3: rgb(194, 205, 220);
  --blue-6: rgb(9, 44, 92);

  --shadow-color: 45deg 30% 74%;
  --shadow-elevation-low: 0.5px 1px 1.1px hsl(var(--shadow-color) / 0.2),
    0.6px 2px 1.3px -1.2px hsl(var(--shadow-color) / 0.2),
    1px 4px 2.6px -2.5px hsl(var(--shadow-color) / 0.2);

  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.21),
    0.7px 1.4px 1.8px -0.8px hsl(var(--shadow-color) / 0.21),
    1.7px 3.3px 4.2px -1.7px hsl(var(--shadow-color) / 0.21),
    4px 8px 10.1px -2.5px hsl(var(--shadow-color) / 0.21);
  --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.2),
    1px 1.9px 2.4px -0.4px hsl(var(--shadow-color) / 0.2),
    1.7px 3.4px 4.3px -0.7px hsl(var(--shadow-color) / 0.2),
    2.8px 5.5px 6.9px -1.1px hsl(var(--shadow-color) / 0.2),
    4.4px 8.7px 11px -1.4px hsl(var(--shadow-color) / 0.2),
    6.8px 13.5px 17px -1.8px hsl(var(--shadow-color) / 0.2),
    10.2px 20.4px 25.7px -2.1px hsl(var(--shadow-color) / 0.2),
    15px 30px 37.7px -2.5px hsl(var(--shadow-color) / 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: rgb(16, 15, 15);
    --bg-2: rgb(30, 30, 29);
    --bg-3: rgb(52, 52, 48);

    --ui: rgb(40, 39, 38);
    --ui-2: rgb(52, 51, 49);
    --ui-3: rgb(64, 62, 60);

    --tx: rgb(206, 205, 195);
    --tx-2: rgb(135, 133, 128);
    --tx-3: rgb(87, 86, 83);

    --blue-2: rgb(9, 24, 40);
    --blue-3: rgb(32, 51, 77);
    --blue-6: rgb(164, 184, 209);

    --shadow-color: 0deg 0% 1%;
    --shadow-elevation-low: 0.5px 0.7px 1.1px hsl(var(--shadow-color) / 0.2),
      0.6px 0.9px 1.3px -1.2px hsl(var(--shadow-color) / 0.2),
      1px 1.8px 2.6px -2.5px hsl(var(--shadow-color) / 0.2);
    --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.21),
      0.7px 1.4px 1.8px -0.8px hsl(var(--shadow-color) / 0.21),
      1.7px 3.3px 4.2px -1.7px hsl(var(--shadow-color) / 0.21),
      4px 8px 10.1px -2.5px hsl(var(--shadow-color) / 0.21);
    --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.2),
      1px 1.9px 2.4px -0.4px hsl(var(--shadow-color) / 0.2),
      1.7px 3.4px 4.3px -0.7px hsl(var(--shadow-color) / 0.2),
      2.8px 5.5px 6.9px -1.1px hsl(var(--shadow-color) / 0.2),
      4.4px 8.7px 11px -1.4px hsl(var(--shadow-color) / 0.2),
      6.8px 13.5px 17px -1.8px hsl(var(--shadow-color) / 0.2),
      10.2px 20.4px 25.7px -2.1px hsl(var(--shadow-color) / 0.2),
      15px 30px 37.7px -2.5px hsl(var(--shadow-color) / 0.2);
  }

  mark {
    background-color: #2a2300;
    color: #fff5c3;
    padding: 0px 0px;
  }
}