/* --------------------------------- */
/* CSS for blog site's homepage      */
/*                           hi c:   */
/*                                   */
/*              aethena.art, 2026    */
/* --------------------------------- */

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

/* The "body" of the HTML page */
body
{
    font-family: 'JetBrains Mono', Arial, Verdana, sans-serif ;
    line-height: 1.6 ;
    height: 100vh;
}

/* Header styling, for the body that holds the title + navbar */
header
{
    background-color: #292A1D ;
    box-shadow: 0px 5px #C6EC00 ;
    color: #E87D0D ;
    padding-left: 1vmax ;
    position: sticky ;
    min-width: 100% ;
    top: 0 ;
    font-size: 2vh ;
    height: 12%;
}

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

h2{
    color: #C6EC00 ;
}

/* 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: #9DAF00 ;
    justify-content: center ;
}

/* Nav underline style */
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 ;
}

/* Main container that holds recent posts, and about */
.container
{
    padding-left: 2rem ;
    padding-right: 2rem ;
    padding-top: 5vh ;
    padding-bottom: 2vh ;
    height: 82%;
    width: 100vw ;
    min-height: 0 ;
    background-image: url("/_images/layout/groovewax-256.png") ;
    overflow-y: auto ;
}

/* Main content area */
main
{
    display: flex ;
    flex-wrap: wrap ;
    gap: 12%;
    min-height: 0 ;
    height: 66vh ;
    padding-bottom: 5vh ;
}

/* Recent Posts section */
.recent-posts
{
    flex: 2; /* 2/3rds */
    background-color: #292A1D ;
    color: #E87D0D;
    padding-top: 0.5rem ;
    padding-bottom: 1.5rem ;
    padding-left: 1.5rem ;
    padding-right: 1.5rem ;
    /* Consume groove wax*/
    border-radius: 1.8vh ;
    border-inline: groove 8px ;
    border-inline-color: #9DAF00 ;
    border-inline-color: #C6EC00 ;
    height: fit-content ;
    overflow-y: auto ;
}

/* Styling for singular posts */
.post
{
    margin-bottom: 1.8em ;
    color: #E87D0D ;
}

.post .date
{
    color: #EEDB00 ;
    font-size: 0.6em ;
}

/* Container on right side for info, maybe future nav shit ? */
.rightbar
{
    flex: 1 ; /* 1/3rd */
    background-color: #292A1D ;
    color: #E87D0D ;
    padding-top: 0.5rem ;
    padding-bottom: 1.5rem ;
    padding-left: 1.5rem ;
    padding-right: 1.5rem ;
    border-radius: 1.8vh ;
    border-inline: groove 8px ;
    /*border-inline-color: hsl(71, 89%, 24%) ;*/
    border-inline-color: #C6EC00 ;
    height: fit-content ;
    overflow-y: clip ;
}

/* feet */
footer
{
    background-color: #292A1D ;
    color: #E87D0D ;
    padding: 0.8vmax ;
    text-align: center ;
    box-shadow: 0px -5px #C6EC00 ;
    height: 6% ;
    font-size: 1.4vh;
    white-space: wrap;
    min-width: 100% ;
    max-width: min-content ;
    position: sticky ;
    top: 100vh ;
    overflow-y: clip ;
}

/* Styling description lists used in categorized post lists */
dl
{
    display: block ;
    margin-top: 1em ;
    margin-bottom: 1em ;
    margin-left: 0 ;
    margin-right: 0 ;
}

/* Styling "Description Description" (lmao) used for description of categorized post lists */
dd
{
    margin-left: 2.5% ;
    font-size: 0.76em ;
}

/* Tooltip stuff set as a joke that also kinda just looks cool */
.tooltip
{
    position: absolute ;
    display: block ;
    cursor: pointer ;
    font-size: 0.76em ;
    text-align: center ;
    overflow-y: clip ;
}

.tooltiptext
{
    visibility: hidden ;
    background-color: #1a1b13 ;
    color: #E87D0D ;
    text-align: center ;
    border-radius: 6px ;
    position: absolute ;
    z-index: 1 ;
    bottom: 100% ;
    left: -0%; /* this has to be declared very explicitly to be zero or else it doesn't align properly */
    font-size: 0.72em ;
    overflow-y: clip ;
}

.tooltiptext::after
{
    content: "" ;
    position: absolute ;
    top: 150% ;
    left: 50%;
    margin-left: -5px ;
    border-width: 5px ;
    border-style: solid ;
    border-color: transparent transparent #C6EC00 transparent ; /* Pointy arrow, the color matching borders was an accident but it works */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext
{
    visibility: visible ;
}

.copyright::before
{
    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";
}

/* Basic mobile layout */
@media (max-width: 900px)
{

    *
    {
        line-height: 1.06em ;
    }

    a
    {
        font-size: 1.2vmax ;
    }

    header
    {
        padding-top: 0% ;
        padding-bottom: 0% ;
        padding-left: unset ;
        height: 12vmax ;
    }

    h1
    {
        line-height: unset ;
        font-size: 4.56vmax ;
        text-align: center ;
        height: unset ; /* check if necessary */
        display: flex ;
        padding: 3vh ;
        justify-content: center ;
    }

    nav
    {
        display: flex ;
        justify-content: center ;
        width: 100% ;
        height: 4vmax ;
        padding-left: unset ;
        padding-right: unset ;
    }

    nav a
    {
        font-size: 0.39em ; /* General font scale I think */
    }

    nav ul
    {
        gap: 1.4em ;
        padding: 0.3vmax ;
        justify-content: center ;
        width: 100% ;
    }

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

    h2
    {
        display: flex ;
        font-size: 1em ;
        justify-content: center ;
    }

    main
    {
        display: flex ;
        flex-wrap: wrap ;
        row-gap: 0.8rem ;
        column-gap: 100% ;
        min-height: 0 ;
        height: 77vh ;
        padding-bottom: 5vh ;
    }
    
    .rightbar
    {
        flex: 1; /* Swap to over-under for mobile, 2/2 */
        font-size: 1.2vmax ;
        height: 25vh ;
        padding-left: 5% ;
        padding-right: 5% ;
        padding-top: 1% ;
        padding-bottom: 1% ;
    }

    .container
    {
        padding-left: 1rem ;
        padding-right: 1rem ;
        padding-top: 3vh ;
        padding-bottom: 2vh ;
        height: 82vh ;
        width: 100% ;
    }

    .recent-posts
    {
        flex: 1 ; /* Swaps to over-under for mobile, 1/2 */
        display: flex ;
        flex-wrap: wrap ;
    }
    
    h3 a
    {
        display: flex ;
        font-size: 1.2em ;
    }

    .date
    {
        font-size: 2.3em ;
        width: 100% ;
        padding-top: 4px ;
    }

    .post
    {
        display: flex ;
        font-size: 0.7em ;
        flex-wrap: wrap ;
    }

    footer
    {
        font-size: 1.2vmax ;
        white-space: wrap ;
        /* box-shadow: 0px -3px #afd40c ; */
    }

}

@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 ;
    }

    /* Nav styling */
    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: #FF2400 ;
        text-shadow: 2px 0 5px #E87D0D ;
        cursor: url('/_images/layout/cursor_pointer.png'), pointer ;
    }

    /* Main container that holds recent posts, and about */
    .container
    {
        background-image: url("https://blog.aethena.art/_images/layout/groovewax-256-light-2.png") ;
    }

    /* Recent Posts section */
    .recent-posts
    {
        background-color: #F6EFEA ;
        color: #383D2F ;
        border-inline-color: #C96300 ;
        border-inline-color: #E87D0D ;
        /*border-inline-color: hsl(71, 89%, 44%) ;*/
    }

    /* Styling for singular posts */
    .post
    {
        color: #383D2F ;
    }

    .post .date
    {
        color: #DF0000 ;
    }

    /* Container on right side for info, maybe future nav shit ? */
    .rightbar
    {
        background-color: #F6EFEA ;
        color: #383D2F ;
        border-inline-color: #C96300 ;
        border-inline-color: #E87D0D ;
    }

    /* feet */
    footer
    {
        background-color: #F6EFEA ;
        color: #383D2F ;
        box-shadow: 0px -5px #E87D0D ;
    }

    .tooltiptext
    {
        background-color: #F6EFEA ;
        color: #383D2F ;
    }

    .tooltiptext::after
    {
        border-color: transparent transparent #43A000 transparent ; /* Pointy arrow, the color matching borders was an accident but it works */
    }

}

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

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

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

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

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

    .post
    {
        color: black ;
    }

    .post .date
    {
        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 ; 
    }

    h2{
        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 ;
    }
}