/* geeky.css */

body {
  background-image: url("https://sodacode.neocities.org/CSS_Styles/Green/3b2040a529eb18fc8b71afde4101bc28.jpg");   
  color: green;
  font-family: "Lucida Console", "Courier New";
  margin:0;
  padding:0;
}

.header {
  background-color: #C6D999;
  color: white;
  border-bottom: 15px solid transparent;
  padding: 10px;
  border-image-source: url("https://i.postimg.cc/Th8qd5DX/Untitled810-20241125203609.png");  
  border-image-repeat: round;
  border-image-slice: 30;
  height: 10px;
  position: fixed;
  width: 100%;
  }
  
  .megabox {
  background-image: url("https://sodacode.neocities.org/CSS_Styles/Green/ef61a221545e95308eb1b1175f4ac4cb.jpg");
  color: white;
  border: 15px solid transparent;
  border-top: 0px solid transparent;
  border-image-source: url("https://i.postimg.cc/9F2mmRhQ/Untitled1774-20241030141003.png");  
  border-image-repeat: round;
  border-image-slice: 10;
  border-radius: 10px;
  height: 100%;
}

.side {
  background-color: #C6D999;
  color: white;
  border: 15px solid transparent;
  padding: 10px;
  border-image-source: url("https://i.postimg.cc/Th8qd5DX/Untitled810-20241125203609.png");  
  border-image-repeat: round;
  border-image-slice: 30;
  border-radius: 20px;
  height: 1000px;
}

.box {
  background-color: #C6D999;
  color: white;
  border: 15px solid transparent;
  padding: 10px;
  border-image-source: url("https://i.postimg.cc/Th8qd5DX/Untitled810-20241125203609.png");  
  border-image-repeat: round;
  border-image-slice: 30;
  border-radius: 20px;
  height: 200px;
}

.boxchanging {
  background-color: #C6D999;
  color: white;
  border: 15px solid transparent;
  padding: 10px;
  border-image-source: url("https://i.postimg.cc/Th8qd5DX/Untitled810-20241125203609.png");  
  border-image-repeat: round;
  border-image-slice: 30;
  border-radius: 20px;
  height: 200px;
}


.box2 {
  background-color: #C6D999;
  color: white;
  border: 15px solid transparent;
  padding: 5px;
  border-image-source: url("https://i.postimg.cc/Th8qd5DX/Untitled810-20241125203609.png");  
  border-image-repeat: round;
  border-image-slice: 30;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.box3 {
  background-color: #F8F6DF;
  color: green;
  border: 15px solid transparent;
  padding: 5px;
  border-image-source: url("https://i.postimg.cc/Th8qd5DX/Untitled810-20241125203609.png");  
  border-image-repeat: round;
  border-image-slice: 30;
  border-radius: 20px;
}

.box4 {
  background-color: #C6D999;
  color: white;
  border: 15px solid transparent;
  padding: 5px;
  border-image-source: url("https://i.postimg.cc/Th8qd5DX/Untitled810-20241125203609.png");  
  border-image-repeat: round;
  border-image-slice: 30;
  border-radius: 20px;
}

.nogapbr {
  display: block;
  margin: 10px 0;
  line-height:22px;
}



.scrollmenu {
  overflow: auto;
  Display: block; 
  Height: 200px; 
  Overflow-y: scroll; 
  }
  
 
  
  .menubutton {
    padding: 1px 6px;
    border: 1px outset;
    border-radius: 3px;
    color: #fffff;
    background-color: #FFDBDF;
    text-decoration: none;
    font-weight: bold;
    width: 1150px;
}

  .menuboxblinkies {
  background-image: url("https://sodacode.neocities.org/CSS_Styles/Green/5a3bd978d761f27f80d0b84760362224.jpg");
  color: white;
  border: 7px solid transparent;
  border-image-source: url("https://i.postimg.cc/9F2mmRhQ/Untitled1774-20241030141003.png");  
  border-image-repeat: round;
  border-image-slice: 7;
  border-radius: 10px;
  padding: 8px;
}
/*IMAGES!! X3*/

.Sodatitle{
    content:url("https://sodacode.neocities.org/CSS_Styles/Green/Sodasignph.png");
    width: 750px;
    border-image-source: url("https://i.postimg.cc/Th8qd5DX/Untitled810-20241125203609.png");  
    border-image-repeat: round;
    border-image-slice: 30;
    border-radius: 20px;
    z-index: 0;
}

.Button1{
    content:url("https://sodacode.neocities.org/CSS_Styles/Green/greenbutton.png");
    width: 74px;
}

.Button2{
    content:url("https://sodacode.neocities.org/CSS_Styles/Green/flowerbutton.png");
    width: 74px;
}

.feelsparkle {
    float: left;
    content:url("https://sodacode.neocities.org/CSS_Styles/Green/sparkle.gif");
}

.thisuser {
    float: left;
    content:url("https://sodacode.neocities.org/CSS_Styles/Green/userbox1.png");
    width: 200px;
}

.mainlinks {
    float: left;
    content:url("https://sodacode.neocities.org/CSS_Styles/Green/sparkle.gif");
    width:15px;
}

.blinkie1 {
    float: left;
    content:url("https://sodacode.neocities.org/CSS_Styles/Green/blinkiesCafe-Nu.gif");
}
.blinkie2 {
    float: left;
    content:url("https://sodacode.neocities.org/CSS_Styles/Green/blinkiesCafe-aI.gif");
}
.blinkie3 {
    float: left;
    content:url("https://sodabubble.neocities.org/badges/blinkiesCafe-5y.gif");
}

/*LAYOUT - DON'T CHANGE!*/

#container {
  width: 1000px;
  margin: auto;
  z-index: 1;
  padding-top: 45px;
  }
  
.grid-container {
  display: grid;
  grid: 20px / auto auto auto;
  grid-template-columns: 250px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 200px 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}


.grid-container>div:first-child {
  grid-column: span 1;
  grid-row: span 9;
}

.grid-container>div:nth-child(2) {
  grid-column: span 10;
  grid-row: span 1;
}

.grid-container>div:nth-child(3) {
  grid-column: span 6;
  grid-row: span 1;
}

.grid-container>div:nth-child(4)  {
  grid-column: span 4;
  grid-row: span 1;
}

.grid-container>div:nth-child(5)  {
  grid-column: span 7;
  grid-row: span 1;
}

.grid-container>div:nth-child(6)  {
  grid-column: span 3;
  grid-row: span 1;
}

.grid-container>div:nth-child(7)  {
  grid-column: span 5;
  grid-row: span 2;
}

.grid-container>div:nth-child(8)  {
  grid-column: span 2;
  grid-row: span 1;
}

.grid-container>div:nth-child(9)  {
  grid-column: span 3;
  grid-row: span 2;
}

.grid-container>div:nth-child(10)  {
  grid-column: span 2;
  grid-row: span 1;
}


/*Other stuff!*/

#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}



/*MUSIC PLAYER*/

/* rule of thumb is to not change anything that says 'grid' or 'flex' if you wanna keep the current layout of the playlist */

.player {
  position: fixed; inset: 0 auto auto 0;
  height: 56px; width: 100%; 
  display: grid; 
  grid-template-columns: auto auto auto auto auto 1fr auto auto; /*<-- it will break if you change this proceed at your own risk */
  align-items: center; gap: .75rem;
  padding: 0 .75rem;
  background: #666699; /*<-- change player background color here */
  color: #f8f4ff; /*<-- change font color here */
  z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,.15); /*<-- if you dont want shadow under your player just delete this line */
  font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /*<-- change fonts here */
}

.player button {
  all: unset; 
  background: transparent; 
  border: 0;
  color: #f8f4ff;
  font-size: 1.25rem;
  padding: .25rem .5rem;
  cursor: pointer; /*<-- if you use any custom cursor for your site, change here for consistency */
}

.track {
  display: grid; /*<-- it might break if you change this */
  gap: .25rem;
}

.title-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.title-wrap::before, .title-wrap::after {
  content: '';
  position: absolute;
  top: 0; width: 24px; height: 100%;
}

.title-wrap::before{ left:0;  background:linear-gradient(to right, var(--bg), transparent); }
.title-wrap::after { right:0; background:linear-gradient(to left,  var(--bg), transparent); }


.title {
  display: inline-block;
  white-space: nowrap;
  padding-inline: 8px;
  will-change: transform; 
}

.title.scroll{
  animation: marquee var(--duration, 12s) linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(calc(-1 * var(--scroll-distance, 50%))); }
}

.progress {
  height: 6px;
  width: 100%;
  background: #E9E8FF; /*<-- the "background" of your progress bad, not the progress bar itself */
  border-radius: 999px; /*<-- delete this if you want a rectangular progress bar (ew) */
  cursor: pointer; /*<-- again, if you use custom cursors, change here */
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #acace6; /*<-- now this is the actual progress bar that moves */
  border-radius: inherit; 
}

.time{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  line-height:1;
  opacity:.9;
  color: e9e8ff;
  margin-top: 2px;
  font-variant-numeric: tabular-nums; /* keeps numbers from jittering */
}

.playlist{
  position: absolute;
  top: 56px;
  right: 8px;
  left: auto;
  width: min(520px, 90vw);
  max-height: 40vh;
  overflow: auto;
  background: #8483c4;                 /* playlist sidebar color */
  color: #e9e8ff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 6px;
  z-index: 10000;
  transform-origin: 12px top;
  transition: opacity .15s ease, transform .15s ease; 
  opacity: 0; 
  transform: scale(1);
}

.playlist[aria-open="true"]{
  opacity: 1; transform: scale(1); 
}

/* each track row */
.playlist_item{
  display: grid;
  grid-template-columns: 1fr auto;    
  align-items: center;
  gap: .5rem;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.playlist_item[aria-selected="true"]::after{ /* the color of the currently listening song in the playlist */
  content:"now playing..."; 
  margin-right:.5rem; 
  color:#e9e8ff; 
  font-size: 10px;
  opacity:.9;
}

.playlist_item:hover,
.playlist_item[aria-selected="true"]{ /* the color change when you hover over a song on the playlist */
  background: rgba(233,232,255,.18);
}
.playlist_title{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px;
}

.playlist_item { grid-template-columns: 1fr auto; }

.playlist_dur { font-size:12px; opacity:.8; }

#volume {width: 100px;}