@font-face {
    font-family: 'Bitcount Prop Single';
    src: url('/fonts/Bitcount_Prop_Single/BitcountPropSingle-VariableFont_CRSV\,ELSH\,ELXP\,slnt\,wght.ttf');
}

@font-face {
    font-family: 'daydream_3';
    src: url('/fonts/daydream_3/Daydream\ DEMO.otf');
}

body {
    background-color: #f4fff0;
}

#entrance {

    --primary: #292929;
    --secondary: #a2a2a2;

    #bg {
        width: 100%;
        aspect-ratio: 1;

        position: absolute;
        z-index: -15;

        background-image: url('/welcome/assets/symbol.jpg');
        background-size: 10px;

        opacity: .2;

        filter: blur(1px);
        filter: blur(0.5px);
    }

    h1 {
        text-align: center;
        position: absolute;
        top: 10%;

        width: 100%;

        font-size: 9em;
        font-family: 'daydream_3', 'Bitcount Prop Single', monospace;
        font-weight: 800;

        color: var(--primary);
    }

    #ring-group {


        img:nth-child(1) {
            --size: 1400px;
            --start-angle: 0deg;
            --opacity: 0.7;
            --whiteness: 10%;
        }

        img:nth-child(2) {
            --size: 1200px;
            --start-angle: -10deg;
            --opacity: 0.6;
            --whiteness: 20%;
        }

        img:nth-child(3) {
            --size: 1000px;
            --start-angle: 25deg;
            --opacity: 0.5;
            --whiteness: 30%;
        }

        img:nth-child(4) {
            --size: 800px;
            --start-angle: 36deg;
            --opacity: 0.45;
            --whiteness: 35%;
        }

        img:nth-child(5) {
            --size: 600px;
            --start-angle: -30deg;
            --opacity: 0.4;
            --whiteness: 40%;
        }

        img:nth-child(6) {
            --size: 400px;
            --start-angle: 47deg;
            --opacity: 0.3;
            --whiteness: 50%;
        }

        img:nth-child(7) {
            --size: 300px;
            --start-angle: 7deg;
            --opacity: 0.2;
            --whiteness: 60%;
        }

        img:nth-child(8) {
            --size: 200px;
            --start-angle: 73deg;
            --opacity: 0.15;
            --whiteness: 65%;
        }

        img:nth-child(9) {
            --size: 150px;
            --start-angle: 92deg;
            --opacity: 0.125;
            --whiteness: 67.5%;
        }

        img:nth-child(10) {
            --size: 100px;
            --start-angle: 181deg;
            --opacity: 0.1;
            --whiteness: 70%;
        }

        img:nth-child(11) {
            --size: 75px;
            --start-angle: 270deg;
            --opacity: 0.075;
            --whiteness: 72.5%;
        }

        img:nth-child(12) {
            --size: 50px;
            --start-angle: 11deg;
            --opacity: 0.05;
            --whiteness: 75%;
        }


        img {
            width: var(--size);
            height: var(--size);
            /* opacity: var(--opacity); */

            position: absolute;
            left: calc(50% - var(--size)/2);
            top: calc(50% - var(--size)/2);
            z-index: -1;

            transform: rotateZ(var(--start-angle));

            animation-name: rotateZ;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            /* animation-direction: alternate; */


            /* fill: rgba(41, 41, 41, var(--opacity)); */
            /* stroke: rgba(41, 41, 41, var(--opacity)); */
            /* stroke: color-mix(in srgb, #292929, white var(--whiteness)); */

        }

        img:hover {
            /* animation-play-state: paused; */
        }
    }

    button {
        --hover-range: 5px;
        --w: 200px;

        position: absolute;
        bottom: 20%;
        left: calc(50% - var(--w)/2);

        width: var(--w);
        padding: 30px;

        font-family: monospace;
        text-transform: uppercase;

        color: white;
        background-color: var(--primary);

        border-color: var(--primary);
        border-style: solid;
        border-width: 1px;
        border-width: 0.5px;
        border-radius: 10px;

        animation: hover 1000ms linear infinite alternate;
        transition: background-color 200ms;
    }

    button:hover {
        cursor: pointer;

        color: var(--secondary);
        background-color: transparent;

        border-color: var(--primary);
    }
}