section {
    margin-bottom: var(--spacing-2xl);
}

.flat-box,
.raised-box,
.raised-button {
    background-color: var(--box-bg);
    border: var(--border-width) solid var(--border-color);
}

.raised-box {
    box-shadow: var(--shadow-offset) var(--shadow-offset) var(--border-color);
}

.raised-button {
    box-shadow: var(--shadow-offset) var(--shadow-offset) var(--border-color);
    font-weight: 400;
    color: var(--text-color);
    cursor: pointer;
    background-image: url("/assets/hatch-pattern.svg");

    transition:
        box-shadow var(--transition-fast),
        border var(--transition-fast),
        color var(--transition-fast),
        font-weight var(--transition-fast),
        background-color var(--transition-fast),
        background-image var(--transition-fast),
        transform var(--transition-fast);
}

.raised-button:hover {
    box-shadow: var(--shadow-offset-sm) var(--shadow-offset-sm)
        var(--accent-color);
    border: var(--border-width) solid var(--accent-color);
    color: var(--bg-color);
    font-weight: 700;
    background-color: var(--text-color);
    background-image: none;
    transform: translate(var(--shadow-offset-sm), var(--shadow-offset-sm));
}

.raised-button:active {
    box-shadow: 0px 0px var(--accent-color);
    transform: translate(var(--shadow-offset), var(--shadow-offset));
    transition: none;
}

.button-text {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.square {
    display: flex;
    justify-content: center;
    aspect-ratio: 1 / 1;
}