/* Misc */

a {
    text-decoration: none;
}

/* Organization */

html {
    /* Size */
    width:  100%;
    height: 100%;

    /* Alignment */
    text-align: center;

    /* Layout */
    display: flex;
}

body {
    margin: auto;
}

.themes {
    padding: 1rem;
}

.themes button {
    /* Space */
    padding: 0;
    margin:  0.1rem;

    /* Layout */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;

    /* Misc. */
    aspect-ratio: 1;
}

.themes button img {
    width: 5rem;
}

.sizes {
    padding: 1rem;
}

.sizes a {
    /* Space */
    padding: 0;
    margin:  0.1rem;

    /* Size */
    width: 5rem;

    /* Layout */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;

    /* Misc. */
    aspect-ratio: 1;
}

nav a {
    /* Space */
    padding: 0.5rem;
    margin:  0;
    margin-top: 2rem;

    /* Layout */
    display: inline-block;
}

/* Font */

html {
    font-family: sans-serif;
    font-size:   16pt;
}

.sizes a {
    font-size: 2rem;
}

/* Theme */

html {
    background: url("/background.webp") center center / contain no-repeat;
}

.themes button {
    /* Color */
    background: #F8F8F8F0;

    /* Border */
    border: 1px solid gainsboro;
    border-radius: 12px;
}

.themes button:hover {
    background: #F0F0F0F0;
}

.themes button:active {
    background: #E8E8E8E8;
}

.sizes a {
    /* Color */
    color:      white;
    background: #333;

    /* Border */
    border: none;
    border-radius: 12px;
}

.sizes a:hover {
    background: #444444;
}

.sizes a:active {
    background: #222222;
}

.sizes a:hover, .sizes a:active {
    text-shadow: 0 0 8px white;
}

nav a {
    color: gray;
}

footer {
    color: silver;
}

/* Animation */

.themes button:hover {
    animation: pop 0.25s;
}

@keyframes pop {
    75% {
        transform: translateY(-0.5rem);
    }
}

.sizes a:hover {
    animation: spin 0.5s;
}

@keyframes spin {
    100% {
        transform: rotate3d(0.25, 1, 0.25, 360deg);
    }
}