/* Recreates the look of the Legacy Site (Carrd, last published April 2024). */

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

html {
  font-size: 18pt;
}

body {
  min-height: 100vh;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5625rem;
  line-height: 1;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: none;
}

/* Fixed background: tinted photo, same as the Legacy Site. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(175, 175, 201, 0.42), rgba(175, 175, 201, 0.42)),
    url("/assets/images/bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

main {
  --padding-horizontal: 2.5rem;
  --padding-vertical: 3.125rem;
  --spacing: 1.125rem;
  width: 25rem;
  max-width: 100%;
  padding: var(--padding-vertical) var(--padding-horizontal);
  text-align: center;
  background-color: rgba(34, 36, 43, 0.859);
  border-radius: 2rem;
  animation: rise 1s ease both;
}

main > * {
  margin-block: var(--spacing);
}

main > :first-child {
  margin-top: 0;
}

main > :last-child {
  margin-bottom: 0;
}

h1 {
  color: #ffffff;
  font-family: "Exo 2", sans-serif;
  font-size: 2.25em;
  font-weight: 200;
  line-height: 1.175;
  letter-spacing: -0.075rem;
}

h1 strong {
  font-weight: 400;
}

.tagline,
.contact,
.services {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.425;
  letter-spacing: -0.025rem;
}

.tagline,
.contact {
  color: rgba(255, 255, 255, 0.6);
}

.contact a {
  color: inherit;
  text-decoration: underline;
}

.contact a:hover {
  text-decoration: none;
}

.services {
  display: block;
  width: 100%;
  list-style: none;
  text-align: left;
  color: rgba(255, 255, 255, 0.329);
}

.services li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.services li:first-child {
  margin-top: 0;
}

.services li::before {
  content: "";
  flex-shrink: 0;
  width: 0.33rem;
  height: 0.33rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.329);
}

hr {
  border: 0;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.329);
  margin-block: calc(var(--spacing) + 0.5rem);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.6875rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  main {
    animation: none;
  }
}

@media (max-width: 1680px) {
  html {
    font-size: 13pt;
  }
}

@media (max-width: 980px) {
  html {
    font-size: 11pt;
  }
}

@media (max-width: 736px) {
  main {
    --padding-horizontal: 2rem;
  }

  h1 {
    font-size: 2em;
    letter-spacing: -0.065625rem;
  }
}

@media (max-width: 480px) {
  main {
    --spacing: 0.984375rem;
  }
}

@media (max-width: 360px) {
  main {
    --padding-horizontal: 1.5rem;
    --padding-vertical: 2.34375rem;
    --spacing: 0.84375rem;
  }
}