.hero-image {
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 90%, transparent);
}

.solid-bg-style {
    background-color: var(--bg_color_primary);
}

.gradient-bg-style {
  background-image: linear-gradient(180deg, var(--bg_color_primary) 25%, var(--bg_color_secondary));
}

.zigzag-bg-style {
  /* background-color: #fefefe; */
  background-image: linear-gradient(135deg, var(--bg_color_secondary) 25%, transparent 25%),
    linear-gradient(225deg, var(--bg_color_secondary) 25%, transparent 25%),
    linear-gradient(45deg, var(--bg_color_secondary) 25%, transparent 25%),
    linear-gradient(315deg, var(--bg_color_secondary) 25%, var(--bg_color_primary) 25%);
  background-position:
    64px 0,
    64px 0,
    0 0,
    0 0;
  background-size: 128px 128px;
  background-repeat: repeat;
}

.polkadots-bg-style {
  background-image: radial-gradient(var(--bg_color_secondary) 20%, transparent 20%),
    radial-gradient(var(--bg_color_secondary) 20%, transparent 20%);
  background-color: var(--bg_color_primary);
  background-position:
    0 0,
    50px 50px;
  background-size: 100px 100px;
  background-repeat: repeat;
}

.checkerboard-bg-style {
  background-color: var(--bg_color_primary);
  background-image: repeating-linear-gradient(
      45deg,
      var(--bg_color_secondary) 25%,
      transparent 25%,
      transparent 75%,
      var(--bg_color_secondary) 75%,
      var(--bg_color_secondary)
    ),
    repeating-linear-gradient(
      45deg,
      var(--bg_color_secondary) 25%,
      var(--bg_color_primary) 25%,
      var(--bg_color_primary) 75%,
      var(--bg_color_secondary) 75%,
      var(--bg_color_secondary)
    );
  background-position:
    0 0,
    48px 48px;
  background-size: 96px 96px;
}

.font-style {
    color: var(--page_text_color);
    font-family: var(--profile_font);
}

.border-style {
  border-color: var(--page_text_color);
}

.button-solid {
  background-color: var(--button_color);
  color: var(--button_text_color);
}

.button-solid.shadow-none:hover {
    background-color: var(--button_text_color);
    color: var(--button_color);
}

.button-outline{
    background-color: transparent;
    color: var(--button_text_color);
    border-color: var(--button_color);
}

.button-outline:hover{
    background-color: var(--button_color);
    color: var(--button_text_color);
}

.shadow-soft{
    box-shadow: 0 10px 15px -3px var(--button_shadow_color);
}

.shadow-soft:hover{
    box-shadow: 0 20px 25px -5px var(--button_shadow_color);
}

.shadow-hard{
    box-shadow: 4px 4px 0px 0px var(--button_shadow_color);
    
}

.shadow-hard:hover{
    box-shadow: 0px 0px 0px 0px var(--button_shadow_color);
    transform: translate(4px, 4px);
    
}

.button-solid.shadow-hard{
  border-color: var(--button_shadow_color);
}

/* 
.button-solid {
    background-color: var(--button_color);
    outline-style: solid;
    outline-color: var(--button_color);
    border-width: 3px;
    border-color: var(--button_color);
    color: var(--button_text_color);
}

.button-solid.shadow-soft:hover {
    background-color: var(--button_text_color);
    outline-style: solid;
    outline-color: var(--button_text_color);
    border-width: 3px;
    border-color: var(--button_text_color);
    color: var(--button_color);
}

.button-solid.shadow-none:hover {
    background-color: var(--button_text_color);
    outline-style: solid;
    outline-color: var(--button_text_color);
    border-width: 3px;
    border-color: var(--button_text_color);
    color: var(--button_color);
}

.button-outline{
    background-color: transparent;
    outline-style: solid;
    outline-color: var(--button_color);
    border-width: 3px;
    border-color: var(--button_color);
    color: var(--button_color);
}

.button-outline:hover{
    background-color: var(--button_color);
    outline-style: solid;
    outline-color: var(--button_color);
    border-width: 3px;
    border-color: var(--button_color);
    color: var(--button_text_color);
}

.shadow-soft{
    box-shadow: 0 10px 15px -3px var(--button_shadow_color);
}

.shadow-soft:hover{
    box-shadow: 0 20px 25px -5px var(--button_shadow_color);
}

.shadow-hard{
    outline-style: solid; */
    /* outline-color: var(--button_shadow_color);
    border-width: 3px;
    border-color: var(--button_shadow_color);
    box-shadow: 8px 8px 0px 0px var(--button_shadow_color);
}

.shadow-hard:hover{
    outline-style: solid;
    box-shadow: 4px 4px 0px 0px var(--button_shadow_color);
    transform: translateX(5px);
    transform: translate(4px, 4px);
    transform: translateY(5px);
}
*/

.wobble-attention {
    animation: wobble 2.8s both infinite;
}

/* Keyframes for the wobble animation */

@keyframes wobble {
  0% {
    transform: translateX(0%);
    transform-origin: 50%50%;
  }
  7.5% {

    transform: rotate(-6deg);
  }
  15% {
    transform: rotate(6deg);
  }
  22.5% {
    transform: rotate(-3.6deg);
  }
  30% {
    transform: rotate(2.4deg);
  }
  37.5% {
    transform: rotate(-1.2deg);
  }
  40% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}