/* IMPORT DES POLICES */
@font-face {
    font-family: "Grotesk";
    src: url("../../media/font/Grotesk-01Extrafin.woff2") format("woff2");
    font-weight: 200;
    /* Extra-Light */
    font-style: normal;
}

@font-face {
    font-family: "Grotesk";
    src: url("../../media/font/Grotesk-02Mince.woff2") format("woff2");
    font-weight: 300;
    /* Light */
    font-style: normal;
}

@font-face {
    font-family: "Grotesk";
    src: url("../../media/font/Grotesk-03Regular.woff2") format("woff2");
    font-weight: 400;
    /* Regular */
    font-style: normal;
}

@font-face {
    font-family: "Grotesk";
    src: url("../../media/font/Grotesk-04Gras.woff2") format("woff2");
    font-weight: 500;
    /* Bold */
    font-style: normal;
}

@-webkit-keyframes shine {
    from {
        -webkit-mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
    }
}

:root {
    --color-black: #120801;
    --color-black-60: #1208019c;
    --color-black-40: #12080165;
    --color-white: #fdf7f0;
}

a {
    font-style: normal;
    text-decoration: none;
}

.numberGenerator__backToHub {
    text-align: center;
    transition: all 0.2s ease;
}

.numberGenerator__backToHub:hover {
    -webkit-mask-image: linear-gradient(
        -75deg,
        var(--color-black) 20%,
        var(--color-black-60) 50%,
        var(--color-black) 80%
    );
    -webkit-mask-size: 200%;
    animation: shine 1.5s infinite;
}

.numberGenerator__backToHub > * {
    font-family: Grotesk;
    font-weight: 400;
    font-size: 2.5rem;
    color: var(--color-white);
}









@media (min-width: 800px) {
    .numberGenerator__backToHub>* {
        font-size:  4rem;
    }
}