@charset "UTF-8";
@font-face {
  font-family: 'Signatra';
  src: url("/fonts/Signatra.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

body {
  margin: 0;
  padding: 0;
  background-color: #f9fafa;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif; }

header {
  text-align: center;
  margin: 0 auto;
  padding: 2rem;
  background-color: #abb; }
  header #header-content {
    max-width: 48rem;
    margin: 0 auto; }
    header #header-content #language {
      float: right;
      text-decoration: none;
      font-size: 0.9rem; }
  header h1 {
    font-family: "Signatra", cursive;
    font-weight: 300;
    font-size: 5rem;
    margin: 0;
    padding: 0; }
  header h2 {
    margin: 0;
    padding: 0;
    font-weight: 300;
    font-size: 1.8rem;
    color: #344; }
  header img {
    max-width: 100%;
    margin-top: 2rem;
    border-radius: 2rem; }

#main {
  margin: 2rem auto;
  max-width: 100%;
  padding: 0 0.5rem; }
  #main h3 {
    font-size: 2.4rem;
    font-weight: 300;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #677; }
  #main p {
    font-size: 1.3rem;
    line-height: 1.5; }

.card {
  background: #FFF;
  padding: 2rem;
  border-radius: 1rem;
  -webkit-box-shadow: 1px 1px 3px #cdd;
          box-shadow: 1px 1px 3px #cdd; }
  .card .card-header {
    display: flex;
    align-items: center;
    gap: 1rem; }
  .card .avatar {
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background: #999;
    width: 3rem; }

#zillow-reviews {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto; }
  #zillow-reviews a {
    text-decoration: none; }
  #zillow-reviews .zillower-name {
    font-weight: 500;
    font-size: 1.1rem;
    color: #666; }
  #zillow-reviews .zillow-review-date {
    color: #999;
    font-weight: 300;
    font-size: 0.9rem; }
  #zillow-reviews .review {
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.2rem; }

.star-rating {
  margin-top: 0.5rem;
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: 1.5rem;
  font-family: Times;
  line-height: 1; }

.stars::before {
  content: '★★★★★';
  background: -webkit-gradient(linear, left top, right top, from(#ffc107), to(#e4e5e9));
  background: linear-gradient(90deg, #ffc107 var(--percent), #e4e5e9 var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

a {
  color: rgba(0, 0, 0, 0.7); }
  a:focus, a:hover {
    color: rgba(0, 0, 0, 0.6); }

@media only screen and (min-width: 960px) {
  #header-content, #main {
    max-width: 960px; } }