:root {
    --fs-sm: clamp(0.4rem, 0.5rem, 0.75rem);
    --fs-base: clamp(0.75, 0.9rem, 1.1rem);
    --fs-md: clamp(1.1rem, 1.125rem, 1.2rem);
    --fs-lg: clamp(1.2rem, 1.5rem, 1.7rem);
    --fs-xl: clamp(2rem, 2.2rem, 2.7rem);

    --ff: sans-serif;

    --color-highlight: hsl(210, 36%, 44%, 0.2);
    --color-light: hsl(20, 100%, 95%);

    --color-green: hsl(153, 36%, 44%);
    --color-green-light: hsl(153, 36%, 54%);
    --color-green-dark: hsl(153, 36%, 34%);
    --color-blue: hsl(210, 36%, 44%);
    --color-blue-light: hsl(210, 36%, 54%);
    --color-blue-dark: hsl(210, 36%, 34%);
    --color-red: hsl(10, 36%, 44%);
    --color-red-light: hsl(10, 36%, 54%);
    --color-red-dark: hsl(10, 36%, 34%);

    --radius: 0.5rem;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: var(--ff);
}

.svelte_root {
    display: grid;
    grid-template-columns:
        [full-width-start] 0.5fr [content-start] 2fr
        [content-end] 0.5fr [full-width-end];
    gap: 1rem;
    /*grid-template-rows: [topbar-start] 0.5fr [title-start] 0.5fr [upload-start] 5rem [info-start] 1fr;*/
    position: relative;
    grid-template-rows: 0.5fr calc(var(--fs-base) + 2rem) 1fr 2fr;
    padding: 1rem;
}

h1,
h2,
h3 {
    text-align: center;
}

.content {
    grid-column: content;
}

.full-width {
    grid-column: content;
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.color-green {
    background-color: var(--color-green);
}

.color-blue {
    background-color: var(--color-blue);
}

.color-red {
    background-color: var(--color-red);
}

.italic {
    font-style: italic;
}

.strong {
    font-weight: bold;
}

.button {
    color: var(--color-light);
}

@media (max-width: 500px) {
    .content {
        grid-column: full-width;
    }
}

.padding-large {
    padding: 1.5rem;
}

.padding-base {
    padding: 1rem;
}

.padding-small {
    padding: 0.5rem;
}

.margin-large {
    margin: 1.5rem;
}

.margin-base {
    margin: 1rem;
}

.margin-small {
    margin: 0.5rem;
}