/* 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-image: url("background.gif");
  background-color: #f0efed;
  overflow-y: scroll;
  cursor: url(https://cur.cursors-4u.net/mechanics/mec-5/mec443.cur), auto;
  font-family: "PixelOperator";
}

.header {
  position: absolute;
  top: 0;
  left: 50%; /* Start positioning from the center of the container */
  margin-top: 50px;
  transform: translateX(-50%); /* Offset by half its own width */
  width: 1050px;
  height: 100px;
  background-color: #D4D4D4;
  border-width: 1px;
  border-color: #000;
  border-style: solid;
  background-color: #fff;
  background-image: url("https://reel-and-remote.neocities.org/fcd8af518c19a2f0056062d0f675cda5.jpg");
  background-position-y: 700px;
  overflow: hidden;
}

/*parent container*/
.container {
  position: relative; /* Allows .header to be positioned within it */
  display: flex;
  justify-content: center; /* Center the items horizontally */
  align-items: flex-start; /* Align items at the top */
  gap: 10px; /* Space between the columns */
  margin: 0 auto;
  padding-top: 100px; /* Offset for the header height */
  height: 100vh; /* Full viewport height */
  box-sizing: border-box;
  padding-top: 170px; /* Add space equal to header height plus extra space */
  font-family: "PixelOperator";
}

#left-column {
  margin: 3px;
  float: left;
  width: 140px; /* Wider width to give text more space */
  height: auto;
  padding: 5px;
  background-image: url("https://reel-and-remote.neocities.org/redsparkle.gif");
  background-color: #D4D4D4;
  border-width: 1px;
  border-color: #000;
  border-style: solid;
  text-align: left;
  box-sizing: border-box;
  font-family: "PixelOperator";
  font-size: 16px;
  line-height: 1.4;
  word-break: break-word; /* Ensures long words break */
  white-space: normal; /* Allows natural wrapping */
}

#left-column .styled-link {
  display: block;
  padding: 4px 0; /* Reduced padding to fit content */
  color: #000;
  background-color: #f2f2f2;
  text-align: center;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  text-decoration: none;
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

#left-column .styled-link:first-child {
  border-top: 1px solid #000;
}

#left-column .styled-link:hover {
  color: #000;
  background-color: #fff;
  text-decoration: none;
}

.holder {
  margin: 5px;
  width: 680px;
  height: auto;
  padding: 10px;
  background: #D4D4D4;
  border-width: 1px;
  border-color: #000;
  border-style: solid;
  font-family: "PixelOperator";
  font-size: 16px;
  box-sizing: border-box; /* Ensure padding and border are included in width */
}

.right-container {
  margin: 5px;
  width: 250px; /* Adjust the width as needed */
  height: auto;
  padding: 10px;
  background-image: url("https://reel-and-remote.neocities.org/redsparkle.gif");
  background-color: #D4D4D4;
  border-width: 1px;
  border-color: #000;
  border-style: solid;
}

.box {
  display: grid;
  grid-template-columns: 200px 1fr; /* First column is 200px, second column takes remaining space */
  gap: 10px; /* Space between grid items */
  margin: auto;
  width: 100%; /* Make it 100% of the container's width */
  max-width: 100%; /* Ensure it doesn't exceed the width of .holder */
  box-sizing: border-box; /* Include padding and border in the width */
  padding: 5px;
  font-family: "PixelOperator";
  font-size: 16px;
  border-width: 12px;
  border-style: indent;
}

.box2 {
  padding: 10px;
  background-color: #f2f2f2;
  font-family: "PixelOperator";
  font-size: 16px;
  text-align: left;
  border-width: 1px;
  border-style: solid;
  border-color: #5e5e5e;
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

.box2:first-child {
  grid-column: 1 / -1; /* Makes the first .box2 span both columns */
}

.box2:nth-child(2) {
  grid-column: 1; /* Second .box2 is in the first column (200px) */
}

.box2:nth-child(3) {
  grid-column: 2; /* Third .box2 is in the second column (remaining space) */
}

.box2:nth-child(4) {
  grid-column: 1 / -1; /* Fourth .box2 spans both columns, fitting directly beneath the previous two */
}

.box2:nth-child(5) {
  grid-column: 1 / -1; /* Fourth .box2 spans both columns, fitting directly beneath the previous two */
}

.box2:nth-child(6) {
  grid-column: 1 / -1; /* Fourth .box2 spans both columns, fitting directly beneath the previous two */
}

#button {
  width: 177px;
  height: 102px;
  font-family: "PixelOperator";
  font-size: 13px;
  line-height: 20px;
}

a:link {
  color: #000;
  background-color: transparent;
}

a:visited {
  color: #000;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #4a4a4a;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #000;
  background-color: transparent;
  text-decoration: none;
}

h1 {
  color: #303030;
  font-size: 24px;
  text-align: center;
  font-family: "PixelOperator";
  margin-top: 10px;
}

h2 {
  font-family: "PixelOperator";
  font-size: 14px;
  color: #000;
  line-height: 5px;
  height: 30px;
  width: 120px;
  text-align: center;
}

hr.black {
  border-top: 2px solid black;
}


.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.02));
  z-index: 20;
  background-size: 100% 2px, 3px, 100%;
  pointer-events: none;
}

#statuscafe {
    padding: .5em;
    background-color: white;
    border: 1px solid black;
  font-family: PC98;
  font-size: 14px;
    height: 60px;
    overflow-y: scroll;
}

#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}


   * {cursor: url(https://reel-and-remote.neocities.org/yellow%20cursor.png), url(https://reel-and-remote.neocities.org/yellow%20cursor.png), auto !important;}
  @font-face {
    font-family: 'PixelOperator';
    src: url(https://reel-and-remote.neocities.org/PixelOperator.woff); format:('woff');
  }
  
body {
  
     background-image: url('https://reel-and-remote.neocities.org/sprite-animation3.gif');
     background-size: 150px;
     background-attachment: fixed;
     background-repeat: repeat;
     font-family: 'PixelOperator';
     animation: scrollBg 60s linear infinite;
     }

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

        /* orange theme */
        
        #musicplayer{ 
          font-family: 'basiic';
          font-weight:bold;
          height:30px;
          width:100%;
          left:0;
          top:0;
          position:fixed;
          margin-bottom:20px;  
          display:flex;
          z-index: 15;
          background: linear-gradient(180deg,#e6b795 0%, white 45%, #ffbe3b 47%, #e6b795 100%);
         border:ridge 2px #ffbe3b; /* border around player */
          outline: solid 2px black;  
         box-shadow: inset 10px 0px 6px -10px #ffbe3b, inset -13px 0px 6px -10px #ffbe3b, inset 0px 10px 6px -10px #ffffff, inset 0px -13px 6px -10px #ffbe3b";
            }
         
            .songtitle{ 
            display:block;
            padding:2px; /* padding around song title */
            font-family: 'pixel';
            margin-top:4px;
            margin-right: 5px; 
            font-size:15px;
            color:black;
            letter-spacing: 1px; 
        
            background: white;/* background of song title */
            border: gray inset 1px;
               border-radius:6px;
               box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
            }
         
            .controls{
              font-size:12px; /* size of controls */
              text-align:center;
              width:100px;
              height:20px;
              text-decoration:none;
              filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
            }
         
            .controls td{
               padding-top:5px; /* padding around controls */
            }
         
            .seeking{
              width:75%;
              background: transparent;/* background color of seeking bar */
              display:flex;
              justify-content: space-evenly;
              padding:7px; /* padding around seeking bar */
               
            }
         
            .current-time{  
              padding-right:5px;
              margin-right: 3px; 
             filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
               
            }
         
            .total-duration{
              padding-left:5px;
              filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
            }
         
           .ctrlimg {
   height:16px;
   width:16px;
   }
    .ctrlimg:hover{
        cursor:help;
    }
            
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
              background: transparent;
            }
            
            input[type=range]:focus {
                outline: none;
            }
            
            input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                height: 6px; /* thickness of seeking track */
                cursor: help;
                border-radius: 6px;
                background: black; /* color of seeking track */
                border: 1px white solid;
            }
        
            input[type=range]::-webkit-slider-thumb {
              
                height: 25px; /* height of seeking square */
                width: 25px; /* width of seeking square */
                background-image:  url('https://reel-and-remote.neocities.org/tumblr_30831e6a2eef41fe3fd506d5b3bf16ae_10c05faf_75.png'); /* image of  seeking square */
                background-size: 25px;
                -webkit-appearance: none;
                margin-top: -10px;
                
            }
            
        input[type=range].volume_slider::-webkit-slider-runnable-track { 
            background: white; /* color of volume seeking track */
             filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
            }
            
         input[type=range].volume_slider::-webkit-slider-thumb {
            background-image: url(https://reel-and-remote.neocities.org/tumblr_30831e6a2eef41fe3fd506d5b3bf16ae_10c05faf_75.png);/* image of volume seeking square */
            background-size: 25px;
            height: 25px; /* height of volume seeking square */
            width: 25px; 
            margin-top: -10px;
           }
         
         
        .slider_container {  
          width: 15%;       /* width of volume seeker */
          display: flex;
          justify-content: center;
          align-items: center;
        }    
        
::selection {
/* Change highlight background color */
background: red;
/* Change highlight text color */
color: #FFFFFF;
}