* {
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
}

html {
  scroll-behavior: smooth;
}

.container {
  width: 100%;
  max-width: 1200px;
  padding-inline: clamp(16px, 4vw, 40px);
}

a {
  text-decoration: none !important;
}

nav a {
  color: var(--pico-color-slate);
}

nav a.active {
  color: var(--pico-color-amber);
  font-weight: 900;
}

nav a:hover {
  color: var(--pico-color-pumpkin);
}

.logo {
  font-size: min(55px);
  font-weight: 900;
}

section {
  padding: max(5px);
}

h1 {
  font-size: min(50px);
  margin-top: 0px !important;
}

h5 {
  margin-top: 0px !important;
}

.banner {
  height: 30vh;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article {
  transition: 0.4s ease;
}

.article:hover {
  background: var(--pico-color-amber);
  cursor: pointer;
}

.article:hover,
.article:hover h1,
.article:hover p {
  color: var(--pico-color-slate-950) !important;
}

.hashtag-container {
  margin-top: 20px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pico-color-slate-800);
  color: var(--pico-color-slate-450);
  font-size: 14px;
  font-weight: 500;
  margin: 10px 10px 0px 0px;
  transition: 0.4s ease;
}

.chip:hover {
  background: var(--pico-color-slate-850);
  color: var(--pico-color-slate);
  cursor: pointer;
}

.inverted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  margin: 10px 5px 5px 0px;
  transition: 0.4s ease;
  /* background: var(--pico-color-amber) !important; */
  color: var(--pico-color-amber);
  border: 2px solid var(--pico-color-amber) !important;
}

.inverted:hover {
  background: var(--pico-color-amber) !important;
  color: var(--pico-color-slate-950);
  cursor: pointer;
}

.chart-container {
  height: 30vh;
}

[data-tooltip] {
  border-bottom: none !important;
  text-decoration: none !important;
}

/* WIDTH */
::-webkit-scrollbar {
  width: 15px;
}
/* TRACK */
::-webkit-scrollbar-track {
  background: var(--pico-color-slate-950);
}
/* HANDLE */
::-webkit-scrollbar-thumb {
  background: var(--pico-color-amber);

  border-radius: 999px;

  border: 2px solid var(--pico-color-slate-950);
}
/* HOVER */
::-webkit-scrollbar-thumb:hover {
  background: var(--pico-color-amber-300);
}

.box {
  padding: 0px !important;
}

.grid-container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 200px;
  gap: 1rem;
  grid-template-areas:
    "b1 b2 b2 b3"
    "b1 b4 b5 b5"
    "b6 b6 b7 b8"
    "b6 b6 b9 b9"
    "b10 b10 b10 b11"
    "b12 b13 b14 b11";
  overflow: hidden;
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: 1s ease;
}

.box img:hover {
  filter: grayscale(0%);
}

.large-section {
  padding-bottom: 80px;
}

.full-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.outline-article {
  background: none !important;
  border: none;
  box-shadow: none;
  width: 50%;
}

.gradient-text {
  background: linear-gradient(90deg, #d92662, #9236a4, #524ed2);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
  color: transparent;
  text-align: center;
  font-size: 3rem;
}

.capstone-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.capstone-item {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* =========================================
   EXTRA SMALL DEVICES
   Phones (<576px)
========================================= */
@media (max-width: 575.98px) {
  .outline-article {
    background: none !important;
    border: none;
    box-shadow: none;
    width: 90%;
  }

  .extra-space {
    height: 16px;
  }
}

/* =========================================
   SMALL DEVICES
   Phones Landscape / Small Tablets
   (576px and up)
========================================= */
@media (min-width: 576px) {
  .outline-article {
    background: none !important;
    border: none;
    box-shadow: none;
    width: 90%;
  }

  .extra-space {
    height: 16px;
  }
}

/* =========================================
   MEDIUM DEVICES
   Tablets (768px and up)
========================================= */
@media (min-width: 768px) {
  .outline-article {
    background: none !important;
    border: none;
    box-shadow: none;
    width: 70%;
  }

  .extra-space {
    height: 0px;
  }

  
}

/* =========================================
   LARGE DEVICES
   Laptops / Desktops (992px and up)
========================================= */
@media (min-width: 992px) {
  
}

/* =========================================
   EXTRA LARGE DEVICES
   Large Desktops (1200px and up)
========================================= */
@media (min-width: 1200px) {
  
}

/* =========================================
   XXL DEVICES
   Ultra Wide Screens (1400px and up)
========================================= */
@media (min-width: 1400px) {
  
}