body {
  margin: 0; /* Remove default margin */
  height: 100vh; /* Full viewport height */
  background-image: url('img1.jpg');
  background-size: cover; /* Fill without distortion */
  background-repeat: no-repeat;
  background-position: center;
  font-family: "Segoe UI", sans-serif;
}

/* Windows 7-style taskbar */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;

  /* Transparent bluish gradient for Aero glass look */
  background: linear-gradient(
    rgba(135, 206, 255, 0.35),
    rgba(70, 130, 180, 0.35)
  );
  background-color: rgba(70, 130, 180, 0.3); /* fallback color */

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari / older Chrome */

  /* Subtle top highlight */
  border-top: 1px solid rgba(255, 255, 255, 0.4);

  /* Slight shadow above the taskbar */
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;
}

/* Start button circle */
.start-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: url('windows-7-icon-png-29.png') center/contain no-repeat;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.start-button:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Taskbar icons row */
.taskbar-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Each icon */
.taskbar-icon {
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: inline-block; /* so size applies to <a> */
}

.taskbar-icon:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Container for all desktop icons */
.desktop-icons {
  position: fixed;      /* stays in top-left */
  top: 20px;            /* distance from top */
  left: 20px;           /* distance from left */
  display: flex;
  flex-direction: column;
  gap: 20px;            /* space between icons */
  z-index: 10;          /* on top of wallpaper */
}

/* Each icon (cube shape) */
.desktop-icon {
  width: 64px;          /* cube width */
  height: 64px;         /* cube height */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.05); /* faint glassy background */
  border: 0px solid rgba(255, 255, 255, 0.2);  /* subtle border */
  border-radius: 6px;   /* slightly rounded corners */
  backdrop-filter: blur(4px); /* Aero-like effect */
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Hover effect */
.desktop-icon:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}






