/* Bird - https://www.cursors-4u.com/cursor/nat69 */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/bird-7df08b07-32.webp') 37 39, auto !important;
}
/* End www.Cursors-4U.com Code */

  @font-face {
src: url(https://dl.dropbox.com/s/gavkuhehligvhz8/PsycheLover-Regular.otf);
font-family: psyche;
}
  
  @font-face {
font-family: Betterfly;
src: url(https://dl.dropbox.com/scl/fi/wf51yd35yy4d4wydyb2pk/betterfly.ttf?rlkey=wkcq2rc54qrc9uucr8e4yqzah&dl=0);
}

::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

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

welcome {
font-family: psyche;
margin-top: 10px;
margin-bottom: 10px;
}

body {
background-color: black;
}

::selection {
  background-color: gray;
  color: #ffffff;
}

.njz {
/*(c) solielios*/
border-width:12px;
border-style:solid;
border-image: url("https://i.imgur.com/Kh6qtcn.png") 11 fill round;   
margin: 0 auto;
width: 864px;
display:flex;
flex-direction: column;
}

.inner {
width: 100%;
background-color: white;
}

.chibi {
width: 200px;
height: 200px;
}

.chibi, #switch {
animation-name: floating; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
} 

@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}     
    

.header {  
border-width: 1px;
border-style: solid;
border-color: black;
background-image: url('/images/abc.png');
background-size: cover;
width: 100%;
height: 220px;
}

@font-face {
font-family:'kiwi';
src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
}

.name {
font-family: kiwi;
font-size: 3.75em;
-webkit-text-stroke: 1px black;
color: white;
margin-top: 70px;
margin-left: 10px;
}

 .name {
    /* animation: glitch-2 1s infinite linear; */
    animation: glitch-1 2s infinite linear;
  }

  @keyframes glitch-1 {
    0%,
    12%,
    15%,
    52%,
    55%,
    82%,
    85%,
    100% {
      opacity: 1;
      transform: scaleX(1) scaleY(1);
    }

    13% {
      opacity: .8;
      transform: scaleY(2);
      color: white;
    }

    53% {
      opacity: .8;
      transform: scaleX(.7);
      color: white;
    }

    83% {
      opacity: 8;
      transform: rotate(-10deg);
      color: white;
    }
  }

  @keyframes glitch-2 {
    13% {
      color: white;
    }

    53% {
      color: white;
    }

    83% {
      color: white;
    }
  }

#arle {
position: fixed;
bottom: 0;
left: 0;
}

#bina {
position: fixed;
bottom: 0;
right: 0;
}

  @font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/Jojoba.otf);
font-family: jojoba;
}
  

#switch {
width: 200px;
text-align: center;
position: fixed;
z-index: 99;
bottom: 0;
right: 0;
font-family: jojoba;
font-size: 2.75em;
-webkit-text-stroke: 0.25px #c095db;
color: white;
}

.br {
margin-top: 10px;
margin-bottom: 10px;
width: 98%;
border-style: solid;
border-width: 10px;
border-image: url("https://dl.dropbox.com/scl/fi/6wo0voidugxmgg0a81v20/lace-border-png-37013.png?rlkey=3hn4k762e8y0v6d2v6mwrtcbr&st=5o8bpex4") 60 fill round;        
}

  @font-face {
src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
font-family: hearts;
}
  

.grid {
  gap: 20px;
padding: 20px;
box-sizing: border-box;
  display: grid;
  grid-template-columns: 220px 1fr 230px;
  gap: 18px;
  align-items: stretch;
  font-family: hearts;
}

.left, .center, .right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.left .box:last-child,
.center .box:last-child,
.right .box:last-child {
  flex-grow: 1;
}

/* scrolling version*/
.lacescr {
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
width:215px;
height:100px;
overflow-y:auto;
} 


.linkme {
  background-color: transparent;
  background-image: radial-gradient(gray 30%, transparent 70%);
text-align: center;
font-size: 2em;
font-family: kiwi;
color: white;
-webkit-text-stroke: .75px black;
}

.curr {
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}

.bg, .in { box-sizing: border-box;}

.bg {
/* for plain background */
background: #FE82B624;

/* vv for image background. remove if want plain */
background-image:url(https://i2.glitter-graphics.org/pub/969/969322z4pt5oo6t8.jpg);
background-size:cover;
padding:12px; /* make number bigger/smaller for a bigger/smaller border */
width:100%;
border:1px solid black;
text-align: center;
}

.in {
background: #FFF;
color: #000;
padding:5px;
border:1px solid black;
height:200px; /* set height to "height:fit-content;" to expand with text size */
overflow-y:auto; /* remove overflow if you don't want a scroll */
padding: 10px;
font-size: 1.5em;
}

.profile {
width: 92%;
height: auto;
border-style: solid;
border-width: 10px;
border-image: url("https://dl.dropbox.com/scl/fi/6wo0voidugxmgg0a81v20/lace-border-png-37013.png?rlkey=3hn4k762e8y0v6d2v6mwrtcbr&st=5o8bpex4") 60 fill round;        
}


  @font-face {
font-family: aespa;
src: url(https://dl.dropbox.com/s/gy2yvbau2ieeeng/aespa_Regular.ttf); 
} 

  @font-face {
font-family: good-time;
src: url(https://dl.dropbox.com/s/ijxda4xb1cyjpe4/KGAlwaysAGoodTime.ttf);
}
  


.whitecloudybox {
width: 100%;
border: 10px solid transparent;
box-sizing: border-box;
border-image: url(https://i.postimg.cc/QM9dMFhq/cloud.png) 50 round;
}

.whitecloudyfull { 
width:100%;
height: fit-content;
background:#fff;
color:black;
}

.navi a {
padding: 5px;
text-decoration-line: underline;
text-decoration-style: wavy;
color: black;
}

.navi a:hover {
color: gray;
}

.imagemask {
font-family: chemre;
background-image: url("https://dl.glitter-graphics.com/pub/2845/2845552hjo7wfvzhd.jpg");
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5em;
font-weight:bold;
width:fit-content;
margin:0 auto; /* this is to center, if needed */
/* add below if you want an outline, if not remove */
filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}

.brackets {
border: 3px red solid;
border-width: 0 3px 0 3px;
border-radius:10px;
padding: 0px 4px 0px 4px;
width:100%; /* change number if needed */
height:150px; /* change number if needed */
overflow-y:auto;
background-color: lightgray;
display: flex;
gap: 10px;
text-align: center;
padding: 10px;
box-sizing: border-box;
}


.brackets div {
display: block;
text-align: center;
width: 50%;
height: 100%;
overflow-y: scroll;
}

.likes::-webkit-scrollbar {
        width: 8px;
        }

        .likes::-webkit-scrollbar-track {
        background-color: #e4e4e4;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        }

        .likes::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #e4e4e4;
        border: 1px solid #aaa;
        }

likes {
font-size: 1.5em;
text-align: center;
color: white;
font-family:jojoba;
filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black) drop-shadow(1px 0 black) drop-shadow(-1px 0 black) drop-shadow(0px 1px red) drop-shadow(0 -1px red) drop-shadow(1px 0 red) drop-shadow(-1px 0 red);
}

 #musicplayer{
font-family: aespa; /* default font */
background:white; /* background color of player */
border:4px solid black; /* border around player */
width:200px; /* width of the player - make it 100% if you want it to fill your container */
padding:10px;
text-align:center; 
display:flex;
flex-direction:column;
gap:10px;
}

.neighbors {
padding: 5px;
box-sizing: border-box;
border-style: solid;
              /*(c) solielios*/
border-width:12px;
border-style:solid;
border-image: url("https://i.imgur.com/Kh6qtcn.png") 11 fill round;         
height: 230px;
background-color: white;
overflow-y: scroll;
}


 
            .songtitle, .track-info, .now-playing{
                padding:5px;
            }
 
            .controls{
                display:flex; 
                flex-direction:column; 
                gap:10px;
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                font-size:17px !important; /* size of controls */
                width:100%;
            }
 
            .buttons div{
                width:33.3%;
            }
 
            .playpause-track, .prev-track, .next-track{
                color: red; /* color of buttons */
                font-size:35px !important; /* size of buttons */
            }
 
            .volume-icon{
                font-size:22px !important; /* size of volume icon */
            }
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:5px;
            }
 
            .now-playing, .track-info{
                background-color: gray; /* background color of top two boxes */
            }
 
            .now-playing{
                font-weight:bold;
            }
 
            input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
                width:100%;
            }
 
            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }
 
            input[type=range]::-webkit-slider-runnable-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#f74a4a; /* color of seeking track */
            }
 
            input[type=range]::-webkit-slider-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#f74a4a; /* color of seeker square */
                -webkit-appearance:none;
                margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
            }
 
            input[type=range]::-moz-range-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#f74a4a; /* color of seeking track */
            }
 
            input[type=range]::-moz-range-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background: #f74a4a; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }