@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');
html[data-theme='light'] {
    --font: 'Sora', sans-serif;
    --body: #ffffff;
    --white: #FFFFFF;
    --blueBackground: #ffffffcc;
    --border: #0e0c15;
    --textColor: #0e0c15;
    --p-color: #a1a1a1;
    --btnColor: #6e51ff;
    --lightBtnColor: #ffffff;
    --btnTxtColor: #ffffff;
    --headerBorder: #00000012;
    --opacityInp: #ffffffb5;
    --noBackground: #ffffff00;
    --divsColor: #fbfbfb;
    --tabsDiv: #1b1b2e05;
    --tabs: #ff4e4e;
    --darkModeBtn: #000000;
}

html[data-theme='dark'] {
    --font: 'Sora', sans-serif;
    --body: #0e0c15;
    --white: #FFFFFF;
    --blueBackground: #0e0c15cc;
    --textColor: white;
    --p-color: #FFFFFF;
    --btnColor: #ffffff;
    --lightBtnColor: #ffffff;
    --btnTxtColor: #0e0c15;
    --headerBorder: #ffffff12;
    --opacityInp: #000000d9;
    --noBackground: #ffffff00;
    --divsColor: #1b1b2e;
    --tabsDiv: #1c1a26;
    --tabs: #ff4e4e;
    --darkModeBtn: #000000;
}

body {
    background-color: var(--body)!important;
    padding: 0;
    margin: 0;
    font-family: var(--font)!important;
}

ul,
ol {
    padding: 0!important;
    margin: 0;
}

html[data-theme='light'] .after_header_dark_img {
    display: none;
}

html[data-theme='light'] .after_header_svg {
    opacity: 0.4;
}

html[data-theme='dark'] .after_header_dark_img {
    display: block;
}

.hidden {
    display: none;
}

.accordion-button:focus {
    background: none;
    box-shadow: none!important;
    border: none!important;
}

.accordion-button:not(.collapsed) {
    background: var(--body)!important;
    color: var(--textColor)!important;
    box-shadow: none!important;
}

.ip__track {
    stroke: hsl(var(--hue), 90%, 90%);
    transition: stroke var(--trans-dur);
}

.ip__worm1,
.ip__worm2 {
    animation: worm1 2s linear infinite;
}

.ip__worm2 {
    animation-name: worm2;
}

@media (prefers-color-scheme: dark) {
     :root {
        --bg: hsl(var(--hue), 90%, 5%);
        --fg: hsl(var(--hue), 90%, 95%);
    }
    .ip__track {
        stroke: hsl(var(--hue), 90%, 15%);
    }
}

@keyframes worm1 {
    from {
        stroke-dashoffset: 0;
    }
    50% {
        animation-timing-function: steps(1);
        stroke-dashoffset: -358;
    }
    50.01% {
        animation-timing-function: linear;
        stroke-dashoffset: 358;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes worm2 {
    from {
        stroke-dashoffset: 358;
    }
    50% {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -358;
    }
}