/* ==================================================
   COLOURS
================================================== */

:root {

  --purple-dark: #4e3191;

  --purple: #7951b7;

  --purple-light: #b77ad0;

  --pink: #f4b7db;

  --pink-light: #ffd5eb;

  --pink-dark: #d681bc;

  --cream: #fff3fa;

  --text: #5e3d82;

}



/* ==================================================
   BASIC
================================================== */

* {
  box-sizing: border-box;
}


html,
body {

  margin: 0;

  padding: 0;

  min-height: 100%;

}


body {

  font-family:
    Verdana,
    Arial,
    sans-serif;

  color: var(--text);

  background: #17105d;

  overflow-x: hidden;

}



/* ==================================================
   BACKGROUND

   YOUR BACKGROUND IMAGE GOES HERE
================================================== */

.desktop {

  position: relative;

  width: 100%;

  min-height: 930px;

  padding-bottom: 60px;


  background-image:

    url("images/ChatGPT Image 8_09_2026, 12_09_58.png");


  background-size:

    cover;


  background-position:

    center bottom;


  background-repeat:

    no-repeat;


  overflow: hidden;

}



/* ==================================================
   GENERAL WINDOW
================================================== */

.window {

  position: absolute;

  background: var(--pink);

  border:

    2px solid #ffe3f4;


  box-shadow:

    3px 3px 0
    rgba(79, 49, 145, 0.85),

    8px 8px 18px
    rgba(27, 13, 70, 0.30);

}



/* ==================================================
   WINDOW TITLE BAR
================================================== */

.window-bar {

  height: 29px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding:

    0 5px 0 8px;


  background:

    linear-gradient(
      90deg,
      #724eaf,
      #a675c8,
      #c98bd4
    );


  color: white;

  font-size: 11px;

  font-weight: bold;


  border-bottom:

    2px solid
    #60408e;

}



/* ==================================================
   WINDOW BUTTONS
================================================== */

.window-controls {

  display: flex;

  gap: 2px;

}


.window-controls button {

  width: 20px;

  height: 19px;

  padding: 0;

  color: #66458e;

  background: #dfa4d6;

  border:

    1px outset white;

  font-size: 10px;

}



/* ==================================================
   REMINDER
================================================== */

.reminder {

  width: 270px;

  left: 14%;

  top: 30px;

  z-index: 25;

}


.reminder-content {

  min-height: 170px;

  padding: 27px 15px;

  text-align: center;

  background: #ffc9e3;

  line-height: 1.6;

}


.ok-button {

  width: 80px;

  height: 30px;

  margin-top: 15px;

  color: var(--text);

  background: #eeb2d7;

  border:

    2px outset #ffe7f5;

}



/* ==================================================
   MAIN CENTRAL WINDOW
================================================== */

.main-window {

  width: 675px;

  left: 50%;

  top: 120px;

  transform:
    translateX(-50%);

  z-index: 15;

}


.main-image {

  position: relative;

  height: 510px;

  overflow: hidden;

}


.main-image img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.main-text {

  position: absolute;

  right: 25px;

  bottom: 20px;

  text-align: right;

  color: white;

  text-shadow:
    0 2px 6px #493170;

}


.main-text h1 {

  margin: 0;

  font-family:
    Georgia,
    serif;

  font-size: 40px;

  font-weight: normal;

}


.main-text p {

  margin:

    8px 0 0;

  font-size: 12px;

}



/* ==================================================
   STARS WINDOW
================================================== */

.stars-window {

  width: 300px;

  left: 9%;

  top: 295px;

  z-index: 20;

}



/* ==================================================
   IMAGE WINDOWS
================================================== */

.image-frame {

  padding: 5px;

  background: #6546a0;

}


.image-frame img {

  display: block;

  width: 100%;

  height: auto;

}



/* ==================================================
   CURRENT THOUGHT
================================================== */

.thought-window {

  width: 285px;

  right: 5%;

  top: 55px;

  z-index: 25;

}


.thought-content {

  min-height: 165px;

  padding: 22px;

  background: #f9c8df;

  font-size: 11px;

  line-height: 1.55;

}



/* ==================================================
   MUSIC PLAYER
================================================== */

.music-player {

  width: 300px;

  right: 6%;

  top: 270px;

  z-index: 24;

}


.music-body {

  padding: 15px;

  background: #f4b9dc;

}


.music-top {

  display: flex;

  align-items: center;

  gap: 12px;

}


.album-cover {

  width: 68px;

  height: 68px;

  object-fit: cover;

}


.song-info {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 6px;

  font-size: 12px;

}


.song-info span {

  font-size: 10px;

}


.heart {

  font-size: 24px;

}


.progress-track {

  height: 7px;

  margin-top: 16px;

  background: #ffe3f1;

  border:
    1px inset #c887b6;

}


.progress-fill {

  width: 0%;

  height: 100%;

  background: #7650aa;

}


.time-row {

  display: flex;

  justify-content:
    space-between;

  margin-top: 5px;

  font-size: 10px;

}


.music-controls {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  margin-top: 10px;

}


.music-controls button {

  border: 0;

  background: transparent;

  color: #64439a;

  font-size: 21px;

  cursor: pointer;

}


.play-button {

  width: 42px;

  height: 42px;

  border-radius: 50% !important;

  color: white !important;

  background:
    #8056bb !important;

}



/* ==================================================
   COMPUTER AREA

   IMPORTANT:
   this is independent from the background.
================================================== */

.computer-area {

  position: absolute;

  left: 3%;

  bottom: 65px;

  width: 330px;

  z-index: 27;

}



/* ==================================================
   POLISHED COMPUTER + BOOKS AREA
================================================== */

.computer-area {

  position: absolute;

  left: 3.2%;

  bottom: 64px;

  width: 330px;

  z-index: 30;
}


/* ==================================================
   RETRO CRT COMPUTER
================================================== */

.computer {

  position: relative;

  width: 235px;

  margin-left: 28px;

  padding:
    14px 14px 12px;

  background:
    linear-gradient(
      145deg,
      #f5c7e3 0%,
      #dda7d3 45%,
      #bf89c6 100%
    );

  border:
    3px solid #ffe8f5;

  border-radius:
    20px 20px 14px 14px;

  box-shadow:
    4px 4px 0 #9f6eb3,
    8px 8px 0 #6b4594,
    12px 14px 24px rgba(34, 17, 72, 0.34);

}


/* subtle highlight on the monitor shell */

.computer::before {

  content: "";

  position: absolute;

  top: 7px;

  left: 15px;

  right: 15px;

  height: 7px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.28);

  filter:
    blur(2px);
}


/* ==================================================
   CRT SCREEN
================================================== */

.computer-screen {

  position: relative;

  height: 165px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    24px 20px;

  overflow: hidden;

  text-align: center;

  color: #fff7ff;

  line-height: 1.7;

  font-size: 12px;

  background:

    radial-gradient(
      circle at 75% 15%,
      rgba(255, 219, 245, 0.16),
      transparent 24%
    ),

    linear-gradient(
      to bottom,
      #140c58,
      #22146f,
      #2d1e7c
    );

  border:
    7px inset #a76fae;

  border-radius:
    18px;

  box-shadow:

    inset 0 0 18px rgba(255, 171, 229, 0.20),

    inset 0 0 40px rgba(72, 44, 141, 0.45),

    0 0 8px rgba(255, 180, 231, 0.24);
}


/* faint CRT scan lines */

.computer-screen::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(0, 0, 0, 0.03) 3px,
      rgba(0, 0, 0, 0.03) 4px
    );

}


/* keep text above scanlines */

.computer-screen p,
.screen-stars,
.screen-moon {

  position: relative;

  z-index: 2;
}


/* ==================================================
   SCREEN DECORATIONS
================================================== */

.screen-stars {

  position: absolute;

  top: 12px;

  left: 14px;

  color: #ffe1f3;

  font-size: 12px;

  text-shadow:
    0 0 5px #ffb6df;
}


.screen-moon {

  position: absolute;

  top: 12px;

  right: 17px;

  color: #fff6c8;

  font-size: 33px;

  text-shadow:
    0 0 7px #fff1a2,
    0 0 12px #ffcde8;
}


/* ==================================================
   COMPUTER LOWER PANEL
================================================== */

.computer-bottom {

  height: 34px;

  margin-top: 6px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 10px;

  color: #704b9b;

  font-size: 12px;

  border-top:
    1px solid rgba(255,255,255,0.5);
}


.computer-buttons {

  letter-spacing: 3px;

  color: #774b9f;
}


/* fake little power light */

.computer-bottom::after {

  content: "";

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #fff2a7;

  box-shadow:
    0 0 5px #ffe887;
}


/* ==================================================
   COMPUTER BASE
================================================== */

.computer-base {

  position: relative;

  width: 180px;

  height: 25px;

  margin:
    -1px auto 0;

  background:
    linear-gradient(
      to bottom,
      #dfa7d1,
      #c68abb
    );

  border:
    3px outset #ffe5f4;

  border-radius:
    0 0 9px 9px;

  box-shadow:
    4px 5px 0 #79509f;
}


/* little stand */

.computer-base::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: -13px;

  width: 115px;

  height: 14px;

  transform:
    translateX(-50%);

  background:
    #d59ac8;

  border:
    2px outset #ffe6f3;

  border-radius:
    3px 3px 8px 8px;
}


/* ==================================================
   BOOK NAVIGATION
================================================== */

.book-menu {

  position: relative;

  width: 300px;

  margin-top: 18px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


/* ==================================================
   INDIVIDUAL BOOKS
================================================== */

.book {

  position: relative;

  height: 39px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 15px;

  margin-bottom: 5px;

  color: white;

  text-decoration: none;

  font-size: 12px;

  letter-spacing: 0.2px;

  border:
    2px solid rgba(255,255,255,0.75);

  border-radius:
    4px 16px 16px 4px;

  box-shadow:
    3px 3px 0 #724b99,
    6px 6px 10px rgba(32, 15, 70, 0.22);

  transition:
    transform 0.16s ease,
    filter 0.16s ease;
}


/* little faux book spine */

.book::before {

  content: "";

  position: absolute;

  left: 8px;

  top: 5px;

  bottom: 5px;

  width: 2px;

  background:
    rgba(255,255,255,0.35);
}


/* different widths / offsets for stacked-book look */

.book:nth-child(1) {

  width: 265px;

  margin-left: 0;
}


.book:nth-child(2) {

  width: 285px;

  margin-left: 8px;
}


.book:nth-child(3) {

  width: 250px;

  margin-left: 18px;
}


/* hover movement */

.book:hover {

  transform:
    translateX(9px);

  filter:
    brightness(1.08);
}


/* ==================================================
   BOOK COLOURS
================================================== */

.book-alchemy {

  background:
    linear-gradient(
      to right,
      #6950ad,
      #8f68c4,
      #ac80d0
    );
}


.book-marketing {

  background:
    linear-gradient(
      to right,
      #4f63b2,
      #697ac5,
      #8c83d0
    );
}


.book-daydreaming {

  background:
    linear-gradient(
      to right,
      #ce70ae,
      #e286c0,
      #ef9ed0
    );
}


/* make book titles stand out */

.book strong {

  font-weight: bold;

  text-shadow:
    0 1px 2px rgba(60, 30, 90, 0.45);
}

/* ==================================================
   CURRENTLY NOTE
================================================== */

.currently-note {

  position: absolute;

  width: 235px;

  left: 31%;

  bottom: 60px;

  z-index: 28;

  padding: 24px 20px;

  background: #ffd1e6;

  box-shadow:
    5px 6px 14px
    rgba(40, 18, 80, .3);

  transform:
    rotate(-2deg);

  font-size: 12px;

}


.currently-note h3 {

  margin-top: 0;

  font-weight: normal;

}


.currently-note p {

  margin: 9px 0;

}


.tape {

  position: absolute;

  top: -9px;

  left: 85px;

  width: 70px;

  height: 19px;

  background:
    rgba(
      255,
      224,
      239,
      .75
    );

}


.note-moon {

  position: absolute;

  right: 18px;

  top: 55px;

  font-size: 32px;

}



/* ==================================================
   DREAMS WINDOW
================================================== */

.dreams-window {

  width: 290px;

  right: 8%;

  bottom: 58px;

  z-index: 18;

}



/* ==================================================
   POLAROID
================================================== */

.polaroid {

  position: absolute;

  right: 27%;

  bottom: 42px;

  width: 170px;

  padding:

    10px 10px 18px;

  z-index: 30;

  background: #ffe4f2;

  transform:
    rotate(-7deg);

  box-shadow:

    5px 7px 15px
    rgba(30, 13, 70, .35);

}


.polaroid img {

  width: 100%;

  display: block;

}


.polaroid p {

  margin:

    8px 0 0;

  text-align: center;

  font-family:
    Georgia,
    serif;

  font-style: italic;

}



/* ==================================================
   TASKBAR
================================================== */

.taskbar {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  height: 51px;

  z-index: 1000;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 5px;

  background:
    #e7a4d0;

  border-top:

    3px solid #ffd7ed;

}



/* ==================================================
   START BUTTON

   DIFFERENT COLOUR SO IT POPS.
================================================== */

.start-button {

  height: 38px;

  padding: 0 18px;

  color: #56327f;

  font-size: 13px;

  font-weight: bold;

  background:

    linear-gradient(
      #fff0a6,
      #ffc65a
    );

  border:

    2px outset #fff4c5;

  cursor: pointer;

}



/* ==================================================
   TASKBAR LINKS
================================================== */

.task-item {

  min-width: 165px;

  height: 38px;

  display: flex;

  align-items: center;

  padding: 0 15px;

  color: #563a7a;

  text-decoration: none;

  background:
    #efb9da;

  border:

    2px outset #ffe0f0;

}


.task-space {

  flex: 1;

}


.clock {

  height: 38px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 0 13px;

  background:
    #e9b4d4;

  border:

    2px inset #ffdef0;

}



/* ==================================================
   RESPONSIVE
================================================== */

@media(max-width: 1100px) {

  .main-window {

    width: 58vw;

  }


  .main-image {

    height: 46vw;

    max-height: 500px;

  }


  .reminder {

    left: 3%;

  }


  .thought-window {

    right: 2%;

  }


  .music-player {

    right: 2%;

  }

}