/* fira-code-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/fira-code-v27-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* fira-code-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/fira-code-v27-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* rubik-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/rubik-v31-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rubik-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Rubik";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/rubik-v31-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* zen-old-mincho-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Zen Old Mincho";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/zen-old-mincho-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
  --clr-banner: #89b482;
  --clr-bg: #282828;
  --clr-fg: #ddc7a1;
  --clr-link: #7daea3;
}

body {
  font-size: 1.1rem;
  font-family: "Zen Old Mincho", serif;
  background-color: var(--clr-bg);
  color: var(--clr-fg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Rubik", Arial, Helvetica, sans-serif;
}

a {
  text-decoration: none;
  color: var(--clr-link);
}
a[target="_blank"]::after {
  content: "\2197";
}

a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.80em;
  height: 0.80em;
  margin-left: 0.25em;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'>\
<path d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/>\
<path d='M5 5h6V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-2v6H5V5z'/>\
</svg>");
}


code {
  font-family: "Fira Code", monospace;
  font-size: 1rem;
}

nav ul {
  list-style-type: none;
  padding-inline: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.card {
  h3, p {
    margin: 0;
  }
  margin-block: 1rem;
}

.container {
  max-width: 60ch;
  margin-inline: auto;
}