src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;


:root  {
  --background: 212 0% 95%;
  --foreground: 212 0% 10%;
  --card: 212 0% 90%;
  --card-foreground: 212 0% 15%;
  --popover: 212 0% 95%;
  --popover-foreground: 212 95% 10%;
  --primary: 212 27% 57%;
  --primary-foreground: 0 0% 100%;
  --secondary: 212 10% 70%;
  --secondary-foreground: 0 0% 0%;
  --muted: 174 10% 85%;
  --muted-foreground: 212 0% 40%;
  --accent: 174 10% 80%;
  --accent-foreground: 212 0% 15%;
  --destructive: 0 50% 50%;
  --destructive-foreground: 212 0% 90%;
  --border: 212 20% 54%;
  --input: 212 20% 50%;
  --ring: 212 27% 57%;
  --radius: 0.5rem;
}
.dark  {
  --background: 212 10% 10%;
  --foreground: 212 0% 90%;
  --card: 212 0% 10%;
  --card-foreground: 212 0% 90%;
  --popover: 212 10% 5%;
  --popover-foreground: 212 0% 90%;
  --primary: 212 27% 57%;
  --primary-foreground: 0 0% 100%;
  --secondary: 212 10% 20%;
  --secondary-foreground: 0 0% 100%;
  --muted: 174 10% 25%;
  --muted-foreground: 212 0% 60%;
  --accent: 174 10% 25%;
  --accent-foreground: 212 0% 90%;
  --destructive: 0 50% 50%;
  --destructive-foreground: 212 0% 90%;
  --border: 212 20% 50%;
  --input: 212 20% 50%;
  --ring: 212 27% 57%;
  --radius: 0.5rem;
}

@keyframes block1-animation {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}

@keyframes block2-animation {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}
.block1 {
  animation: block1-animation 1s ease-in-out infinite;
}

.block2 {
  animation: block2-animation 1s ease-in-out infinite;
}

