:root {
    /* --color-second: #fe9a; */

    --color-text: #211;
    --color-bg: #fffcf8;
    --color-primary: #c51;
    --color-on-primary: #fed;
    --color-primary-hover: #d62;
    --color-focus: #921;
    --hero-opacity: 1;

    --color-dark-text: #ddd;
    --color-dark-bg: #111308;
    --color-dark-primary: #c51c;
    --color-dark-on-primary: #fed;
    --color-dark-primary-hover: #d62d;
    --color-dark-focus: #c30;
    --hero-dark-opacity: 0.8;
    --hero-mask-ratio: 0%;

    font-feature-settings: var(--font-feature-style),
        'cv11' 0;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-text: var(--color-dark-text);
        --color-bg: var(--color-dark-bg);
        --color-primary: var(--color-dark-primary);
        --color-on-primary: var(--color-dark-on-primary);
        --color-primary-hover: var(--color-dark-primary-hover);
        --color-focus: var(--color-dark-focus);
        --hero-opacity: var(--hero-dark-opacity);
    }
}

[data-theme="dark"] {
    --color-text: var(--color-dark-text);
    --color-bg: var(--color-dark-bg);
    --color-primary: var(--color-dark-primary);
    --color-on-primary: var(--color-dark-on-primary);
    --color-primary-hover: var(--color-dark-primary-hover);
    --color-focus: var(--color-dark-focus);
    --hero-opacity: var(--hero-dark-opacity);
}

* {
    transition: color var(--trans-quick), background var(--trans-move);
}

:root {
    --env-mrgtop: 0rem;
    --env-padding: 2rem;
    --env-gap: 2rem;
    --env-max-width: 75rem;
    --hero-mask-ratio: 600px;
}

::selection {
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}

.app-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 0 var(--env-padding);
    /* padding-top: var(--env-mrgtop); */
    gap: var(--env-gap);
}

.header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

ribbon {
    width: 100%;
    padding: 0;
    /* margin-bottom: var(--env-gap); */
    /* background-color: #fff; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-m);
    color: var(--color-primary);
    padding: var(--env-padding);
}

.ribbon-wrap {
    width: 100%;
    height: 100%;
    max-width: 75rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* flex-wrap: wrap; */
    gap: .5rem;
    font-size: 2rem;
    line-height: 2rem;
    /* max-width: 40vw; */
}

.menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    /* background-color: var(--color-primary); */
    color: white;
    gap: 1rem;
    flex: 1;
}

.menu a {
    text-decoration: none;
    word-break: keep-all;
}

.hero {
    width: 100%;
    height: 40rem;
    background-color: var(--color-primary);
    border-radius: 0 0 var(--radius-m) var(--radius-m);
    opacity: var(--hero-opacity);
    transition: opacity var(--trans-slow);
}

main {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--env-gap);
}

section {
    width: 100%;
    /* padding: .75rem 1.5rem 1.5rem 1.25rem; */
    /* border: 1px dashed var(--color-border); */
    border-radius: var(--radius-m);
}

section h2 {
    margin-top: 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    color: inherit;
    text-decoration: underline;
}

footer span .span-btn {
    padding: .2rem .25rem;
    border-radius: var(--radius);
    cursor: pointer;
}

footer span .span-btn:not(.btn-active):hover {
    background: var(--color-primary-hover);
}

footer span .btn-active {
    /* border: var(--color-on-primary) .1rem solid; */
    background: var(--color-on-primary);
    color: var(--color-primary);
}

/* 定义抖动动画 */
@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(+2px, 0, 0);
    }

    30%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(+4px, 0, 0);
    }

    50% {
        transform: translate3d(-4px, 0, 0);
    }
}

@keyframes mild-shake {

    10%,
    90% {
        transform: translate3d(2px, 1px, 0) scale(1.11);
    }

    30%,
    70% {
        transform: translate3d(-6px, 2px, 0) scale(1.12);
    }

    50% {
        transform: translate3d(-10px, 4px, 0) scale(1.12);
    }
}

@keyframes drop-in {

    10% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1.12);
    }

    90% {
        transform: scale(1.112);
    }
}

/* 应用抖动动画 */
.shake:hover {
    animation: shake 800ms ease-in-out;
}

@media screen {
    :root {
        --env-padding: 2rem;
        --env-gap: 3rem;
    }

    ribbon {
        /* max-width: 75rem; */
    }

    main {
        max-width: 75rem;
    }
}

/* @media screen and (max-width: 6100px) {
    :root {
        --hero-mask-ratio: 16%;
    }
}


@media screen and (max-width: 5200px) {
    :root {
        --hero-mask-ratio: 24%;
    }
}

@media screen and (max-width: 4500px) {
    :root {
        --hero-mask-ratio: 29%;
    }
}

@media screen and (max-width: 4100px) {
    :root {
        --hero-mask-ratio: 32%;
    }
}

@media screen and (max-width: 3700px) {
    :root {
        --hero-mask-ratio: 35%;
    }
}

@media screen and (max-width: 3300px) {
    :root {
        --hero-mask-ratio: 39%;
    }
}

@media screen and (max-width: 2900px) {
    :root {
        --hero-mask-ratio: 44%;
    }
}

@media screen and (max-width: 2500px) {
    :root {
        --hero-mask-ratio: 50%;
    }
}

@media screen and (max-width: 2100px) {
    :root {
        --hero-mask-ratio: 58%;
    }
}

@media screen and (max-width: 1800px) {
    :root {
        --hero-mask-ratio: 67%;
    }
}

@media screen and (max-width: 1400px) {
    :root {
        --hero-mask-ratio: 76%;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --hero-mask-ratio: 80%;
    }
} */

@media screen and (max-width: 600px) {
    :root {
        --env-padding: 1.5rem;
        --env-gap: 2.5rem;
        --hero-mask-ratio: 500px;
    }
}

@media screen and (max-width: 580px) {
    :root {
        --font-size: 15px;
    }
}

@media screen and (max-width: 500px) {
    :root {
        --font-size: 14px;
        --hero-mask-ratio: 400px;
    }
}

@media screen and (max-width: 420px) {}

@media screen and (max-width: 380px) {
    :root {
        --font-size: 13px;
        --env-padding: 2rem;
        --env-gap: 3rem;
        --hero-mask-ratio: 300px;
    }
}