:root {
    --width-max: 820px;
    --secondary-color: magenta;
}

@font-face {
  font-family: "Luciole";
  src: url("fonts/Luciole-Regular.woff") format("woff"),
    url("fonts/Luciole-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Luciole";
  src: url("fonts/Luciole-Bold.woff") format("woff"),
    url("fonts/Luciole-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Luciole";
  src: url("fonts/Luciole-Italic.woff") format("woff"),
    url("fonts/Luciole-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: "Luciole";
  src: url("fonts/Luciole-BoldItalic.woff") format("woff"),
    url("fonts/Luciole-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}

html {
    font-family: "Luciole", Arial, sans-serif;
}

h1 {
    max-width: var(--width-max);
    margin: 0 auto;
    margin-top: 1.5rem;
    text-align: center;
}
nav {
    max-width: var(--width-max);
    text-align: right;
    margin: 0 auto;
    margin-bottom: 1rem;
}
section {
    margin: auto;
    padding: 1rem;
}
h2 {
    text-align: left;
    font-size: 1.2rem;
}
a {
    color: var(--secondary-color);
}
section#parameters,
section#about {
    max-width: var(--width-max);
    border-radius: 1rem;
    border: 2px solid gray;
}
section#preview {
    max-width: 100vw;
    overflow-x: auto;
}
#parameters > div {
    margin-bottom: 1rem;
    display: grid;
    grid: auto-flow / 1fr 1fr 10ch;
    gap: 0 1ch;
}
#parameters label {
    position: relative;
}
#parameters label::after {
    content: "?";
    position: absolute;
    top: -0.5rem;
    font-size: 0.8rem;
}
#parameters label:hover ~ .help,
#parameters label:focus ~ .help {
    display: block;
}
.help {
    display: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    font-style: italic;
}

#input-size + span::after {
    content: " px";
}

#input-angle + span::after {
    content: " degrés";
}
#input-alpha + span::after,
#input-vspace + span::after,
#input-hspace + span::after {
    content: " %";
}

#buttons {
    text-align: center;
}

#info {
    padding: 0 1rem;
}

canvas {
    display: block;
    margin: auto;
    border: 1px solid var(--secondary-color);
}