@import url("https://fonts.cdnfonts.com/css/thegoodmonolith");

:root {
  --color-primary: #000000;
  --color-secondary: #000000;
  --color-gray-1: #1a1a1a;
  --color-gray-2: #222222;
  --color-gray-3: #2a2a2a;
  --color-gray-4: #333333;
  --color-gray-5: #3a3a3a;
  --color-gray-6: #444444;
  --color-gray-7: #4a4a4a;
  --color-gray-8: #555555;
  --card-width: 1200px;
  --card-height: 610px;
  --card-border-radius: 6px;
  --animation-duration-slow: 1.5s;
  --animation-duration-medium: 1s;
  --animation-duration-fast: 0.5s;
  --transition-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "TheGoodMonolith", monospace;
  color: var(--color-primary);
  background-color: #111111;
  font-weight: 600;
  width: 100%;
  overflow: hidden;
  /* Dotted background pattern */
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px
  );
  background-size: 11px 11px;
}

.carousel-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2500px;
}

.carousel-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.carousel-items.draggable {
  cursor: -webkit-grab;
  cursor: grab;
}

.carousel-items.draggable:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.carousel-item {
  position: absolute;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: var(--card-border-radius);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.card__number {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  z-index: 10;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.switch {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 32px;
  border-radius: 100px;
  z-index: 1000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.switch-button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.switch-button-current {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Indicator dot */
.indicator-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #f0f0f0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  top: 50%;
  transform: translateY(-50%);
}

.switch-button .indicator-dot {
  left: -8px;
}

.switch-button:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.switch-button:active {
  transform: translateY(0);
}

.switch-button .indicator-dot {
  display: none; /* Hide the indicator dots as they don't fit the new design */
}

@media screen and (max-height: 1000px) {
  :root {
    --card-width: 800px;
    --card-height: 497px;
  }
}

@media screen and (max-height: 800px) {
  :root {
    --card-width: 650px;
    --card-height: 400px;
  }
}