@font-face{
  font-family:"SF Technodelight";
  src:url("2100CELLULOID-ALP38.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}
@font-face{
  font-family:"Neurochrome";
  src:url("2100CELLULOID-ALP38.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}


html, body{
  margin:0;
  padding:0;
  height:100%;
}

body{
  min-height:100vh; 
  /* base color under image */
  background-color:#020b18;
  /* layered background: image + soft futurist glow + vignette */
  background:
    /* soft cyan / lilac wash */
    radial-gradient(circle at 20% -10%,
      rgba(186, 230, 255, 0.80) 0%,
      rgba(186, 230, 255, 0.40) 18%,
      rgba(186, 230, 255, 0.00) 40%),
    radial-gradient(circle at 85% 10%,
      rgba(255, 195, 252, 0.45) 0%,
      rgba(210, 195, 255, 0.35) 20%,
      rgba(210, 195, 255, 0.00) 45%),
    /* gentle vertical fade to keep focus center */
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.04) 40%,
      rgba(0,0,0,0.18) 100%
    ),
    /* darker vignette around edges */
    radial-gradient(circle at center,
      rgba(0,0,0,0.0) 0%,
      rgba(0, 0, 0, 0.35) 80%),
    url('DSC02092.JPG') center/cover no-repeat,
    #020b18;
  backdrop-filter: blur(1.5px) saturate(1.35) contrast(1.02);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.35) contrast(1.02);
  font-family:"SF Technodelight","MS Sans Serif", Tahoma, Arial, sans-serif;
  overflow:hidden;
}

/* Boot overlay */
.boot-overlay{
  position:fixed;
  inset:0;
  background:#000000;
  color:#00e1ff;
  font-family:"SF Technodelight","MS Sans Serif", Tahoma, Arial, sans-serif;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.boot-overlay.visible{
  display:flex;
}

.boot-window{
  width:640px;
  max-width:90vw;
  border:1px solid rgba(0,225,255,0.9);
  box-shadow:
    0 0 28px rgba(0, 255, 251, 0.45),
    0 0 80px rgba(0, 180, 255, 0.35);
  padding:16px 18px;
  background:
    radial-gradient(circle at top left, #043147 0%, #020811 55%, #000000 100%);
  border-radius:10px;
}

.boot-title{
  font-size:18px;
  margin-bottom:8px;
}

.boot-body{
  font-size:13px;
  line-height:1.3;
  min-height:140px;
  max-height:320px;
  overflow:hidden;
  white-space:pre-wrap;
}

.boot-footer{
  margin-top:12px;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:10px;
}

.boot-bar{
  flex:1;
  height:8px;
  border:1px solid #00e1ff;
  background:#001107;
  position:relative;
  overflow:hidden;
}

.boot-bar-fill{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:0%;
  background:linear-gradient(to right, #00e1ff 0%, #00ffaa 50%, #00e1ff 100%);
}

.boot-hint{
  color:#00e1ff;
}

.boot-cursor{
  display:inline-block;
  width:8px;
  background:#00e1ff;
  margin-left:2px;
  animation:boot-blink 0.7s step-end infinite;
}

@keyframes boot-blink{
  50%{ opacity:0; }
}


.navbar{
  padding:6px 10px;
  background:
    linear-gradient(to bottom, #f9fbff 0%, #dde5f5 55%, #c1cadd 100%);
  border-bottom:1px solid rgba(0,0,0,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 10px 25px rgba(10,30,80,0.35);
  width:100%;
  box-sizing:border-box;
  display:flex;
  gap:6px;
}

.navbar-spacer{
  flex:1;
}

.btn{
  background:linear-gradient(to bottom, #ffffff 0%, #e9f1ff 45%, #ccd7f0 100%);
  border:1px solid rgba(10,30,80,0.85);
  color:#0a1020;
  padding:6px 18px;
  margin:4px;
  font-size:14px;
  cursor:pointer;
  border-radius:3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95),
    0 0 0 1px rgba(255,255,255,0.35),
    0 6px 12px rgba(0,0,0,0.35);
}

.btn:hover{
  background:linear-gradient(to bottom, #ffffff 0%, #f4f7ff 45%, #d8e2ff 100%);
}

.btn:active{
  background:linear-gradient(to bottom, #ccd7f0 0%, #e0e7fb 60%, #ffffff 100%);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.6);
}

.textbox{
  position:absolute;
  background-color:rgba(255, 255, 255, 0.534);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color:rgb(0, 0, 0);
  padding:0;
  width:75%;
  border:0px solid rgba(255, 255, 255, 0.747);
  box-shadow:
    0 18px 20px rgba(2,10,30,0.55),
    0 0 0 1px rgba(0,0,0,0.35);
  border-radius:3px;
  
  overflow:hidden;
  top:120px;
  left:120px;
  z-index:1;
}

/* Reflection texture */
.textbox::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* strong diagonal sweep highlight */
    linear-gradient(
      135deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.30) 20%,
      rgba(255,255,255,0.10) 40%,
      rgba(255,255,255,0.0) 60%
    ),
    /* subtle vertical glass fade */
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.10) 35%,
      rgba(255,255,255,0.00) 100%
    );
  mix-blend-mode:screen;
  opacity:0.4;
  pointer-events:none;
}

/* inner bevel to keep Win95 feel but glassy */
.textbox::after{
  content:"";
  position:absolute;
  border-radius:3px;
  
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.08),
    inset 0 0 8px rgba(255,255,255,0.25);
  pointer-events:none;
}

/* Title Bar */
.window-title{
  position:relative;
  background:linear-gradient(to right, #153066 0%, #2068c9 45%, #3bb7ff 100%);
  color:#f7fbff;
  padding:6px 10px;
  font-weight:bold;
  letter-spacing:0.03em;
  display:flex;
  align-items:center;
  cursor:grab;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35),
    0 8px 18px rgba(5,30,90,0.55);
}

.retro-stripes{
  position:absolute;
  top:30px;
  right:2px;
  width:80px;
  height:70px;
  background:
    linear-gradient(
      225deg,
      #e33057 0 12px,
      transparent 12px 18px,
      #efc60e 18px 30px,
      transparent 30px 36px,
      #4399de 36px 48px,
      transparent 48px 80px
    );
  opacity:0.95;
  pointer-events:none;
  z-index:1;
}

/* Window Controls */
.window-controls{
  margin-left:auto;
  display:flex;
  gap:4px;
}

.window-controls button{
  width:22px;
  height:18px;
  background:linear-gradient(to bottom, #f6f6f6 0%, #d0d0d0 48%, #b4b4b4 100%);
  border:1px solid #00000009;
  font-size:12px;
  padding:0;
  cursor:pointer;
  box-shadow:
    0 1px 0 #ffffff,
    0 0 0 1px #404040;
}

.window-controls button:active{
  background:linear-gradient(to bottom, #b4b4b4 0%, #d0d0d0 48%, #f6f6f6 100%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.137),
    0 0 0 1px #404040;
}

/* Window Content */
.window-content{
  padding:25px;
  max-height:400px;
}

/* Resize handle */
.resizer{
  position:absolute;
  width:14px;
  height:14px;
  right:4px;
  bottom:4px;
  cursor:se-resize;
  background:linear-gradient(135deg, transparent 0%, transparent 40%, #808080 40%, #f0f0f0 100%);
  pointer-events:auto;
  z-index:2;
}

/* Hug Mode */
.textbox.hug{
  display:inline-block;
  width:fit-content;
  max-width:80%;
}

/* Taskbar */
.taskbar{
  position:fixed;
  bottom:0;
  width:100%;
  height:50px;
  bottom:10px;
  background:linear-gradient(to top, #c3cde4 0%, #dde5f7 55%, #f7f9ff 100%);
  border-top:1px solid rgba(0,0,0,0.55);
  box-shadow:
    0 -1px 0 rgba(255,255,255,0.9),
    0 -10px 25px rgba(10,30,80,0.35);
  display:flex;
  align-items:center;
}

.startbutton{
  margin-left:6px;
  padding:6px 14px;
  font-weight:bold;
  background:linear-gradient(to bottom, #ffffff 0%, #e6f0ff 48%, #cad7f2 100%);
  border:1px solid rgba(10,30,80,0.85);
  color:#0a1020;
  cursor:pointer;
  border-radius:3px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95),
    0 0 0 1px rgba(255,255,255,0.35),
    0 6px 12px rgba(0,0,0,0.35);
}

.clock{
  margin-left:auto;
  margin-right:10px;
}

/* All windows start hidden unless overridden inline */
.textbox{
  display:none;
}

/* Desktop area */
.desktop{
  position:relative;
  padding:20px;
  padding-bottom:80px; /* leave room for taskbar */
}

.desktop-icon{
  width:72px;
  margin:10px;
  text-align:center;
  color:#ffffff;
  font-size:12px;
  cursor:pointer;
  display:inline-block;
}

.desktop-icon .icon-image{
  width:48px;
  height:48px;
  margin:0 auto 4px auto;
  background:#c0c0c0;
  border:2px solid;
  border-color:white #404040 #404040 white;
  box-shadow:0 2px 4px rgba(0,0,0,0.4);
}

.desktop-icon .icon-label{
  text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}

/* Retro Music Player */
.music-player{
  display:flex;
  gap:18px;
  align-items:center;
}

.music-cd-wrapper{
  width:140px;
  height:140px;
  position:relative;
  flex-shrink:0;
}

.music-cd{
  width:100%;
  height:100%;
  border-radius:50%;
  border:4px solid #c0c0c0;
  box-shadow:
    0 0 0 2px #404040,
    0 0 16px rgba(0,0,0,0.7);
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.9) 0%,
      rgba(255,255,255,0.4) 18%,
      rgba(255,255,255,0.0) 35%),
    conic-gradient(
      from 0deg,
      #ffffff 0deg,
      #ffcece 40deg,
      #ffdfff 90deg,
      #ceffe5 150deg,
      #ceebff 210deg,
      #fff8ce 270deg,
      #ffffff 320deg,
      #ffffff 360deg
    );
  position:relative;
  overflow:hidden;
}

.music-cd-cover{
  position:absolute;
  inset:16%;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.music-cd-hole{
  position:absolute;
  inset:44%;
  border-radius:50%;
  background:#111;
  box-shadow:
    0 0 0 2px #777,
    inset 0 0 4px rgba(0,0,0,0.7);
}

.music-cd.playing{
  animation:cd-spin 3s linear infinite;
}

@keyframes cd-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.music-info{
  flex:1;
}

.music-title{
  font-weight:bold;
  margin-bottom:6px;
}

.music-controls{
  display:flex;
  gap:8px;
  margin:8px 0;
}

.music-controls .btn{
  padding:4px 10px;
  font-size:12px;
}

.music-timeline{
  margin-top:6px;
  font-size:12px;
}

.music-bar{
  height:6px;
  background:#808080;
  border:2px solid;
  border-color:white #404040 #404040 white;
  position:relative;
  margin-bottom:4px;
}

.music-bar-fill{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:0%;
  background:#00c000;
}

/* Position Helpers */
.left{ margin-left:20px; margin-right:auto; }
.center{ margin-left:auto; margin-right:auto; }
.right{ margin-left:auto; margin-right:20px; }
.bottom{ margin-top: auto; margin-bottom: auto;}

/* Position Helpers (Safe Version) */
.top-left{
  top:20px;
  left:20px;
}

.top-center{
  top:20px;
  left:50%;
  transform:translateX(-50%);
}

.top-right{
  top:20px;
  right:20px;
}

.center{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.bottom-left{
  bottom:60px;
  left:20px;
}

.bottom-center{
  bottom:60px;
  left:50%;
  transform:translateX(-50%);
}

.bottom-right{
  bottom:60px;
  right:20px;
}

.text-left{ text-align:left; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.text-justify{ text-align:justify; }

.divider{
  height:6px;
  background:linear-gradient(
    90deg,
    transparent,
    rgb(0, 0, 0),
    transparent
  );
  margin:12px 0;
}

/* Scroll ON */
.scrollable{
  overflow-y:auto;
}

/* Scroll OFF */
.noscroll{
  overflow:hidden;
}

p{
  font-weight: normal;
  font-family:"SF Technodelight","MS Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 18px;
  line-height:normal;
  letter-spacing: normal;
  color:black;
}

h1{
  font-weight: normal;
  font-family:"Neurochrome","MS Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 36px;
  line-height:normal;
  letter-spacing: normal;
  color:black;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.3);
}

/* Scrollbar styling */
::-webkit-scrollbar{
  width:16px;
  height:16px;
  border-radius: 3px;
  border:1px solid;
  border-color:white #404040 #404040 white;
}

::-webkit-scrollbar-track{
  background:#c0c0c0;
  border-left:2px solid white;
  border-top:2px solid white;
  border-right:2px solid #404040;
  border-bottom:2px solid #404040;
  border-radius: 3px;
  border:1px solid;
  border-color:white #404040 #404040 white;
}

::-webkit-scrollbar-thumb{
  background:#c0c0c0;
  border:2px solid;
  border-color:white #404040 #404040 white;
}

::-webkit-scrollbar-thumb:hover{
  background:#b0b0b0;
}

::-webkit-scrollbar-thumb:active{
  border-color:#404040 white white #404040;
}