:root {
            --celda: calc((100vh) / 17);
        }
        @font-face {
            font-family: 'Tex Gyre Heros';
            src: url('fuentes/texgyreheros-regular.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        .rastro {
            position: absolute;
            width: 24px;
            height: 24px;
            background: radial-gradient(circle, #fff, hsl(302, 59%, 95%));
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            animation: vanish .7s ease-out forwards;
        }
        @keyframes vanish {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: .75;
                filter: drop-shadow(0 0 8px hsl(302, 59%, 95%));
            }
            100% {
                transform: translate(-50%, -50%) scale(.5);
                opacity: 0;
            }
        }
        body {
            cursor: grab;
            overflow: hidden;
            user-select: none;
            height: 100vh;
            margin: 0 auto;
            background: radial-gradient(hsl(302, 59%, 99%), hsl(302, 59%, 96%) 40%);
            font-family: 'Tex Gyre Heros', sans-serif;
            font-size: 15px;
            color: hsl(219, 80%, 26%);
            letter-spacing: .75px;
            line-height: 1.5;
        }
        body::before {
            opacity: .6;
            content: "";
            position: fixed;
            top: 0; 
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image: url(nieve.png);
            animation: nieve 50s linear infinite;
        }
        @keyframes nieve {
            0% {
                background-position-x: 0;
                background-position-y: 0;
            }
            100% {
                background-position-x: -100vh;
                background-position-y: 100vh;
            }
        }
        .info div {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
        }
        .info div .unicode {
            font-family: 'Tex Gyre Heros', sans-serif;
            font-variant-emoji: text;
        }
        a {
            color: hsl(302, 59%, 65%);
        }
        button {
            background: none;
            border: none;
            padding: 8px;
            font-size: 16px;
        }
        .grid {
            display: grid;
            margin: 0 auto;
            width: fit-content;
            height: 100%;
            grid-template-columns: repeat(22, var(--celda));
            grid-template-rows: repeat(17, var(--celda));
        }
        .grid .bg {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .grid > .bg::before {
            position: relative;
            display: block;
            content: "";
            width: 100%;
            height: 100%;
            z-index: -1;
            background: linear-gradient(to bottom, hsla(302, 59%, 82%, .3), hsla(302, 59%, 94%, .3), hsla(302, 59%, 82%, .3));
        }