@import url("../fonts/inter/inter.css");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  min-width: 25em;
  font:
    120%/1.2 Inter,
    sans-serif;
  color: rgb(53, 0, 7);
  background: linear-gradient(
      to bottom,
      rgb(238, 218, 211),
      rgb(255, 253, 251) 4em,
      rgb(255, 253, 251)
    )
    no-repeat;
}
@media (max-width: 480px) {
  html {
    min-width: 18em;
    font-size: 100%;
  }
}

::selection {
  color: white;
  background-color: rgb(213, 8, 35);
}

a {
  color: rgb(220, 96, 7);
}
a:hover,
a:focus {
  color: rgb(167, 7, 28);
}
a:active {
  color: rgb(122, 14, 0);
}

.hero-banner {
  display: grid;
  align-items: center;
  justify-content: safe center;
  gap: 2em;
  grid-template-areas: "seal name";
  padding: 6em 2em 4em;
}
@media (max-width: 480px) {
  .hero-banner {
    grid-template-areas: "seal" "name";
    justify-items: center;
    text-align: center;
  }
}
.hero-banner .seal {
  grid-area: seal;
  height: 5.3em;
}
.hero-banner .name {
  grid-area: name;
  font-size: 3em;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: safe center;
  column-gap: 1em;
  row-gap: 0.2em;
  list-style: none;
  padding: 0 2em;
}
.social-links a {
  border-radius: 0.8em;
  display: block;
  padding: 0.2em 0.6em;
  text-decoration: none;
  transition:
    background-color 0.2s,
    transform 0.2s;
}
.social-links a:hover,
.social-links a:focus {
  background-color: rgb(190, 51, 0);
  color: rgb(255, 253, 251);
}
.social-links a:active {
  background-color: rgb(122, 14, 0);
  transform: translateY(0.1em);
}