* {
    margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
}

:root {
    font-size: clamp(0.875rem, min(4vh, 2vw), 1rem);
    --font-size: clamp(0.875rem, min(4vh, 2vw), 1rem);
    /* font-weight: bold; */
    font-family: 'Courier New';
    --text-green: #32FF32;
    --text-orange: #FFB000;
    --text-red: #FF3232;
    --text-cyan: #00FFCC;
    --text-yellow: #FFFF66;
    --bg-primary: #000000;
    --bg-secondary: #001100;
    --header-height: clamp(96px, min(10vw, 20vh), 128px);
    --footer-height: clamp(48px, min(10vw, 20vh), 64px);
    --header-footer-font-size: clamp(0.75rem, min(8vh, 4vw), 0.875rem);
    --border-line: 2px solid var(--text-green);
    /*alternative of border-line*/
    --box-shadow: 0 0 0 2px var(--text-green);
    --box-shadow-up: 0 -2px 0 0 var(--text-green);
    --box-shadow-down: 0 2px 0 0 var(--text-green);
    --crt-line-width: 8px;
    --text-shadow-green: 0 0 4px var(--text-green), 0 0 8px var(--text-green);
    --text-shadow-orange: 0 0 4px var(--text-orange), 0 0 8px var(--text-orange);
    --text-shadow-red: 0 0 4px var(--text-red), 0 0 8px var(--text-red);
    --text-shadow-cyan: 0 0 4px var(--text-cyan), 0 0 8px var(--text-cyan);
    --text-shadow-yellow: 0 0 4px var(--text-yellow), 0 0 8px var(--text-yellow);
    --navi-height: 64px;
    --sub-navi-height: 48px;
    --border-radius: 8px;
    /*Textbox*/
    --single-textbox-margin: calc(4vh + 0.4rem) 8vw;
    --double-textbox-margin: calc(4vh + 0.4rem) 2vw;
    --textbox-font-size: calc(var(--font-size) + 0.4rem);
    /*scaffold*/
    --scaffold-left-gap: 16vw;
    /* Toast */
    --toast-bg: rgba(0, 17, 0, 0.85);

    /* Transparency variants */
    --text-green-10: rgba(50, 255, 50, 0.1);
    --text-orange-10: rgba(255, 176, 0, 0.1);
    --overlay-bg: rgba(0, 17, 0, 0.85);
    --text-orange-accent: #B87300;
    --caret-color: white;

    /* Feature Shelf */
    --frosted-glass-bg: rgba(255, 255, 255, 0.2);
    --frosted-glass-border: 1px solid rgba(255, 255, 255, 0.3);
    --frosted-glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    --feature-shelf-btn-bg: var(--frosted-glass-bg);
    --feature-shelf-btn-color: white;

    /* Refactored Variables */
    /* --container-width: 48vw; */
    --container-width: clamp(300px, 86vw, 512px);
    --container-max-width: 512px;
    --container-margin: max(4vh, 32px) auto;
    --panel-padding: 16px;
    --panel-gap: 2vh;
    --title-padding: 0.4vw;
    --transition-slow: 0.4s;
    --transition-normal: 0.16s;
}

.footer {
    font-weight: bold;
}

button,
textarea,
input {
    border: none;
    resize: none;
    outline: none;
    color: var(--text-green);
    font-family: inherit;
    font-weight: bold;
    font-size: var(--font-size);
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    button:hover {
        background: var(--text-green);
        color: var(--bg-primary);
        box-shadow: 0 0 10px var(--text-green);
    }
}

button.error {
    color: var(--text-red) !important;
    border-color: var(--text-red) !important;
    box-shadow: 0 0 10px var(--text-red) !important;
    transition: all 0.2s;
}

html,
body {
    width: 100vw;
    height: 100%;
    background-color: var(--bg-secondary);
    color: var(--text-green);
    overflow-x: hidden;
}

/*Unify flex column*/
body,
nav,
div,
span,
.header,
.body,
.footer {
    position: relative;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

.header,
.footer {
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-primary);
    overflow: hidden;
    font-weight: bold;
}

.header {
    height: var(--header-height);
}

.footer {
    height: var(--footer-height);
    border-top: var(--border-line);
    /* box-shadow: var(--box-shadow-up); */
}

.footer-text {
    font-size: var(--header-footer-font-size);
}

.header-img {
    position: absolute;
    margin: auto;
    height: var(--header-height);
    /*No stretch*/
    object-fit: contain;
    filter: saturate(1.6);
    transition: transform 0.16s ease-out;
    transform: scale(1.28);
}

.body {
    position: relative;
    width: 100%;
    height: calc(100% - var(--header-height) - var(--footer-height));
    border-top: var(--border-line);
    /*moved to footer*/
    /* border-bottom: var(--border-line); */
    overflow: hidden;
}