/* --------- */
/* Variables */
/* --------- */

:root {
  --size-title: clamp(3.5rem, 6vw, 5rem);
  --size-subtitle: clamp(1.75rem, 3vw, 2.5rem);

  --size-page-max-width: 128rem;

  --spacing-default: 1rem;
  --spacing-small: 0.5rem;
  --spacing-large: 2rem;

  --color-primary: #35acf0;
  --color-seconday: #eca34a;
  --color-accent: #e24a96;
  --color-accent-alternative: #7864dd;

  --color-background: white;
  --color-background-inverse: #666666;
  --color-font: black;
  --color-font-inverse: white;
}

/* ------ */
/* Common */
/* ------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-background);
  color: var(--color-font);
  font-family: 'Roboto', sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0;
  overflow-x: hidden;
}

body,
.container {
  height: 100vh;
}

footer,
.container {
  margin: 0 auto;
  max-width: var(--size-page-max-width);
}

header,
footer {
  text-align: center;
  padding: 0;
}

/* ---------- */
/* Typography */
/* ---------- */

h1,
h2,
h3,
h4,
.page-title {
  font-family: 'Cabin', sans-serif;
  font-style: italic;
}

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

h1,
h2,
h3,
h4 {
  font-weight: 800;
  line-height: 1;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

.gradient-text {
  background: repeating-linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-accent-alternative),
    var(--color-accent),
    var(--color-seconday),
    var(--color-accent-alternative),
    var(--color-primary)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ------ */
/* Header */
/* ------ */

header {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.page-title {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page-title img {
  align-self: center;
  animation: slide-from-left 0.75s;
  height: var(--size-title);
  width: var(--size-title);
}

.page-title h1 {
  animation: slide-from-left 0.5s;
  font-size: var(--size-title);
  padding: 0 var(--spacing-default);
}

@keyframes slide-from-left {
  from {
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(0);
  }
}

.page-subtitle {
  animation: slide-from-right 0.5s;
  display: inline-block;
  font-size: var(--size-subtitle);
  font-style: italic;
}

@keyframes slide-from-right {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(0);
  }
}

/* ------ */
/* Footer */
/* ------ */

footer {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  footer {
    flex-direction: row;
  }

  footer *:not(:last-child)::after {
    content: ' - ';
    white-space: pre;
  }
}

/* ------*/
/* Lists */
/* ----- */

ul {
  margin-top: var(--spacing-default);
  margin-bottom: 0;
}

/* ---- */
/* Code */
/* ---- */

code {
  background-color: var(--color-background-inverse);
  border-radius: 3px;
  color: var(--color-font-inverse);
  font-size: 85%;
  font-weight: 400;
  padding: 0.2em 0.4em;
}

/* ----- */
/* Links */
/* ----- */

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus,
a:focus-visible {
  text-decoration: underline;
}

/* ------ */
/* Layout */
/* ------ */

.container {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 960px) {
  nav {
    display: none;
  }

  .container {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: min-content auto auto min-content;
    grid-template-areas:
      'h h'
      'g m'
      'g e'
      'f f';
  }
}

@media only screen and (min-width: 1200px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, calc(100% / 3));
    grid-template-rows: min-content auto min-content;
    grid-template-areas:
      'h h h'
      'g m e'
      'f f f';
  }
}

header {
  grid-area: h;
}

main {
  grid-area: m;
}

#guide {
  grid-area: g;
}

#examples {
  grid-area: e;
}

footer {
  grid-area: f;
}

/* ------- */
/* Spacing */
/* ------- */

header,
nav,
main,
aside,
footer {
  padding: var(--spacing-large) var(--spacing-default);
  padding-bottom: 0;
}

:is(header, main) > * + * {
  margin-top: var(--spacing-default);
}

section > * + * {
  margin-top: var(--spacing-small);
}

* + section {
  margin-top: var(--spacing-large);
}

/* ------- */
/* Warning */
/* ------- */

.warning {
  background: linear-gradient(45deg, orange, darkorange);
  border-radius: 4px;
  font-size: 0.95rem;
  padding: 2rem;
}

.warning a {
  color: white;
}