/* --------------------------------- */
/* 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('https://blog.aethena.art/_images/layout/cursor_auto.png'), auto ;
    scrollbar-color: hsl(182, 100%, 55%) hsl(231, 18%, 14%);
    scrollbar-width: thin;
}

/* The "body" of the HTML page */
body
{
    font-family: 'JetBrains Mono', Arial, Verdana, sans-serif ;
    line-height: 1.6 ;
    overflow-y: scroll ;
    overflow-x: hidden ;
}

/* Header styling, for the body that holds the title + navbar */
header
{
    background-color: hsl(231, 18%, 14%);
    box-shadow: 0px 5px hsl(261, 89%, 44%);
    color: #E87D0D ;
    padding-left: 1vmax ;
    position: absolute ;
    min-width: 100% ;
    font-size: 2vh ;
    height: 8vmax ;
}


/* Header text styling */
h1 {
    color: #E87D0D ;
    min-width: 100% ;
    font-size: 4vmax ;
    text-align: justify ;
}
h2
{
    display: flex ;
    font-size: 2.2em ;
    justify-content: right ;
    padding-bottom: 2.7% ;
    width: 100% ;
}
nav
{
    position: absolute ;
    bottom: 0% ;
    background-color: hsl(231, 9%, 7%);
    padding-left: 1rem ;
    padding-right: 1rem ;
    padding-top: 0% ;
    padding-bottom: 0% ;
    border-radius: 1.8vh ;
    font-size: 0.9vmax ;
    width: min-content ;
    height: 2vmax ;
    border-inline: groove 8px ;
    border-inline-color: hsl(261, 89%, 24%);
    border-inline-color: hsl(261, 89%, 44%);
    color: hsl(31, 89%, 40%) ; /* Font color */
}

/* 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: 2vw ;
    justify-content: left ;
    padding: 0.1vmax ;
}

/* Nav anchor style */
nav a
{
    color: hsl(31, 89%, 40%) ;
    text-decoration: underline overline;
}

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

/* Hyperlink (a)nchor text, if visited*/
a:visited
{
    color: hsl(182, 50%, 55%) ;
}

/* Hyperlink (a)nchor text, if hovered over*/
a:hover
{
    color: hsl(182, 100%, 55%) ;
    cursor: url('https://blog.aethena.art/_images/layout/cursor_pointer.png'), pointer ;
}

img
{
    display: flex ;
}

p
{
    font-size: 1.2em ;
}

h4
{
    font-size: 1.4em ;
}

/* Main container that holds recent posts, and about */
.container
{
    padding-left: 3% ;
    padding-right: 3% ;
    padding-top: 10vmax ;
    padding-bottom: 4rem ;
    height: 100% ;
    width: 100vw ;
    min-height: 0 ;
    background-image: url("https://blog.aethena.art/_images/layout/graphfight-1024.png");
    overflow-y: auto ;
}

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

/* Recent Posts section */
.recent-posts
{
    flex: 2; /* 2/3rds */
    background-color: hsl(231, 18%, 14%);
    color: hsl(71, 89%, 44%) ;
    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: hsl(261, 89%, 24%);
    border-inline-color: hsl(261, 89%, 44%);
    height: fit-content ;
    overflow-y: auto ;
}

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

.date
{
    display: flex ;
    justify-content: right ;
    color: hsl(51, 89%, 41%) ;
    font-size: 0.8em ;
    padding-bottom: 1% ;
}

/* Container on right side for info, maybe future nav shit ? */
.rightbar
{
    flex: 1 ; /* 1/3rd */
    background-color: hsl(231, 18%, 14%);
    color: hsl(71, 89%, 44%) ;
    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(261, 89%, 24%);
    border-inline-color: hsl(261, 89%, 44%);
    height: fit-content ;
    overflow-y: clip ;
}

/* feet */
footer
{
    background-color: hsl(231, 18%, 14%);
    color: #E87D0D ;
    padding: 1rem ;
    text-align: center ;
    box-shadow: 0px -5px hsl(261, 89%, 44%);
}

.image-container
{
    display: flex ;
    justify-content: center ;
    padding-top: 25px ;
    padding-bottom: 25px ;
}

.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";
}

@media (max-width: 900px)
{

    *
    {
        line-height: 1.06em ;
    }

    a
    {
        font-size: 2.2vmax ;
    }

    img
    {
        max-width: 100% ;
        padding-top: 5% ;
        padding-bottom: 5% ;
    }



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


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

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

    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: 2em ;
        padding-bottom: 3% ;
    }

    main
    {
        display: flex ;
        flex-wrap: wrap ;
        row-gap: 0.8rem ;
        column-gap: 100% ;
        padding-bottom: unset ;
    }
    
    .rightbar
    {
        flex: 1; /* Swap to over-under for mobile, 2/2 */
        display: flex ;
        flex-wrap: wrap ;
        justify-content: left ;
        font-size: 1.2em ;
        height: 25vh ;
        padding-left: 5% ;
        padding-right: 5% ;
        padding-top: 9% ;
        padding-bottom: 9% ;
        height: fit-content ;
        width: 100% ;
        word-break: break-all;
    }

    .container
    {
        padding-left: 1rem ;
        padding-right: 1rem ;
        padding-top: 15vh ;
        padding-bottom: 1rem ;
        height: unset ;
    }

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

    .date
    {
        display: flex ;
        justify-content: right ;
        font-size: 0.6em ;
        padding-bottom: 10% ;
    }

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

    footer
    {
        font-size: 0.7em ;
        white-space: wrap ;
        box-shadow: 0px -3px hsl(71, 89%, 44%) ;
    }

    p
    {
        padding-top: 3% ;
        padding-bottom: 3% ;
        font-size: 1em ;
        line-height: 1.36em ;
    }

    body
    {
        height: 100vh ;
    }

    .model-author
    {
        display: flex;
        font-size: 1em ;
        padding-top: 5% ;
        padding-bottom: 5% ;
        flex-wrap: wrap;
    }

    .model-date
    {
        font-size: 1em ;
        padding-top: 5% ;
        padding-bottom: 5% ;
    }

    h4
    {
        font-size: unset ;
        padding-top: 5% ;
        padding-bottom: 5% ;
    }
}