/*UNIVERSAL, resets CSS*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

/*FONT IMPORTS*/
@font-face {
    font-family: Pico;
    src: url('/assets/fonts/pico.ttf');
}

/*ROOT*/
:root {
    --page-background: #ffccd5;
    --grid-color: #ff8fa3;
    --m-img-background: #fff0f3;
    --header-background:#ff8fa3;
    --border:#A4133C;
    --text:#A4133C;
    --link:#FF4D6D;
    --link-v:#590D22;

    --background-img: url(bg-img.png);
}


/*Allows for dark mode*/
@media (prefers-color-scheme: dark) {
    :root {
        --page-background: #A4133C;
        --grid-color: #590D22;
        --m-img-background: #FF8FA3;
        --header-background:#FF758F;
        --border:#590D22;
        --text:#590D22;
        --link:#FFF0F3;
        --link-v:#C9184A;

        --background-img: url(bg-img-dark.png);
    }
}

body {
    padding: 2em 4em 2em;
    font-family: "Pico", monospace;
    font-size: 1.6em;
    background-image: linear-gradient(var(--grid-color) 2px, transparent 2px), linear-gradient(to right, var(--grid-color) 2px, transparent 2px);
    background-size: 60px 60px;
    background-color: var(--page-background);
    background-attachment: fixed;
    color: var(--text);
}

header {
    background-color: var(--header-background);
    border: solid var(--border);
    text-align: center;
}

ul, ol {
    margin-left: 2em;
    list-style-type: square;
}

li {
    margin-top: -1.5px;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 85%;
    border-radius: 1em;
}

figure {
    margin: 1.2em;
}

figcaption {
    display: block;
    text-align: center;
    font-size: 0.9em;
}

a {
    color:var(--link);
}
a:visited {
    color:var(--link-v);
}

.message, .m-image {
    background-image: var(--background-img);
    background-size: 2rem;
    line-height: 2rem;
    margin: 2em;
    border: solid var(--border);
    border-radius: 1em;
}

.m-image {
    background: var(--m-img-background);
}

/*.message span {
    display: inline-block;
    width:100%;
    height:1.75rem;
}*/

.message p {
    text-indent: 1.2em;
    margin: 1.2em;
    }

.message h2, h3 {
    margin: 0 80% 0 0;
    border-style: none solid solid none;
    border-radius: 0.6em 0 0.5em 0;
    border-color: var(--border);
    background: var(--header-background);
    text-indent: 0.5em;
}

.message h3 {
    border-radius: 0.75em 0 0.5em 0;
}