:root {
    --color1: #F15B54;
    --color2: #000;
    --color3: #fff;
    --color4: #FFEDAB;
    --color5: #FAFFE8;
    --color6: #FFF1F1;
    --color7: #EAFEFF;
    --color8: #FFEFD3;
    --color9: #EBEEFB;
    --color10: #FBE5E4;
    --color11: #FDF8E7;

    --font-size-xsmall: 0.875rem;
    /* ~14px */
    --font-size-small: 1rem;
    /* ~16px */
    --font-size-medium: 1.5rem;
    /* ~24px */
    --font-size-large: 2rem;
    /* ~32px */
    --font-size-xlarge: 2.5rem;
    /* ~40px */
    --font-size-xxlarge: 4rem;
    /* ~64px */
    --font-size-xxxlarge: 4.6875rem;
    /* ~75px */

}
html {
    scroll-behavior: smooth !important;
}


.font-xsmall {
    font-size: var(--font-size-xsmall);

}

.font-small {
    font-size: var(--font-size-small);

}

.font-medium {
    font-size: var(--font-size-medium) !important;

}

.font-large {
    font-size: var(--font-size-large) !important;

}

.font-xlarge {
    font-size: var(--font-size-xlarge);

}

.font-xxlarge {
    font-size: var(--font-size-xxlarge);

}

.font-xxxlarge {
    font-size: var(--font-size-xxxlarge);

}

html {

    scroll-behavior: smooth;
}

::selection {
    background-color: var(--color1);
    color: var(--color3);
}

 
body {
    font-family: "Baloo 2", sans-serif;
}
h1 , h2 , h3 , h4 , h5 , h6 , span , p , blockquote , a {
    font-family: "Baloo 2", sans-serif !important;
}
.font-baloo-2{
    font-family: "Baloo 2", sans-serif !important; 

}
header nav a{
    font-family: "Baloo 2", sans-serif;
}

.color1 {
    color: var(--color1);
}

.color2 {
    color: var(--color2);
}

.color3 {
    color: var(--color3);
}

.color4 {
    color: var(--color4);
}

.color5 {
    color: var(--color5);
}

.color6 {
    color: var(--color6);
}

.color7 {
    color: var(--color7);
}

.color9 {
    color: var(--color9);
}
.color9 {
    color: var(--color10);
}
.color11 {
    color: var(--color11);
}

.bg-color1 {
    background-color: var(--color1);
}

.bg-color2 {
    background-color: var(--color2);
}

.bg-color3 {
    background-color: var(--color3);
}

.bg-color4 {
    background-color: var(--color4);
}
.bg-color5 {
    background-color: var(--color5);
}

.bg-color6 {
    background-color: var(--color6);
}

.bg-color7 {
    background-color: var(--color7);
}

.bg-color8 {
    background-color: var(--color8);
}
.bg-color9 {
    background-color: var(--color9);
}
.bg-color10 {
    background-color: var(--color10);
}
.bg-color11 {
    background-color: var(--color11);
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 1s ease-in-out forwards;
}

form::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: "Baloo 2", sans-serif;

  }
  form::-moz-placeholder { /* Firefox 19+ */
    font-family: "Baloo 2", sans-serif;

  }
  form:-ms-input-placeholder { /* IE 10+ */
    font-family: "Baloo 2", sans-serif;

  }
  form:-moz-placeholder { /* Firefox 18- */
    font-family: "Baloo 2", sans-serif;

  }
  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes shimmer-rotate {
    0% {
      opacity: 0.6;
      transform: rotate(0deg) scale(1);
    }
    50% {
      opacity: 1;
      transform: rotate(180deg) scale(1.1);
    }
    100% {
      opacity: 0.6;
      transform: rotate(360deg) scale(1);
    }
  }

  .shimmer-rotate-effect {
    animation: shimmer-rotate 5s infinite ease-in-out;
  }
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(20px); /* 20px aşağı */
    }
    100% {
      transform: translateY(0);
    }
  }

  .float-animation {
    animation: float 6s ease-in-out infinite;
  }
  #topButton {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color1);
    color: white;
    border: none;
    padding: 10px ;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: none; /* Başlangıçta gizli */
    transition: all 0.3s ease; /* Hover efektinin animasyonu */
  }

  /* Hover durumunda butonun rengini ve boyutunu değiştiriyoruz */
  #topButton:hover {
    background-color: var(--color4);
    transform: scale(1.1); /* Boyutu biraz büyütüyoruz */
  }