/* 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." */
html, body {
  height: 100%;
  
}

html {
  cursor: url("/new_cursors_default.png"), auto;
}


body {
  cursor: url("/new_cursors_default.png"), auto;
  background-color: black;
  color: #EDD2C0;
  font-family: Verdana;

  background-image: url("/index_background.png");
  background-size: cover;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  margin: 0;
}


.bottom {
  margin-top: auto;
  text-align: center;
  padding-bottom: 20px;
}

p {
  color: #EDD2C0;
}

h1 {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 10px 20px;
  margin: 20px auto;
  color: #EDD2C0;
  font-size: 40px;
  text-align: center;
   
}

.bottom a{
  background-color: rgba(0, 0, 0, 0.5);
  
  
  }
  
.bottom a:hover,
.bottom a:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  
}
  


a,
button {
  cursor: url("/new_cursor_pointer.png"), pointer;
  
  
  
}

a:visited {
  text-decoration: none;
  color: #EDD2C0;
}

a:hover {
  text-decoration: underline; /* optional */
  
}


.album-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  justify-items: center;
  width: 100%;
  max-width: 900px; /* optional */
  margin: 0 auto;
  justify-content: center;
}

.album {
  width: 160px;
  padding: 10px;
  border-radius: 8px;
  
  text-align: center;
  box-sizing: border-box;
  border: 2px solid transparent;
}

.album:hover {
  filter: grayscale(80%) brightness(80%);
  border: 2px solid #EDD2C0; /* border color */
  cursor: url("/new_cursor_pointer.png"), pointer;
  }
  


.album img:hover {
  filter: grayscale(80%) brightness(80%);
}
.album p {
  font-size: 12px;
  background-color: black;
  margin: 0;
  height: auto; 
  overflow: hidden;
  
  
}

.album img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
  transition: filter 0.3s ease;
  margin: 0 auto;
}


.facebook-link {
  margin-top: 20px;
  text-align: center;
  size: auto;
  
}
.facebook-link:hover {
 filter: grayscale(80%) brightness(80%);
  /*border: 2px solid #EDD2C0;  border color */
   border: none;
   
}

.facebook-link a {
  text-decoration: none;
  color: #EDD2C0; /* Facebook blue */
  font-weight: bold;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.facebook-icon {
  width: 40px;
  height: 40px;
}




:root {
        /*<!-- --titlebar-gradient: linear-gradient(90deg, #6a1535, #b23965, #f9a5b9); -->*/
        --titlebar-gradient: linear-gradient(90deg, #000000, #EDD2C0);
        --dialog-blue: #6a1535;
        --dialog-accent: white; /* color of text on diaglog blue */
        --titlebar-color: white; /* reccomended to change so its easy to read on titlebar color */
        --player-image: url(https://64.media.tumblr.com/3ee15e0fc937fa6464126fc1a4bc8cb6/tumblr_noepzecMkt1slaspwo1_500.gifv);

    /*** 98 css styling ***/
    /* while some of these may specify a single element, theyre used across mulitple */
        --surface: #c0c0c0;
        --button-highlight: #ffffff;
        --button-face: #dfdfdf;
        --button-shadow: #808080;
        --light-button-shadow: #a9a9a9;
        --window-frame: #0a0a0a;
        --border-field: inset -1px -1px var(--button-highlight),
            inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
            inset 2px 2px var(--window-frame);
    }

    @font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/qgjjre.woff") format("woff");
  src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url("https://files.catbox.moe/z7csle.woff") format("woff");
    src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    }

    #musicplayer {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
  color:var(--window-frame);
  width: fit-content;
  border:var(--window-frame) solid 1px;
  margin:0 auto;
    box-shadow: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face), inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
  background: var(--surface);
  padding: 3px;
  width: 370px;
    }

    .title-color {  
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
    background: var(--titlebar-gradient);
    margin-bottom: 2px;
    font-weight: bold;
}

.actual-title {
    color:var(--titlebar-color);
  display: flex;
  gap: 5px;
}

.seeking {
    font-weight: normal;
    font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
    gap: 5px;
    margin: 12px 0;
}

.player-flex {
    display: flex;
    gap: 3px;
}

.player-main {
    width: calc(100% - 100px);
    margin-top: 1px;
}

.player-icon-holder {
  border: 2px solid var(--surface);
  width:95px;
  height:95px;
  padding: 1px;
  background-image:linear-gradient(-45deg, var(--button-face) 50%, var(--window-frame) 50%);
  background-size:cover;
  background-repeat:no-repeat;
  border-width:1px;
  border-style:solid;
  border-color: var(--button-shadow) var(--button-highlight) var(--button-highlight) var(--button-shadow);
  
  overflow: hidden;
  position:relative;
  z-index: 2;
}

.player-icon {
  position: relative;
  background-image: var(--player-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 95px;
  height: 95px;
}

/* BELOW IS LARGELY RIPPED FROM 98 CSS */
.track-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius:0;
  box-sizing: border-box;
  outline:0;
  
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  position: relative;
  padding: 3px 4px;
  padding-right: 32px;
  background-image: url("https://loveberry.nekoweb.org/assets/musicplayer/button-down.svg");
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
  width:100%;

  box-shadow: var(--border-field);
  background-color: var(--button-highlight);
  height: 21px;

  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
  font-weight: lighter;
}

.track-select:focus {
  color: var(--dialog-accent);
  background-color: var(--dialog-blue);

}
.track-select:focus option {
  color: var(--window-frame);
  background-color: var(--button-highlight);  
  outline: 1px;
  border: none;
}

.track-select:active {
  background-image: url("https://loveberry.nekoweb.org/assets/musicplayer/button-down-active.svg");
}

#musicplayer,
#musicplayer * {
  cursor: url("/new_cursors_default.png"), auto;
}





/* input */
#musicplayer input[type="range"] {  
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

#musicplayer input[type="range"]:focus {
  outline: none;
}

#musicplayer input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  height: 21px;
  width: 11px;
  background: url("https://loveberry.nekoweb.org/assets/musicplayer/indicator-horizontal.svg");
  transform: translateY(-8px);
  box-shadow: none;
  border: none;
}

#musicplayer input[type="range"].has-box-indicator::-webkit-slider-thumb {
  background: url("https://loveberry.nekoweb.org/assets/musicplayer/indicator-rectangle-horizontal.svg");
  transform: translateY(-10px);
}

#musicplayer input[type="range"]::-moz-range-thumb {
  height: 21px;
  width: 11px;
  border: 0;
  border-radius: 0;
  background: url("https://loveberry.nekoweb.org/assets/musicplayer/indicator-horizontal.svg");
  transform: translateY(2px);
}

#musicplayer input[type="range"].has-box-indicator::-moz-range-thumb {
  background: url("https://loveberry.nekoweb.org/assets/musicplayer/indicator-rectangle-horizontal.svg");
  transform: translateY(0px);
}

#musicplayer input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: var(--window-frame);
  border-right: 1px solid var(--button-shadow);
  border-bottom: 1px solid var(--button-shadow);
  box-shadow: 1px 0 0 var(--button-highlight), 1px 1px 0 var(--button-highlight), 0 1px 0 var(--button-highlight), -1px 0 0 var(--light-button-shadow),
    -1px -1px 0 var(--light-button-shadow), 0 -1px 0 var(--light-button-shadow), -1px 1px 0 var(--button-highlight), 1px -1px var(--light-button-shadow);
}





.static-overlay {
  position: absolute;
  inset: 0;
  background: url("https://media.tenor.com/mz51ce_z9m4AAAAM/vhs-broken.gif") repeat;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

@keyframes staticFlash {
   0%   { opacity: 0; }
  20%  { opacity: 1; }    /* full visibility */
  60%  { opacity: 0.85; } /* still strong */
  100% { opacity: 0; }
}



body {
  /* your existing styles... */
  background-image: url("/index_background.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: auto;
  
  
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("https://i.pinimg.com/originals/5a/93/4e/5a934e84f67d2a61a118ec95b1d6cb74.gif") repeat;
  opacity: 0.45;     /* change to make it stronger or weaker */
  pointer-events: none;
  mix-blend-mode: screen; /* optional, try different ones */
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

.page-layout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  flex: 1;
  justify-items: center; 
}

.sidebar {
  background-color: rgba(0,0,0,0.5);
  border: 2px solid #EDD2C0;
  padding: 15px;
  font-size: 12px;
  box-sizing: border-box;
}

.left-sidebar,
.right-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0px;
  text-align: center;
  
  
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  width: 100%; /* <-- ADD THIS */
}

.left-sidebar a{
  color: #EDD2C0;
   text-decoration: none;   
}

.left-sidebar a:hover {
  text-decoration: underline;
  cursor: url("/new_cursor_pointer.png"), pointer;
}

@media (max-width: 900px) {
  .album-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 650px) {
  .album-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .album-row {
    grid-template-columns: 1fr;
  }
}