@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Manrope:wght@200..800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url("coffee-bean.png"), default;
}

:root {
  --bg: #f5ecde;
  --white: #fffaf1;
  --border-light: #e7d6bd;

  --text-dark: #3b2a20;
  --text-medium: #6b5a4d;
  --text-light: #9a8674;
  --underline: #e9b48e;

  --button-dark: #8b3e1f; /* for button border */
  --button-light: #b1542f;
}

body {
  background-color: var(--bg);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem;
  margin: auto;
  max-width: 650px;
  gap: 1.75rem;
}

.hero-top {
  text-align: center;
}

h1 {
  font-family: "Fraunces", serif;
  font-size: 36px;
  color: var(--text-dark);
}

p,
a,
button {
  font-family: "Manrope", sans-serif;
}

.normal-btn {
  margin-top: 1rem;
  border: 1px solid var(--button-dark);
  background-color: var(--button-light);
  padding: 16px;
  border-radius: 48px;
  cursor: pointer;
  color: white;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.normal-btn:hover {
  background: linear-gradient(180deg, #bc6d4e, var(--button-light));
  transform: translateY(-3%);
  transition: ease-in-out 0.1s;
}

.normal-btn:active {
  box-shadow: 0px 3px 6px #0006 inset;
}

.top {
  display: flex;
  gap: 8px;
}

/* Options */
.options {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.open-options,
.options p {
  color: var(--text-medium);
  text-decoration: underline var(--underline);
  text-underline-offset: 4px;
}

.open-options {
  margin-top: -1rem;
  margin-bottom: 1rem;
}

.options p {
  color: var(--button-dark);
  font-size: 14px;
  font-weight: 600;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

#category-selector button {
  color: var(--text-medium);
  font-weight: 600;
}

.selector-btn {
  display: flex;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  background: transparent;
  border-radius: 99px; /* high px to ensure all divs have rounded corner" */
  cursor: pointer;
  color: var(--text-light);
  border: 1px solid var(--border-light);
  font-size: 13px;
  transition: 0.2s ease-in-out;
}

.selector-btn:hover,
#category-selector button:hover {
  color: var(--text-dark);
  background-color: var(--white);
}

.selector-btn:active {
  color: var(--white);
  background-color: var(--button-dark);
}

.active {
  background-color: var(--button-dark);
  color: var(--white) !important;
}

/* article designs */
.article-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--white);
  border: 1px solid var(--border-light);
  width: 100%;
  border-radius: 12px;
  padding: 24px;
}

.article-container h1 {
  margin-bottom: 1rem;
}

.article-container p {
  margin-bottom: 1rem;
  color: var(--text-medium);
  font-family: "Fraunces", serif;
}

#article-source,
#date {
  color: var(--text-light);
  font-family: "Manrope", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
}

.open-buttons {
  display: flex;
  gap: 12px;
}

#open-article {
  width: fit-content;
}

#open-source {
  width: fit-content;
}

/* footer section*/
.footer {
  display: flex;
}

.footer-github {
  background-color: var(--button-dark);
  color: var(--bg);
  border-radius: 80px;
  padding: 20px;
  cursor: pointer;
}