/* base styles */

:root {
    --colorForeground: #FFFFFF;
    --colorBackground: #191919;
    --colorWhite: #FFFFFF;
    --bgGradient: linear-gradient(to bottom, #536976, #292e49);

    --spacing: 8px;
    --shadow-medium: 0 1rem 2rem rgba(0,0,0,0.19),0 0.6rem 0.6rem rgba(0,0,0,0.23);
}
@media (prefers-color-scheme: light) {
    :root {
        --colorForeground: #191919;
        --colorBackground: #FFFFFF;
    }
}

/* layout */

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--colorBackground);
    color: var(--colorForeground);
    font-family: Arial, Helvetica, sans-serif;
}
header {
    position: sticky;
    top: 0;
    box-shadow: var(--shadow-medium);
    background: var(--bgGradient);
    z-index: 1;
    padding: var(--spacing);
}
header h1,
main {
    margin: 0 auto;
    width: calc(100vw - 64px);
    max-width: 800px;
}

/* components */

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing);
}
.flex-dir-col {
    flex-direction: column;
}
.flex-dir-row {
    flex-direction: row;
}
.space-right {
    margin-right: var(--spacing);
}
form {
    margin: calc(var(--spacing) * 2) 0 0 0;
}
.actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: calc(var(--spacing) * 2) 0 0 0;
}
.canvas {
    margin: calc(var(--spacing) * 4) 0 0 0;
}

/* html elements */

h1 {
    margin: 0;
    color: var(--colorWhite);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}
h2 {
    margin: var(--spacing) 0 calc(var(--spacing) * 2) 0;
    font-weight: 400;
}
button {
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2) calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    cursor: pointer;
    font-size: 16px;
    display: flex;
}