/* --------------------------------- */
/* CSS for blog site's entries       */
/*                                   */
/*    I hope your day has been well  */
/*              aethena.art, 2026    */
/* --------------------------------- */

* 
{
    margin: 0 ;
    padding: 0 ;
    box-sizing: border-box ;
    cursor: url('/_images/layout/cursor_auto.png'), auto ;
    scrollbar-color: #E87D0D #C6EC00 ;
    scrollbar-width: thin;
}

img
{
    max-width: 80% ;
    border-block: groove 3px #607407;
}

a:link
{
    text-decoration: underline ;
    color: #EEDB00 ;
}

a:visited
{
    color: #00C8F9 ;
}


a:hover
{
    color: #00C8F9 ;
    text-shadow: 4px 5px 7px #00C8F9, 1px 1.4px 0.3px #00C8F9 ;
    cursor: url('/_images/layout/cursor_pointer.png'), pointer ;
}

/* Font setting */
body
{
    font-family: 'JetBrains Mono', Arial, Verdana, sans-serif ;
    line-height: 1.6 ;
    overflow-y: scroll ; /* Prevents scrollbars from being everywhere on Chrome */
    overflow-x: hidden ;
}

/* Header (site name) styling */
header
{
    background-color: #292A1D ;
    box-shadow: 0px 5px hsl(71, 89%, 44%) ;
    color: #E87D0D ;
    padding-left: 1vmax ;
    position: absolute ;
    min-width: 100% ;
    height: 12% ;
    font-size: 2vh ;
}

h1 {
    color: #E87D0D ;
    min-width: 100% ;
    font-size: 3em ;
    text-align: justify ;
}

/* Article header styling (whoops forgot to set this long ago) */
h2
{
    font-size: min(max(2rem, 4vw), 36px) ;
}

header.logo
{
    display: flex ;
    gap: 3rem ;
    justify-content: left ;
}
/* Nav styling */
nav
{
    display: flex ;
    position: absolute ;
    bottom: 0% ;
    background-color: #1A1A0C ;
    padding-left: 1rem ;
    padding-right: 1rem ;
    padding-top: 0% ;
    padding-bottom: 0% ;
    border-radius: 1.8vh ;
    font-size: 1.4vh;
    width: 64vh;
    height: 24%;
    border-inline: groove 8px ;
    border-inline-color: #607407 ;
    border-inline-color: #C6EC00 ;
    justify-content: center ;
}
nav ul
{
    list-style: none ;
    display: flex ;
    flex-wrap: nowrap ;
    white-space: nowrap ; /* Prevents line break on link text in nav (thanks, Atom...) */
    gap: 4.5vh;
    justify-content: center;
    padding: 0.1vmax;
    line-height: 2.5vh;
}

/* Nav anchor style */
nav a
{
    color: #C9631F ;
    text-decoration: underline overline ;
}

/* Nav (a)nchor text style */
nav a
{
    text-decoration: underline overline ;
}

/* Hyperlink (a)nchor text, if it is a link */
a:link
{
    text-decoration: underline ;
    color: #EEDB00 ;
    overflow-y: clip ;
}

/* Hyperlink (a)nchor text, if visited*/
a:visited
{
    color: #00C8F9 ;
}

/* Hyperlink (a)nchor text, if hovered over*/
a:hover
{
    color: #C6EC00 ;
    text-shadow: 2px 0 5px #C6EC00 ;
    cursor: url('/_images/layout/cursor_pointer.png'), pointer ;
}

/* Blog Body */
.blogbody
{
    min-width: 100% ;
    background-color: #292A1D ;
    color: #C6EC00 ;
    border-style: none none none groove ;
    border-width: 8px ;
    border-color: #C6EC00 ;
    padding: 1.2rem ;
    border-radius: 57px ;
}

/* Styling for singular posts */
.post
{
    font-size: 1.05em ;
    margin-bottom: 2rem ;
    color: #E87D0D ;
}

.date
{
    color: #D6C519 ;
    font-size: 0.8em ;
}

.smallscript
{
    font-size: 0.6em ;
}

.desc
{
    font-size: 0.7em ;
}

code
{
    color: #EEDB00 ;
    background-color: black ;
    padding: 0.1em 0.2em ;
    font-size: 1.2em ;
    box-sizing: content-box ;
}

/* feet */
footer
{
    background-color: #292A1D ;
    color: #E87D0D ;
    padding: 1rem ;
    text-align: center ;
    box-shadow: 0px -5px #C6EC00 ;
}

/* Padding fallback */
.container
{
    padding-left: 20rem ;
    padding-right: 20rem ;
    padding-top: 10vmax ;
    padding-bottom: 4rem ;
    /* I wish to consume groove wax */
    background-image: url("/_images/layout/groovewax-256.png") ;
    border-inline: groove 15px ;
    border-inline-color: #E87D0D ;
}

.cite
{
    vertical-align: super ;
    display: inline ;
    font-size: 0.85em ;
}

.copyright::before /* Holy shit this works */
{
    content: "© 2025-2026 I actually don't fully know how copyrights work, but you do not have permission to train AI off the works of this site, or steal my shit I put here. Cheers <3";
}

details
{
    color: #E87D0D ;
    border-inline: groove 8px ;
    border-inline-color: #C6EC00 ;
    background-color: #1A1A0C ;
    padding: 1rem ;
    border-radius: 10px ;
    border-style: none none none groove ;
}

summary
{
    color: #C6EC00 ;
    text-align: center ;
    border-inline: none ;
    border-inline-color: unset ;
    background-color: #101501 ;
    border-radius: 10px ;
    padding-left: 1rem ;
    padding-right: 1rem ;
    padding-top: 0.3rem ;
    padding-bottom: 0.3rem ;
}

.emphasis
{
    color: #EEDB00 ;
}

@media (max-width: 900px)
{

    *
    {
        line-height: 1.5em ;
    }

    body
    {
        font-family: 'JetBrains Mono', Arial, Verdana, sans-serif ;
        line-height: 1.6 ;
        height: 100vh;
    }

    header
    {
        position: sticky ;
        height: 12%;
        padding-left: unset ;
    }

    h1
    {
        color: #E87D0D ;
        line-height: unset ;
        font-size: 4.46vmax ;
        display: flex ;
        padding: 3vh ;
        justify-content: center ;
    }

    nav
    {
        font-size: 1.4vh;
        width: 96% ;
        height: 4vmax ;
        padding-left: unset ;
        padding-right: unset ;
        margin-left: 2% ;
    }

    img
    {
        max-width: 100% ;
        border-block: groove 3px hsl(71, 89%, 24%) ;
    }
    nav a
    {
        font-size: 0.37em ; /* General font scale I think */
    }

    nav ul
    {
        justify-content: center;
        gap: 1.2em ;
        padding: 0.27vmax ;
    }

    /* Individual text property */
    nav li 
    {
        font-size: 26px ; /* the only one that does anything */
        line-height: 0.5em ;
    }

    h2
    {
        font-size: 1em ;
        text-align: end ;
    }
  
    .container
    {
        padding-left: 1.3em ;
        padding-right: 1.3em ;
        padding-top: 5vh ;
        padding-bottom: 3.5vh ;
        border-inline: groove 6px ;
        border-inline-color: #E87D0D;
    }

    .blogbody
    {
    padding-top: 0.6em ;
    padding-bottom: 0.6em ;
    padding-left: 1.3em ;
    padding-right: 0.6em ;
    border-style: none none none groove ;
    border-width: 5px ;
    }

    .date
    {
        text-align: end;
        font-size: 0.8em ;
        font-style: italic ;
    }
    
    .desc
    {
        text-align: end;
        font-size: 0.8em ;
        font-style: italic ;
    }

    .post
    {
        font-size: 0.8em ;
    }

    footer
    {
        padding: 0.8vmax ;
        min-width: 100% ;
        max-width: min-content ;
        font-size: 0.55em ;
        box-shadow: 0px -3px hsl(71, 89%, 44%) ;
    }

}

@media (prefers-color-scheme: light)
{
    *
    { 
        scrollbar-color: #E87D0D #F6EFEA ;
    }

    /* Header styling, for the body that holds the title + navbar */
    header
    {
        background-color: #F6EFEA ;
        box-shadow: 0px 5px #E87D0D ;
        color: #AB4A00 ;
    }

    /* Header text styling */
    h1
    {
        color: #383D2F ;
    }

    h2
    {
        color: #383D2F ;
    }

    .container
    {
        background-image: url("/_images/layout/groovewax-256-light.png") ;
    }

    footer
    {
        background-color: #F6EFEA ;
        color: #383D2F ;
        box-shadow: 0px -3px #E87D0D ;
    }

    code
    {
        background-color: #D4CABE ;
        color: #004F00 ;
    }

    .blogbody
    {
        border-inline-color: #C96300 ;
        border-inline-color: #E87D0D ;
    }

    .date
    {
        color: #BE0005 ;
    }

    .post
    {
        color: #383D2F ;
    }

    .blogbody
    {
        background-color: #F6EFEA ;
        color: #383D2F ;
        border-style: none none none groove ;
    }

    .emphasis
    {
        color: #00680E ;
    }

    nav
    {
        background-color: #E2D8CC ;
        border-inline-color: #C96300 ;
        border-inline-color: #E87D0D ;
        color: #383D2F ; /* Font color */
    }

    /* Nav anchor style */
    nav a
    {
        color: #383D2F ;
    }

    /* Hyperlink (a)nchor text, if it is a link */
    a:link
    {
        color: #005888;
    }

    /* Hyperlink (a)nchor text, if visited*/
    a:visited
    {
        color: #894FB3;
    }

    /* Hyperlink (a)nchor text, if hovered over*/
    a:hover
    {
        color: #1A1A0C ;
        text-shadow: 2px 0 5px #E87D0D ;
        cursor: url('/_images/layout/cursor_pointer.png'), pointer ;
    }
    
    img
    {
        border-block: solid 3px #E87D0D ;
    }

    summary
    {
        color: #383D2F ;
        border-inline-color: #F6EFEA ;
        background-color: #F6EFEA ;
    }

    details
    {
        color: #383D2F ;
        border-inline-color: #C96300 ;
        border-inline-color: #E87D0D ;
        background-color: #E2D8CC ;
    }
}

@media (prefers-contrast: more) or (monochrome)
{
    *
    {
        scrollbar-color: black white ;
    }

    .container
    {
        background-image: url("/_images/layout/groovewax-256-mono.png") ;
        border-inline-color: black ;
        border-inline-color: black ;
    }

    footer
    {
        background-color: white ;
        color: black ;
        box-shadow: 0px -3px black ;
    }

    code
    {
        color: white ;
    }

    .blogbody
    {
        border-color: white ;
    }

    .container
    {
        border-inline: solid ;
        border-inline-color: black ;
        border-inline-color: black ;
    }

    .date
    {
        color: black ;
    }

    .post
    {
        color: black ;
    }

    .blogbody
    {
        background-color: white ;
        color: black ;
        border-inline: solid 8px ;
        border-inline-color: black ;
        border-inline-color: black ;
    }

    nav
    {
        background-color: white ;
        border-inline: solid 8px ;
        border-inline-color: black ;
        border-inline-color: black ;
    }

    nav a
    {
        color: black ;
    }

    h1
    {
        color: black ; 
    }

    header
    {
        color: black ;
        background-color: white ;
        box-shadow: 0px 5px black ;
    }

    a:hover
    {
        color: black ;
        text-shadow: none ;
    }

    a:visited
    {
        color: black ;
    }

    a:link
    {
        text-decoration-thickness: 0.3rem ;
        color: black ;
    }
    
    img
    {
        border-block: solid 3px black ;
    }

    summary
    {
        color: white ;
        border-inline-color: white ;
        background-color: black ;
    }

    details
    {
        color: black ;
        border-inline-color: black ;
        background-color: white;
    }
}