/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

html {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
}

body {
  width: 100%;
  height: 100%;
}

:root {
  /* Brand colors */
  --color-primary: #d32f2f;
  --color-secondary: #fbc02d;
  /* --color-tertiary: #000000; */

  --color-bg-light: #f4f4f4;
  --color-bg-dark: #0b0b0b;
  /* Base size */
  --font-size: 16px;
  --font-ratio: 1.5;
}

/* Themes */
.light {
  --color-bg: var(--color-bg-light);
  --color-fg: var(--color-bg-dark);
}

.dark {
  --color-bg: var(--color-bg-dark);
  --color-fg: var(--color-bg-light);
}

.light,
.dark {
  --color-bg-alt: color-mix(in srgb, var(--color-bg) 92%, var(--color-fg));
  --color-fg-alt: color-mix(in srgb, var(--color-fg) 75%, var(--color-bg));

  --color-bg-tr: color-mix(in srgb, var(--color-bg) 50%, transparent);
  --color-fg-tr: color-mix(in srgb, var(--color-fg) 50%, transparent);

  --color-bg-alt-tr: color-mix(in srgb, var(--color-bg-alt) 50%, transparent);
  --color-fg-alt-tr: color-mix(in srgb, var(--color-fg-alt) 50%, transparent);

  --color-bg-tr-alt: color-mix(in srgb, var(--color-bg-tr) 92%, var(--color-fg-tr));
  --color-fg-tr-alt: color-mix(in srgb, var(--color-fg-tr) 75%, var(--color-bg-tr));
}

/* Calculated sizes */
:root {
  --font-subtitle-size: calc(var(--font-size) * 1.20);
  --font-title-size: calc(var(--font-size) * 1.25);
  --icon-size: var(--font-size);
  --button-size: calc(var(--font-size) * 2);
  --button-padding: calc(var(--font-size) * 0.5);
}

h1 { font-size: calc(var(--font-size) * 1.25); }
h2 { font-size: calc(var(--font-size) * 1.20); }
h3 { font-size: calc(var(--font-size) * 1.17); }
h4 { font-size: calc(var(--font-size) * 1.13); }
h5 { font-size: calc(var(--font-size) * 1.08); }
h6 { font-size: calc(var(--font-size) * 1.04); }

/* 12-column grid */
.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 0 0 auto;
  width: 100%;
}

.col.sm-1 { width: calc(100% / 12); }
.col.sm-2 { width: calc(100% / 12 * 2); }
.col.sm-3 { width: calc(100% / 12 * 3); }
.col.sm-4 { width: calc(100% / 12 * 4); }
.col.sm-5 { width: calc(100% / 12 * 5); }
.col.sm-6 { width: calc(100% / 12 * 6); }
.col.sm-7 { width: calc(100% / 12 * 7); }
.col.sm-8 { width: calc(100% / 12 * 8); }
.col.sm-9 { width: calc(100% / 12 * 9); }
.col.sm-10 { width: calc(100% / 12 * 10); }
.col.sm-11 { width: calc(100% / 12 * 11); }
.col.sm-12 { width: 100%; }

@media (min-width: 48rem) {
  .col.md-1 { width: calc(100% / 12); }
  .col.md-2 { width: calc(100% / 12 * 2); }
  .col.md-3 { width: calc(100% / 12 * 3); }
  .col.md-4 { width: calc(100% / 12 * 4); }
  .col.md-5 { width: calc(100% / 12 * 5); }
  .col.md-6 { width: calc(100% / 12 * 6); }
  .col.md-7 { width: calc(100% / 12 * 7); }
  .col.md-8 { width: calc(100% / 12 * 8); }
  .col.md-9 { width: calc(100% / 12 * 9); }
  .col.md-10 { width: calc(100% / 12 * 10); }
  .col.md-11 { width: calc(100% / 12 * 11); }
  .col.md-12 { width: 100%; }
}

@media (min-width: 62rem) {
  .col.lg-1 { width: calc(100% / 12); }
  .col.lg-2 { width: calc(100% / 12 * 2); }
  .col.lg-3 { width: calc(100% / 12 * 3); }
  .col.lg-4 { width: calc(100% / 12 * 4); }
  .col.lg-5 { width: calc(100% / 12 * 5); }
  .col.lg-6 { width: calc(10% / 12 * 6); }
  .col.lg-7 { width: calc(100% / 12 * 7); }
  .col.lg-8 { width: calc(100% / 12 * 8); }
  .col.lg-9 { width: calc(100% / 12 * 9); }
  .col.lg-10 { width: calc(100% / 12 * 10); }
  .col.lg-11 { width: calc(100% / 12 * 11); }
  .col.lg-12 { width: 100%; }
}