@font-face {
    font-family: Neuropol;
    src: url('../fonts/Neuropol.otf');
}

.logo {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--accent-color) !important;
    width: 80%;
    position: relative;
    font-family: Neuropol;
    /* font-family: 'Titillium', sans-serif !important; */
    /* font-family: "Lilita One", sans-serif; */
    font-weight: 400;
    left: 0;
    top: 0;
    user-select: none;
}

/* .logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em; 
    height: 4em; 
    background: radial-gradient(circle, rgba(149, 149, 149, 0.4) 0%, #070707 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    filter: blur(20px); 
} */


.logo img {
    width: 6em;
}

.bolt {
    --bolt: rgb(242, 222, 16);
    position: relative;
}

.bolt div span {
    display: block;
    background: var(--bolt);
    -webkit-clip-path: polygon(0% 0%, 35% 40%, 2% 40%, 92% 100%, 64% 50%, 100% 50%);
    clip-path: polygon(0% 0%, 35% 40%, 2% 40%, 92% 100%, 64% 50%, 100% 50%);
}


.bolt svg {
    position: absolute;
    top: 0;
    left: 0;
}

.bolt-fill {
    fill: yellow;
}

.bolt-stroke {
    fill: none;
    stroke: white;
    stroke-width: 3;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: dash 1s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}


/* 
.bolt::before,
.bolt::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--bolt-border-color, #00ffff);
    -webkit-clip-path: polygon(0% 0%, 35% 40%, 2% 40%, 92% 100%, 64% 50%, 100% 50%);
    clip-path: polygon(0% 0%, 35% 40%, 2% 40%, 92% 100%, 64% 50%, 100% 50%);
    opacity: 0;
}

.bolt::before {
    animation: 
        flashBorder 0.5s ease-out infinite alternate,
        colorCycle 2s linear infinite;
}

.bolt::after {
    animation: 
        flashBorder 0.5s ease-out infinite alternate-reverse,
        colorCycle 2s linear infinite reverse;
}

@keyframes flashBorder {
    0%, 95% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

@keyframes colorCycle {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
} */




.logo .logo-text {
    color: #b7b7b7;
    opacity: 0;
    letter-spacing: -10px;

    /* display: none; */
}


.logo .logo-text #r {
    display: inline-block;
    position: relative;
    left: -1000px !important;
}

.logo .logo-text #i {
    display: inline-block;
    position: relative;
    top: 800px !important;
}

.logo .logo-text #g {
    display: inline-block;
    position: relative;
    transform-origin: center;
    /* Center the point of rotation */
    transform: rotateX(90deg);
}

.logo .logo-text #e {
    display: inline-block;
    position: relative;
    right: -1000px;
}

.logo .logo-text #n {
    display: inline-block;
    position: relative;
    transform: rotateZ(270deg);
    left: -1000px;
    top: -300px;
}

@media (min-width: 576px) {
    .bolt {
        width: 20px;
        height: 31px;
    }

    .bolt div span {
        width: 20px;
        height: 31px;
    }

    .bolt svg {
        width: 20px;
        height: 31px;
    }

    .logo .logo-text {
        font-size: 2vw;
    }
}

@media (max-width: 576px) {
    .bolt {
        width: 10px;
        height: 15px;
    }

    .bolt div span {
        width: 10px;
        height: 15px;
    }

    .bolt svg {
        width: 10px;
        height: 15px;
    }

    .logo .logo-text {
        font-size: 3.5vw;
    }
}



.bolt div {
    display: block;
    position: relative;
}

.bolt div:before,
.bolt div:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 44%;
}

/* 
.bolt div:before {
    width: 80px;
    height: 80px;
    margin: -56px 0 0 -56px;
    background: #005eff;
    filter: blur(124px);
} */

.bolt div:after {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    /* background: radial-gradient(circle, #070707, #6200ee); */
    z-index: 1;
    /* filter: blur(60px); */
}

.bolt.animate div:before,
.bolt.animate div:after {
    -webkit-animation: shine 2s ease;
    animation: shine 2s ease;
}

.bolt.animate div span {
    -webkit-animation: morph 1.5s ease;
    animation: morph 1.5s ease;
}

@-webkit-keyframes shine {

    30%,
    70% {
        opacity: 0;
    }
}

@keyframes shine {

    30%,
    70% {
        opacity: 0;
    }
}

@-webkit-keyframes morph {
    12% {
        -webkit-clip-path: polygon(0% 0, 35% 40%, 35% 40%, 92% 100%, 76% 50%, 76% 50%);
        clip-path: polygon(0% 0, 35% 40%, 35% 40%, 92% 100%, 76% 50%, 76% 50%);
    }

    24%,
    72% {
        -webkit-clip-path: polygon(18% 40%, 18% 40%, 18% 40%, 64% 71%, 64% 40%, 64% 40%);
        clip-path: polygon(18% 40%, 18% 40%, 18% 40%, 64% 71%, 64% 40%, 64% 40%);
    }

    84% {
        -webkit-clip-path: polygon(0% 0, 35% 40%, 35% 40%, 92% 100%, 76% 50%, 76% 50%);
        clip-path: polygon(0% 0, 35% 40%, 35% 40%, 92% 100%, 76% 50%, 76% 50%);
    }
}


@keyframes morph {
    12% {
        -webkit-clip-path: polygon(0% 0, 35% 40%, 35% 40%, 92% 100%, 76% 50%, 76% 50%);
        clip-path: polygon(0% 0, 35% 40%, 35% 40%, 92% 100%, 76% 50%, 76% 50%);
    }

    24%,
    72% {
        -webkit-clip-path: polygon(18% 40%, 18% 40%, 18% 40%, 64% 71%, 64% 40%, 64% 40%);
        clip-path: polygon(18% 40%, 18% 40%, 18% 40%, 64% 71%, 64% 40%, 64% 40%);
    }

    84% {
        -webkit-clip-path: polygon(0% 0, 35% 40%, 35% 40%, 92% 100%, 76% 50%, 76% 50%);
        clip-path: polygon(0% 0, 35% 40%, 35% 40%, 92% 100%, 76% 50%, 76% 50%);
    }
}


/* html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
}

*:before,
*:after {
    box-sizing: inherit;
} */



@keyframes tilt-n-move-shaking {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(3px, 3px) rotate(3deg);
    }

    50% {
        transform: translate(0, 0) rotate(0eg);
    }

    75% {
        transform: translate(-3px, 3px) rotate(-3deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}



@keyframes flicker {

    0%,
    100% {
        stroke: yellow;
        /* Bright yellow */
        filter: drop-shadow(0 0 8px yellow);
        /* Glowing effect */
    }

    60% {
        stroke: #ffffff;
        /* White for bright flash */
        filter: drop-shadow(0 0 15px #ffffff);
        /* Stronger glow */
    }
}

/* path.lightning-path {
    stroke: yellow;
    stroke-width: 3;
    stroke-linecap: round;
    animation: flicker 0.1s infinite;
} */