@font-face {
  font-family: "Pixel";
  src: url("PressStart2P-Regular.ttf");
}

body {
  margin: 0;
  font-family: "Pixel", monospace;
  color: #3319fb;
  background: url("images/background1.jpg") center center/cover no-repeat fixed;
  height: 100vh;
}

#desktop { padding: 20px; }

.title {
  font-size: 28px;
  margin-bottom: 30px;
  color: #ffffff;
  text-shadow: 0 0 6px #00f;
}

.folders {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  max-width: 60%;
}

.folder {
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.folder img { width: 80px; image-rendering: pixelated; }

.folder p {
  font-size: 14px;
  margin-top: 5px;
  max-width: 140px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  display: inline-block;
}


#popup { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.85); display:flex; justify-content:center; align-items:center; z-index:3000; }
#popup.hidden { display:none; }
#popup-content { background:#111; padding:20px; border:2px solid #0ff; max-width:400px; text-align:center; position:relative; }
#popup-content img { width:100%; margin:10px 0; }
#close-popup { position:absolute; top:5px; right:10px; cursor:pointer; font-size:24px; }


.nav-arrow { position:absolute; top:50%; transform:translateY(-50%); font-size:28px; background:#0080ff; color:#000; border:2px solid #0ff; cursor:pointer; padding:5px 10px; z-index:1010; }
#prev-folder { left:-40px; }
#next-folder { right:-40px; }

#vintage-window { position:fixed; top:20px; right:20px; width:300px; padding:15px; background:#ddd; border:2px solid #000; color:#000; box-shadow:4px 4px 10px rgba(0,0,0,0.5); font-family:"Pixel", monospace; z-index:1000; }
#vintage-window .window-header { background:#0080ff; color:#000; padding:5px 10px; display:flex; justify-content:space-between; font-weight:bold; font-size:12.5px; line-height:1.4; }
#vintage-window .window-body { padding:10px; font-size:11px; }


#carousel-window { position:fixed; bottom:20px; right:20px; width:500px; height:200px; background:#ddd; border:2px solid #000; box-shadow:4px 4px 10px rgba(0,0,0,0.5); font-family:"Pixel", monospace; z-index:900; display:flex; flex-direction:column; }
#carousel-window .window-header { background:#0080ff; color:#000; padding:5px 10px; display:flex; justify-content:space-between; font-weight:bold; font-size:12px; }
#carousel-window .window-body { flex:1; padding:5px; display:flex; overflow-x:auto; gap:10px; align-items:center; }
#carousel-window .window-body img { width:100px; height:100px; object-fit:cover; cursor:pointer; border:1px solid #000; }

#mario-runner { position:fixed; bottom:10px; left:0; width:100%; height:60px; pointer-events:none; overflow:hidden; }
#mario-gif { position:absolute; left:-100px; bottom:0; height:50px; image-rendering:pixelated; }

#random-project-btn {
  position: fixed;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  padding: 14px 30px;
  font-size: 18px;
  font-family: "Pixel", monospace;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  color: black;
  border: 3px dashed black;
  cursor: pointer;
  z-index: 50;
  box-shadow: 5px 5px 0 black;
}

#arcangel-gif { position:fixed; bottom:30px; right:30px; width:120px; cursor:pointer; z-index:50; }


#rainbow-wrapper {
  position: relative;
  display: inline-block;
}

#rainbow {
  width: 90px; 
  image-rendering: pixelated;
  display: block;
}

#rainbow-text {
  position: absolute;
  bottom: 5px;  
  left: 50%;
  transform: translateX(-50%);
  font-family: "Pixel", monospace;
  font-size: 9px; 
  color: black;
  text-shadow: 0 0 2px white; 
  pointer-events: none; 
}

#clouds {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 180px;
  background: url("images/nuages.png") repeat-x;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  animation: clouds-move 60s linear infinite;
}

@keyframes clouds-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

#desktop {
  position: relative;
  z-index: 10;
}