:root{
  --c-1: #203075;
  --c-2: #2b3a8f;
  --accent-1: #EC5DC1;
  --accent-2: #D61A6F;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: 'Varela Round', Nunito, sans-serif;
  background: linear-gradient(135deg,var(--c-1),var(--c-2));
  color:#fff;
  overflow:hidden;
}

.main{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}

h1{font-size:9rem;margin:0;line-height:0.9;letter-spacing:6px}
@media(max-width:600px){h1{font-size:6.5rem}}

p{font-size:1.25rem;margin:0 0 1.25rem}

#go-back{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));border:0;padding:12px 20px;border-radius:26px;color:#fff;cursor:pointer;font-weight:700;box-shadow:0 10px 25px rgba(0,0,0,.18);text-transform:uppercase}

.home-link{display:inline-block;margin-left:14px;color:rgba(255,255,255,.9);text-decoration:underline;font-weight:600}

.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none}
.bubble{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));box-shadow:0 30px 40px rgba(0,0,0,.18);opacity:.95;animation:float 6s ease-in-out infinite}

.bubbles .bubble:nth-child(1){top:10vh;left:8vw;width:22vmin;height:22vmin;animation-duration:7s}
.bubbles .bubble:nth-child(2){top:18vh;left:38vw;width:10vmin;height:10vmin;animation-duration:5.5s}
.bubbles .bubble:nth-child(3){top:12vh;right:30vw;width:13vmin;height:13vmin;animation-duration:6.2s}
.bubbles .bubble:nth-child(4){top:25vh;right:18vw;width:18vmin;height:18vmin;animation-duration:8s}
.bubbles .bubble:nth-child(5){bottom:8vh;right:12vw;width:28vmin;height:28vmin;animation-duration:9s}

@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}

/* small accessibility tweaks */
#go-back:focus, .home-link:focus{outline:3px solid rgba(255,255,255,.15);outline-offset:4px}