@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;1,200&display=swap');

​

body, html {

    width: 100%;

    height: 100%;

    display: flex;

    background: #000;

    font-family: 'Montserrat', sans-serif;

}

// values="0.1 0.1; 0.09 0.1; 0.1 0.1; 0.11 0.1;0.1 0.1;"

// values="0.05 0.05;0.03 0.15;0.05 0.05"

.g-container {

    margin: auto;

}

​

p {

    position: fixed;

    bottom: calc(50vh - 150px);

    left: 50%;

    transform: translate(-50%, 0);

    font-size: 36px;

    color: #fff;

    text-align: center;

    margin-top: 12px;

    span {

        display: inline-block;

        position: relative;

        &::before {

            content: "";

            position: absolute;

            bottom: 0;

            width: 18px;

            left: 50%;

            transform: translate(-50%, 4px);

            border-bottom: 4px solid #2d60aa;

        }

    }

}

​

svg {

    position: absolute;

}

​

.g-top {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 50vh;

    background: #000;

    overflow: hidden;

    z-index: 10;

    // box-shadow: inset 0 -5px 10px 1px blue;

    &::before {

        content: "";

        position: absolute;

        border-radius: 50%;

        bottom: 0;

        left: 50%;

        width: 200px;

        height: 200px;

        transform: translate(-50%, 100px);

        box-sizing: border-box;

        background: #000;

        border: 25px solid #fff;

        z-index: 1;

        box-shadow: 

            0 0 4px 1px rgba(255, 255, 255, .8),

            0 0 8px 2px rgba(255, 255, 255, .6);

    }

    &::after {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: repeating-radial-gradient(circle at 50% 100%, transparent, transparent 5px, #3a77f6 5.2px, #3a77f6 6.2px, transparent 6.5px);

        mask: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 1), transparent 25%, transparent);

        z-index: 0;

    }

}

.g-bottom {

    position: fixed;

    top: 50vh;

    left: 0;

    width: 100vw;

    height: 50vh;

    background: #000;

    overflow: hidden;

    filter: url(#fractal);

    // box-shadow: 0 0 5px #fff;

    &::before {

        content: "";

        position: absolute;

        border-radius: 50%;

        top: 0;

        width: 200px;

        height: 200px;

        background: #000;

        left: 50%;

        transform: translate(-50%, -100px);

        box-sizing: border-box;

        border: 25px solid #fff;

        z-index: 2;

        box-shadow: 

            0 0 4px rgba(255, 255, 255, .8),

            0 0 8px rgba(255, 255, 255, .7),

            0 0 20px rgba(255, 255, 255, .6);

        filter: blur(4px);

        mask: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, .9));

    }

    &::after {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: repeating-radial-gradient(circle at 50% 0, transparent, transparent 5px, #3a77f6 5.1px, #3a77f6 6.4px, transparent 6.5px);

        mask: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .6), transparent 25%, transparent);

        z-index: 3;

    }

}

.line {

    position: absolute;

    bottom: -8px;

    left: 50%;

    width: 500px;

    height: 6px;

    border-radius: 50%;

    background: rgba(46,107,232, 0.8);

    transform: translate(-50%, -50%);

    z-index: 10;

    filter: blur(5px) contrast(1.2) brightness(1.2);

    box-shadow: 

        0 0 5px rgba(46,107,232, 0.7);

}