@font-face {
  font-family: "Bagnard";
  font-style: normal;
  font-weight: 400;
  src: url("https://fa.deathkitten.net/other/bagnard/Bagnard.otf")
    format("opentype");
}
@font-face {
  font-family: "Marcellus";
  src: url("https://fa.deathkitten.net/other/marcellus/Marcellus-Regular.ttf")
    format("truetype");
  font-style: normal;
  font-weight: 400;
}

/* Colors */
:root {
  --prussian-blue: #273043;
  --tiffany-blue: #62c6b0;
  --tiffany-blue-50: hsla(167, 47%, 58%, 0.5);
  --brown-sugar: #b86f52;
  --sage: #cdc392;
  --alabaster: #e8e5da;
}

body {
  background-color: var(--prussian-blue);
  color: var(--alabaster);
}

.bg-gray {
  background: unset !important;
}
.card {
  background-color: unset;
}

a:link {
  color: var(--tiffany-blue);
}
a:visited {
  color: var(--sage);
}
a:hover,
a:active {
  color: var(--brown-sugar);
}

.hero h1,
.hero h2 {
  color: var(--alabaster);
  text-shadow: 2px 2px 12px var(--prussian-blue);
}

.hero p {
  color: var(--prussian-blue);
  text-shadow: 2px 2px 12px var(--alabaster);
}

/* Header Font */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Bagnard", "Marcellus";
}
/* Main Body Font */
body,
.about-me img {
  font-family: "Marcellus";
}

/* Featured Cards */
.container.featured {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: start;
  margin: 1rem auto;
}

.card {
  max-width: 42ch;
  border: none;
  box-shadow: 2px 2px 9px var(--tiffany-blue-50);
}

.label {
  background-color: var(--brown-sugar);
  color: var(--prussian-blue);
}

/* ---	adjusting for smaller viewports --- */
@media (max-width: 100ch) {
  .container.featured {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 50ch) {
  .container.featured {
    grid-template-columns: 1fr;
  }
}