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

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


p, ul {
    font-family: 'basiic';
    color: #12141ac7;
    font-size: 15px;
}

a {
    color: grey;
    text-decoration: underline;
}

a:hover {
    color: rgb(49, 49, 49);
    font-style: italic;
}

#top-divider {
    background-image: url(https://files.catbox.moe/h0k9ee.png);
    width: 100%;
    height: 34px;
    transform: translateY(-15px) translateX(-10px);
}

body {
    width: 100%;
    height: 100%;
    background-image: url(https://i.pinimg.com/1200x/e8/65/c6/e865c6af953ec700deb2def26440bae5.jpg);
    background-repeat: repeat;
    background-size: 60%;
    background-color: black;
    background-position-x: 100%;
    
}

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

    #container::-webkit-scrollbar-thumb {
      background: transparent;
    }

#outer-box-container {
    background-color: rgb(238, 238, 238);
    width: 1000px;
    height: 1050px;
    margin: 0 auto;
    margin-top: 10px;
    border: 10px solid transparent;
    border-image: url('https://file.garden/Z4-KIXj5okOfzeyR/borders/bdlfse.gif') 21 round;
    border-image-outset: 7px;
    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%);
}

#inner-box-container{
    background-image: url("https://i.pinimg.com/736x/52/de/73/52de73e9dcc967f785a93b91ff55b85c.jpg");
    width: 100%;
    height: 74%;
    border-radius: 0px 0px 10px 10px;
}

#main-header {
    width: 106%;
    height: 250px;
    display: flex;
    flex-direction: row;
    transform: translateY(10px);
}

#header1 {
    background-image: url(https://i.pinimg.com/736x/67/f1/9b/67f19bc6ceb862df02845c316085ae21.jpg);
    height: 240px; 
    width: 93.6%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: -90px;
    border-radius: 10px 10px 0px 0px;
    border: 4px solid black;
}


.marquee-container {
  overflow: hidden;
  width: 980px;
  margin-left: 10px;
  filter: brightness(0.9);
}

.marquee {
  display: flex;
  width: max-content;
  animation: marquee-scroll 18s linear infinite;
  
}

.marquee img {
    filter: grayscale(100%);
}

.marquee img:hover {
    filter: none;
}

.marquee-track {
  display: flex;
  gap: 2px;
  padding: 2px;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#main-content {
    width: 99%;
    height: 710px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-left: 10px;
}

#sect1 {
    width: 20%;
    height: 99%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#sect2 {
    width: 60%;
    height: 99%;
    display: flex;
    flex-direction: column;
}

#sect3 {
    width: 17%;
    height: 99%;
    display: flex;
    flex-direction: column;
}

.container {
    background-color: white;
    border: 4px double #2b3241;
    border-radius: 5px;
    margin: 0 auto;
    background-size: 30%;
    display: flex;
    flex-direction: column;
    padding: 5px;
    background-image: url(https://i.pinimg.com/originals/5e/13/21/5e1321ec1ee8a3a1d7395d5baf4d832d.png);
}

.header {
    background: 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%);    width: 99%;
    height: 30px;
    margin: 0 auto;
    border-radius: 5px;
    border: 3px solid black;
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.header p{
    margin: 0 auto;
    color: #CBCBCB;
    font-size: large;
}

.header:hover {
    font-style: italic;
}

.inner-container {
    background-color: white;
    margin: 0 auto;
    width: 92%;
    height: 65%;
    border: 10px solid transparent;
    border-image: url('https://file.garden/Z4-KIXj5okOfzeyR/borders/mimilal.png') 70 round;
    border-image-outset: 8px;
    border-radius: 10px;
    background-image: url(https://i.pinimg.com/originals/49/e0/4f/49e04f63f62e6fb734f26e4d9b206da3.png);
    padding: 10px;
}

.txt-box {
    background-color: white;
    border: 10px solid transparent;
    border-image: url('https://file.garden/Z4-KIXj5okOfzeyR/borders/nwya.png') 100 round;
    border-image-outset: 8px;
    border-radius: 10px;
    filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black) 
    drop-shadow(0 2px 0 black) 
    drop-shadow(0 -1px 0 black);
    overflow: scroll;
    overflow-x: hidden;
}

.txt-box::-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);
}

#about-site {
    width: 97%;
    height: 250px;
}

#about-txt {
    width: 300px;
    height: 140px;
}

#sect2-bottom {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

#sect2-2{
    width: 380px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#blog-update {
    background-color: white;
    width: 97%;
    height: 200px;
    background-size: 50%;
    margin-bottom: 10px;
}

#blog-update .inner-container {
    width: 87%;
}

#blog-txt {
    width: 70%;
    height: 80%;
    margin-left: 80px
}

#sect2-3 {
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}

#band-rec {
    width: 100%;
    height:150px;
    background-size: 100%;
}

#band-txt {
    width: 160px;
    height: 50px;
    overflow-y: hidden;
}

#random-imgs {
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
}

#random-imgs img {
    width: 90%;
    border-radius: 5px;
    border: 4px double #2b3241;
    filter: grayscale(100%)
}

#random-imgs img:hover {
    filter: none;
}

#nav-todo {
    width: 90%;
    height: 350px;
    background-size: 130%;
    margin-bottom: 10px;
}

#inner-nav {
    width: 85%;
    height: 180px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 10px;;
}


button {
    background: 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%);    width: 99%;
    color: #CBCBCB;
    width: 130px;
    height: 30px;
    border: black 3px solid;
    border-radius: 5px;
}

button:hover {
    filter: invert();
    border: white 3px solid;
}

#todo-txt {
    height: 70%;
}

#todo-txt ul {
    transform: translateX(-19px);
}

#neighbor {
    width: 90%;
    height: 420px;
    background-size: 130%;
}

#neighbors-links {
    width: 130px; 
    height: 300px;
    margin-bottom: 10px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

#neighbors-links img {
    filter: grayscale(100%);
    width: 100%;
}

#neighbors-links img:hover {
    filter: none;
}

#neighbors-links::-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);
}

#link-box {
    width: auto;
    height: 50px;
}

#update-log {
    width: 90%;
    height: 245px;
    background-size: 100%;
}

#fanlistings {
    width: 90%;
    height: 400px;
    background-size: 100%;
}

#update-log-txt {
    height: 90%;
}

#innerfanlisting#neighbors-links::-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);
}

#glenplayer02 {
    position: relative;
    top: 3px;
    left: 4px;
    display: flex;
    z-index: 99;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
    color: #fff;
}

marquee {
font-family: 'basiic';
color: #fff;
}
 
#glenplayer02 > div { align-self:center; -webkit-align-self:center; } 
 
.music-controls { 
user-select:none; 
-webkit-user-select:none; 
width:16px; 
font-size:16px; 
cursor:pointer; } 
 
.playy, .pausee {
color:#ece8ff; 
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
} 
 
/* color of play & pause buttons */ 
.pausee {display:none;} 
 
.sonata { margin-left:10px; color:#fff; /* color of music note symbol */ } 
 
.labeltext { margin-left:0px; font-family: lovely; font-size:16px; font-weight: bold; color:#fff; /* color of song title */ text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; } 

/*floaties*/

#floatie1 {
    background: url(https://neocitiesimagestory.carrd.co/assets/images/image12.png?v=64bb217d) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 450px;
    bottom: -2px;
    height: 320px;
    width: 250px;
    z-index: 900;
    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%);
}

#floatie1-2 {
    background: url(https://neocitiesimagestory.carrd.co/assets/images/image12.png?v=64bb217d) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 450px;
    bottom: -2px;
    height: 320px;
    width: 250px;
    z-index: 899;
    filter: drop-shadow(1px 1px 0 #0F100A) 
  drop-shadow(-1px 1px 0 #0F100A) 
  drop-shadow(0 2px 0 #0F100A) 
  drop-shadow(0 -1px 0 #0F100A) 
  drop-shadow(0 1px 1.5px #0F100A) 
  drop-shadow(0 -1px 1.5px #0F100A) 
  drop-shadow(1px -1px 1.5px #0F100A) 
  drop-shadow(-1px -1px 1.5px #0F100A);
}

#floatie2 {
    background: url(https://neocitiesimagestory.carrd.co/assets/images/image17.png?v=64bb217d) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 570px;
    bottom: 62px;
    height: 60px;
    width: 150px;
    z-index: 901;
    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%);
}

#floatie2-2 {
    background: url(https://neocitiesimagestory.carrd.co/assets/images/image17.png?v=64bb217d) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 570px;
    bottom: 62px;
    height: 60px;
    width: 150px;
    z-index: 900;
    filter: drop-shadow(1px 1px 0 #0F100A) 
  drop-shadow(-1px 1px 0 #0F100A) 
  drop-shadow(0 2px 0 #0F100A) 
  drop-shadow(0 -1px 0 #0F100A) 
  drop-shadow(0 1px 1.5px #0F100A) 
  drop-shadow(0 -1px 1.5px #0F100A) 
  drop-shadow(1px -1px 1.5px #0F100A) 
  drop-shadow(-1px -1px 1.5px #0F100A);
}

#floatie3 {
    background: url(https://neocitiesimagestory.carrd.co/assets/images/image18.png?v=bc41c1f2) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 700px;
    bottom: -227px;
    height: 210px;
    width: 150px;
    z-index: 900;
    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%);
}

#floatie3-2 {
    background: url(https://neocitiesimagestory.carrd.co/assets/images/image18.png?v=bc41c1f2) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 700px;
    bottom: -227px;
    height: 210px;
    width: 150px;
    z-index: 899;
    filter: drop-shadow(1px 1px 0 #0F100A) 
  drop-shadow(-1px 1px 0 #0F100A) 
  drop-shadow(0 2px 0 #0F100A) 
  drop-shadow(0 -1px 0 #0F100A) 
  drop-shadow(0 1px 1.5px #0F100A) 
  drop-shadow(0 -1px 1.5px #0F100A) 
  drop-shadow(1px -1px 1.5px #0F100A) 
  drop-shadow(-1px -1px 1.5px #0F100A);
}

#floatie4 {
    background: url(https://i.postimg.cc/x8rPbcj0/IMG-9258.gif) no-repeat;
    background-size: 40%;
    position: absolute;
    right: 350px;
    bottom: -315px;
    height: 250px;
    width: 100px;
    z-index: 900;
    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%);
}