@charset "UTF-8";

/*

    YDITS for Web

    Copyright (C) よね/Yone

    Licensed under the Apache License 2.0.

*/

:root {
    --bgcolor: #202020ff;
    --font-family: 'Noto Sans JP', 'Roboto', sans-serif;
    --font-size: 14px;
    --font-weight: 300;
    --font-style: normal;
    --color: #ffffff;
    --color-link: #a0f0a0ff;

    /* header */
    --header-width-default: 100vw;
    --header-height-default: 2rem;
    --header-width: env(titlebar-area-width, var(--header-width-default));
    --header-height: env(titlebar-area-height, var(--header-height-default));
    --header-border-weight: 1px;
    --header-bgcolor: #1f1f1f;

    /* footer */
    --footer-height: 7rem;
}

html {
    font-size: var(--font-size);
    box-sizing: border-box;
}

body {
    position: relative;

    margin: 0;

    box-sizing: border-box;
    width: 100%;
    height: 100%;

    padding: 0;

    background-color: var(--bgcolor);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    text-decoration: unset;
    color: var(--color);

    user-select: none;

    * {
        margin: 0;
        padding: 0;

        font-family: unset;
        font-size: unset;
        font-weight: unset;
        font-style: unset;
        text-decoration: unset;
        color: unset;
    }
}

/* header */

header {
    display: flex;
    justify-content: center;
    align-items: center;

    width: var(--header-width);
    height: var(--header-height);
    overflow: hidden;

    background-color: var(--header-bgcolor);
    border-bottom: var(--header-border-weight) solid #2b2b2b;

    -webkit-app-region: drag;
}

.header__title {
    font-size: 1rem;
}

/* main */
main {
    width: 100%;
    height: 100%;
}

/* footer */

footer {
    display: flex;
    flex-direction: column;
    justify-content: center;

    align-items: center;

    width: 100%;
    height: var(--footer-height);
    overflow: hidden;

    background-color: #101010;
    color: #ffffff;
}

/* a */
a {
    text-decoration: none;
    color: var(--color-link);

    &:hover {
        text-decoration: underline;
    }
}

/* h1 - h6 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: unset;
}

/* .material-symbols-outlined */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
    font-size: 1.7rem;

    &.open-in-new {
        display: inline-block;
        font-size: 1em;
    }
}

img {
    &.material-symbols-outlined {
        width: 1.7rem;
        height: 1.7em;
    }
}