@font-face {
  font-family: Silenter;
  src: url("/assets/Silenter.ttf");
}

:root {
  --background: #FDFFE9;
  --foreground: #A47009;
  --border-size: 10dvh;
  --base-font: "EB Garamond", serif;
}

* {
  background-color: var(--background);
  color: var(--foreground);
  padding: 0;
  margin: 0;
  font-family: var(--base-font);
  text-align: center;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100dvw - 1px);
  height: calc(100dvh - 1px);

  background-image: url("./assets/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#container {
  display: flex;
  width: calc(100dvw - var(--border-size));
  height: calc(100dvh - var(--border-size));
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 50rem;
}

#hero h1 {
  font-family: Silenter, cursive;
  font-size: 10dvh;
  margin-top: 4dvh;
}

img {
  background-color: transparent;
}

img.us {
  height: 30dvh;
  width: 50dvh;
  object-fit: cover;
  border-radius: 50%;
  object-position: center 40%;
}

img.flowers {
  width: 24dvh;
}

ul.date {
  font-size: 4dvh;
}

ul li {
  display: inline;
}

ul.date li {
  letter-spacing: 2dvh;
}

ul.date li:not(:last-child):after {
  content: " • ";
}

nav {
  margin-top: 2dvh;
}

nav a {
  letter-spacing: 0.5dvh;
  font-size: 3dvh;
}

nav li {
  margin-left: 3dvh;
  margin-right: 3dvh;
}

@media (max-width: 700px) {
  img.us {
    height: 40dvw;
    width: 60dvw;
  }
  img.flowers {
    width: 40dvw;
  }
  #hero h1 {
    font-size: 12dvw;
  }
  ul.date {
    font-size: 5dvw;
  }
  ul.date li {
    letter-spacing: 1dvw;
  }
}