/*==========================================================
    Blog Template by SweetCharm.net

    Everything in the CUSTOMIZATION section below is safe
    to edit. You don't need to touch the rest unless you
    want to!
==========================================================*/



/*==========================================================
    CUSTOM FONTS

    You can replace these font files with your own!
    Just keep them in the same folder as this CSS file.
==========================================================*/

@font-face{

    font-family:"HeaderFont";
    src:url("Daydream.otf");

}

@font-face{

    font-family:"BodyFont";
    src:url("rainyhearts.ttf");

}

@font-face{

    font-family:"TagFont";
    src:url("alagard.ttf");

}



/*==========================================================
    CUSTOMIZATION

    Most people only need to edit this section.
==========================================================*/

:root{

    /* Background */

    --pageBackground:
    url("https://www.sweetcharm.net/.CuteDesktop/BACKGROUNDS/lolita/022.png");



    /* Colors */

    --pageColor:#fff6fa;
    --sidebarColor:#ffe3ef;
    --postColor:#fffdfd;
    --borderColor:#f4abc9;
    --shadowColor:#ffd5e6;
    --headerColor:#ff72ad;
    --textColor:#62485b;
    --linkColor:#ea5c99;
    --linkHover:#ff3b8e;



    /* Fonts */

    --headerFont:"HeaderFont";
    --bodyFont:"BodyFont";
    --tagFont:"TagFont";



    /* Sizes */

    --pageWidth:700px;
    --sidebarWidth:205px;
    --roundness:12px;
    --borderSize:2px;



    /* Decorative Divider */

    --dividerText:"⋆｡ﾟ☁︎｡⋆｡ ﾟ☾ ﾟ｡⋆";



    /* Archive Icons */

    --archiveClosedIcon:url("https://sweetcharm.net/.CuteDesktop/SMALLPIXELS/25%20(1).gif");
    --archiveOpenIcon:url("https://sweetcharm.net/.CuteDesktop/SMALLPIXELS/588.gif");
    --archiveMonthIcon:url("https://sweetcharm.net/.CuteDesktop/SMALLPIXELS/f357.gif");



    /* Optional Sidebar Decoration
       Default: flower symbol
       If you want an image instead, replace the .box::after
       rule below with the image version in the CSS section. */

    --sidebarDecorationText:"✿";
    --sidebarDecorationImage:none;

}



/*==========================================================
    GENERAL
==========================================================*/

*{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    margin:0;
    padding:20px;
    background-image:var(--pageBackground);
    background-repeat:repeat;
    background-attachment:fixed;
    color:var(--textColor);
    font-family:var(--bodyFont);
    font-size:15px;
    line-height:1.6;

}



/*==========================================================
    LINKS
==========================================================*/

a{

    color:var(--linkColor);
    text-decoration:none;
    transition:.20s;

}



a:hover{

    color:var(--linkHover);

}



/*==========================================================
    IMAGES
==========================================================*/

img{

    max-width:100%;
    image-rendering:auto;

}



/*==========================================================
    MAIN WRAPPER
==========================================================*/

#blogWrapper{

    width:var(--pageWidth);
    margin:auto;

}



/*==========================================================
    BLOG HEADER
==========================================================*/

#blogHeader{

    background:var(--sidebarColor);
    border:var(--borderSize) solid var(--borderColor);
    border-radius:var(--roundness);
    margin-bottom:14px;
    padding:12px;
    box-shadow:4px 4px 0px var(--shadowColor);
    text-align:center;
    

}



/*==========================================================
    HEADER IMAGE
==========================================================*/

#blogHeader img{

    display:inline-block;
    margin:auto;
    

}



/*==========================================================
    HEADER TEXT
==========================================================*/

#blogHeader h1{

    margin:0;
    color:var(--headerColor);
    font-family:var(--headerFont);
    font-size:34px;
    font-weight:normal;
    letter-spacing:1px;

}



/*==========================================================
    CONTENT LAYOUT
==========================================================*/

#contentWrapper{

    display:grid;
    grid-template-columns:var(--sidebarWidth) 1fr;
    gap:15px;

}



/*==========================================================
    SIDEBAR
==========================================================*/

#sidebar{

    width:100%;

}



/*==========================================================
    BLOG CONTENT
==========================================================*/

#blogContent{

    width:100%;
    display:flex;
    flex-direction:column;
    gap:1px;

}



/*==========================================================
    BLOG POSTS
==========================================================*/

.post{

    background:var(--postColor);
    background:rgba(255,255,255,.96);
    border:var(--borderSize) solid var(--borderColor);
    border-radius:var(--roundness);
    box-shadow:3px 3px 8px rgba(255,145,185,.18);
    padding:18px;
    margin-bottom:18px;
    transition:.20s;

}



/*==========================================================
    BLOG POST TITLE
==========================================================*/

.post h2{

    margin:0;
    padding:0;
    font-family:var(--headerFont);
    font-size:13px;
    font-weight:normal;
    color:var(--headerColor);
    text-align:center;
    line-height:1.1;

}


.post:hover{

    transform:translateY(-2px);

}



/*==========================================================
    POST DATE
==========================================================*/

.postDate{

    text-align:center;
    margin:6px 0 10px;
    color:var(--linkColor);
    font-size:13px;
    line-height:1.2;

}



/*==========================================================
    POST TAGS
==========================================================*/

.postTags{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px;
    margin-top:12px;

}

.postTags a{

    display:inline-block;
    background:white;
    border:1px solid var(--borderColor);
    border-radius:999px;
    padding:4px 9px;
    font-family:var(--tagFont);
    font-size:13px;
    line-height:1;
    transition:.18s;

}

.postTags a:hover{

    transform:translateY(-2px);
    background:#fff4f9;

}



/*==========================================================
    NO POSTS FOUND
==========================================================*/

#noPosts{

    display:none;
    background:var(--postColor);
    background:rgba(255,255,255,.96);
    border:var(--borderSize) solid var(--borderColor);
    border-radius:var(--roundness);
    box-shadow:3px 3px 8px rgba(255,145,185,.18);
    padding:18px;
    margin-bottom:18px;
    text-align:center;

}

#noPosts h2{

    margin:0 0 10px;
    padding:0;
    font-family:var(--headerFont);
    font-size:13px;
    font-weight:normal;
    color:var(--headerColor);
    line-height:1.1;

}

#noPosts p{

    margin:8px 0;

}



/*==========================================================
    FLOATING MASCOT
==========================================================*/

#backToTop{

    position:fixed;
    right:18px;
    bottom:18px;
    cursor:pointer;
    z-index:999;
    animation:floatMascot 4s ease-in-out infinite;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(15px);
    transition:
        opacity .35s,
        transform .35s,
        visibility .35s;

}

#backToTop.show{

    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);

}



#backToTop:hover{

    transform:scale(1.08);
    filter:drop-shadow(0px 0px 6px white);

}



/*==========================================================
    FLOATING IMAGE
==========================================================*/

#backToTop img{

    display:block;

}



/*==========================================================
    FLOAT ANIMATION
==========================================================*/

@keyframes floatMascot{

    0%{
        transform:translateY(0px);
    }

    25%{
        transform:translateY(-5px) translateX(2px);
    }

    50%{
        transform:translateY(-9px);
    }

    75%{
        transform:translateY(-4px) translateX(-2px);
    }

    100%{
        transform:translateY(0px);
    }

}



/*==========================================================
    FILTER STATUS
==========================================================*/

#filterStatus{

    display:none;

    text-align:center;

    color:var(--headerColor);

    font-size:14px;

    margin-bottom:14px;

}

#filterStatus:not(:empty){

    display:block;

}



/*==========================================================
    HORIZONTAL RULES
==========================================================*/

.prettyDivider{

    text-align:center;
    margin:18px 0;
    color:var(--headerColor);
    font-size:14px;

}

.prettyDivider::before{

    content:var(--dividerText);

}



/*==========================================================
    SIDEBAR BOXES
==========================================================*/

.box{

    position:relative;
    background:var(--sidebarColor);
    border:var(--borderSize) solid var(--borderColor);
    border-radius:var(--roundness);
    box-shadow:4px 4px 0px var(--shadowColor);
    padding:12px;
    margin-bottom:14px;
    transition:.20s;

}



.box:hover{

    transform:translateY(-2px);

}



/*==========================================================
    SIDEBAR HEADERS
==========================================================*/

.box h2{

    margin:0 0 10px;
    text-align:center;
    color:var(--headerColor);
    font-family:var(--headerFont);
    font-size:13px;
    font-weight:normal;
    line-height:1.05;
    letter-spacing:0;
    overflow-wrap:break-word;
    word-break:break-word;

}



/* Decorative divider under sidebar headers */

.box h2::after{

    display:block;
    margin-top:5px;
    content:"⋆｡ﾟ☁︎｡⋆｡ ﾟ☾ ﾟ｡⋆";
    font-size:11px;
    color:var(--borderColor);

}



/*==========================================================
    OPTIONAL SIDEBAR DECORATION
==========================================================*/

/* Default flower symbol */
.box::after{

    content:var(--sidebarDecorationText);
    position:absolute;
    bottom:-14px;
    left:50%;
    transform:translateX(-50%);
    color:var(--borderColor);
    font-size:14px;
    line-height:1;
    pointer-events:none;

}

/* If you want an image instead, comment out the rule above
   and use this block instead:

.box::after{

    content:"";
    position:absolute;
    bottom:-14px;
    left:50%;
    transform:translateX(-50%);
    width:14px;
    height:14px;
    background:var(--sidebarDecorationImage) center/contain no-repeat;
    pointer-events:none;

}

*/



/*==========================================================
    ABOUT SECTION
==========================================================*/

.box p{

    margin:5px 0;
    line-height:1.45;

}

.box strong{

    color:var(--headerColor);
    font-weight:normal;

}



/*==========================================================
    ARCHIVE LIST
==========================================================*/

#archiveList{

    display:flex;
    flex-direction:column;
    gap:6px;

}

.archiveYear{

    overflow:hidden;
    border-radius:10px;

}

.archiveYearLink,
.archiveMonthLink{

    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    padding:6px 8px;
    border-radius:8px;
    transition:.18s;
    text-align:left;

}

.archiveYearLink:hover,
.archiveMonthLink:hover{

    background:white;

}

.archiveText{

    display:inline-block;
    line-height:1.2;

}

.archiveIcon{

    flex:0 0 auto;
    width:16px;
    height:16px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    image-rendering:pixelated;

}

.archiveIconYear{

    background-image:var(--archiveClosedIcon);

}

.archiveYear.open .archiveIconYear{

    background-image:var(--archiveOpenIcon);

}

.archiveIconMonth{

    background-image:var(--archiveMonthIcon);

}

.archiveMonths{

    max-height:0;
    overflow:hidden;
    opacity:0;
    margin-left:12px;
    padding-left:10px;
    border-left:1px dashed var(--borderColor);
    transition:
        max-height .28s ease,
        opacity .28s ease,
        margin-top .28s ease;

}

.archiveYear.open .archiveMonths{

    max-height:1000px;
    opacity:1;
    margin-top:5px;

}



/*==========================================================
    TAG LIST
==========================================================*/

#tagList{

    display:flex;
    flex-wrap:wrap;
    gap:7px;

}



/*==========================================================
    INDIVIDUAL TAGS
==========================================================*/

#tagList a{

    display:inline-block;
    background:white;
    border:1px solid var(--borderColor);
    border-radius:999px;
    padding:4px 9px;
    font-family:var(--tagFont);
    font-size:13px;
    line-height:1;
    transition:.18s;

}



#tagList a:hover{

    transform:translateY(-2px);
    background:#fff4f9;

}



/*==========================================================
    ACTIVE FILTER
==========================================================*/

.active{

    background:var(--headerColor) !important;
    color:white !important;
    border-color:var(--headerColor) !important;

}



/*==========================================================
    NAVIGATION BOX
==========================================================*/

#showAllPosts{

    display:block;
    text-align:center;
    font-size:10px;
    padding:8px;
    background:white;
    border:1px solid var(--borderColor);
    border-radius:10px;
    font-family:var(--headerFont);
    transition:.20s;

}



#showAllPosts:hover{

    background:#fff7fb;
    transform:translateY(-2px);

}



/*==========================================================
    SMALL SIDEBAR IMAGES
==========================================================*/

.box img{

    display:inline-block;
    vertical-align:middle;

}



/*==========================================================
    SIDEBAR LISTS
==========================================================*/

.box ul{

    padding-left:18px;
    margin:8px 0;

}

.box li{

    margin-bottom:4px;

}



/*==========================================================
    BUTTONS
==========================================================*/

button{

    background:white;
    border:1px solid var(--borderColor);
    border-radius:10px;
    color:var(--textColor);
    font-family:var(--bodyFont);
    cursor:pointer;
    transition:.20s;

}



button:hover{

    background:#fff6fb;

}



/*==========================================================
    SELECTION COLOR
==========================================================*/

::selection{

    background:#ffb6d6;
    color:white;

}



/*==========================================================
    FOCUS
==========================================================*/

a:focus{

    outline:1px dashed var(--headerColor);
    outline-offset:2px;

}



/*==========================================================
    OPTIONAL RESPONSIVE ADJUSTMENTS
==========================================================*/

@media (max-width: 760px){

    #blogWrapper{

        width:100%;

    }

    #contentWrapper{

        grid-template-columns:1fr;

    }

    #sidebar{

        order:2;

    }

    #blogContent{

        order:1;

    }

}