/*=======.THE INDIGOMILK TITLE(span) GOT DELETED =======*/




/*======== ICON SIZES ======*/

.icon {
  width: 7rem;        /* ~1.5–2 inches visually */
  height: auto;
  margin: 12px 0;
  cursor: pointer;

  transition: transform 0.2s ease;
  
}


/*====== THE ICONS AROUND THE PAGE======*/

/*  TOP LEFT SIDEBAR (default, top to bottom) */
.topleftsidebar {
  position: fixed;
  left: 0.0001vw;           /* distance from left edge */
  top: 65vh;            /* distance from top edge */
  bottom: 1vh;         /* distance from bottom edge */
  width: 15vw;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}


/*  BOTTOM LEFT SIDEBAR (default, top to bottom) */
.bottomleftsidebar {
  position: fixed;
  left: 0.0001vw;           /* distance from left edge */
  top: 78vh;            /* distance from top edge */
  bottom: 1vh;         /* distance from bottom edge */
  width: 15vw;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}



/* TOP CENTER (mail icon) */
.sidebarcenter {
  position: fixed;
  top: 0.00001vh;           /* near top */
  left: 50%;          /* center horizontally */
  transform: translateX(-50%); /* actually centers the div */
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* TOP RIGHT (music + youtube) */

.toprightsidebar {
  position: fixed;
  right: 3vw;          /* distance from right edge */
  bottom: 18vh;         /* distance from bottom edge */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}



/* BOTTOM RIGHT (music + youtube) */
.bottomrightsidebar {
  position: fixed;
  right: 3vw;          /* distance from right edge */
  bottom: 5vh;         /* distance from bottom edge */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  
}

/*====== ISHOUTBOX ======*/

.ishoutboxsidebar {
  
  position:fixed;
  right: 3vw;
  top: 5vw;
  
   display: flex;
  flex-direction: column;
  align-items: center;
  
}



/*======= LIKS OPEN IN THE WINDOWS WINDOW =======*/

.content-frame {
  width: 100%;
  height: 100%;
  border: none;
}


/* ======= MAKES THE WINDOWS WINDOW SCROLL ===*/
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* stops page scrolling */
}

/* ===== SOFT CONTENT CONTAINER ===== */

.retro-window {
  position: fixed;

  /* same positioning you liked */
  left: 12.5vw;
  right: 12.5vw;
  top: 15vh;
  bottom: 5vh;

  padding: 16px;
  
  display: flex;
  flex-direction: column;


  background: rgba(255, 230, 242, 0.55); /* soft pink glass */
  border-radius: 24px;                   /* BIG soft curves */
  border: 1px solid rgba(255, 180, 210, 0.6);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.25);

  overflow: hidden; /* keeps scrolling internal */
}

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

.title-bar {
  height: 8px;
  flex-shrink: 0;       /* ← DO NOT let it steal space */
}


/* ===== CONTENT AREA ===== */
.window-content {
  flex: 1;          
  padding: 1px;

  overflow-y: auto;         /* scrolls when content is long */
  overflow-x: hidden;

  background: rgba(255, 235, 245, 0.6); /* inner softness */

}

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

body {
  
  background-image: url("/assets/images/Background.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}