/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*backgrouund for index/ homepage*/




html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #008080; /* your desktop background or image */
  overflow: hidden;    /* prevent scrollbars */
  position: relative;  /* for absolute children */
}


.index {
   background-image: url("images/windowsxp.jpg");
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
}

/*background defaults*/
body {
  background-color: white;
  color: black;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  margin: 0;
  padding-bottom: 40px; 
}

/*taskbar*/
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 1000;  /* higher than desktop icons */
  background: linear-gradient(to top, #245edb, #3a8dde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
}
/*------------------start button----------------------------*/
.start-container {
  position: relative;

}

.start-button {
  background: linear-gradient(to bottom, #3cb043, #2e8b3c);
  color: white;
  font-weight: bold;
  padding: 5px 14px;

  border: 1px solid #1c5e27;
  border-radius: 4px; /* small corner rounding, not bubble */

  display: flex;
  align-items: center;
  gap: 6px;

  cursor: pointer;
}

.start-button:hover {
  background: linear-gradient(to bottom, #4cd65b, #36a73f);
}

.start-logo {
  width: 20px;
  height: 20px;
}

.start-menu {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 500;

  background: #e6e6e6;
  border: 2px solid #808080;
  display: none;
  flex-direction: column;

  box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
  z-index: 1000;
}

.start-menu a {
  padding: 8px 12px;
  text-decoration: none;
  color: black;
}

.start-menu a:hover {
  background: #0a64d8;
  color: white;
}

.start-menu a:visited {
  color: black;
}



/*------------------task buttons----------------------------*/
.task-buttons {
  display: flex;
  gap: 5px;
}

.task-btn {
  background: linear-gradient(to bottom, #4f94ff, #2f6fe4);
  color: white;
  padding: 5px 12px;
  text-decoration: none;
  border-radius: 3px;
  font-size: 14px;
}
/*clock*/
.clock {
  color: white;
  font-size: 14px;
}
.task-btn:visited {
  color: white;
}

.task-btn:hover {
  background: linear-gradient(to bottom, #6aaeff, #3f85ff);
}

/*------------------control buttons----------------------------*/
.control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-buttons {
  display: flex;
  align-items: center;
  gap: 1px;
}
.control-buttons img {
  width: 40px;   
  height: 40px;  
  object-fit: contain; 
  cursor: default; 
}


.volume {
  width: 40px;
  height: 40px;
  cursor: pointer; 
}


.control-buttons img + img {
  margin-left: 1px;
}


.volume-container {
  position: relative;
  display: flex;
  align-items: center;
}


.volume-slider {
  width: 100px;
  display: none; 
  position: absolute;
  bottom: 25px; 
  left: -20px;  
}


.volume-container:hover .volume-slider {
  display: block;
}


/* desktop container */
.desktop-container {
  position: absolute;  /* absolute on top of the desktop */
  top: 20px;           /* leave some space from the top */
  left: 20px;          /* leave some space from the left */
  display: flex;
  flex-direction: column; /* vertical stacking like XP */
  gap: 20px;
  z-index: 1;          /* behind taskbar */
}

/* wrapper for each icon + label */
.desktop-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: black;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
}

/* the GIF icon */
.desktop-icon {
  width: 60px;   /* adjust size */
  height: 60px;
  cursor: pointer;
}

/* label below icon */
.icon-label {
  font-size: 12px;
  text-align: center;
  margin-top: 4px;
}

/* hover effect */
.desktop-icon-wrapper:hover .desktop-icon {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/*other pages start ----------------------------------------------------------------------------------*/









/*----- popups --------------------------------------*/
.xp-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 750px;
  height: 500px;
  background: #FFFFFF; 
  border: 3px solid #808080;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

/* Title bar */
.xp-popup-titlebar {
  background: linear-gradient(to bottom, #0a64d8, #3f85ff);
  color: white;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  cursor: default;
}

/* Close button */
.xp-close-btn {
  background: linear-gradient(to bottom, #e52700, #ff5142);
  border: 1px solid #808080;
  padding: 2px 6px;
  font-weight: bold;
  cursor: pointer;
}

.xp-close-btn:hover {
  background: #ff0000;
  color: white;
}

/*  content */
.xp-popup-content {
  background: white;
  padding: 10px;
  color: black;
  line-height: 1.4;
}



/*-----  Boot screen for homepage --------------------------------------*/

#bootScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.boot-content {
  display: flex;
  flex-direction: column; /* stack image on top of loading bar */
  align-items: center;    /* center horizontally */
  text-align: center;
}

.boot-content img {
  width: 600px;   /* adjust size as needed */
  margin-bottom: 40px; /* space between image and loading bar */
}

.loading-bar {
  width: 250px;
  height: 20px;
  background: #222;
  border: 2px solid #555;
  overflow: hidden;
  position: relative;
  border-radius: 2px; /* subtle rounded corners */
}

.loading-block {
  width: 50px;
  height: 100%;
  background: #0a64d8;
  position: absolute;
  animation: loadAnim 1.2s linear infinite;
  
  

}





@keyframes loadAnim {
  0% { left: -50px; }
  100% { left: 250px; }
}




/* journal page ---------------------------------------------- */
/* Background only on journal page */
.journal {
  background-image: url("images/journalbg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Glass container */
.glass-container {
  width: 60%;
  max-width: 700px;
  height: 70vh;

  background: rgba(0, 140, 255, 0.25); /* blue transparent */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);

  padding: 30px;
  color: white;

  overflow-y: auto; /* scroll inside container */

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.ascii-header {
  width: 100%;
  text-align: center;
  overflow-x: auto;
  padding: 20px 0;
}

.ascii-header pre {
  font-family: monospace;
  font-size: 0.6vw;   
  line-height: 1;
  color: white;
}





.glass-container {
  width: 150%;              
  max-width: 1000px;       

  height: 75vh;

  background: rgba(0, 140, 255, 0.15);  
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 40px;
  color: white;

  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Close button */

.close-btn {
  position: fixed;           
  top: 10px;
  right: 10px;

  background: linear-gradient(to bottom, #e52700, #ff5142);
  border: 1px solid #808080;
  padding: 2px 8px;
  font-weight: bold;
  cursor: pointer;
  font-family: Arial, sans-serif;
  color: white;
  border-radius: 2px;

  z-index: 1000;            
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #ff0000;
  color: white;
}


/*MUSIC PAGEE -------------------------------------------*/
.music{
  background-image: url("images/musicbg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Glass container */
.glass-container-music {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  
  align-items: center;          
  padding: 30px;
  color: white;
  width: 80%;
  max-width: 800px;
  height: 70vh;
  background: rgba(246, 127, 160, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
}


.music-wrapper {
  display: flex;
  flex-direction: column; /* stack title above container */
  align-items: center;    /* center horizontally */
  justify-content: center; /* center vertically in screen */
  height: 100vh;           /* take full viewport height */
}

.page-title-gif {
  display: block;        /* ensures it acts like a block element */
  margin: 0 auto 20px;   /* centers horizontally and adds bottom spacing */
  max-width: 80%;        /* scale GIF if needed */
  height: auto;          /* maintain aspect ratio */
}

/*start menu*/

.start-menu-custom {
  position: absolute;
  bottom: 40px; /* above taskbar */
  left: 0;
  width: 300px;
  background: linear-gradient(to bottom, #3a85f5, #0a64d8);
  color: white;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  border: 1px solid #808080;
  display: flex;
  flex-direction: column;
  z-index: 2000;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}

/* Profile */
.start-profile {
  display: flex;
  align-items: center;
  padding: 8px;
  background: linear-gradient(to bottom, #2f70e4, #2a60c0);
  border-bottom: 1px solid #808080;
}

.profile-pic {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-right: 8px;
}

.profile-name {
  font-weight: bold;
}

/* Columns */
.start-left,
.start-right {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
}

.start-left {
  border-bottom: 1px solid #808080;
}

.start-item {
  padding: 4px 0;
  cursor: default;
}

.start-item.disabled {
  pointer-events: none; /* not clickable */
  opacity: 0.8;
}

/* Footer */
.start-footer {
  display: flex;
  justify-content: space-around;
  padding: 6px;
  border-top: 1px solid #808080;
}

.reboot-btn {
  background: linear-gradient(to bottom, #3cb043, #2e8b3c);
  border: 1px solid #1c5e27;
  color: white;
  padding: 4px 10px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
}

.reboot-btn:hover {
  background: linear-gradient(to bottom, #4cd65b, #36a73f);
}

.start-logoff,
.start-shutdown {
  pointer-events: none;
  opacity: 0.8;
}