html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(252, 240, 255);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    cursor: url("cursor.png") 20 10, auto;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    color: rgb(237, 201, 233);
    font-family: "Cherry Bomb One", system-ui;
    font-size: 40px;
    font-weight: 400;
    font-style: normal;
    filter:
        drop-shadow(0 0 6px #fffbfe)
}

.logo {
    width: 50vw;
    height: auto;
    transition: transform 0.3s;
    filter:
        drop-shadow(0 0 6px #ffceff)
        drop-shadow(20px 20px 20px rgba(208, 159, 255, 0.35));
}

.logo:hover {
    transform: scale(1.05);
}

.glitter {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: repeating-conic-gradient(var(--c) 0 25%, transparent 0 50%) 0 0 / 3px 3px;
    image-rendering: pixelated;
    animation: glitter-fall 2s steps(10) forwards;
    -webkit-mask: url("heart.png") center / contain no-repeat;
    mask: url("heart.png") center / contain no-repeat;
}

@keyframes glitter-fall {
  0%   { opacity: 1;   transform: translate(0, 0) scale(1); }
  30%  { opacity: 0.4; transform:  scale(0.6);}
  45%  { opacity: 1; transform:  scale(0.8);}
  100% { opacity: 0;   transform: translate(var(--dx), 48px) scale(0.25); }
}