:root {
    --logo-width: 220px;
    --light-border: 1px solid #DCC;

    --header-color: #FA4;
    --link-color: #D92;
    --input-border: 1px solid #DCC;
}

input, select {
    padding: 3px 10px;
    border: var(--input-border);
    border-radius: 3px;
}
.button#update {
    display: block;
    margin-top: 1rem;
    margin-left: auto;
}
.button {
    padding: 3px 10px;
    font-size: 110%;
    color: #333;
    background-color: #FA4;

    cursor: pointer;
    text-decoration: none;

    border: var(--input-border);
    border-radius: 3px;
}
.button[disabled] {
    background-color: #CCC;
}

body {
    font-family: sans-serif;
    font-size: 11pt;
    max-width: 820px;
    margin: 0 auto;
    padding: 10px;
}

h1, h2, h3 {
    color: var(--header-color);
}
h1 {
    text-align: center;
}

a {
    color: var(--link-color);
}

#logo {
    margin-inline: auto;
    display: block;

    width: var(--logo-width);

    border: 1px solid red;
    clip-path: circle(50%);
}

ul.instructions {
    display: flex;
    justify-content: space-between;

    padding-left: 0;
    gap: 1rem;
    list-style: none;
}
ul.instructions li {
    text-align: center;

    flex-grow: 1;
}
ul.instructions img {
    filter: hue-rotate(150deg);
}

.svgdiv,
.parametersdiv,
ul.instructions li {
    border-radius: 5px;
    border: var(--light-border);
}

textarea#exportedSVG {
    display: none;
}
.parametersdiv {
    padding: 10px;
}
.parametersdiv b {
    color: var(--header-color);
}

.buttons {
    display: flex;
    justify-content: space-between;
}

.svgdiv {
    padding: 10px;
}