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

:root {
  --color-text: #ef1414;
  --color-bg: #feceea;
}

@font-face {
  font-family: "Mono";
  src: url("fonts/mono/mono.woff2") format("woff2"),
    url("fonts/mono/mono.woff") format("woff");
}

@font-face {
  font-family: "Serif";
  src: url("fonts/serif/serif.woff2") format("woff2"),
    url("fonts/serif/serif.woff") format("woff");
  font-style: italic;
}

html,
body {
  height: 100%;
}

h1 {
  margin: 0;
}
p {
  margin: 0;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: clamp(16px, 5vw, 20px);
  line-height: 2;
  font-family: "Mono", monospace;
  text-align: center;
  display: grid;
  justify-items: center;
  align-items: center;
}

main {
  display: grid;
}

h1 {
  margin: 0.2em 0 0.4em;
  font-size: min(30vw, 200px);
  line-height: 0.866;
  font-family: "Serif", serif;
  max-width: 4.5ch;
  display: inline-block;
  overflow: visible;
  font-style: italic;
  font-weight: normal;
}

.link {
  display: inline-block;
  background-image: url("img/circle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 1em 2em;
  overflow: visible;
  white-space: nowrap;
  color: currentColor;
  text-decoration: none;
}

.rose {
  background-image: url("img/rose-2.svg");
  aspect-ratio: 152.789 / 698.288;
  width: auto;
  height: 305px;
  position: absolute;
  top: 0;
  will-change: transform;
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}