* {
    box-sizing: border-box;
}

:root {
    --color-background: #bf9efc;
    --color-link: #083e66;
    --color-link-border: #946cdf;
    --color-text: #b42e85;
    --color-button-background: #1b94bf;
    --color-button-background-hover: #147395;
    --color-button-text: #fff;

    --color: #e392fe;
    --radius: 20px;
    --elevation: 12px;
    --bevel: 2px;
    --angle: 225deg;
    --intensity: 70;
    --diffusion: 34;
}

html {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: 'DM Sans', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

body {
    color: var(--color-text);
    margin: 0 auto;
    padding: 0;
}

a {
    border-bottom: 2px solid var(--color-link-border);
    color: var(--color-link);
    display: inline-block;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
}

a:hover {
    border-bottom: 2px dotted var(--color-link-border);
}

body {
    align-items: center;
    display: flex;
    margin: 0 auto;
    padding: 1rem 1rem;
}

.c-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    margin: 0 auto;
    margin-top: 3rem;
    padding: 0 1rem;
    text-align: left;
    width: min(100%, 700px);
}

.c-keyboard {
    background: var(--color-button-background);
    padding: 45px 40px;
    border-radius: 20px;
    position: relative;
    --color: #8a6bc0;

    /*======= Computed Variables =======*/
    --sin: calc(sin(var(--angle)));
    --cos: calc(cos(var(--angle)));
    --x-displacement: calc(-1 * var(--cos) * (var(--elevation) + 1px));
    --y-displacement: calc(-1 * var(--sin) * (var(--elevation) + 1px));
    --edge-opacity: calc(var(--intensity) * 0.006 - var(--diffusion) * 0.002);
    --edge-blur: calc(var(--bevel) * 1.5);
    --surface-contrast: calc(var(--intensity) * 0.01 - var(--diffusion) * 0.005);

    /*======= Computed Properties =======*/
    border-radius: var(--radius);
    box-shadow: var(--x-displacement) var(--y-displacement) calc(var(--diffusion) * 0.3px + (var(--elevation))) calc(var(--elevation) / 2) rgba(0, 0, 0, calc(var(--intensity) * 0.006)),
        0px 0px calc(var(--diffusion) * 1.4px) rgba(255, 255, 255, calc(var(--intensity) * 0.004)),
        inset calc(var(--bevel) * -1) 0 var(--edge-blur) hsla(100, 0%, calc((var(--cos) + 1) * 50%), var(--edge-opacity)),
        inset 0 var(--bevel) var(--edge-blur) hsla(100, 0%, calc((-1 * var(--sin) + 1) * 50%), var(--edge-opacity)),
        inset var(--bevel) 0 var(--edge-blur) hsla(100, 0%, calc((-1 * var(--cos) + 1) * 50%), var(--edge-opacity)),
        inset 0 calc(var(--bevel) * -1) var(--edge-blur) hsla(100, 0%, calc((var(--sin) + 1) * 50%), var(--edge-opacity));
    background: linear-gradient(
        calc(var(--angle) + 90deg),
        rgba(0, 0, 0, var(--surface-contrast)),
        rgba(255, 255, 255, var(--surface-contrast))
        ),
        var(--color);
    /*======== Static Properties ========*/
    background-blend-mode: soft-light;
}

.c-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    width: 1200px;
}

.c-key {
    color: #222;
    display: block;
    font-family: sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    min-width: 65px;
    padding: 18px 24px;
    position: relative;
    height: 4rem;

    --color: #e392fe;
    /*======= Computed Variables =======*/
    --sin: calc(sin(var(--angle)));
    --cos: calc(cos(var(--angle)));
    --x-displacement: calc(-1 * var(--cos) * (var(--elevation) + 1px));
    --y-displacement: calc(-1 * var(--sin) * (var(--elevation) + 1px));
    --edge-opacity: calc(var(--intensity) * 0.006 - var(--diffusion) * 0.002);
    --edge-blur: calc(var(--bevel) * 1.5);
    --surface-contrast: calc(var(--intensity) * 0.01 - var(--diffusion) * 0.005);

    /*======= Computed Properties =======*/
    border-radius: var(--radius);
    box-shadow: var(--x-displacement) var(--y-displacement) calc(var(--diffusion) * 0.3px + (var(--elevation))) calc(var(--elevation) / 2) rgba(0, 0, 0, calc(var(--intensity) * 0.006)),
        0px 0px calc(var(--diffusion) * 1.4px) rgba(255, 255, 255, calc(var(--intensity) * 0.004)),
        inset calc(var(--bevel) * -1) 0 var(--edge-blur) hsla(100, 0%, calc((var(--cos) + 1) * 50%), var(--edge-opacity)),
        inset 0 var(--bevel) var(--edge-blur) hsla(100, 0%, calc((-1 * var(--sin) + 1) * 50%), var(--edge-opacity)),
        inset var(--bevel) 0 var(--edge-blur) hsla(100, 0%, calc((-1 * var(--cos) + 1) * 50%), var(--edge-opacity)),
        inset 0 calc(var(--bevel) * -1) var(--edge-blur) hsla(100, 0%, calc((var(--sin) + 1) * 50%), var(--edge-opacity));
    background: linear-gradient(
        calc(var(--angle) + 90deg),
        rgba(0, 0, 0, var(--surface-contrast)),
        rgba(255, 255, 255, var(--surface-contrast))
        ),
        var(--color);
    /*======== Static Properties ========*/
    background-blend-mode: soft-light;
}

.c-footer {
    background-color: var(--color-background);
    font-size: 0.85rem;
    inset: auto 0 0 0;
    padding: 1rem 1.5rem 1rem;
    position: fixed;
    text-align: center;
    width: 100%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #211930;
        --color-link: #dd64b3;
        --color-link-border: #7053a6;
        --color-text: #1b94bf;
    }
}