/* config */

:root {
  --color-bg: hsl(210,20%,96%);
  --color-text: hsl(210,15%,15%);
  --color-primary: hsl(210,100%,45%);
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
}

/* reset */

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

body {
  margin: 0;
}

/* base defaults */

html {
  background-color: var(--color-bg);
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color: var(--color-text);
}

/* layout */

main, header {
  /* margin: var(--spacing-large) max(var(--spacing-large),50% - 19rem); */
  max-width: 38rem;
  margin: var(--spacing-large) auto;
  padding: 0 var(--spacing-large);
}

/* animations */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

/* components */

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

input,
button,
textarea,
select { font: inherit; }

ul,
ol { list-style: none; padding: 0; margin: 0; }

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

button {
  cursor: pointer;
  border: none;
  background: var(--color-primary);
  color: white;
  border-radius: 6px;
  padding: var(--spacing-small) var(--spacing-medium);
}