/* FONTS */
body {
  font-family: "Lexend Deca", sans-serif;
  color: #565656;
}

h1,
h2,
h3,
h4,
h5,
a,
.navbar {
  font-family: "DM Mono", monospace;
  font-weight: 400;
}

h1 {
  font-size: 60px;
  letter-spacing: -3px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

h4 {
  font-size: 20px;
  letter-spacing: -1px;
  margin-bottom: 8px;
}

.white {
  color: white;
}

.grey {
  color: #bfbfbf;
}

.light-grey {
  color: #dddddd;
}

.graphite {
  background: #474747;
  color: white;
}

.dark_grey_text {
  color: #808080;
}

#desktop_navbar_logo {
  font-family: "Lexend Deca", sans-serif;
}

a {
  text-decoration: none;
  color: #565656;
}

a:hover {
  font-weight: 700;
}

.no_bold_on_hover:hover {
  font-weight: 400 !important;
}

.light_up_on_hover {
  transition: filter 0.3s ease; /* smooth effect */
}

.light_up_on_hover:hover {
  filter: brightness(1.1); /* increase brightness by 20% */
}

.bold {
  font-weight: 700;
}

.semibold {
  font-weight: 500;
}

.italic {
  font-style: italic;
}

.large {
  font-size: 24px;
}

.small {
  font-size: 16px;
}

.xlarge {
  font-size: 28px;
}

.emphasis {
  font-style: italic;
  font-family: "DM Mono", monospace;
}

.lexend {
  font-family: "Lexend Deca", sans-serif;
}

.gradient-text {
  font-weight: bold;
  background: linear-gradient(to right, #8e4ff9, #5b54b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 24px;
  }

  body,
  p {
    font-size: 14px;
  }
}