/* 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;

  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 */
}

#sidebar-links {
  list-style-type: none;
  padding-left: 5px;
  margin: 0;
}

#sidebar-links div {
  background: #c0c0c0;
  padding: 6px 8px;
  color: black;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  font-size: 17px;
  cursor: pointer;
  width: 80%;
  margin-bottom: 3px;
  transition: all 0.2s ease;
}

#sidebar-links div:hover {
  border-color: #fff #808080 #808080 #fff;
  background: #808080;
  width: 85%;
  font-size: 18px;
}

#sidebar-links li.active div {
  border-color: #808080 #fff #fff #808080;
  background: #606060;
  color: white;
  width: 85%;
  font-size: 18px;
}




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

#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;
}

#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: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 9999;
}

.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);
  }
}