/* /home/grisen/projects/VPS/var/www/frontpage/styles.css */

:root {
  /* Catppuccin Mocha palette */
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
  --surface0: #313244;
  --surface1: #45475a;
  --text: #cdd6f4;
  --subtext0: #a6adc8;
  --mauve: #cba6f7;
  --blue: #89b4fa;
  --green: #a6e3a1;
  --peach: #fab387;
  --red: #f38ba8;

  /* Mauve alternatives, light to dark.
     Contrast ratios are approximate: black / --text (#cdd6f4) / white */
  --mauve-frappe: #ca9ee6; /* black ~10:1 */
  --mauve-macchiato: #c6a0f6; /* black ~10:1 */
  --mauve-mid: #9d7cd8; /* black ~6.3:1,  --text ~2.3:1, white ~3.3:1 */
  --mauve-deep: #7c5cbf; /* black ~4.1:1,  --text ~3.5:1, white ~5.1:1 */
  --mauve-latte: #8839ef; /* black ~3.9:1,  --text ~3.7:1, white ~5.4:1 */
  --mauve-dark: #5b3f8c; /* --text ~5.7:1, white ~8.3:1 */
  --mauve-darker: #3b2a5c; /* --text ~8.7:1 */
  --mauve-darkest: #2a1f40; /* --text ~10.6:1 */

  /* Colors */
  --color-body-background: var(--mauve-darkest);
  --color-body-text: var(--text);
  --color-current-hour: var(--mauve-dark);
  --color-mainborders: var(--mauve-dark);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background-color: var(--color-body-background);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}