* {
  box-sizing: border-box;
}

:root {
  font-family: sans-serif;
  font-size: calc(1rem + 0.25vw + 0.25vh);
}

:root {
  --ratio: 1.5;
  --size-0: 1rem;
  --size-1: calc(var(--size-0) * var(--ratio));
  --size-2: calc(var(--size-1) * var(--ratio));

  /* Adapted from https://www.polyamproud.com/flag */
  --sky-blue: #009fe3;
  --dark-blue: #00567a;
  --magenta: #e50051;
  --light-magenta: #ff4088;
  --mint: #61c9a8;
  --off-white: #ffeedb;
  --dark-violet: #4c3b4d;
  --light-violet: #7d627f;

  --color-primary: var(--dark-blue);
  --color-primary-highlight: var(--sky-blue);
  --color-primary-text: var(--off-white);
  --color-secondary: var(--dark-violet);
  --color-secondary-highlight: var(--light-violet);
  --color-positive: var(--mint);
  --color-negative: var(--magenta);
  --color-negative-highlight: var(--light-magenta);
}

html, body {
  overscroll-behavior-y: none;
}

h1 {
  font-size: var(--size-2);
}

h2 {
  font-size: var(--size-1);
}

p, input, button, .button {
  font-size: var(--size-0);
}

.center {
  box-sizing: content-box;
  max-inline-size: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stack > * + * {
  margin-block-start: var(--size-1);
}

.cover {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
}

.cover > .cover-principal {
  text-align: center;
  margin: auto;
}

a {
  text-decoration: none;
}

a:focus, a:active, a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-highlight);
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}

.canvas svg {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.z-background {
  z-index: -1;
}

.bright-text {
  color: var(--color-primary-text);
}

.align-center {
  text-align: center;
}

.cutie {
  fill: var(--color-secondary);
  stroke: var(--color-secondary-highlight);
}

.cutie-focused {
  fill: var(--color-primary);
  stroke: var(--color-primary-highlight);
}

.invite-button {
  fill: var(--color-primary);
  stroke-width: 0;
}

.invite-button:hover {
  fill: var(--color-primary-highlight);
}

.cutie:hover {
  fill: var(--color-secondary-highlight);
}

.cutie-focused:hover {
  fill: var(--color-primary-highlight);
}

.connection {
  stroke: var(--color-secondary-highlight);
}

/* TODO: specificity here is a mess, fix it via CubeCSS principles */
button, a.button, input[type="submit"] {
  padding: 0.5em 1em;
  border-radius: 1.5em;
  border-style: none;
  cursor: pointer;

  color: var(--color-primary-text);
  background-color: var(--color-primary);
}

a.warning {
  color: var(--color-primary-text);
  background-color: var(--color-negative);
}

button:hover, a.button:hover, input[type="submit"]:hover {
  background-color: var(--color-primary-highlight);
}

a.warning:hover {
  background-color: var(--color-negative-highlight);
}