/* importing fonts */

@font-face {
    font-family: Jersey;
    src: url('Jersey15-Regular.ttf')
}

@font-face {
    font-family: Cascadia;
    src: url('CascadiaCode-VariableFont_wght.ttf')
}

/* color theme variable setup */

:root {
    --bgCol: #0e0b0e;
    --txtCol: #efefe5;
    --linkCol: #a9ffcb;
    --h1Col: #e56969;
    --h2Col: #e5a769;
    --h3Col: #a0e569;
    --h4Col: #e5c469;
    --buttonCol: #f277bd;
    --noticeCol: #d977f2;
    --noticeTxtCol: #edcded;
    --footerCol: #808076;
}

/* overrides default settings if light mode pref detected
because I'm evil and wanna default to dark */
@media (prefers-color-scheme: light) {
    :root {
    --bgCol: #f9f9f2;
    --txtCol: #0e0b0e;
    --linkCol: #135c30;
    --h1Col: #510303;
    --h2Col: #040942;
    --h3Col: #2e6700;
    --h4Col: #4e3a03;
    --buttonCol: #7e0047;
    --noticeCol: #4f0063;
    --noticeTxtCol: #390339;
    --footerCol: #686859;
    }
}

/* basic headings and other generic formatting */

h1 {
    font-family: Jersey;
    font-size: 4rem;
    color: var(--h1Col);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

h2 {
    font-family: Jersey;
    font-size: 3rem;
    color: var(--h2Col);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

h3 {
    font-family: Jersey;
    font-size: 2rem;
    color: var(--h3Col);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

h4, h5, h6 {
    font-family: Jersey;
    font-size: 1.5rem;
    color: var(--h4Col);
    text-transform: capitalize;
    letter-spacing: 0.15rem;
}

body {
    background-color: var(--bgCol);
    font-family: Cascadia;
    font-size: 1rem;
    color: var(--txtCol);
    padding: 10px;
    overflow-wrap: break-word;
    hyphens: manual;
    line-height: 2rem;
}

a {
    color: var(--linkCol);
    text-decoration: none;
}

a:focus {
    text-decoration: underline;
    /* underline links when selected/clicked
    to make keyboard nav more visible
    since it don't change colors for it */
}

button, input {
    color: var(--buttonCol);
    font-size: 2rem;
    font-family: Jersey;
    outline: 3px var(--buttonCol) solid;
    border: none;
    padding: 5px;
    margin: 0.75rem;
}

/* stuff specific to buttons
bc I'll probably yoink button/input stuff for other things */

button {
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    background-color: var(--bgCol);
    /* bg color forces buttons to be easier to click
    either that or I'm being supersitious */
}

button:focus {
    background-color: var(--txtCol);
    color: var(--bgCol);
    /* makes buttons change color when focused/clicked
    so people navigating by keyboard can see what they've selected better
    since I stole the outline for styling */
}

summary {
    padding: 5px;
}

img {
    display: block;
    max-width: 100%;
    margin: auto;
}

/* table formatting */

table {
    border: 3px var(--buttonCol) solid;
    padding: 5px;
    margin: 0.75rem;
}

th {
    color: var(--buttonCol);
    font-size: 1.5rem;
    font-family: Jersey;
    border-bottom: 3px var(--buttonCol) solid;
    padding: 5px;
}

table th + th {
    border-left: 3px var(--buttonCol) solid;
}

table td + td {
    border-left: 1px var(--buttonCol) dotted;
    padding: 5px;
}

/* list formatting */

li {
    margin-bottom: 10px;
    max-width: 100%;
}

ul li::marker {
    content: '-> ';
    color: var(--h4Col);
    padding: 10px;
    font-size: 1.2rem;
}

/* content warnings/banners */

.CW {
    outline: 3px var(--noticeCol) solid;
    color: var(--noticeTxtCol);
    padding: 10px;
}

/* responsive stuff: wide screen version */

@media (min-width: 1000px) {
    /* generic page class */
        .PgGener {
        max-width: 50%;
    }
    /* for charwiki pages */
    .SideImages {
        float: right;
        outline: 3px var(--noticeCol) solid;
        padding: 10px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 2px;
        width: 45%;
        max-height: 75%;
        overflow-y: scroll;
    }
    /* for writing page sidebar */
    .SideNav {
        display: block;
        float: right;
        outline: 3px var(--noticeCol) solid;
        padding: 10px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 2px;
        max-width: 25%;
        max-height: 75%;
        overflow-y: scroll;
    }
    .WritDiv {
        display: block;
        max-width: 70%;
    }
    /* for anything that needs to be centered 
    was originally gonna be used for writing pages */
    .PgCen {
        display: block;
        max-width: 40%;
        margin: auto;
    }
    /* for art page images */
    .ArtImage {
        display: block;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    /* overriding specific tags */
    .SideImages > p, 
    .SideImages > li,
    .SideImages > img,
    .SideNav > p,
    .SideNav > li,
    .CW > p {
        width: 100%;
    }
}

/* responsive stuff: slim screen version */

@media (max-width: 999px) {
    /* for charwiki pages*/
    .SideImages {
        outline: 3px var(--noticeCol) solid;
        padding: 10px;
    }
    /* for writing page sidebar*/
    .SideNav {
        outline: 3px var(--noticeCol) solid;
        padding: 10px;
    }
    /* for art page images */
    .ArtImage {
        max-width: 100%;
    }
}

/* quick note: CharRef class is deprecated
img class was already formatted the way it needed to be 
didn't feel like removing it from pages in case I ever needed it again */

/* flexboxes */

.VisualBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: space-around;
    flex-direction: row;
    gap: 15px;
    width: 100%;
}

.FlexImg {
    max-width: 150px;
}

.ButtonBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: space-around;
    flex-direction: row;
    gap: 1px;
    width: 100%;
    margin-bottom: 2rem;
}

.BoxItem {
    max-width: 300px;
    height: 200px;
    overflow-y: scroll;
    overflow-x: none;
    margin: auto;
    text-align: center;
    border: 3px var(--noticeCol) solid;
    padding: 10px;
}

.BoxItem > p,
.Boxitem > li {
    width: 100%;
}

/* footer stuff. Last to make sure it overrides */

footer {
    font-size: 0.5rem;
    color: var(--footerCol);
    margin-top: 20px;
}