@import url('https://fonts.googleapis.com/css2?family=Text+Me+One&family=WindSong:wght@400;500&display=swap');

    *{
    cursor:url("foxxycursor1.png"), auto;
    }

    body{
        margin:0;
        padding:40px 20px;
        background:#0b1220;
        background-image: url('pastelgalaxybg1.png');
        background-size: cover;
        background-attachment: fixed;
        font-family: 'Text Me One';
        font-size: .85em;

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:25px;

        cursor:url("foxxycursor1.png"), auto;
    }

    .left-image {
    position:fixed;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:30%;

    pointer-events:none;

    }

    .right-image{
    position:fixed;

    right:0;
    top:50%;

    transform:translateY(-50%);

    width:35%;

    pointer-events:none;
    }

    .container {
        width:100%;
        max-width:700px;

        background:#153051a4;
        /* border:2px solid #f6b3d0; */
        border-width:10px;
        border-style:solid; 
        border-image: url("https://img-fotki.yandex.ru/get/4602/28257045.844/0_7d5c6_2de543e9_XXXL") 43 fill round; 
        border-radius:15px; 

       /* border-radius:6px;  softer, less rounded */

        padding:15px;
        box-sizing:border-box;

        color:#f3f3f3;
        text-align:center;

        box-shadow:
            0 0 10px rgba(246,179,208,0.12);
    }

   /* .welcomescroll {
        width: 100%;
        max-height: 500px;
        overflow-y: auto;
    } */

    h2, h3{
        margin-top:0;
        color:#ffd7ea;
    }

    h1 {
        margin-top: 0;
        color:rgb(226, 255, 255);
        font-family: 'WindSong';
        font-size: 3.3em;
        margin-bottom: 5px;
    }

    .welcomebox {
        width: 95%;
    }

    .titleglow {
        text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px,
         #FFF 0px 0px 15px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px,
          #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
    }

    /* left and right to fit into containers */
    .split-container{
    width:100%;
    max-width:700px;

    background:#153051a4;
    border-width:10px;
        border-style:solid; 
        border-image: url("https://img-fotki.yandex.ru/get/4602/28257045.844/0_7d5c6_2de543e9_XXXL") 43 fill round; 
        border-radius:15px; 
    /*border:2px solid #f6b3d0;
    border-radius:6px;*/

    padding:20px;
    box-sizing:border-box;

    display:flex;
    gap:20px;

    color:#f3f3f3;
}

/* Left side */
.left-section{
    width:30%;
    text-align:center;
}

/* Right side */
.right-section{
    width:70%;
    text-align:center;
}

/* MENU CSS */
.menu{
    list-style:none;
    padding:0;
    margin:0;

    display:flex;
    justify-content:center;
    gap:10px;

    font-size: 0.8em;
    font-weight: bold;
}

.menu a{
    text-decoration:none;

    color:#ffd7ea;
    background:#162a4e90;

    border:2px solid #f6efb399;
    border-radius:6px;

    padding:4px 8px;

    transition:0.2s;
}

/* Hover effect */
.menu a:hover{
    background:#feb7e3;
    color:#0b1220;
}

.updates {
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
}

.pmargintop {
    margin-top: -25px;
}

.hrimg {
    background-image: url('GalleryD/starhr.gif');
    width: 70%;
    height: auto;
    margin-bottom: 15px;
}

.guestart {
    width: 90%;
    height: 150px;
    border: 2px solid rgb(253, 142, 142);
}

.floatr {
    float: left;
    margin-left: 25px;
    z-index: 2;
}

/* ABOUT PAGE - FAQ CSS */
.faq-box details{

    background:#162033;

    border:2px solid #f6b3d0;
    border-radius:6px;

    padding:5px;
    margin-bottom:5px;

    color:#f3f3f3;
}

.faq-box summary{

    cursor:pointer;

    font-weight:bold;
    color:#ffd7ea;

    list-style:none;
}

/* Removes default arrow in some browsers */
.faq-box summary::-webkit-details-marker{
    display:none;
}

/* Optional hover glow */
.faq-box summary:hover{

    text-shadow:
        0 0 5px #f6b3d0;
}

.faq-box p{

    margin-top:10px;
    line-height:1.5;
}

/* GALLERY PAGE CSS */

.gallery{

    width:100%;
    max-width:700px;

    display:flex;
    flex-wrap:wrap;

    gap:15px;

    justify-content:center;

    margin-top: 15px;
    margin-bottom: 15px;
}

.gallery img{

    width:100px;
    height:100px;

    object-fit:cover;

    border:2px solid #f6b3d0;
    border-radius:6px;

    background:#162033;

    transition:0.2s;
}

/* Hover effect */
.gallery img:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 10px #f6b3d0;
}

/* WEBCOMIC PAGE CSS */
.comic-box{

    width:100%;
    max-width:700px;

    min-height:200px;

    background:#162033;

    border:2px solid #f6b3d0;
    border-radius:6px;

    padding:15px;
    margin-bottom:20px;

    box-sizing:border-box;

    display:flex;
    gap:15px;

    color:#f3f3f3;
}

/* Left Side */
.comic-image img{

    width:130px;
    height:170px;

    object-fit:cover;

    border:2px solid #f6b3d0;
    border-radius:6px;
}

/* Right Side */
.comic-info{

    flex:1;

    overflow:auto;
}

.comic-info h2{

    margin-top:0;
    color:#ffd7ea;
}

.comic-info a{

    color:#ffd7ea;
    font-weight:bold;

    text-decoration:none;
}

.comic-info a:hover{

    text-shadow:
        0 0 5px #f6b3d0;
}

/* DIARY PAGE CSS */
.diary-container{

    width:100%;
    max-width:700px;

    margin:auto;
}

/* Month Dropdown */
.diary-container details{

    background:#162033;

    border:2px solid #f6b3d0;
    border-radius:6px;

    margin-bottom:20px;

    padding:12px;

    color:#f3f3f3;
}

/* Month Title */
.diary-container summary{

    cursor:pointer;

    font-size:20px;
    font-weight:bold;

    color:#ffd7ea;
}

/* Entry Box */
.entry{

    margin-top:15px;

    background:#0b1220;

    border:1px solid #f6b3d0;
    border-radius:6px;

    padding:12px;

    max-height:200px;

    overflow:auto;
}

/* Entry Titles */
.entry h3{

    margin-top:0;

    color:#ffd7ea;
}

.thought-box{

    width:100%;
    max-width:600px;

    height:100px;

    overflow:auto;

    background:#162033;
    background-image: url('https://cosmicfoxden.neocities.org/nightskystar.png');

    border:2px solid #f6b3d0;
    border-radius:6px;

    padding:10px;

    box-sizing:border-box;

    color:#f3f3f3;
    margin-top: 20px;
}

/* Title */
.thought-box h3{

    margin-top:0;

    color:#ffd7ea;

    font-size:15px;
}

/* Optional scrollbar styling */
.thought-box::-webkit-scrollbar{

    width:8px;
}

.thought-box::-webkit-scrollbar-track{

    background:#f6b3d0;
}

.thought-box::-webkit-scrollbar-thumb{

    background:#0b1220;
    border-radius:6px;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar{
    width:14px;
}

::-webkit-scrollbar-track{
    background:#f6b3d0; /* light pink */
}

::-webkit-scrollbar-thumb{
    background:#0b1220; /* dark blue */
    border-radius:6px;

    border:2px solid #f6b3d0;
}

::-webkit-scrollbar-thumb:hover{
    background:#162033;
}

@media (max-width:1100px){

    .left-image,
    .right-image{
        display:none;
    }

}