@font-face {
            font-family: karrik;
            src: url(fonts/Karrik-Regular.woff) format("woff");
        }
/* MOBILE FIRST  */
body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            /* Empêche le scroll si le texte dépasse */
            height: 100vh;
            width: 100vw;
        }
        #rebond {
            position: absolute;
            top: 1vh;
            left: 1vw;
            cursor: default;
            user-select: none;
            width: 25vw;
            height: auto;
            z-index: 1;
            display: none;
        }

        #vue {
            position: absolute;
            top: 1vh;
            right: 1vw;
            cursor: default;
            user-select: none;
            width: 45vw;
            height: auto;
            border-radius: 5%;
            z-index: 1;
            display: none;
        }

        svg:first-of-type {
            width: 90vw;
        }

        svg:last-of-type {
            width: 45vw;

        }

        svg {
            cursor: pointer;
            display: none;
            z-index: 4;
        }

        svg:hover {
            fill: hsl(275, 98%, 75%);
        }

        #svgs {
            position: absolute;
            bottom: 2vh;
            left: 2vw;
        }
        /* les h1 soon */
        h1 {
            display: none;
            font-family: karrik;
            font-size: 5vw;
            color: black;
            position: absolute;
        }
        #tapOverlay {
           background-color: rgba(210, 210, 210, 0.79) !important;
        }
        #tapOverlay > div{
            color: rgb(255, 255, 255) !important;
            font-family: karrik !important;
            background: rgb(66, 66, 66) !important;
            border: none !important;
            border-radius: 45% !important;
            font-size: 6vw !important;
        }
/* DEKSTOP DEKSTOP DEKSTOP DEKSTOP DEKSTOP DEKSTOP DEKSTOP DEKSTOP DEKSTOP DEKSTOP DEKSTOP DEKSTOP */
/* On adapte pour les écrans plus grands (Tablettes et +) */
@media screen and (min-width: 1024px) {
    body{
        /* background-color: tomato; */
    }
    #rebond {
            position: absolute;
            top: 0;
            left: 0;
            cursor: default;
            user-select: none;
            width: 10vw;
            height: auto;
            z-index: 1;
            display: block;
        }

        #vue {
            position: absolute;
            top: 0;
            left: 0;
            cursor: default;
            user-select: none;
            width: 15vw;
            height: auto;
            border-radius: 5%;
            z-index: 1;
            display: block;
        }

        svg:first-of-type {
            width: 30vw;
            /* height: 70px; */
        }

        svg:last-of-type {
            width: 15vw;

        }

        svg {
            cursor: pointer;
            display: block;
            z-index: -1;
        }

        svg:hover {
            fill: hsl(275, 98%, 75%);
        }

        #svgs {
            position: absolute;
            bottom: 2vh;
            left: 2vw;
        }

        h1 {
            display: none;
            font-family: karrik;
            font-size: 1.5vw;
            color: black;
            position: absolute;
        }
}