:root {
  --bgcolor: #fcecd4; 
  --transparent: rgba(255, 255, 255, 0);

  --color-1: rgba(226, 151, 77, 0.6); 
  --color-2: rgba(220, 140, 60, 0.5);  
  --color-3: rgba(210, 130, 50, 0.4); 
  --color-4: rgba(200, 120, 45, 0.3);

  --size: 30em;
  --big-size: 60em; 
}

html {
  height: 100%;
}

body {
  background: 
    linear-gradient(90deg,
      var(--transparent) 93%,
      var(--color-3) 93%, var(--color-3) 100%
      ),
    linear-gradient(90deg,
      var(--color-2) 5%,
      var(--transparent) 5%, var(--transparent)
      ),
    linear-gradient(
      var(--color-2) 5%,
      var(--transparent) 5%, var(--transparent)
      ),
    linear-gradient(
      var(--transparent) 90%,
      var(--color-4) 90%, var(--color-4) 100%
      ),
    linear-gradient(
      var(--transparent) 35%,
      var(--color-1) 35%, var(--color-1) 45%,
      var(--transparent) 45%, var(--transparent) 55%,
      var(--color-2) 55%, var(--color-2) 70%,
      var(--transparent) 70%
      ),
    linear-gradient(90deg,
      var(--transparent) 35%,
      var(--color-1) 35%, var(--color-1) 45%,
      var(--transparent) 45%, var(--transparent) 55%,
      var(--color-2) 55%, var(--color-2) 70%,
      var(--transparent) 70%
      ),
    linear-gradient(
      var(--transparent) 55%,
      var(--color-1) 55%, var(--color-1) 60%,
      var(--transparent) 60%
      ),
    linear-gradient(90deg,
      var(--transparent) 55%,
      var(--color-1) 55%, var(--color-1) 60%,
      var(--transparent) 60%
      ),
    linear-gradient(
      var(--transparent) 20%,
      var(--color-3) 20%, var(--color-3) 80%,
      var(--transparent) 80%
      ),
    linear-gradient(90deg,
      var(--transparent) 20%,
      var(--color-4) 20%, var(--color-4) 80%,
      var(--transparent) 80%
      ),
    linear-gradient(
      var(--transparent) 10%,
      var(--color-2) 10%, var(--color-2) 35%,
      var(--transparent) 35%
      ),
    linear-gradient(90deg,
      var(--transparent) 10%,
      var(--color-2) 10%, var(--color-2) 35%,
      var(--transparent) 35%
      );
  background-size: var(--big-size) var(--big-size);
  background-color: var(--bgcolor);
  font: 10px/2 'Press Start 2P', monospace;
  image-rendering: pixelated;
  margin: 0;
  padding: 0;
}

.gallery {
  position: relative;
  width: 100vw;
  height: 80vh; 
  margin: 0 auto;
}

.cd-item { 
  position: absolute;
}

.cd-item a { 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #944c1f;
}

.cd-item img {
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
  transition: transform 0.3s ease;
}

.cd-item a:hover img {
  transform: scale(0.95);
  filter: drop-shadow(0 0 10px #f5b97f);
}

.cd-item p {
  margin-top: -1.8rem;
  margin-bottom: 0;
  font-size: 22px;
  text-align: center;
  image-rendering: pixelated;
  font-family: "Pixelify Sans", sans-serif;
}

.pixel-title {
  font-family: "Pixelify Sans", sans-serif;
  font-size: 3.5rem;
  color: #8b4f22;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: 1px;
  image-rendering: pixelated;
  margin-top: 2rem;
  margin-bottom: 0rem;
  text-shadow: 1px 1px 4px rgba(255,255,255,0.9);
}

.pixel-text {
  font-family: "Pixelify Sans", sans-serif;
  margin-top: -2rem;
  font-size: 18px;
  color: #b76533;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: 1px;
  image-rendering: pixelated;
}

.pixelify-sans {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.cd-1 { top: 1px; left: 50px; transform: rotate(-6deg); }
.cd-2 { top: -40px; left: 280px; transform: rotate(8deg); }
.cd-3 { top: 170px; left: 450px; transform: rotate(-10deg); }
.cd-4 { top: 300px; left: 150px; transform: rotate(-2deg); }
.cd-5 { top: 320px; left: 620px; transform: rotate(9deg); }
.cd-6 { top: 350px; left: 820px; transform: rotate(-9deg); }
.cd-7 { top: 80px; left: 680px; transform: rotate(-8deg); }
.cd-8 { top: 260px; left: 1080px; transform: rotate(6deg); }
.cd-9 { top: 40px; left: 1200px; transform: rotate(-11deg); }
.cd-10 { top: 10px; left: 950px; transform: rotate(7deg); }