@charset "UTF-8";

/*

  Nanbu Eq Service for Web

  Copyright (C) Nooooooo, よね/Yone
  改変や複製を一切禁じます。

*/

:root {
    /* z-index */
    --z-index-header: 290;
    --z-index-navigation-bar: 280;
    --z-index-window: 270;

    /* Themes */
    --bgcolor: #001;
    --color: #eee;

    /* Font */
    --font-family: "M PLUS 1", sans-serif;
    --font-size: 16px;
    --font-weight: 400;

    /* header */
    --header-height: fit-content;
    --header-color: var(--color);

    /* Responsive */
    @media (width <=384px) {
        --font-size: 12px;
    }

    @media (height <=384px) {
        --font-size: 12px;
    }
}

html {
    font-size: var(--font-size);
}


body {
    margin: 0;
    padding: 0;

    background-color: var(--bgcolor);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    font-style: normal;
    line-height: 2em;
    color: var(--color);

    user-select: none;
}

body * {
    margin: 0;
    padding: 0;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-header);

    display: block;
    width: 100%;
    height: var(--header-height);
    overflow: hidden;
    min-block-size: 0;

    background-color: #00000080;
    text-align: center;
    color: var(--header-color);
}

.mobile-br {
    display: none;

    @media (width <=640px) {
        display: block;
    }
}

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

/* navigation-bar */

.navigation-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: var(--z-index-navigation-bar);

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

    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    padding: 0.5rem 2rem;
}

/* menu-button */

.menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: none;
    border-radius: 0.2rem;

    padding: 0.5rem;

    transition: background-color 0.2s;

    &.enabled {
        background-color: #eee;
        color: #222;

        .menu-button__open {
            display: none;
        }

        .menu-button__close {
            display: block;
        }
    }

    .material-symbols-outlined {
        font-size: 2rem;
    }
}

.menu-button__close {
    display: none;
}

/* window */

.window {
    position: fixed;
    top: var(--header-height);
    left: 0;
    z-index: var(--z-index-window);

    opacity: 0;
    pointer-events: none;

    box-sizing: border-box;
    width: 100dvw;
    height: calc(100dvh);
    overflow: auto;

    background-color: var(--bgcolor);

    transition: opacity 0.3s;

    &.enabled {
        opacity: 1;
        pointer-events: unset;

        * {
            opacity: 1;
        }
    }

    * {
        opacity: 0;
        transition: opacity 0.3s;
        transition-delay: 0.3s;
    }

}