/* these are the site colors, replace them with anything you want!
 * this version is simplified for easier color swapping!*/
:root {
    --site-bg: url(../img/light_mode_bg.png) #879d6d;
    /*or like this for just a solid color:*/
    /*--site-bg: #FFE1C6; */

    --post-bg: #e9ecdb;
    --hover-color: #ffe1c6;
    --post-text: #16190f;
    --button-bg: #f7f6e3;
    --border-color: #bac58a;
    --accent-color: #4e6137;
    --bold-color: #4e6137;
    --border-shadow: rgba(74, 118, 58, 0.46);

    /*these next two colors are for when you highlight text on the page*/
    --selected-bg: #ffecbd;
    --selected-text: #796317;

    @media (prefers-color-scheme: dark) {
        --site-bg: url(../img/dark_mode_bg.png) #211f1f;
        /*or like this for just a solid color:*/
        /*--site-bg: #FFE1C6; */

        --post-bg: #191717;
        --hover-color: #b9cc67;
        --post-text: #f4f4f4;
        --button-bg: #211f1f;
        --border-color: #414729;
        --accent-color: #778d60;
        --bold-color: #acd17f;
        --border-shadow: rgba(74, 118, 58, 0.45);

        /*these next two colors are for when you highlight text on the page*/
        --selected-bg: #ffecbd;
        --selected-text: #796317;
    }
}

/*the fonts used for this template are available here:
 * https://fonts.google.com/specimen/Atkinson+Hyperlegible
 * https://fonts.google.com/specimen/Nunito
 *
 * if you don't include these files in a "fonts" folder on your website, your browser will try to substitute the next closest thing...
*/

@font-face {
    font-family: "atkinson";
    src: url("../fonts/AtkinsonHyperlegible-Regular.ttf");
}

@font-face {
    font-family: "freepixel";
    src: url(../fonts/FreePixel.ttf);
}

@font-face {
    font-family: "dosis";
    src: url(../fonts/Dosis-VariableFont_wght.ttf);
}

@font-face {
    font-family: "open dyslexic";
    src: url(../fonts/OpenDyslexic-Regular.otf);
}

@font-face {
    font-family: "intel one";
    src: url(../fonts/IntelOneMono-Regular.ttf);
}

html {
    scroll-behavior: smooth;
    font-size: 1rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-weight: 400;
}
::selection {
    background: var(--selected-bg);
    color: var(--selected-text);
}
* {
    box-sizing: border-box;
    /*custom scrollbar colors~ i think it only works on some browsers tho...*/
    scrollbar-color: var(--accent-color) var(--post-bg);
    scrollbar-width: thin;
}

body {
    /*change the main font here*/
    font-family: "freepixel", Verdana, Tahoma, sans-serif;
    font-size: 16px;
    margin: 0;
    background: var(--site-bg);
    color: var(--post-text);
    line-height: 1.6em;
    /*if you use a bg image, this will keep it from scrolling*/
    background-attachment: fixed;
}

/*use a special font for certain headings/buttons*/
h1,
nav,
.pinned summary {
    font-family: "Dosis", "Nunito", Verdana, Tahoma, sans-serif;
    font-weight: bold;
}
/*use a pointer for the fake buttons*/
details > summary,
#tag-filters label {
    cursor: pointer;
}

/*quick addon styles you can use in combination with anything*/
.center {
    text-align: center;
}
.small-text {
    font-size: smaller;
}
.no-border {
    border: none;
    padding: 0;
}

/*some parts of the layout can be hidden/shown depending on if you're on desktop or mobile*/
.mobile-only {
    display: none;
}
.pc-only {
    display: block;
}

/*this class makes stuff wrap around, very handy*/
.flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
/*this container will center the page contents better for larger screen sizes*/
#container {
    max-width: 1200px;
    margin: auto;
}

main {
    /*here is the post width*/
    width: 600px;
    /*this part means it ignores all other elements when figuring out where to sit on the page*/
    position: absolute;
    /*because of that, we gotta tell it how much room to leave for the sidebar*/
    margin-left: 300px;
}

#sidebar {
    background: var(--border-color);
    margin-left: 20px;
    padding: 2em 1em;
    /*we left 300px of room for the sidebar, but we want the width to be less than that since there should be some spacing between*/
    width: 240px;

    /*i put dashed borders on each side, but you can change it to a different type or remove them*/
    border-inline: 2px dashed var(--accent-color);
    /*outlines go outside of the borders, so it makes it look like stitching on the edges. cute!*/
    outline: 4px solid var(--border-color);

    /*the sidebar doesn't scroll with the rest of the page*/
    position: fixed;
    /*this stacks it on top of everything else*/
    z-index: 99;
    /*make sure it takes up the whole screen vertically*/
    height: 100%;
    /*and add a scrollbar if someone's window is too short to see all the content*/
    overflow-y: auto;
}

#sidebar h1 {
    font-size: 1.5em;
    margin-block: 0.5em;
}
/*link text in the sidebar should be the same color*/
#sidebar a {
    color: var(--post-text);
}
/*font size for your name in the sidebar*/
#sidebar h1 a {
    font-size: 1.2em;
}
/*no underline for your name, or hovered links in sidebar*/
#sidebar h1 a,
#sidebar a:hover {
    text-decoration: none;
}

/*center the icon in the sidebar*/
#icon {
    margin: auto;
}
#icon img {
    /*this makes it a circle, lower the number for a rounded square*/
    border-radius: 50%;
    max-width: 200px;
}
/*these styles are for when your icon image is being used as a link, it just makes it react on mouseover*/
#icon a img {
    outline: 2px solid var(--border-color);
    /*adds animation to the outline*/
    transition: 0.2s;
}
#icon a img:hover {
    outline: 2px solid var(--post-text);
    outline-offset: 4px;
}

/*profile text doesnt need as much spacing as the posts do*/
#profile p {
    margin-block: 0.3em;
    line-height: 1.5em;
}
/*styling the simple bio block*/
#bio {
    border-block: 2px dashed var(--accent-color);
    padding-block: 0.5em;
    margin-block: 1em;
    font-size: small;
}

/*for the rounded link buttons!*/
#sidebar nav ul {
    text-align: center;
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 1em;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 8px;
    justify-content: space-evenly;
}
#sidebar nav li a {
    /*set a width so they're the same size*/
    min-width: 120px;
    display: inline-block;
    background: var(--button-bg);
    color: var(--post-text);
    font-weight: bold;
    border-radius: 1rem;
    outline: 2px solid #fff0;
    transition: 0.2s;
    text-decoration: none;
}
#sidebar nav li a:visited {
    color: var(--post-text);
}
#sidebar nav li a:hover,
#sidebar nav li a:focus {
    background: var(--hover-color);
    color: var(--accent-color);
    outline: 2px solid var(--post-text);
    outline-offset: 3px;
}
/*and add some spacing around them too*/
#sidebar nav {
    margin-block: 1.5em;
}

#sidebar hr {
    border: none;
    border-bottom: 2px dashed var(--accent-color);
    width: 100%;
}

/*for the collapsible sections at the top (status and tag filters)*/
.pinned {
    background: var(--button-bg);
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    margin: 1em 0;
    border: 2px solid var(--border-color);
    outline: 2px solid var(--post-bg);
    box-shadow: 6px 6px 0 var(--border-shadow);
}
/*the heading for those blocks*/
.pinned summary {
    color: var(--post-text);
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: 2px dashed var(--border-color);
    margin: 0.5em;
}
/*since the summary uses the special font, switch back to the other one for the timestamp*/
.pinned time {
    font-family: "atkinson", Verdana, Tahoma, sans-serif;
    float: right;
    font-weight: normal;
    font-size: small;
}

/*the list with the alternating colors! (cute!!!)*/
#status ul {
    background: var(--post-bg);
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 0.5em;
}
#status li {
    list-style-type: none;
    padding: 0.2em;
}
/*list title, ie "reading:"*/
#status li:nth-child(odd) {
    font-weight: bold;
    font-size: 1.2em;
    font-family: "dosis";
    color: var(--accent-color);
}
/*list answer, ie "books about magic"*/
#status li:nth-child(even) {
    background: var(--button-bg);
    color: var(--post-text);
    border-radius: 0.3em;
    padding-inline: 0.8em;
}
/*make links the same as in posts*/
#status li a {
    color: var(--post-text);
    transition: 0.3s ease-out;
}
#status li a:hover {
    color: var(--accent-color);
    text-decoration-color: var(--accent-color);
    text-decoration-thickness: 2px;
}

/*finally the post styles!!!*/
.post {
    background: var(--post-bg);
    color: var(--post-text);
    border-radius: 1rem;
    padding: 0 0.8rem 0.2rem 0.8rem;
    margin-bottom: 1em;
    box-shadow: 6px 6px 0 var(--border-shadow);
    min-width: 100%;
}
/*make sure images stay within the post*/
.post img,
.pos a img {
    max-width: 100%;
}
/*add some space from the post header if you have an image first*/
.post div + img,
.post div + a img {
    margin-top: 1em;
}

/*the top of the post where you put your username*/
.post-header {
    color: var(--accent-color);
    font-weight: bold;
    font-family: "dosis";
    padding: 0.5rem 0;
    border-bottom: 2px dashed var(--border-color);
}
/*and the post's timestamp*/
.post time {
    float: right;
    font-weight: normal;
    font-size: smaller;
    margin: 0.2em;
}
/*link styling*/
.post a {
    color: var(--post-text);
    transition: 0.5 ease-out;
}
.post a:hover {
    color: var(--accent-color);
    text-decoration-color: var(--accent-color);
    text-decoration-thickness: 2px;
}

/*formatting*/
.post bold,
.post strong,
.post b {
    font-weight: normal;
    color: var(--bold-color);
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--border-shadow);
}

.post u,
.post underline {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--border-shadow);
}

.post blockquote {
    border-left: 2px dashed var(--accent-color);
    padding-left: 15px;
    background-color: var(--button-bg);
    padding-top: 1px;
    padding-bottom: 1px;
}

.center-img {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

/*this is for lists*/
.post li {
    /*you can change the normal dot to anything you want :)*/
    /*list-style-type: "♥ ";*/
    /*i used stars to match the bg image!*/
    /* list-style-image: url("images/star.png"); */
    list-style: square;
}

.post li::marker {
    color: var(--accent-color);
}

.post h1 {
    background-color: var(--accent-color);
    /*background-image: url(https://sadhost.neocities.org/images/tiles/bg_bluewhiteflowers.gif);*/
    color: var(--post-bg);
    font-family: "dosis";
    border-radius: 10px;
    letter-spacing: 2px;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.3rem;
    text-align: left;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

.post h2 {
    font-size: 1.3em;
    font-family: "dosis";
}

/*"read more" button for long posts*/
.readmore {
    margin-bottom: 1em;
}
.readmore summary {
    text-align: center;
    /*this gets rid of the arrow*/
    list-style-type: none;
    width: 100%;
    height: auto;
    padding: 8px;
    border-radius: 5px;
    outline: 0 solid var(--accent-color);
    background-color: var(--button-bg);
    transition: 0.3s;
}
.readmore summary:hover {
    outline: 3px solid var(--accent-color);
}
/*hide the "read more" button after it's clicked (delete this line to keep it there)*/
.readmore[open] > summary {
    display: none;
}
/*optional border to denote a border was there before*/
.readmore[open] {
    /* border-top: 2px dashed var(--button-bg);
    padding-top: 1em; */
}

.tags {
    border-top: 2px dashed var(--border-color);
    padding: 0.4em 0;
}
.tags a {
    color: var(--post-text);
}
.tags span {
    color: var(--accent-color);
}
.tags a,
.tags span {
    font-family: "atkinson";
    font-size: small;
    padding: 0.2em 0.5em;
    border-radius: 1em;
    text-decoration: none;
    transition: 0.3s ease-out;
}
.tags a:hover {
    background: var(--button-bg);
    text-decoration: underline;
}

/*css for hiding posts*/
.tagged:has(input:checked) article {
    display: none;
}

/*add new tags to filter here!
 * follow the class naming conventions (no spaces, don't start it with a number)
 * remember on the actual page you can write the tag however you want!*/
.tagged:has(#all:checked) article,
.tagged:has(#games:checked) article[class~="games"],
.tagged:has(#ffxiv:checked) article[class~="ffxiv"],
.tagged:has(#blabber:checked) article[class~="blabber"],
.tagged:has(#sylvie:checked) article[class~="sylvie"],
.tagged:has(#long:checked) article[class~="long"],
.tagged:has(#ocs:checked) article[class~="ocs"],
.tagged:has(#yume:checked) article[class~="yume"],
.tagged:has(#sketch:checked) article[class~="sketch"],
.tagged:has(#art:checked) article[class~="art"] {
    display: inline-block;
}

/*tag filter button styles (there's a lot)*/
#tag-filters label {
    font-family: "dosis";
    background: var(--button-bg);
    border: 1px solid var(--accent-color);
    border-radius: 0.5em;
    display: inline-block;
    margin-left: 0.5em;
    margin-block: 0.3em;
    padding: 0 0.8em 0 0.8em;
    font-size: 1rem;
    transition: 0.3s ease-out;
}
/*hovering filter buttons (normal)*/
#tag-filters label:hover {
    background: var(--hover-color);
    text-decoration: underline;
}
/*selected filters*/
#tag-filters label:has(input:checked) {
    background: var(--border-color);
    color: var(--post-text);
    text-decoration: underline;
}
/*hovering selected filters*/
#tag-filters label:has(input:checked):hover {
    background: var(--hover-color);
    text-decoration: none;
}
/*hide the radio button for tags*/
#tag-filters input {
    appearance: none;
}

/*for the "back to top" link at the bottom of the page*/
#page-nav a {
    color: var(--post-text);
}
#page-nav a:hover {
    text-decoration: none;
}

footer {
    color: var(--post-text);
    background: var(--border-color);
    /*in the html the footer is at the very end, but when looking at the site you see it at the bottom of the sidebar!*/
    z-index: 100;
    position: fixed;
    /*make it the same length/positioning as the sidebar*/
    margin-left: 22px;
    width: 236px;
    bottom: 4px;
    font-size: small;
    /*semitransparent so you can see any content that goes under it*/
    opacity: 60%;
    text-align: center;
}

#skip a {
    position: absolute;
    display: inline-block;
    left: 0;
    top: -1000px;
    overflow: hidden;
    transition: top 0.5s ease;
    background: var(--button-bg);
    color: var(--post-text);
    z-index: 1000;
    padding: 5px;
}

#skip a:focus {
    top: 0;
    transition: top 0.5s ease;
}

@media only screen and (max-width: 800px) {
    .mobile-only {
        display: block;
    }
    .pc-only {
        display: none;
    }
    #container {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    /*turning the specially positioned elements back to normal*/
    #sidebar,
    main {
        position: static;
        height: auto;
        flex: 100%;
        max-width: none;
    }
    #sidebar {
        border-inline: none;
        margin-left: 0;
        padding: 1em;
        padding-bottom: 0;
    }
    #icon {
        /*shrink the icon a bit to prioritize text on mobile*/
        max-width: 40%;
        /*and add some spacing since they're side-by-side now*/
        margin-right: 0.5em;
    }
    /*don't let the icon get too big haha*/
    #icon img {
        max-width: 100%;
    }

    #sidebar nav {
        margin-block: 0.5em;
    }

    main {
        left: 0;
        margin-inline: 1em;
    }
    /*this makes the profile text take up more screen-space than the icon image*/
    #profile {
        flex: 2;
    }
    #profile p {
        margin-block: 0;
        margin-left: 10px;
    }
    /*remove borders from the short bio section*/
    #bio {
        border: none;
        padding-block: 0;
    }
    /*and put the footer at the bottom of the page instead of the sidebar!*/
    footer {
        position: static;
        text-align: center;
        background: none;
        margin: 0;
        width: 100%;
        opacity: 100%;
    }
}