/* 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." */

body {
  background-color: black;
  color: black;
  font-family: Verdana;
  height: 700px;

  background-image: url('https://i.pinimg.com/736x/3c/b7/66/3cb7669f47538aa26c83f1d2db7b4695.jpg');
  background-repeat: repeat;
  background-size: 15%; /* gives room for smooth motion */
  background-position: center;
  animation: bgDrift 60s linear infinite; /* linear = no easing pause */
}

#mainpage {
  background-color: black;
  color: white;
  width: 70%;
  height: 500px;
  float: left;
  margin: 2%;
  border: 2px solid #9966CC;
  border-radius: 5px;
}

#title {
  text-shadow: 0px 0px 5px #9966CC; 
  color: white;
  background-color: black;
  border-radius: 5px;
  margin: 30px;
  border: 2px solid #9966CC;
  display: flex;
  justify-content: space-between; /* Space out content */
  align-items: center; /* Vertically center the content */
  padding: 10px 20px; /* Add some padding */
  height: auto; /* Let it auto adjust height based on content */
}

h1, p {
  margin: 0;
}

.mini-logo {
  position: relative; /* keep GIF relative inside this div */
  width: 70px;
  height: 70px;
  overflow: visible; /* allow it to grow outside the box */
}

#Rgif {
  height: 70px;
  width: 70px;
  object-fit: cover;
  border-radius: 5px;
  transition: all 0.3s ease; /* smooth scaling */
}

#Rgif:hover {
  width: 100px;
  height: 100px;
}




.titlebarbutton {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  width: 65px;
  height: 28px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  font-size: 12px;
  cursor: pointer;
}

.titlebarbutton:active {
  border-color: #808080 #fff #fff #808080;
}


.marginFix {
  margin-top: 1%;
}

body {
  background-color: #008080;
  font-family: "MS Sans Serif", sans-serif;
}

/*  unused part hmm idk what its for but left alone for now

#taskbar {
  position: fixed;
  bottom: 0;
  left: 0; 
  width: 100%;
  background-color: #245DDA;
  color: white;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
  text-align: left;
}

*/

#cd-player-window {
  width: 320px;
  position: fixed;        /* make it stay relative to viewport */
  top: 65%;               /* vertically center */
  right: 30px;           /* offset so part is off-screen */
  transform: translateY(-50%); /* perfect vertical centering */
  z-index: 1000;

  background: #c0c0c0;
  border: 2px solid #fff;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #808080;
  transition: right 0.3s ease; /* optional: smooth slide-in/out */
}


/* Title bar */
.title-bar {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: white;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  font-weight: bold;
}

.title-bar-text img {
  height: 14px;
  vertical-align: middle;
  margin-right: 4px;
}

.title-bar-controls button {
  width: 16px;
  height: 14px;
  margin-left: 2px;
  border: none;
  background: #c0c0c0;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

.title-bar-controls button:active {
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff;
  background: #808080;
  color: white;
}


/* Menu bar */
.menu-bar {
  font-size: 12px;
  margin: 4px 8px;
  color: black;
}

/* Display area */
.display {
  position: relative;
  background: #000;
  color: #00ff00;
  text-align: center;
  padding: 4px;
  margin: 0 8px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-art {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.time-display {
  position: relative;
  z-index: 1;
  font-family: monospace;
  font-size: 14px;
}

/* Buttons */
.controls {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
}

.controls button {
  width: 32px;
  height: 22px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  font-size: 12px;
  cursor: pointer;

  display: flex;              /* enable flexbox centering */
  justify-content: center;    /* center horizontally */
  align-items: center;        /* center vertically */
  line-height: 1;             /* avoid vertical misalignment */
  padding: 0;                 /* remove text padding */
}


.controls button:active {
  border-color: #808080 #fff #fff #808080;
}

/* Artist/Title info */
.info {
  padding: 4px 8px;
  font-size: 12px;
}

.info label {
  display: inline-block;
  width: 45px;
  margin-top: 4px;
}

.info select {
  width: calc(100% - 55px);
  margin-bottom: 4px;
  background: #fff;
  border: 1px solid #808080;
  font-family: "MS Sans Serif", sans-serif;
  font-size: 12px;
}

/* Status bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  background: #c0c0c0;
  border-top: 2px solid #808080;
  font-size: 11px;
  padding: 2px 6px;
}

.status-bar-field {
  margin: 0;
}




@keyframes bgDrift {
  from {
    background-position: center 0%;
  }
  to {
    background-position: center 100%;
  }
}

/* 🌌 Loading screen overlay */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 10s ease, visibility 7s ease;
}

/* Fade-out effect */
#loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}


/* notification toast thingy kaboom */
#notification-container {
  position: fixed;
  bottom: 100px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 2147483647;
  background: rgba(255,0,0,0.3);
}

.notification {
  background: black;
  color: white;
  padding: 15px 20px;
  border-radius: 5px;
  border: 3px solid #9966CC;
  box-shadow: 0 0 10px #9966CC;
  font-family: Verdana;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification.hide {
  animation: fadeOutDown 0.7s forwards;
}

@keyframes fadeOutDown {
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}








/* Taskbar container */
#taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #c0c0c0;
    border-top: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
    z-index: 9998;
}

/* Layout parts */
.taskbar-left,
.taskbar-center,
.taskbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Buttons */
.taskbar-button {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #dcdcdc;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    padding: 8px 10px;
    cursor: pointer;
    font-family: sans-serif;
}

.taskbar-button:hover {
    background: #e8e8e8;
}

.taskbar-button:active {
    border-color: #808080 #fff #fff #808080
}

/* Icon sizes */
.taskbar-button img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

#start-btn {
    padding-left: 6px;  
}


/* Clock */
.clock {
    font-size: 14px;
    font-family: monospace;
}


/* --- START MENU CONTAINER --- */
#start-menu {
    position: fixed;
    bottom: 50px; /* match taskbar height */
    left: 0;
    width: 16%;
    background: #e3e0da;
    border: 4px solid #c0c0c0;
    display: none; /* hidden by default */
    padding: 3px;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
    z-index: 9999;
}

#Tbox {
    padding-left: 8px;
    margin-right: 10px;
    margin-top: 5px;
    float: left;
}

#Tlogo {
    width: 50px;
    height: 50px;
    animation: spin 3s linear infinite;
}

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

/* --- LISTS INSIDE MENU --- */
#start-menu ul {
    list-style: none;
    margin: 0;
    padding-left: 5px;
    background: #aca9a3;
    width: 85%;
}

/* --- SIDEBAR CATEGORY + ITEMS GENERAL --- */
.sidebar-links summary,
.sidebar-links li div {
    background: #c0c0c0;
    padding: 6px 8px;
    color: black;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    font-size: 17px;
    cursor: pointer;
    width: 85%;
    margin-bottom: 0px;
    transition: background 0.2s ease, transform 0.2s ease;
}

details.sidebar-links {
    overflow: hidden;
    transition: max-height 0.35s ease;
    max-height: 40px; /* closed height (summary only) */
}

/* --- HOVER STATE --- */
.sidebar-links summary:hover{
    background: #808080;
    color: white;
    width: 90%;
    transition: .2s ease, transform 0.2s ease;
}
.sidebar-links li div:hover {
    background: #808080;
    color: white;
    transform: translateX(3px);
}

/* --- ACTIVE / SELECTED ITEM --- */
.sidebar-links .active div {
    background: #606060;
    color: white;
    border-color: #808080 #fff #fff #808080;
    transform: translateX(5px);
}

/* --- LIST ITEMS --- */
#start-menu li {
    padding: 5px 0;
}