/* 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 {
  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: 30px; /* 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 / -1; /* Second .box2 is in the first column (200px) */
}

.box2:nth-child(3) {
  grid-column: 1 / -1; /* 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 */
}

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

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

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

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

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

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

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

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

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

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

.box2:nth-child(17) {
  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/Wood%20tile.png');
     background-size: 150px;
     z-index: -5;
     background-attachment: fixed;
     background-repeat: repeat;
     animation: scrollBg 59s linear infinite;
     
     }

    @keyframes scrollBg {
      from {
        background-position: 0 0;
      }
      to {
        background-position: -100% 0%;
      }
    }
    
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.curtain {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

  
.curtain-slide {
  display: inline-block;
  margin-block: 0px;
  animation: 35s slide linear infinite;
  
}

.curtain-slide img {
  height: 200px;
  margin: 0px;
}

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

      

::selection {
/* Change highlight background color */
background: red;
/* Change highlight text color */
color: #FFFFFF;
}