:root {
  --primary: #ffd23f;
  --secondary: #ee4266;
  --text: #f3fcf0;
  --bg: #540d6e;
  --dark: #1f271b;
}

@font-face {
  font-family: "Tomkin";
  src: url("../css/fonts/tomkin.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

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

body {
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.tomkin {
  font-family: "Tomkin", sans-serif;
}

.times-roman {
  font-family: "Times New Roman", Times, serif;
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in-top {
  animation: fadeInTop 0.8s ease-out forwards;
}
.fade-in-bottom {
  animation: fadeInBottom 0.8s ease-out forwards;
}
.fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
}

.hex-thumb {
  width: 80px;
  height: 70px;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background-color: #e5e7eb;
  overflow: hidden;
}
.hex-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-thumb-green::-webkit-slider-thumb {
  appearance: none;
  height: 16px;
  width: 16px;
  background: #16a34a;
  border-radius: 9999px;
  cursor: pointer;
}

.slider-thumb-green::-moz-range-thumb {
  height: 16px;
  width: 16px;
  background: #16a34a;
  border-radius: 9999px;
  cursor: pointer;
}