@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* body {
  /* background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  background-color: aquamarine;
  margin-bottom: 60px;
} */

li {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.footer {
  position: fixed; /* Keeps the footer fixed at the bottom */
  bottom: 0; /* Aligns the footer to the bottom of the viewport */
  width: 100%; /* Makes the footer span the full width */
}

.displaySong {

  background-color: rgb(207, 219, 224); 

}


#spongebob {
  height: 150px;
  position: absolute; /* Change to absolute for better control */
  top: 90px; 
  left: 500px;
}

#doodlebob {
  height: 150px;
  position: absolute; /* Change to absolute for better control */
  top: 90px; 
  left: 200px; /* Adjusted value to place Doodlebob correctly */
}

.seeMe {
  /* border-style: dashed; 
  border-width: 4px ;
  border-color: green;  */
  border: dashed 4px green;   
}

/* use # to prefix css selector for dom/html element id attribute */
/* #songList {
  background-color: #CE93D8;} */
img {
    display: block; /* Prevents spacing issues */
    background: transparent; /* Ensures background is transparent */
}