/* ------------------ GLOBAL ------------------ */
body {
  margin: 0;
  background: #000;
  font-family: "MS Sans Serif";
  overflow: hidden;
  color: #00ff9c;
}

/* CRT scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background: repeating-linear-gradient(
    rgba(0,255,150,0.07) 0px,
    rgba(0,0,0,0.08) 3px
  );
  mix-blend-mode: overlay;
}

/* Terminal intro screen */
#terminal {
  position: absolute;
  inset: 0;
  background: #000;
  padding: 40px;
  font-size: 18px;
  color: #00ff9c;
  text-shadow: 0 0 6px #00ff9c;
  overflow: hidden;
  white-space: pre-line;
  animation: flicker 0.15s infinite alternate;
}

.type { 
  border-right: 2px solid #00ff9c; 
  animation: caret .7s steps(1) infinite; 
}

@keyframes glowFlicker {
  0%   { text-shadow: 0 0 4px #00ff9c; }
  25%  { text-shadow: 0 0 6px #00ff9c, 0 0 2px #00ff9c; }
  50%  { text-shadow: 0 0 3px #00ff9c; }
  75%  { text-shadow: 0 0 5px #00ff9c, 0 0 1px #00ff9c; }
  100% { text-shadow: 0 0 4px #00ff9c; }
}

#terminal {
  animation: glowFlicker 0.2s infinite;
}

@keyframes flicker {
  0%   { opacity: 1; }
  50%  { opacity: 0.85; }
  100% { opacity: 0.95; }
  
}

/* Show windows after boot */
#desktop { display: none; }

/* ------------------ WINDOWS ------------------ */
.window { 
  position: absolute; 
  box-shadow: 0 0 15px #00ff9c; 
}

#win1 { width: 500px; 
top: 80px; left: 40%; 
transform: translateX(-60%); 
z-index: 1; }

#win2 { width: 300px; 
top: 10px; 
left: 60%; 
z-index: 4; }

#win3 { width: 280px; top: 
340px; left: 55%; transform: 
translateX(-20%); 
z-index: 2; }

#win4 { width: 400px; 
top: 400px; padding: 
10px; left: 75%; 
transform: 
translateX(-20%); 
z-index: 2; }

#win5 { width: 300px; 
top: 150px; left: 
13%; transform: 
translateX(-50%); 
z-index: 5; }

#win6 
{ width: 350px; 
top: 100px; 
left: 85%; 
transform: 
translateX(-50%); z-index: 5; }

.window {
  border: 4px solid;
  border-color: #c0c0c0 #404040 #404040 #c0c0c0; 
  box-shadow:
    0 0 0 2px #ececec inset,
    0 0 0 3px #808080 inset,
    0 0 0 4px #c0c0c0 inset;
}

.window-body {
  background: #001a0f;
  padding: 15px;
  color: #00ff9c;
  text-shadow: 0 0 3px #00ff9c;
}

.window-body p {
  font-size: 15px;
}

.window-body img {
  padding: 5px;
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto;
  border: 2px inset #004422;
  object-fit: cover;
  box-sizing: border-box;
}

/* Main large image */
.window-body img.main-image {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 20px auto; 
  border: 2px inset #004422;
  object-fit: cover;
  box-sizing: border-box;
  padding: 5px;
}

/* Blinkies window */
#win6 .window-body {
  padding: 10px;
  background: #001a0f;
}

#win6 .blinkies {
  display: flex;
  flex-wrap: wrap;   
  gap: 1px;          
  justify-content: center;
}

#win6 .blinkies img {
  width: calc((100% - 1px) / 2);  
  flex: 0 0 calc((100% - 1px) / 2);
  height: auto;
  border: none;
  box-sizing: border-box;
}

/* ------------------ TASKBAR ------------------ */
#taskbar {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: 32px;
  background: linear-gradient(#002912, #001509);
  border-top: 2px solid #004b2b;
  display: flex;
  align-items: center;
  padding: 0 4px;
  z-index: 9999;
  color: #00ff9c;
  box-shadow: 0 -2px 10px #00ff9c80;
}

#start-button {
  width: 65px;
  height: 26px;
  background: #003d1d;
  border: 2px outset #004b2b;
  color: #00ff9c;
  font-weight: bold;
  text-shadow: 0 0 4px #00ff9c;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
  cursor: pointer;
}

.task {
  background: #002110;
  border: 2px outset #004b2b;
  padding: 4px 10px;
  margin-right: 4px;
  cursor: pointer;
  color: #00ff9c;
  text-shadow: 0 0 3px #00ff9c;
}

#clock {
  margin-left: auto;
  padding: 0 10px;
  color: #00ff9c;
}

#start-menu {
  position: fixed;
  bottom: 32px; /* just above taskbar */
  left: 0;
  width: 200px;
  background: #001a0f;
  border: 4px solid #c0c0c0;
  box-shadow: 0 0 15px #00ff9c;
  color: #00ff9c;
  font-family: "MS Sans Serif";
  padding: 10px;
  display: none;
  z-index: 10000;
}

#start-menu h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
}

.start-item {
  padding: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 3px;
  transition: background 0.2s, border 0.2s;
}

.start-item:hover {
  background: #004422;
  border: 1px solid #00ff9c;
}


/* Main large image hover effect */
.window-body img.main-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth scaling & glow */
  cursor: pointer; /* makes it feel interactive */
}

.window-body img.main-image:hover {
  transform: scale(1.2); /* scale up 20% */
}