/* Scrollbar styles */


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

::-webkit-scrollbar-corner {
    background: #f587c6;
}

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

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

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

::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
    display: block;
}

::-webkit-scrollbar-button:vertical {
    height: 15px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
    background: #f0a1ce;
    background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #ffdbf0;
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: 100% auto, cover;
    -webkit-background-size: 100% auto, cover;
    -o-background-size: 100% auto, cover;
    background-size: 100% auto, cover;
    border: 1.5px solid #f0a1ce;
    border-radius: 5px;
}

::-webkit-scrollbar-button:vertical:start:increment {
    display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background: #f0a1ce;
    background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #ffdbf0;
    background-repeat: no-repeat;
    background-position: center;
    -moz-background-size: 100% auto, cover;
    -webkit-background-size: 100% auto, cover;
    -o-background-size: 100% auto, cover;
    background-size: 100% auto, cover;
    border: 1.5px solid #f0a1ce;
    border-radius: 5px;
}

.txt-expandhover{
    transition: 0.4s;
}

.txt-expandhover:hover{
    letter-spacing: 7px;
}


main {
    width: 1200px;
    height: 800px;
    max-width: 1200px;
    max-height: 1200px;
    margin: 0 auto;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;


}
aside {
    height: 810px;
    max-height: 1200px;
}

ul

li {
    margin-bottom: 9px; /* Adds space between items */
}

ul {
    list-style-image: url("https://files.catbox.moe/wgl27p.gif");
    list-style-position: inside;
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:relative;
top:0px;
left:5px;
display:flex;
z-index:99;
}
#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}

.music-controls {
    user-select:none;
    -webkit-user-select:none;
    width:13px;
    font-size:18px;
    cursor:pointer;
}

.playy, .pausee {color:#F6D5F0; 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;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size:14px;
    color:#F6D5F0;
    font-weight: bold;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; /* color of music note symbol */
}

.labeltext {
    margin-left:0px;
    position: relative;
    bottom:10px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size:14px;
    color:#F6D5F0;
    font-weight: bold;
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;/* color of song title */
}

/* user styles */

/* styles are what change the color and sizes of stuff on your site. */

/* these are variables that are being used in the code
 *    these tended to confuse some people, so I only kept
 *    the images as variables */

:root {
    --header-image: url('https://files.catbox.moe/y65csl.webp');
    --body-bg-image: url('https://64.media.tumblr.com/1906d268e6b570648f0b7b846bba1b8c/3e3bd4686b965f3d-4a/s75x75_c1/976002a6577af56e95618bf81d7930643ba2bc60.gifv');

    /* colors */
    --content: #FFBDD7;
}

/* if you have the URL of a font, you can set it below */
/* feel free to delete this if it's not your vibe */

/* this seems like a lot for just one font and I would have to agree
 *    but I wanted to include an example of how to include a custom font.
 *    If you download a font file you can upload it onto your Neocities
 *    and then link it! Many fonts have separate files for each style
 *    (bold, italic, etc. T_T) which is why there are so many!
 *
 */
/ fonts
@font-face {
    font-family: kawaii stitch;
    src: url(https://dl.dropbox.com/s/yjal3we9j6biyn5/Kawaii%20Stitch.ttf);}

    @font-face {
        font-family: starborn;
        src: url(https://dl.dropbox.com/s/l0541on0m5eqvdj/Starborn.ttf);
    }

    @font-face {
        font-family: pixel;
        src: url(https://dl.dropbox.com/s/kmhe7d3n18vdz5e/w95fa.woff?dl=0);
    }

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

    @font-face {
        src: url(https://dl.dropbox.com/s/ktlx5w7t8gk42nb/SakeMoru-Regular.ttf);
        font-family: SakeMoru;
    }

    @font-face {
        font-family:'yipes';
        src: url(https://dl.dropbox.com/s/qrdm3wived8sm66/Yipes.ttf);
    }

    @font-face {
        font-family:'fenotype';
        src: url(https://dl.dropbox.com/s/klo6yfrf62916qp/02.10FEN.TTF);
    }

    body {
        font-family: 'Pixel', sans-serif;
        margin: 0;
        background-color: #321D3B;
        /* you can delete the line below if you'd prefer to not use an image */
        background-size: 65px;
        color: #fceaff;
        background-image: var(--body-bg-image);
    }
    * {
        box-sizing: border-box;
    }

    /* below this line is CSS for the layout */

    /* this is a CSS comment
     *    to uncomment a line of CSS, remove the * and the /
     *    before and after the text */


    /* the "container" is what wraps your entire website */
    /* if you want something (like the header) to be Wider than
     *    the other elements, you will need to move that div outside
     *    of the container */
    #container {
    max-width: 900px;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom
     *      and change the media query according to the comment! */
    margin: 0 auto;
    /* this centers the entire page */
    }

    /* the area below is for all links on your page
     *    EXCEPT for the navigation */
    #container a {
    color: #321D3B;
    font-weight: bold;
    /* if you want to remove the underline
     *      you can add a line below here that says:
     *      text-decoration:none; */
    }
    /*A vast majority of this styling comes from 98.css code, if you're making a full windows 98 theme, I suggest you use the stylesheet this is sourced from - https://jdan.github.io/98.css/ */

    .title-bar-controls button {
        border:none;
        border-radius:0;
        box-sizing:border-box;
        color:transparent;
        min-height:23px;
        min-width:75px;
        padding:0 12px;
        text-shadow:0 0 #222;
    }

    .title-bar-controls button {
        background:silver;
        box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
    }

    .title-bar-controls button:not(:disabled):active {
        box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
        text-shadow:1px 1px #222;
    }

    @media (not(hover)){
        button:not(:disabled):hover {
            box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
    }

    .title-bar-controls button:focus {
        outline:1px dotted #000;
        outline-offset:-4px;
    }

    .title-bar-controls button::-moz-focus-inner { border:0 }

    @font-face {
        font-family: "Pixelated MS Sans Serif";
        src: url("https://files.catbox.moe/1za99g.woff") format("woff");
        src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
        font-weight: normal;
        font-style: normal;
    }

    .window, .title-bar {
        font-family: "Pixelated MS Sans Serif", Arial;
        webkit-font-smoothing: none;
        font-size: 11px;
    }

    .window {
        box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
        background: #c0c0c0;
        color:#000;
        padding: 3px;
        width:100%;
    }

    .title-bar {
        background:linear-gradient(90deg, purple, orchid, pink);
        padding: 3px 2px 3px 3px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .title-bar-text {
        font-weight: bold;
        color: white;
        letter-spacing: 0;
        margin-right: 24px;
    }

    .title-bar-controls {
        display: flex;
    }

    .title-bar-controls button {
        padding: 0;
        display: block;
        min-width: 16px;
        min-height: 14px;
    }

    .title-bar-controls button:active {
        padding: 0;
    }

    .title-bar-controls button:focus {
        outline: none;
    }

    .title-bar-controls button[aria-label=Minimize]{
        background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
        background-position:bottom 3px left 4px;
        background-repeat:no-repeat
    }

    .title-bar-controls button[aria-label=Maximize]{
        background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
        background-position:top 2px left 3px;
        background-repeat:no-repeat;
    }

    .title-bar-controls button[aria-label=Close]{
        background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
        background-position:top 3px left 4px;
        background-repeat:no-repeat;
        margin-left:2px;
    }

    .window-body {
        margin: 8px;
    }

    /* literally only part ive custom coded so it scrolls . i also like the effect the fieldset adds */
    .fieldset {
        border:1px gray solid;
        box-shadow: white 1px 1px 0px inset, white 1px 1px 0px, white 0px 1px 0px, white 1px 0px 0px;
        margin:0;
        padding:10px;
        overflow-y:auto;
        height: 190px;
    }
    #header {
    width: 100%;
    background-color: #5e4e8c;
    /* header color here! */
    height: 150px;
    /* this is only for a background image! */
    /* if you want to put images IN the header,
     *      you can add them directly to the <div id="header"></div> element! */
    background-image: var(--header-image);
    background-size: 100%;
    position: relative;
    }
    .pinkwave {
        font-size: 3em;
        font-weight: bold;
        font-family: arial;

        color: transparent;
        background: url("https://files.catbox.moe/db8ne8.png") repeat-x #fff;
        background-clip: border-box;
        background-size: 200% 100%;

        background-clip: text;
        -webkit-background-clip: text;
        transition: background-position-y 0.6s ease;
        -webkit-transition: background-position-y 0.6s ease;
        animation: waveAnimation 4s infinite linear;
        -webkit-animation: waveAnimation 4s infinite linear;

        -webkit-animation-play-state: running;
        animation-play-state: running;

        /* below just adds the outlines */
        filter: drop-shadow(1px 1px white) drop-shadow(-1px 1px white) drop-shadow(1px -1px white) drop-shadow(-1px -1px white)
        drop-shadow(1px 1px black) drop-shadow(-1px 1px black) drop-shadow(1px -1px black) drop-shadow(-1px -1px black);
    }

    @-webkit-keyframes waveAnimation{
        from { background-position-x: 0%; }
        to { background-position-x: 200%; }
    }

    @keyframes waveAnimation{
        from { background-position-x: 0%; }
        to { background-position-x: 200%; }
    }
    /* navigation section!! */
    #navbar {
    height: 40px;
    background-color: #FFE0F1;
    background-image: url('https://64.media.tumblr.com/a1472f9c22090b816fff8e6930b41500/e7a46821cfe7af87-81/s250x400/fa61b667e01c59764cc6d680ccdb447bca652a56.png');
    background-repeat: repeat;
    background-size: auto;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-image: url('https://64.media.tumblr.com/a1472f9c22090b816fff8e6930b41500/e7a46821cfe7af87-81/s250x400/fa61b667e01c59764cc6d680ccdb447bca652a56.png') 10 fill round;
    /* navbar color */
    width: 100%;
    }

    #navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
    }

    #navbar li {
    padding-top: 10px;
    }

    /* navigation links*/
    #navbar li a {
    color: #473C47;
    /* navbar text color */
    font-weight: 800;
    text-decoration: none;
    /* this removes the underline */
    }

    /* navigation link when a link is hovered over */
    #navbar li a:hover {
    color: #321D3B;
    text-decoration: underline;
    }

    #flex {
    display: flex;
    }

    /* this colors BOTH sidebars
     *    if you want to style them separately,
     *    create styles for #leftSidebar and #rightSidebar */
    aside {
        background-color: #FCD9F0;
        background-image:url("https://files.catbox.moe/7l9kc4.gif");
        width: 200px;
        padding: 20px;
        font-size: smaller;
        /* this makes the sidebar text slightly smaller */
    }
    .header-gif {
        position: absolute;
        right: 20px;
        bottom: 5px;
        width: 200px;
        height: auto;
    }

    /* this is the color of the main content area,
     *    between the sidebars! */
    main {
        background-color: #FCD9F0;
        flex: 1;
        padding: 0px;
        order: 2;
        color: #321D3B;
        background-image:url("https://files.catbox.moe/6pkqor.gif");
        text-align: center;
    }

    /* what's this "order" stuff about??
     *    allow me to explain!
     *    if you're using both sidebars, the "order" value
     *    tells the CSS the order in which to display them.
     *    left sidebar is 1, content is 2, and right sidebar is 3! */

    */ #leftSidebar {
        order: 1;
        color: #321D3B;
    }

    #rightSidebar {
    order: 3;
    color: #321D3B;
    list-style-image: url('https://i.imgur.com/yXpiMIt.gif');
    overflow: scroll;
    overflow-x: hidden;
    height: 60em;
    padding: 1rem;
    }

    #rightSidebar::-webkit-scrollbar {
    width: 14px;
    }

    #rightSidebar::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #f587c6, #fcb1dc 20%);
    border-radius: 5px;
    }

    #rightSidebar::-webkit-scrollbar-thumb {
    border: 1.5px solid #f0a1ce;
    border-radius: 5px;
    background: linear-gradient(90deg, #ffd9ef 45%, #ffd9ef 0, #ffd9ef);
    box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
    }
    footer {
        position: relative;
        overflow: hidden;
        text-align: center;
        padding: 0;
        height: 40px;
        line-height: 40px;
        width: 100%;
        color: white;
        font-weight: bold;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        background-image: url('https://64.media.tumblr.com/a1472f9c22090b816fff8e6930b41500/e7a46821cfe7af87-81/s250x400/fa61b667e01c59764cc6d680ccdb447bca652a56.png');
        background-repeat: repeat;
        background-size: auto;
        border-top: 4px solid transparent;
        border-image: url('https://64.media.tumblr.com/a1472f9c22090b816fff8e6930b41500/e7a46821cfe7af87-81/s250x400/fa61b667e01c59764cc6d680ccdb447bca652a56.png') 10 fill round;
    }

    h1,
h2,
h3 {
    color: #321D3B;
}

h1 {
    font-size: 25px;
}

strong {
    /* this styles bold text */
    color: #321D3B;
}

/* this is just a cool box, it's the darker colored one */
.box {
    background-color: #FCD9F0;
    border: 1px solid transparent;
    padding: 10px;
    border-image:url('https://64.media.tumblr.com/a1472f9c22090b816fff8e6930b41500/e7a46821cfe7af87-81/s250x400/fa61b667e01c59764cc6d680ccdb447bca652a56.png') 10 fill round;
}

/* CSS for extras */

#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #FCD9F0;
}
#bigBorder {
border: 40px solid white;
border-image: url("https://files.catbox.moe/ozm5nh.png")150 round;

}


/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page?
 *    by default, the container width is 900px.
 *    in order to keep things responsive, take your new height,
 *    and then subtrack it by 100. use this new number as the
 *    "max-width" value below
 */

@media only screen and (max-width: 800px) {
    #flex {
    flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    /* the order of the items is adjusted here for responsiveness!
     *      since the sidebars would be too small on a mobile device.
     *      feel free to play around with the order!
     */
    main {
        order: 1;
    }

    #leftSidebar {
    order: 2;
    }

    #rightSidebar {
    order: 3;
    }

    #navbar ul {
    flex-wrap: wrap;
    }
}

/* ── Windows 95 font ─────────────────────────────────────────── */
@font-face {
    font-family: windows;
    src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

/* ── Calendar gradient header ────────────────────────────────── */
.cal-header {
    background: linear-gradient(pink 50%, hotpink);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.1em;
    font-weight: bold;
    font-family: windows, monospace;
    filter: drop-shadow(0px 1px black) drop-shadow(0 -1px black)
    drop-shadow(1px 0 black) drop-shadow(-1px 0 black);
}

/* ── Nav buttons ─────────────────────────────────────────────── */
:root {
    --color1: #f390b0;
    --color2: #f8bac9;
    --color3: #fbd9e0;
}
.btn {
    display: block;
    text-align: center;
    background-image: radial-gradient(100% 100% at top, var(--color2) 30%, var(--color3) 66%, var(--color1) 66% 70%, var(--color2) 90%) !important;
    box-shadow: inset 0px 0px 0px 2px var(--color1), 0px 0px 0px 2.5px white;
    border-radius: 99px;
    padding: 5px 10px !important;
    color: black;
    border: 4px light pink;
    text-decoration: none;
    margin-bottom: 5px;
    font-family: arial, monospace;
}
.btn:hover {
    filter: brightness(1.08);
}

/* ── NicoNico floating comments ─────────────────────────────── */
.nico-comment {
    position: fixed;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    font-size: 1.4em;
    font-weight: bold;
    font-family: arial, sans-serif;
    color: #ff69b4;
    filter:
    drop-shadow(1px 1px black) drop-shadow(-1px 1px black)
    drop-shadow(1px -1px black) drop-shadow(-1px -1px black);
}


/* fixed bottom-left decoration */
.fixed-bottomleft {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 9999;
    pointer-events: none;
    width: 380px;
    height: auto;
}

.fixed-bottomleft2 {
    position: fixed;
    bottom: 30px;
    left: 80px;
    z-index: 9998;
    pointer-events: none;
    width: 380px;
    height: auto;
}