:root {
    --background-color: #252525;
    --foreground-color: #303030;
    --text-color: #b8b8b8;
    --accent-color: #4585ff;
    --border-color: #505050;
    --hover-color: #404040;
    --active-color: #4a4a4a;
    --black-color: #2d2d2d;
    --white-color: #efefef;
    --black-border: #2d2d2d;
    --white-border: #2d2d2d;
    --last-color: #db4535;

    color-scheme: dark;

    overscroll-behavior-y: none;
}

* {
    margin: 0;
    box-sizing: border-box;
    user-select: none;
    color: var(--text-color);
    -webkit-tap-highlight-color: transparent;
}

body {
    min-height: 100svh;
    background-color: var(--background-color);
    font-family: Arial, Helvetica, sans-serif;
}

canvas {
    width: 100%;
    height: 100%;
}

svg {
    fill: var(--text-color);
    stroke: var(--text-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    height: 100%;
}

button {
    border: none;
    outline: none;
    background-color: inherit;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    padding: 8px 16px;
}

@media (orientation: portrait) {
    .container {
        flex-direction: column;
        gap: 40px;
        padding: 8px 4px;
    }
}