@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

    @font-face {
        font-family: "Amatic SC";
        src: url(https://dl.dropbox.com/scl/fi/zngyu2opwu3e2izdnlv33/AmaticSC-Regular.ttf?rlkey=zs0lcjtqxtmarkr37m4u7192j&);
    }

    @font-face {
        font-family: "Borel";
        src: url(https://dl.dropbox.com/scl/fi/04d1lwjjanycw6j69plm0/Borel-Regular.ttf?rlkey=0h97cxqvq5g9s77yjztlb9h32&);
    }

    .lucky {
        width: 470px;
        height: 240px;
        margin: 0 auto;
        border: 2px solid var(--glow);
        padding: 10px 20px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 5px;
        font-size: 12px;
        font-family: 'Roboto', sans-serif;
        line-height: 15px;
        color: var(--accent2);
        box-shadow: 0 0 10px var(--glow), inset 0 0 10px var(--glow);
        z-index: 1;
        
        --glow: hsl(var(--accent), 50%, 69%);
        --shadow: hsl(var(--accent), 80%, 80%);
        --accent2: hsl(var(--accent), 50%, 50%); /*Letra*/
        --hue: calc(var(--accent) * 1deg);
    }

    .lucky br {
        display: none;
    }

    .lucky > a {
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: center;
        color: var(--glow);
        text-decoration: none;
        text-transform: uppercase;
    }

    /*Imagen*/
    .lucky::before {
        content: '';
        position: absolute;
        top: calc(50% - (var(--size) / 2));
        left: -25%;
        --size: 350px;
        width: var(--size);
        height: var(--size);
        border-radius: 0 50% 50% 0;
        background-image: var(--img);
        background-size: cover;
        background-position: center;
        border: 2px solid var(--glow);
        box-sizing: border-box;
        box-shadow: 0 0 10px var(--glow), inset 0 0 10px var(--glow);
        z-index: -1;
        filter: brightness(85%);
    }

    /*Fondo gif*/
    .lucky::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url(https://i.imgur.com/0H4rB4C.gif);
        background-size: cover;
        background-position: center;
        filter: hue-rotate(var(--hue));
        opacity: .2;
        z-index: -2;
    }

    .lucky span:nth-of-type(1) {
        max-width: 260px;
        font-size: 25px;
        font-family: "Borel";
        text-shadow: 2px 1px 0 var(--shadow);
    }

    .lucky span:nth-of-type(2) {
        max-width: 200px;
        font-size: 18px;
        font-family: "Amatic SC";
    }