@font-face {
  font-family: "GreatVibes";
  src: url("/static/fonts/GreatVibes-Wmr4.ttf") format("truetype");
}

@font-face {
  font-family: "Alegreya";
  src: url("/static/fonts/Alegreya-Medium.ttf") format("truetype");
}

html {
  background: linear-gradient(to bottom right, #c5b9d3, #584472), #c5b9d3;
  height: 100%;
}

body {
  font-family: Avenir, Arial, sans-serif;
  font-weight: normal;
  font-size: 12pt;
  color: black;
  display: flex;
  flex-direction: column;
  gap: 12pt;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

header {
  border-radius: 6pt;
  margin-left: 24pt;
  margin-right: 24pt;
  background-color: white;
  margin-top: 12pt;
}

header nav ul {
  display: flex;
  list-style: none;
  gap: 12pt;
  padding: 0;
  margin: 8pt;
}

header nav ul a {
  font-family: Alegreya, sans-serif;
  font-weight: normal;
  font-size: 12pt;
  color: #584472;
  text-decoration: none;
}

main {
  border-radius: 6pt;
  margin-left: 24pt;
  margin-right: 24pt;
  background-color: white;
  flex-grow: 1;
  background-image: url("/static/images/logo-flowers-tmp.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-origin: padding-box;
  background-size: 25% auto;
}

main h1 {
  font-family: GreatVibes, cursive, serif;
  font-weight: normal;
  font-size: 48pt;
  color: #584472;
  text-shadow: 1px 1px 2px #c5b9d3, 2px 2px 3px white;
  margin: 12pt 8pt;
}

main p {
  margin: 8pt;
}

footer {
  font-family: Avenir, Arial, sans-serif;
  font-weight: normal;
  font-size: 8pt;
  color: black;
  align-self: center;
}