@font-face {
    font-family: BubbleBobble;
    src: url(fonts/BubbleBobble.otf),
        url(fonts/BubbleBobble.ttf),
        url(fonts/BubbleBobble.woff2);
}

/* For copyright, see LICENSE.txt */

:root {
    --stretch: scale(3.5, 1);
}

body {
    font-family: BubbleBobble;
    color: white;
    text-shadow: 1px 1px 0px black;
    margin: 0;
    background: radial-gradient(lime, green);
    min-width: calc(100vw - 1em);
    min-height: calc(100vh - 1em);
}

h1 {
    color: pink;
    background: linear-gradient(pink, pink, purple, black);
    background-clip: text;

    text-shadow: 0px 0px 5px #fff2;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

p {
    margin: 0
}

header {
    overflow: hidden;
}

header h1 {
    font-style: italic;
    text-align: center;
    margin: 0.5em 0;

    -webkit-transform: var(--stretch);
    -moz-transform: var(--stretch);
    -ms-transform: var(--stretch);
    -o-transform: var(--stretch);
    transform: var(--stretch);
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer p {
    font-size: 1.5em;
}

header,
#main,
footer {
    max-width: 640px;
    margin: 1em auto;
    padding: 1em;

    /*===== Skeumorphism =====*/
    --color: #8a6bc0;
    --radius: 10px;
    --elevation: 20px;
    --bevel: 2px;
    --angle: 237deg;
    --intensity: 70;
    --diffusion: 30;
}

button,
input[type=submit],
input[type=file] {
    font-size: 1.25em;
    color: white;
    text-shadow: 1px 1px 0px black;

    font-family: inherit;
    padding: 0.25em 0.5em;
    border: none;

    /*===== Skeumorphism =====*/
    --color: #41b011;
    --radius: 10px;
    --elevation: 0px;
    --bevel: 2px;
    --angle: 237deg;
    --intensity: 70;
    --diffusion: 30;
}

button:hover,
input[type=submit]:hover {
    --color: #41d011;
}

button:active,
input[type=submit]:active,
button.active {
    --color: #41a011;
    --angle: 237deg - 180deg;
}

header,
#main,
footer,
button,
input[type=submit],
input[type=text],
input[type=number],
.card,
.tabs {
    /*======= 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;
}

.editor,
#players,
#world {
    display: none
}

.card,
.tabs {
    padding: 1em;
    margin-bottom: 1em;

    /*===== Skeumorphism =====*/
    --color: purple;
    --radius: 10px;
    --elevation: 0px;
    --bevel: 2px;
    --angle: 237deg;
    --intensity: 70;
    --diffusion: 30;
}

.tabs {
    display: flex;
    justify-content: left;
    gap: 1em;

    /*===== Skeumorphism =====*/
    --color: midnightblue;
}

input[type=text],
input[type=number] {
    border: none;
    color: white;
    padding: 0.5em 1em;
    font-family: inherit;

    /*===== Skeumorphism =====*/
    --color: darkred;
    --radius: 10px;
    --elevation: 0px;
    --bevel: 2px;
    --angle: 237deg;
    --intensity: 70;
    --diffusion: 30;
}

a {
    color: deepskyblue
}

#list {
    padding: 0 1em;
    margin: 0;
}

#changelog {
    max-width: 640px;
    margin: auto;
}

@media (width > 800px) {
    #changelog {
        position: absolute;
        bottom: .5em;
        right: 1em;
    }

    #list {
        max-height: 120px;
        overflow-y: scroll;
    }
}