.material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

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

html,
body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
  margin: 2rem;
  background: url("../images/hero.jpg") no-repeat center center fixed;
  background-size: cover;
  border: 0.5rem solid var(--gold);
  border-radius: 1rem;
}

.rating {
  margin-top: 3rem;
  letter-spacing: 0.5rem;
}

.contact {
  margin-top: 3rem;
}
.contact > * {
  padding: 1rem 3rem;
  color: white;
  background-color: hsl(var(--black-h), var(--black-s), var(--black-l));
  border-radius: 3rem;
  transition: all 0.2s ease-out;
}
.contact > *:hover {
  background-color: hsl(var(--black-h), var(--black-s), calc(var(--black-l) + 20%));
}

.affiliation {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-style: italic;
  font-size: 0.8rem;
  font-weight: bold;
}
.affiliation a {
  border-bottom: 2px solid hsl(var(--black-h), var(--black-s), var(--black-l), 0.1);
  transition: all 0.2s ease-out;
}
.affiliation a:hover {
  border-bottom: 2px solid hsl(var(--black-h), var(--black-s), var(--black-l), 0.3);
}/*# sourceMappingURL=main.css.map */