/* Define luxurious color palette */
:root {
  --primary-color: #6a0dad; /* Deep violet */
  --secondary-color: #ffb8b8; /* Soft pink */
  --tertiary-color: #242038; /* Dark plum */
  --quaternary-color: #ffd700; /* Gold */
}

/* General styling */
body,
table,
td,
button,
.mois,
.label {
  margin: 10px;
  padding: 15px;
  border-radius: 20px;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  transition: all 0.3s ease-in-out;
}

table {
  width: 100%;
  max-width: 1200px;
  background: linear-gradient(to bottom right, #f0f0f0, #e6e6e6);
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  margin: 30px auto;
  opacity: 0.95;
}

body {
  max-width: 1200px;
  background: linear-gradient(to bottom, #f8f8f8, #e6e6e6);
  box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.05);
  position: relative;
  margin: 0 auto;
}

button,
.mois,
.label {
  min-width: 200px;
  font-size: 20px;
}

/* Color variations */
.darkorange {
  background-color: rgba(255, 215, 0, 0.2);
}
.darkgreen {
  background-color: rgba(0, 100, 0, 0.2);
}

/* Form elements */
.user--input,
.user--input1,
.btn--chercher {
  min-width: 700px;
  font-size: 22px;
  background: linear-gradient(to bottom right, #f9f9f9, #ffffff);
  border: 2px solid var(--secondary-color);
}

/* Button styles */
button {
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--quaternary-color)
  );
  color: #ffffff;
  box-shadow: 0px 10px 20px rgba(106, 13, 173, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hover and focus effects */
button:hover,
button:active,
.mois:focus {
  background: linear-gradient(to right, #4b0082, #ffcc00);
}

.user--input:hover,
td:hover {
  background: linear-gradient(to bottom right, #f9f9f9, #f0f0f0);
}

/* Spinner animation */
.spinner {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 75%);
  width: auto;
  height: 450px;
  z-index: 9999;
  perspective: 2000px;
}

.spinner::before,
.spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -20px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  animation: spin 2s linear infinite,
    color-change 4s ease-in-out infinite alternate;
  transform-origin: center;
  box-shadow: 0 0 40px rgba(106, 13, 173, 0.5);
}

.spinner::after {
  width: 16px;
  height: 16px;
  margin: -16px;
  border: 4px solid transparent;
  border-top-color: var(--tertiary-color);
  border-bottom-color: var(--tertiary-color);
  animation-direction: reverse;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes color-change {
  0% {
    border-top-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
  }
  100% {
    border-top-color: var(--tertiary-color);
    border-bottom-color: var(--tertiary-color);
  }
}

/* Glitch effect */
@keyframes glitch {
  0% {
    transform: translate3d(-50%, -50%, 0) skew(0deg);
    opacity: 1;
  }
  20% {
    transform: translate3d(-55%, -45%, 0) skew(-45deg);
    opacity: 0.7;
  }
  40% {
    transform: translate3d(-45%, -55%, 0) skew(45deg);
    opacity: 0.4;
  }
  60% {
    transform: translate3d(-55%, -45%, 0) skew(-45deg);
    opacity: 0.7;
  }
  80% {
    transform: translate3d(-45%, -55%, 0) skew(45deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%, -50%, 0) skew(0deg);
    opacity: 1;
  }
}

/* Neon effect */
@keyframes neon {
  0% {
    filter: brightness(1) hue-rotate(0deg);
  }
  100% {
    filter: brightness(2) hue-rotate(360deg);
  }
}

/* Scale effect */
@keyframes scale {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1) rotateX(0deg) rotateY(0deg)
      rotateZ(0deg);
  }
  50% {
    transform: translate3d(-50%, -50%, 0) scale(1.2) rotateX(180deg)
      rotateY(180deg) rotateZ(180deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1) rotateX(360deg)
      rotateY(360deg) rotateZ(360deg);
  }
}

/* Fade animation */
@keyframes fade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}