/*----- base formatting -----*/

html,
body,
span,
iframe,
h1,
h2,
h3,
h4,
p,
pre,
del,
em,
img,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
table,
tbody,
tr,
th,
td,
section,
header,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    backface-visibility: hidden;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/*----- variables -----*/

:root {

    /* body */
    --background-color: #dcd8ff;
    --scrollbar: #968aff;
    --scrollbar-track: #968aff;
    --transition: all 0.3s ease-in-out;

    /* boxes */
    --main-box-background: white;
    --border-color: #7676ee;
    --border-thickness: 1px;
    --gradient-light: #ffd6ff;
    --gradient-dark: #a1a1ff;

    --container-width: 80rem;
    --sidebar-width: 210px;
    --gap: 1rem;
    --header-height: calc(var(--gap) * 4);
    --blur: 3px;

    /* text */
    --text: #2b2b2b;
    --header: white;
    --link: #5d4edd;
    --link-hover: #fd89cf;

    /* dark mode */
    --background-color-darkmode: #302f39;
    --main-box-background-darkmode: #2b2b2b;

    --gradient-light-darkmode: #bf8dc9;
    --gradient-dark-darkmode: #7272be;

    --text-darkmode: #e7e7e7;
    --link-darkmode: #b5b5ff;
    --link-hover-darkmode: #f9dbff;
}

/*----- fonts -----*/

/* ibm-plex-sans-thai-300 - latin_latin-ext_thai */
@font-face {
    font-display: swap;
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-300.woff2') format('woff2');
}

/* ibm-plex-sans-jp-300 - japanese_latin */
@font-face {
    font-display: swap;
    font-family: 'IBM Plex Sans JP';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/ibm-plex-sans-jp-v5-japanese_latin-300.woff2') format('woff2');
}

/* ibm-plex-sans-thai-500 - latin_latin-ext_thai */
@font-face {
    font-display: swap;
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/ibm-plex-sans-thai-v10-latin_latin-ext_thai-500.woff2') format('woff2');
}

/*----- body/text decoration -----*/

body {
    background-color: var(--background-color);
    font-family: 'IBM Plex Sans Thai', 'IBM Plex Sans JP';
    font-weight: 300;
    font-size: 1rem;
    /* background-image: url(/resources/images/background.png); */
    /* background-image: url(https://64.media.tumblr.com/tumblr_maunryEJUh1qid2nw.png); */
    /* background-color: #DFDBE5; */
    /* svg background from https://heropatterns.com/ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%23a1a1ff' fill-opacity='0.3' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E");
    background-attachment: fixed;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    justify-content: center;
    align-items: stretch;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

a {
    color: var(--link);
    -webkit-transition: var(--transition);
    -moz-transition: var(--transition);
    -o-transition: var(--transition);
    -ms-transition: var(--transition);
    transition: var(--transition);

    &:hover {
        text-shadow: 0px 0px 2px var(--link-hover);
        color: var(--link-hover)
    }
}

b,
strong {
    font-weight: 500;
}

p {
    &:has(+ p) {
        text-indent: 2em;
    }

    +p {
        text-indent: 2em;
        margin-top: 1rem;
    }

    &:has(img) {
        display: flex;
        justify-content: center;
    }

    &:has(+ ul) {
        margin: 1rem 0;
    }

    &:has(strong) {
        text-indent: 0;

        &::before {
            content: url('/resources/images/arrow.png');
            margin-right: 5px;
        }
    }
}

.new::after {
    content: url('/resources/images/new.gif');
    margin-left: 8px;
}

.subheader {
    background-image: linear-gradient(to right, #a1a1ff, #a8a4fe, #aea7fd, #b3aafd, #b9adfc, #c2b1fc, #cbb5fc, #d3b9fc, #e0c0fc, #ebc7fd, #f6cefe, #ffd6ff);
    border-bottom: var(--border-thickness) solid var(--border-color);
    padding: 3px;
    color: var(--header);
    letter-spacing: 2px;
}

/*----- container -----*/

#container {
    width: 100vw;
    max-width: var(--container-width);
    /* height: 100svh; */
    background-color: color-mix(in srgb, var(--main-box-background), transparent 90%);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    border-left: var(--border-thickness) solid var(--border-color);
    border-right: var(--border-thickness) solid var(--border-color);
    display: grid;
    grid-template-areas:
        "header header"
        "menu content"
        "footer footer";
    grid-template-columns: minmax(14%, var(--sidebar-width)) auto;
    grid-template-rows: var(--header-height) minmax(calc(100vh - (calc(2 * var(--header-height)))), auto) var(--header-height);
}

header,
footer {
    color: var(--header);
    font-size: 2em;
    line-height: calc(var(--header-height) - 1px);
    font-family: 'FortySeven Micro NBP', sans-serif;
    letter-spacing: 3px;
    padding: 0 calc(var(--gap) * 0.75);
    margin: 0px;
    font-weight: 700;
}

header {
    grid-area: header;
    border-bottom: var(--border-thickness) solid var(--border-color);
    background-image: linear-gradient(to right, var(--gradient-dark), var(--gradient-light));
}

footer {
    grid-area: footer;
    border-top: var(--border-thickness) solid var(--border-color);
    background-image: linear-gradient(to left, var(--gradient-dark), var(--gradient-light));
    text-align: right;
}

/*----- clickable headers -----*/


summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px 0px 4px 4px;
    font-size: 1.125em;
    cursor: pointer;
}

/*----- sidebar navigation -----*/

aside {
    overflow-y: scroll;
    margin: var(--gap) 0 0 var(--gap);
    height: min-content;
    position: sticky;
    top: var(--gap);
    padding-bottom: var(--gap);
}

nav {
    border-left: var(--border-thickness) solid var(--border-color);
    border-top: var(--border-thickness) solid var(--border-color);
    border-right: var(--border-thickness) solid var(--border-color);
    margin: 0px 0px var(--gap) 0px;

    &:last-child {
        margin: 0;
    }

    & .subheader h3 {
        margin: var(--border-thickness) 0px 0px 4px;
        font-family: 'FortySeven Micro NBP', sans-serif;
        font-size: 1rem;
        line-height: 1.25em;
    }

    & ul {
        padding: calc(var(--gap) / 4) calc(var(--gap) / 2);
        background-color: var(--main-box-background);
        border-bottom: var(--border-thickness) solid var(--border-color);
        list-style-type: none;
        color: var(--text);
        font-size: 1rem;
        letter-spacing: var(--border-thickness);

        & a {
            text-decoration: none;

            & li {
                margin: 0px;
                border-radius: 1rem;

                &:hover {
                    &:before {
                        content: url("/resources/images/arrow.png");
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}

input[type=checkbox] {
    box-sizing: border-box;
    display: none;
}

#openMobileNav,
.mobileNavToggle {
    display: none;
}

/*----- main contents -----*/

main {
    overflow-y: scroll;
    grid-area: content;
    margin: var(--gap) var(--gap) 0 var(--gap);
}

section {
    box-sizing: border-box;
    border-left: var(--border-thickness) solid var(--border-color);
    border-top: var(--border-thickness) solid var(--border-color);
    border-right: var(--border-thickness) solid var(--border-color);
    padding: 0px;
    margin: 0px 0px var(--gap) 0px;
    background-color: var(--main-box-background);
}

section summary::before {
    content: '';
    width: 9px;
    height: calc(var(--gap) * 0.75);
    background: url('/resources/images/plus.png') no-repeat;
    display: inline;
    margin-left: 3px;
    margin-right: 2px;
}

section details[open]>summary::before {
    background: url('/resources/images/min.png') no-repeat;
}

section summary::-webkit-details-marker {
    display: none;
}

section .subheader h3 {
    margin: var(--border-thickness) 0px 0px 4px;
    font-family: 'FortySeven Micro NBP', sans-serif;
    font-size: 1.125em;
    line-height: 1.25em;
    display: inline;
}

.mainboxescontent {
    padding: calc(var(--gap) * 0.75) var(--gap);
    color: var(--text);
    line-height: 1.5;
    font-family: 'IBM Plex Sans Thai', 'IBM Plex Sans JP';
    font-weight: 300;
    font-size: 1rem;
    border-bottom: var(--border-thickness) solid var(--border-color);
}

section dl {
    margin: 0px;
}

section dt {
    letter-spacing: var(--border-thickness);
}

section dd {
    line-height: 1.5;
    margin: 5px 0px 5px 17px;
    padding-left: 3px;
    display: list-item;
    list-style-image: url("/resources/images/arrow.png");
    text-align: justify;
}

section li {
    line-height: 1.5;
    padding: var(--border-thickness) 0px var(--border-thickness) 3px;
    margin: 0;
    list-style-image: url("/resources/images/arrow.png");
    text-align: justify;
    letter-spacing: 0px;
}

section ul {
    padding: 0 0 0 calc(var(--gap) * 0.75);
    margin: 0 0 0 8px;
}

/*----- mobile view -----*/

@media only screen and (max-width: 900px) {

    html,
    body {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        height: 100dvh;
        width: 100vw;
        position: relative;
        background-color: var(--main-box-background);
    }

    #container {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        padding: none;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }

    header,
    footer {
        margin: 0;
        width: 100%;
        border: var(--border-thickness) solid var(--border-color);
        height: auto;
        z-index: 999;
        font-size: 1.5em;
        line-height: 1.5em;
    }

    header {
        border-top: none;
        top: 0;
    }

    footer {
        border-bottom: none;
        bottom: 0;
    }

    footer span {
        display: block;
        padding-right: 6px;
    }

    aside {
        width: 100%;
        height: auto;
        overflow: auto;
        padding: 0px 0px 0px 0px;
        margin: var(--gap) 0px 0px 0px;
    }

    #sidebarMenu {
        margin-top: var(--gap);
        display: none;
    }

    input[type="checkbox"]:checked~#sidebarMenu {
        display: block;
    }

    .mobileNavToggle {
        display: block;
        cursor: pointer;
    }

    .mobileNavToggle h3::before {
        content: url('/resources/images/plus.png');
        margin-right: 5px;
    }

    input[type="checkbox"]:checked~.mobileNavToggle h3::before {
        content: url('/resources/images/min.png');
    }

    nav,
    header,
    footer {
        border-right: none;
        border-left: none;
    }

    label.mobileNavToggle h3 {
        font-size: 1.25em;
    }

    nav {
        & summary::before {
            content: '';
            width: 9px;
            height: calc(var(--gap) * 0.75);
            background: url('/resources/images/plus.png') no-repeat;
            display: inline;
            margin-left: 3px;
            margin-right: 2px;
        }

        & details[open]>summary::before {
            background: url('/resources/images/min.png') no-repeat;
        }

        & summary::-webkit-details-marker {
            display: none;
        }

        /* & p {
            background: var(--main-box-background);
            margin: 0;
        } */

        & ul {
            font-size: 1.5em;
            line-height: 2;
            background: var(--main-box-background);
            margin: 0;
        }

        & li {
            display: inline-block;
            padding: 0.2em;
            line-height: 1.5;

            &::after {
                content: '\00a0 \00a0 /';
            }
        }
    }

    main {
        width: 100%;
        flex: 1;
        overflow: auto;
        padding: 0;
    }

    section {
        border: none;
    }

    section .subheader,
    .mobileNavToggle {
        border-top: var(--border-thickness) solid var(--border-color);
    }

    section img {
        max-width: 100%;
    }

    section {
        line-height: 1.5;
    }

    section h3 {
        line-height: 1.25;
    }

    section:last-child {
        margin: 0px 0px var(--gap) 0px;
    }

    #credit {
        display: none;
    }
}

/*----- dark mode -----*/

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--background-color-darkmode);
    }

    nav ul,
    section {
        background-color: var(--main-box-background-darkmode);
    }

    #container {
        background-color: color-mix(in srgb, var(--main-box-background-darkmode), transparent 70%);
    }

    a {
        color: var(--link-darkmode);
    }

    a:hover {
        color: var(--link-hover-darkmode);
        text-shadow: 0px 0px 2px var(--link-hover-darkmode);
    }

    .mainboxescontent,
    .sidecontent {
        color: var(--text-darkmode);
    }

    section img {
        opacity: .9;
        filter: grayscale(10%);
        -webkit-transition: var(--transition);
        -moz-transition: var(--transition);
        -o-transition: var(--transition);
        -ms-transition: var(--transition);
        transition: var(--transition);
    }

    section img:hover {
        opacity: 1;
        filter: grayscale(0);
        -webkit-transition: var(--transition);
        -moz-transition: var(--transition);
        -o-transition: var(--transition);
        -ms-transition: var(--transition);
        transition: var(--transition);
    }

    header {
        background-image: linear-gradient(to right, var(--gradient-dark-darkmode), var(--gradient-light-darkmode));
    }

    footer {
        background-image: linear-gradient(to left, var(--gradient-dark-darkmode), var(--gradient-light-darkmode));
    }

    .subheader {
        background-image: linear-gradient(to right, #7272be, #7a76c3, #837ac9, #8b7dce, #9481d3, #9c83d4, #a385d5, #aa87d6, #b088d3, #b68acf, #bb8bcc, #bf8dc9);
    }
}