* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #FFFFFF; /* Clean white background */
  color: #333333; /* Neutral dark text */
}

.page {
  padding-bottom: 48px;
}

#sketch-frame {
  width: 100vw;
  height: 60vh;
  border: 0;
  display: block;
  background: #F0F0F0; /* Light gray for subtle contrast */
}

.controls {
  display: flex;
  justify-content: center;
  gap: 24px; /* Increased spacing between buttons */
  margin-top: 24px; /* More space above controls */
}

.nav-button {
  margin: 0;
  padding: 12px 24px;
  border: 1px solid #333333;
  background: transparent;
  color: #333333;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-button:hover {
  background: #333333;
  color: #FFFFFF;
}

#counter {
  margin: 12px 16px 32px;
  text-align: center;
  font-size: 16px;
  color: #666666; /* Softer gray for text */
}

.sketch-grid {
  width: min(1200px, calc(100vw - 64px)); /* Added more horizontal padding */
  margin: 32px auto; /* More space around the grid */
}

#grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Keep 3 items per row */
  gap: 32px; /* Increased gap between grid items */
}

.grid-item {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 1px solid #DDD; /* Softer border color */
  background: #F9F9F9; /* Light gray background for items */
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-item:hover {
  border-color: #333333;
  transform: scale(1.02); /* Slight zoom effect on hover */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.grid-item iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

@media (max-width: 800px) {
  #grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2 items per row on smaller screens */
  }
}

@media (max-width: 520px) {
  #grid-container {
    grid-template-columns: 1fr; /* 1 item per row on very small screens */
  }
}