/* Define OtherHand font family */
@font-face {
  font-family: "OtherHand";
  src: url("/assets/fonts/OtherHand/OtherHand.otf") format("opentype"),
    url("/assets/fonts/OtherHand/OtherHand-Medium.otf") format("opentype"),
    url("/assets/fonts/OtherHand/OtherHand-Alt.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* Define Inter font family */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter/Inter-Regular.otf") format("opentype"),
    url("/assets/fonts/Inter/Inter-Bold.otf") format("opentype"),
    url("/assets/fonts/Inter/Inter-Italic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* Define Playpen Sans font family */
@font-face {
  font-family: "Playpen Sans";
  src: url("/assets/fonts/PlaypenSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

/* Define Barrio font family */
@font-face {
  font-family: "Barrio";
  src: url("/assets/fonts/Barrio-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Example usage */
body {
  font-family: "OtherHand", "Inter", sans-serif;
}

.story-button {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease; /* Smooth transition */
}

.story-button.active {
  transform: scale(1.1); /* Scale up the active button */
}