@font-face {
font-family: 'basiic';
 src: url('https://file.garden/Zztv0a9yEhr5pmEq/basiic.ttf') format("truetype");
 }

 * {
    font-family: 'basiic';
    cursor: url('https://cdn.cursors-4u.net/previews/small-grey-outline-pointer-6a97f823-32.webp') 32 32, auto !important;
 }

*::selection {
    background-color: rgb(53, 53, 53)!important;
    color: rgb(219, 219, 219)!important;
}

*::-webkit-scrollbar {
width: 14px
}

::-webkit-scrollbar:horizontal {
height: 14px
}

::-webkit-scrollbar-corner {
background: transparent
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, transparent, transparent 20%);
border-radius: 5px; 
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #000000, #000000 20%);
border-radius: 5px; 
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #797F8B;
border-radius: 5px;
box-shadow: inset 0 -1px 1px #000000, inset 0 1px 1px #000000;
}

::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(90deg, #797f8b80 45%, #f1f1f1 0, #CBCBCB);
}

::-webkit-scrollbar-thumb:horizontal {
background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
}


body {
    background-image: url(https://i.pinimg.com/1200x/ce/15/fb/ce15fbd5e98db9c199dbde93bcecb7bd.jpg);
    background-size: 100%;
    background-position-x: 0.5px;
    background-color: black;
    overflow-y: scroll;
    
}

body::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }

#main {
    width: 850px;
    height: 1200px;
    margin: 0 auto;
    display: flex;
    
}

#sect1 {
    background-color: white;
    width: 200px;
    height: 650px;
    position: fixed;
    top: 40px;
    background-size: 100%;
    filter: grayscale(12%) sepia(11%) brightness(95%) saturate(87%);
-webkit-filter: grayscale(30%) sepia(10%) brightness(100%) saturate(87%);
-moz-filter: grayscale(102%) sepia(100%) brightness(98%) saturate(87%);
}

#sect2 {
    background-color: white;
    width: 74.5%;
    height: 100%;
    margin-left: 24.5%;
    background-size: 60%;
    filter: grayscale(12%) sepia(11%) brightness(95%) saturate(87%);
-webkit-filter: grayscale(30%) sepia(10%) brightness(100%) saturate(87%);
-moz-filter: grayscale(102%) sepia(100%) brightness(98%) saturate(87%);
}

#sect1, #sect2 {
    background-image: url(https://i.pinimg.com/736x/17/2a/0d/172a0d7f3b255cc9043c2040364b9911.jpg);
    border: 3px ridge black;
    border-radius: 5px;;
}

#sect1 .inner-main {
    width: 80%;
    height: 95%;
}

#sect2 .inner-main {
    width: 95%;
    height: 97%;
}

.inner-main {
    background-color: black;
    justify-self: center;
    margin-top: 7px;
    border-radius: 10px;
    border: 10px solid transparent;
    border-image: url('https://file.garden/aXu9FpkcPAJchg9c/Borders/biggerlacedark') 40 round;
    border-image-outset: 3px;
    display: flex;
    flex-direction: column;
}

#musicplayer{ 
  font-family: 'basiic';
  font-weight:bold;
  height:30px;
  width:99.5%;
  left:0;
  top:0;
  position:relative;
  display:flex;
    background: linear-gradient(180deg,black 0%, lightgray 45%, black 47%, black 60%, gray 100%);  
  border:ridge 2px rgb(0, 0, 0);/* border around player */
  outline: solid 2px black;  
  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%);
    }
 
    .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-decortation: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: 30px; /* height of seeking square */
        width: 20px; /* width of seeking square */
        background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* 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://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
   }
 
 
.slider_container {  
  width: 15%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}    

.tabs-container {
  max-width: 99%;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse; /* Pushes sidebar to the right, content to the left */
  gap: 20px;
}

/* Sidebar structure containing buttons and links */
.sidebar-nav {
  display: flex;
  flex-direction: column; /* Stacks buttons vertically */
  width: 150px; /* Width of your right sidebar */
  flex-shrink: 0;
  margin-top: 10px;
}

/* Main Content Area Container */
.content-area {
  flex-grow: 1;
  position: relative;
}

input[type="radio"] {
  display: none;
}
label, button {
  padding: 10px 15px;
  background-image: linear-gradient(360deg, rgba(54, 49, 49, 1) 4%, rgba(66, 73, 77, 1) 29%, rgba(0, 0, 0, 1) 56%, rgba(63, 65, 66, 1) 62%, rgba(143, 143, 143, 1) 95%);
  cursor: pointer;
  display: block;
  margin-bottom: 2.4px;
  border-radius: 5px;
  text-align: center;
  color: white;
  width: 114px;
  height: 3px;
  font-family: 'basiic';
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease-in-out;
  border: 2px ridge black;
  margin-top: 5px;

}

label:hover, button:hover {
  font: rgb(0, 0, 0);
  filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
    font-style: italic;
  border: 2px ridge white;
}



/* Show content based on which radio button is checked in the sidebar */
.tabs-container:has(#tab1:checked) #content1 { display: block; }
.tabs-container:has(#tab2:checked) #content2 { display: block; }

.tab-content {
    display: none;
    width: 600px;
    height: 100%;
}

#tab1:checked ~ #main #content1 {
    display: block;
}

#tab2:checked ~ #main #content2 {
    display: block;
}


.nav {
    width: 160px;
    height:490px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.blog-post-box {
    background-color: white;
    width: 570px;
    height: 750px;
    margin: 0 auto;
    margin-top: 20px;
    border: 10px solid transparent;
    border-image: url('https://file.garden/Z4-KIXj5okOfzeyR/borders/bdlfse.gif') 21 round;
    border-image-outset: 7px;
    overflow-y: scroll;
}

.nav-section {
    width: 100%;
    height: 200px;
}

.header-img {
    width: 600px;
    height: 337;
}

.indented-txt {
    text-indent: 40px;
}

.disclaimer-txt {
    font-style: italic;
    color: grey;
}

.post-header {
    font-size: larger;
    font-style: italic;
    font-weight: bolder;
}

.post-subheading {
    font-size: large;
    font-style: italic;
    font-weight: bold;
}

/* floaties */

#floatie1 {
    background: url(https://neocitiesimagestory.carrd.co/assets/images/image13.png?v=156d3e66) no-repeat;
    background-size: 100%;
    position: fixed;
    right: 200px;
    bottom: -60px;
    height: 320px;
    width: 250px;
    z-index: 899;
    filter: grayscale(12%) sepia(11%) brightness(95%) saturate(87%);
-webkit-filter: grayscale(30%) sepia(10%) brightness(100%) saturate(87%);
-moz-filter: grayscale(102%) sepia(100%) brightness(98%) saturate(87%);
}