:root {
  
  --scene-width: 1920px;
  --scene-height: 1080px;

  
  --title-width: 900px;
  --title-top: 160px;

  
  --social-left: 30px;
  --social-top: 30px;
  --social-gap: 20px;
  --social-size: 42px;

  
  --bg-blur: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(var(--bg-blur));
}

.title {
  position: absolute;
  top: var(--title-top);
  left: 50%;
  width: var(--title-width);
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}

.socials {
  position: absolute;
  top: var(--social-top);
  left: var(--social-left);
  display: flex;
  gap: var(--social-gap);
}

.btn {
  width: var(--social-size);
  height: var(--social-size);
  cursor: pointer;
  user-select: none;
  image-rendering: crisp-edges;
  transition: transform 0.1s ease-out;
}

.btn:active {
  transform: scale(0.88);
}