:root {
  color-scheme: dark;
  --black: #080708;
  --wine: #25080d;
  --wine-deep: #120609;
  --cream: #eee7dc;
  --muted: #b9aaa0;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
}

.room {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 65% at 50% 43%, rgba(93, 14, 25, .28) 0%, rgba(44, 7, 13, .15) 35%, transparent 72%),
    radial-gradient(ellipse 110% 100% at 50% 100%, var(--wine-deep) 0%, var(--black) 62%);
}

.glow {
  position: absolute;
  width: min(75vw, 900px);
  height: min(75vw, 700px);
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(112, 18, 32, .22) 0%, rgba(73, 10, 20, .10) 35%, transparent 70%);
  filter: blur(18px);
  z-index: -1;
}

.welcome {
  width: min(760px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-2vh);
}

.years {
  margin-bottom: clamp(18px, 3vw, 28px);
  color: rgba(238, 231, 220, .68);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(11px, 1.25vw, 13px);
  font-weight: 400;
  letter-spacing: .22em;
}

.logo {
  display: block;
  width: min(680px, 86vw);
  height: auto;
  opacity: .94;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.55)) invert(1) sepia(.08) saturate(.55) brightness(1.03);
}

.contact {
  margin-top: clamp(25px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.contact-intro {
  color: rgba(185, 170, 160, .82);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: .035em;
  text-align: center;
}

.mail {
  color: var(--cream);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 400;
  letter-spacing: .07em;
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease;
}

.mail:hover,
.mail:focus-visible {
  color: #fff;
  outline: none;
}

.easter-egg {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 112px;
  height: auto;
  opacity: .68;
  transform: rotate(-3deg);
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.5));
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.grain {
  position: absolute;
  inset: -50%;
  z-index: 5;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  transform: rotate(.001deg);
}

@media (max-width: 600px) {
  .welcome { transform: translateY(-3vh); }
  .logo { width: 90vw; }
  .years { margin-bottom: 17px; letter-spacing: .18em; }
  .contact { margin-top: 25px; }
  .mail { letter-spacing: .04em; }
  .easter-egg { width: 82px; right: 10px; bottom: 10px; opacity: .62; }
}