/* Body */
body {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: black;
  color: white;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Header */
header h1 {
  font-size: 5rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 4px;
  margin: 40px 0 200px; /* space below header */
  text-transform: uppercase;
  color: white;
  text-shadow: none; /* removed shadow */
}



/* Image blocks */
.image-block {
  position: absolute;
  animation: float 6s ease-in-out infinite alternate; /* floating animation */
}.image-block {
  position: absolute;
  animation: float 6s ease-in-out infinite alternate;
}

.image-block img {
  width: 70%;
  border: 5px solid white;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 1.5rem;
  background: rgba(0,0,0,0.6);
  padding: 5px 15px;
  border-radius: 5px;
  color: white;
}


.image-block img {
  width: 70%;
  border: 5px solid white;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

/* Positions */
.left { left: 5%; }
.right { right: 5%; }

.large { top: 300px; transform: rotate(-2deg); z-index: 3; }
.medium { top: 600px; transform: rotate(3deg); z-index: 2; }
.small { top: 900px; transform: rotate(-5deg); z-index: 1; }

/* Caption */
.caption {
  position: absolute;
  bottom: 20px; 
  left: 20px;
  font-size: 1.5rem;
  background: rgba(0,0,0,0.6);
  padding: 5px 15px;
  border-radius: 5px;
  color: white;
}

/* Rotate effect */
.rotate { transform: rotate(-10deg); }

/* Floating animation */
@keyframes float {
  0% { transform: translateY(0) rotate(var(--rotate, 0deg)); }
  50% { transform: translateY(-20px) rotate(var(--rotate, 0deg)); }
  100% { transform: translateY(0) rotate(var(--rotate, 0deg)); }
}

/* Assign rotation for float animation */
#about { --rotate: -2deg; }
#projects { --rotate: 3deg; }
#contact { --rotate: -5deg; }