/* #region PAGE TITLE */
#page-title {
    text-align: center;
    margin: var(--top-offset) 0;

    color: #7179be;
    font-size: 50px;
    text-shadow: 5px 5px 4px #23008a;
    letter-spacing: 100px;
}
/* #endregion */

/* #region HEADER (aka navbar) */
/* seriously why did i call it header..? */
#header {
    top: var(--top-offset);
    position: sticky;
    display: flex;

    background: linear-gradient(to right, #020816,#232946);
    
    border-top: 6px groove darkslateblue;
    border-bottom: 3px solid darkslateblue;

    height: 70px;
}

/* header entries settings */
#header > * {
    width: var(--header-width);

    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.25s;
    border-left: ridge 10px darkslateblue;

    line-height: 0px;
}
/* title settings */
#header > * > *:first-child {
    margin-left: 15px;
    transition: 0.25s;
    font-size: var(--header-title-size);
}
/* description settings */
#header > * > *:last-child {
    margin-left: 5px;
    transition: 0.5s;
    /* transition-delay: 0.15s; */
    font-size: var(--header-description);
    opacity: 0;
    letter-spacing: var(--header-line-height);
}

/* on entry hover */
#header > *:hover {
    width: var(--header-width-open);
    line-height: var(--header-line-height-open);
    background: linear-gradient(to right, #1a2373, transparent);
}
/* on entry hover for title */
#header > *:hover > *:first-child {
    font-size: var(--header-title-size-open);
}
/* on entry hover for description */
#header > *:hover > *:last-child {
    opacity: 1;
    letter-spacing: 10%;
    line-height: 12px;
}

/* #endregion */

/* #region MAIN CONTENT */
#main-content {
    margin-top: calc(var(--top-offset) * 2);
    margin-bottom: 120px;

    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* left/right stuff is not used yet.
    maybe later i can put something like latest journal entry there. */
#left-main {
    width: 200px;
    margin-right: 10px;
}
#center-main {
    width: 600px;
    display: flex;
    flex-direction: column;
}
#right-main {
    width: 200px;
    margin-left: 10px;
}

.container {
    background-color: #020816;
    border: 5px inset #23008a;
    border-radius: 15px;
    margin: 5px;
}

#daily-song > * {
    display: flex;
    flex-direction: column;
}
#daily-song > *:first-child {
    font-size: 20px;
    /* letter-spacing: 25%; */
}
#daily-song > *:nth-child(2) {
    text-align: end;
    margin-right: 10%;
}
/* #endregion */

/* #region MISCELLANIOUS */
/* did i spell that right..? */

:root {
    --top-offset: 15px;
    /* Header stuff */
    --header-width: 250px;
    --header-width-open: 325px;
    --header-title-size: 30px;
    --header-title-size-open: 20px;
    --header-description: 14px;
    --header-line-height: -50%;
    --header-line-height-open: 30px;
}
* {
    box-sizing: border-box;
}
body {
    font-family: "Courrier New", monospace;
    font-size: 16px;
    
    background: linear-gradient(#232946, #020816);
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: rgb(212, 218, 255);
    margin: 0 auto;
}
/* #endregion */