:root {
    font-family: var(--sans);
    scroll-behavior: smooth;
    color: var(--text);
    --LOGO-height: 80px;
    --navigationWidth: 360px;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(var(--bg-dark) 95%, var(--bg));
    max-width: 100vw;
    overflow-x: hidden;
}

/* Color */
:root {
    --main: hsl(330 65% 55%);
    --main-hover: hsl(330 65% 65%);
    --bg-dark: hsl(227 20% 10% / 1);
    --bg: hsl(227, 5%, 15%);
    --bg-light: hsl(227, 0%, 20%);
    --color-sub: hsl(36, 71%, 92%);
    --text: hsl(0, 0%, 95%);
    --text-muted: hsl(0, 0%, 75%);
    --gradient: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
    --gradient-hover: linear-gradient(0deg, var(--bg), var(--bg-light));
    --text-sub: hsl(225, 12%, 20%);
    --warn: hsl(0, 100%, 42%);
    --notify: hsl(63, 100%, 42%);
    --info: hsl(182, 100%, 42%);
}

/* HighLight / Shadow */
:root {
    --border: hsl(0deg 0% 30% / 25%);
    --border-card: 1px solid var(--border);
    --highlight: hsl(0deg 0% 60% / 50%);
    --shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.07), 0px 4px 4px hsla(0, 0%, 0%, 0.15);
}

/* Font */
:root {
    --font-size-XL: 30px;
    --font-size-L: 22px;
    --font-size-M: 16px;
    --font-size-S: 14px;
}

html.zh {
    --sans: 'Noto Sans TC', '微軟正黑體';
    --serif: 'Noto Serif TC', '微軟正黑體';
}

html.en {
    --sans: 'Noto Sans', '微軟正黑體';
    --serif: 'Noto Serif', 'Times New Roman', '微軟正黑體';
}

@media (max-width: 767px) {
    :root {
        --font-size-XL: 24px;
        --font-size-L: 16px;
        --font-size-M: 12px;
        --font-size-S: 10px;
    }
}

/* #region Text */
.title {
    font-family: var(--serif);
    font-weight: 700;
}

p,
li {
    color: var(--text-muted);
}

a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.3s ease;
}

a:hover {
    color: var(--main);
    transform: scale(1.05);
}

a:active {
    transform: scale(0.95);
}

/* #endregion  */

/* #region UI Item */
.UIbox {
    background: var(--gradient);
    padding: 1.5rem;
    border-radius: 1rem;
    border: var(--border-card);
    border-top: 1px solid var(--highlight);
    box-shadow: var(--shadow);
    margin: 1.5rem auto;
}

.UItitle {
    color: var(--text);
    font-size: var(--font-size-L);
    font-weight: 400;
    border-bottom: 2px solid var(--main);
}

.UIcontent {
    color: var(--text-muted);
    font-size: var(--font-size-M);
}

.UIbutton {
    display: block;
    width: fit-content;
    text-decoration: none;
    color: var(--text);
    font-size: var(--font-size-M);
    border-radius: 0.5rem;
    margin: 15px 0;
    padding: 0.2rem 1.4rem;
    background: var(--main);
    box-shadow: var(--shadow);
    border: var(--border-card);
    border-top: var(--highlight);
    transition: transform 0.3s ease, background 0.2s ease;
}

.UIbutton:hover {
    background: var(--main-hover);
    transform: scale(1.05);
}

.UIbutton:active {
    transform: scale(0.95);
}

@media (max-width: 767px) {
    .UIbox {
        margin: 1rem auto;
    }

    .UItitle {}

    .UIcontent {}

    .UIbutton {}

    .UIbutton:hover {}

    .UIbutton:active {}
}

/* #endregion  */

/* #region Sub Scroll Bar */
::-webkit-scrollbar {
    width: 0;
}

::-webkit-scrollbar-thumb {}

::-webkit-scrollbar-track {}

/* #endregion */