@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  html {
    scroll-behavior: smooth;
  }
}

:root {
  --primary-color: #303486;
  /* --primary-color: #ffa500; */
}

* {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.text-theme {
  color: var(--primary-color);
}

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

.border-theme {
  border-color: var(--primary-color);
}

.metallic-button {
  font-size: 14px;
  padding: 10px 16px;
  font-weight: 400;
  border: none;
  outline: none;
  /* background: linear-gradient(
    45deg,
    color-mix(in srgb, var(--primary-color), black 40%) 5%,
    color-mix(in srgb, var(--primary-color), white 20%) 10%,
    color-mix(in srgb, var(--primary-color), white 10%) 30%,
    var(--primary-color) 50%,
    color-mix(in srgb, var(--primary-color), white 10%) 70%,
    color-mix(in srgb, var(--primary-color), white 20%) 80%,
    color-mix(in srgb, var(--primary-color), black 40%) 95%
  ); */
  background: linear-gradient(
    45deg,
    #1f2370 5%,
    #5a5fd6 10%,
    #3f44b5 30%,
    var(--primary-color) 50%,
    #3f44b5 70%,
    #5a5fd6 80%,
    #1f2370 95%
  );
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.metallic-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.5),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Entire scrollbar */

::-webkit-scrollbar {
  width: 12px;
  /* vertical scrollbar width */
  height: 5px;
  /* horizontal scrollbar height */
}

/* Scrollbar track */

::-webkit-scrollbar-track {
  background: #ffffff;
  /* track color */
  border-radius: 10px;
}

/* Scrollbar thumb */

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  /* thumb color */
  border-radius: 10px;
  border: 3px solid #f1f1f1;
  /* space around thumb */
}

/* Thumb on hover */

::-webkit-scrollbar-thumb:hover {
  background: #5a5fd6 10%;
  cursor: pointer;
}