body {
  font-family: "Karla", sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* BACKGROUNDS */
.sbg-slate {
    background-color:#485665;
}

.sbg-green {
    background-color:#95a3a4;
}

.sbg-gray {
    background-color:#E9EDED;
}

.sbg-light {
    background-color:#F5F7F3;
}

.accordion-button:not(.collapsed),
.accordion-button:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
  background-color: #E9EDED;
}
.accordion-button::after {
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: #f05d5e;
  background-image: none !important;
}
.accordion-button.collapsed::after {
  background-color: var(--bs-gray-300);
}

/* TEXTS AND LINKS */
a {
    color:#f05d5e;
    text-decoration:none;
}
a:hover {
    color:#f05d5e;
    text-decoration:underline;
}
.stext-red {
    color:#f05d5e;
}
.stext-snow {
    color:#f8f8f8;
}

.stitle {
font-family: "Yeseva One", serif;
  font-weight: 400;
  font-style: normal;
}

.slink-light {
    color:#b7d1da;
}

.slink-light:hover {
    color:#f8f8f8;
}

/* BUTTONS */
.sbtn-lg {
  position: relative;
  padding: 15px 30px;
  font-size: 18px;
  color: #242325;
  font-weight: bold;
  background-color: #fff;
  border: none; /* REMOVE real border */
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  transition: color 0.5s ease-out;
}

.sbtn-lg::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #f05d5e;
  transition: height 0.2s ease-out;
  z-index: -1;
  text-decoration:none;
}

.sbtn-lg:hover::before {
  height: 100%;
  text-decoration:none;
}

.sbtn-lg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #f05d5e; /* NEW border */
  border-radius: 999px;
  pointer-events: none; /* So it doesn't block clicks */
  z-index: 2; /* Stays above everything else */
  text-decoration:none;
}

.sbtn-lg:hover {
  color: #fff;
  text-decoration:none;
}

/* SPECIFIC ITEMS */
iframe[src*="google.com/forms"] {
  width: 100%;
  padding:0;
}

/* ANIMATIONS */
.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}

/*
.yeseva-one-regular {
  font-family: "Yeseva One", serif;
  font-weight: 400;
  font-style: normal;
}
// <weight>: Use a value from 200 to 800
// <uniquifier>: Use a unique and descriptive class name

.karla-<uniquifier> {
  font-family: "Karla", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/