:root {
  --Absurd-title-font: "Merriweather", serif;
  --Absurd-title-font2: "Poppins", serif;
  --Absurd-body-font: "Open Sans", serif;
}

/*Absurd*/
@media (max-width: 500px) {
  .reverse-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

body {
  font-family: var(--Absurd-body-font);
  min-height: 100vh;
}

.titled {
  font-family: var(--Absurd-title-font2) !important;
  /* font-size: 3.5rem !important; */
  font-weight: 600 !important;
  /* line-height: 1.1 !important; */
}
.titled.smaller {
  font-size: 1.25rem !important;
}
.titled.yellow {
  color: rgb(255, 196, 0);
}

.subtitled {
  font-family: var(--Absurd-title-font2) !important;
  /* font-size: 1.5rem !important; */
  font-weight: 400 !important;
  /* line-height: 1.25 !important; */
}
/*END Absurd*/

/* Custom*/
nav * {
  caret-color: transparent;
}

.navbar.is-white .navbar-item:focus {
  background: white !important;
}

.line-15 {
  line-height: 1.5;
}

.font-weight-500 {
  font-weight: 500 !important;
}

.social {
  position: fixed;
  top: 50%;
  right: -100px; /* Start off-screen */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  padding: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: right 0.4s ease-in-out;
  z-index: 99;
}
.social a {
  margin-bottom: 0.2rem;
}
.social img {
  width: 1.5em;
  transition: transform 0.3s ease-in-out;
}
.social img:hover {
  transform: scale(1.1);
}

.article img {
  max-height: 50vh;
}

.article h1 {
  text-align: center;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  font-family: var(--Absurd-title-font2) !important;
}

.card.is-clickable {
  transition: transform 0.2s ease-in-out;
}
.card.is-clickable:hover {
  transform: translateY(-2px);
}

.columns.is-desktop .column {
  max-width: 360px;
}

.max-400 {
  max-width: 400px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* Smaller font size for smaller screens */
  }

  .reverse-columns > div {
    margin: auto;
  }

  .columns.is-desktop .column {
    margin: auto;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 12px; /* Even smaller font size for mobile devices */
  }
}
/*END Custom*/