@font-face {
	font-family: 'Iosevka Etoile Web';
	font-display: swap;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	src: url('./IosevkaEtoile-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Iosevka Etoile Web';
	font-display: swap;
	font-weight: normal;
	font-stretch: normal;
	font-style: italic;
	src: url('./IosevkaEtoile-Italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Iosevka Etoile Web';
	font-display: swap;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	src: url('./IosevkaEtoile-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Iosevka Etoile Web';
	font-display: swap;
	font-weight: bold;
	font-stretch: normal;
	font-style: italic;
	src: url('/IosevkaEtoile-BoldItalic.woff2') format('woff2');
}

:root {
  --mauve: hsl(266, 85%, 58%);
  --blue: hsl(220, 91%, 54%);
  --text: hsl(234, 16%, 35%);
  --subtext0: hsl(233, 10%, 47%);
  --base: hsl(220, 23%, 95%);
  --crust: hsl(220, 21%, 89%);
}

@media (prefers-color-scheme: dark) { 
  :root {
    --mauve: hsl(267, 84%, 81%);
    --blue: hsl(217, 92%, 76%);
    --text: hsl(226, 64%, 88%);
    --subtext0: hsl(228, 24%, 72%);
    --base: hsl(240, 21%, 15%);
    --crust: hsl(240, 23%, 9%);
  }
}

body {
  margin: 40px auto;
  max-width: 650px;
  line-height: 1.6;
  font-size: 18px;
  color: var(--text);
  background: var(--base);
  padding: 0 10px;
  font-family: "Iosevka Etoile Web";
}

h1,h2,h3 {
  line-height: 1.2;
}

header,nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    font-size: 24px;
}

nav a {
    margin: 5px 10px;
}

a {
  color: var(--blue);
}