:root {
    --bg: #081b29;
    --secon_bg: #112e42;
    --main_color: #00abf0;
    --text_color: #ededed;
    --pink: #b721d1;
}

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    outline: 0;
    font-family:  sans-serif,monospace;
    scroll-behavior: smooth;
    box-sizing: border-box
}

html {
    font-size: 62.5%;
    cursor: url("../imgs/favicon-32x32.png"), default;
}

body {
    background-color: var(--bg);
    color: var(--text_color);
    overflow: hidden; 
}

#root {
    overflow-x: hidden
}

#preloader {
    position: fixed;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    transition: all 1s ease-in-out;
    z-index: 111111111;
}

@keyframes snow {
    0% {
        opacity: 0;
        transform: translateY(0px);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(650px);
    }
}

@keyframes astronaut {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4 {
    width: 100%;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    transform: translateY(0px);
    height: 700px;
}

.box-of-star1 {
    animation: snow 5s linear infinite;
}

.box-of-star2 {
    animation: snow 5s -1.64s linear infinite;
}

.box-of-star3 {
    animation: snow 5s -2.30s linear infinite;
}

.box-of-star4 {
    animation: snow 5s -3.30s linear infinite;
}

.star {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #FFF;
    position: absolute;
    z-index: 10;
    opacity: 0.7;
}

.star:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #FFF;
    position: absolute;
    z-index: 10;
    top: 80px;
    left: 70px;
    opacity: .7;
}

.star:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFF;
    position: absolute;
    z-index: 10;
    top: 8px;
    left: 170px;
    opacity: .9;
}

.star-position1 {
    top: 30px;
    left: 20px;
}

.star-position2 {
    top: 110px;
    left: 250px;
}

.star-position3 {
    top: 60px;
    left: 570px;
}

.star-position4 {
    top: 120px;
    left: 900px;
}

.star-position5 {
    top: 20px;
    left: 1120px;
}

.star-position6 {
    top: 90px;
    left: 1280px;
}

.star-position7 {
    top: 30px;
    left: 1480px;
}

.astronaut {
    width: 250px;
    height: 300px;
    position: absolute;
    z-index: 11;
    top: calc(50% - 150px);
    left: calc(50% - 125px);
    animation: astronaut 5s linear infinite;
}

.schoolbag {
    width: 100px;
    height: 150px;
    position: absolute;
    z-index: 1;
    top: calc(50% - 75px);
    left: calc(50% - 50px);
    background-color: #94b7ca;
    border-radius: 50px 50px 0 0 / 30px 30px 0 0;
}

.head {
    width: 97px;
    height: 80px;
    position: absolute;
    z-index: 3;
    background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
    border-radius: 50%;
    top: 34px;
    left: calc(50% - 47.5px);
}

.head:after {
    content: "";
    width: 60px;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 30px);
    background: -webkit-linear-gradient(top, var(--pink) 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);
    border-radius: 15px;
}

.head:before {
    content: "";
    width: 12px;
    height: 25px;
    position: absolute;
    top: calc(50% - 12.5px);
    left: -4px;
    background-color: #618095;
    border-radius: 5px;
    box-shadow: 92px 0px 0px #618095;
}

.body {
    width: 85px;
    height: 100px;
    position: absolute;
    z-index: 2;
    background-color: #fffbff;
    border-radius: 40px / 20px;
    top: 105px;
    left: calc(50% - 41px);
    background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
}

.panel {
    width: 60px;
    height: 40px;
    position: absolute;
    top: 20px;
    left: calc(50% - 30px);
    background-color: #b7cceb;
}

.panel:before {
    content: "";
    width: 30px;
    height: 5px;
    position: absolute;
    top: 9px;
    left: 7px;
    background-color: #fbfdfa;
    box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;
}

.panel:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 9px;
    right: 7px;
    background-color: #fbfdfa;
    border-radius: 50%;
    box-shadow: 0px 14px 0px 2px #fbfdfa;
}

.arm {
    width: 80px;
    height: 30px;
    position: absolute;
    top: 121px;
    z-index: 2;
}

.arm-left {
    left: 30px;
    background-color: #e3e8eb;
    border-radius: 0 0 0 39px;
}

.arm-right {
    right: 30px;
    background-color: #fbfdfa;
    border-radius: 0 0 39px 0;
}

.arm-left:before,
.arm-right:before {
    content: "";
    width: 30px;
    height: 70px;
    position: absolute;
    top: -40px;
}

.arm-left:before {
    border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;
    left: 0;
    background-color: #e3e8eb;
}

.arm-right:before {
    border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;
    right: 0;
    background-color: #fbfdfa;
}

.arm-left:after,
.arm-right:after {
    content: "";
    width: 30px;
    height: 10px;
    position: absolute;
    top: -24px;
}

.arm-left:after {
    background-color: #6e91a4;
    left: 0;
}

.arm-right:after {
    right: 0;
    background-color: #b6d2e0;
}

.leg {
    width: 30px;
    height: 40px;
    position: absolute;
    z-index: 2;
    bottom: 70px;
}

.leg-left {
    left: 76px;
    background-color: #e3e8eb;
    transform: rotate(20deg);
}

.leg-right {
    right: 73px;
    background-color: #fbfdfa;
    transform: rotate(-20deg);
}

.leg-left:before,
.leg-right:before {
    content: "";
    width: 50px;
    height: 25px;
    position: absolute;
    bottom: -26px;
}

.leg-left:before {
    left: -20px;
    background-color: #e3e8eb;
    border-radius: 30px 0 0 0;
    border-bottom: 10px solid #6d96ac;
}

.leg-right:before {
    right: -20px;
    background-color: #fbfdfa;
    border-radius: 0 30px 0 0;
    border-bottom: 10px solid #b0cfe4;
}

::selection {
    color: #000;
    background: gray
}

.contianer {
    width: 1170px
}

.filter-button-w {
    margin: 40px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.filter-button-w>button {
    margin: .3em
}

.sparkle-button {
    --active: 0;
    --bg: radial-gradient(40% 50% at center 100%,
            hsl(270 calc(var(--active) * 97%) 72% / var(--active)),
            transparent), radial-gradient(80% 100% at center 120%,
            hsl(260 calc(var(--active) * 97%) 70% / var(--active)),
            transparent), hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));
    box-shadow: 0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(260 97% 61% / .75), 0 0 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset, 0 -.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;
    transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
    scale: calc(1 + (var(--active) * 0.1));
    background: var(--bg)
}

.spark:before {
    aspect-ratio: 1;
    translate: -50% -15%;
    rotate: 0
}

.backdrop,
.sparkle-button {
    background: var(--bg)
}

.sparkle-button {
    display: flex;
    align-items: center;
    text-transform: capitalize
}

.spark:before {
    content: "";
    opacity: calc((var(--active)) + .4);
    transition: opacity var(--transition);
    animation: rotate var(--spark) linear infinite both
}

.spark:after {
    content: "";
    inset: var(--cut)
}

.sparkle-button:is(:hover, :focus-visible) {
    --active: 1;
    --play-state: running
}

.sparkle-button {
    font-size: 1.2rem;
    font-weight: 500;
    border: 0;
    cursor: pointer;
    padding: 1em;
    display: flex;
    align-items: center;
    gap: .25em;
    white-space: nowrap;
    border-radius: 100px;
    position: relative;
    transition: .3s;
    margin: 4px;
}

.sparkle-button:active {
    scale: 1;
    transition: .3s
}

.spark:before,
.sparkle-button:before {
    z-index: -1;
    transition: opacity var(--transition)
}

.sparkle path {
    color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
    transform-box: fill-box;
    transform-origin: center;
    fill: currentColor;
    stroke: currentColor;
    animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
    animation-duration: .6s;
    transition: color var(--transition)
}

.sparkle-button:is(:hover, :focus-visible) path {
    animation-name: bounce
}

@keyframes bounce {

    35%,
    65% {
        scale: var(--scale)
    }
}

.sparkle path:first-of-type {
    --scale: 0.5;
    --delay: 0.1;
    --base: 40%
}

.sparkle path:nth-of-type(2) {
    --scale: 1.5;
    --delay: 0.2;
    --base: 20%
}

.sparkle path:nth-of-type(3) {
    --scale: 2.5;
    --delay: 0.35;
    --base: 30%
}

.sparkle-button:before {
    position: absolute;
    inset: -0.2em;
    border: .25em solid;
    border-radius: 100px;
    opacity: var(--active, 0)
}

.spark {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    rotate: 0deg;
    overflow: hidden;
    mask: linear-gradient(white, transparent 50%);
    animation: flip calc(var(--spark) * 2) infinite steps(2, end)
}

.backdrop,
.spark:after {
    position: absolute;
    inset: var(--cut);
    border-radius: 100px
}

@keyframes flip {
    to {
        rotate: 360deg
    }
}

.spark:before {
    position: absolute;
    width: 200%;
    top: 0;
    left: 50%;
    transform: rotate(-90deg);
    opacity: calc((var(--active)) + .4);
    background: conic-gradient(from 0deg, transparent 0 340deg, #fff 360deg);
    animation: rotate var(--spark) linear infinite both
}

.backdrop {
    transition: background var(--transition)
}

@keyframes rotate {
    to {
        transform: rotate(90deg)
    }
}

@supports(selector(:has(:is(+ *)))) {
    body:has(button:is(:hover, :focus-visible)) {
        --active: 1;
        --play-state: running
    }

    .bodydrop {
        display: none
    }
}

.sparkle-button:is(:hover, :focus-visible)~:is(.bodydrop, .particle-pen) {
    --active: 1;
    --play-state: runnin
}

.sparkle-button.active {
    --active: 1
}

.sp {
    position: relative
}

.particle,
.particle-pen {
    aspect-ratio: 1;
    position: absolute;
    z-index: -1
}

.particle-pen {
    width: 200%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    -webkit-mask: radial-gradient(white, transparent 65%);
    opacity: var(--active, 0);
    transition: opacity var(--transition)
}

.particle {
    fill: white;
    width: calc(var(--size, .25) * 1rem);
    top: calc(var(--y) * 1%);
    left: calc(var(--x) * 1%);
    opacity: var(--alpha, 1);
    animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
    transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
    animation-play-state: var(--play-state, paused)
}

.particle path {
    fill: hsl(0 0% 90%);
    stroke: none
}

.particle:nth-of-type(2n) {
    animation-direction: reverse
}

@keyframes float-out {
    to {
        rotate: 360deg
    }
}

.text {
    translate: 2% -6%;
    letter-spacing: .01ch;
    background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
    -webkit-background-clip: text;
    color: transparent;
    transition: background var(--transition)
}

.sparkle-button svg {
    inline-size: 1.25em;
    translate: -25% -5%
}

.header {
    width: 100%;
    height: fit-content;
    padding: 3rem 4%;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 2px 2px 9px var(--pink), inset 0 0 10px #000;
    border-radius: 0 0 36px 36px;
    flex-wrap: wrap;
    background-color: var(--bg);
    position: fixed
}

.menuIn {
    -webkit-animation-name: menuIn;
    animation-name: menuIn;
    animation-duration: .6s;
    animation-fill-mode: both
}

@keyframes menuIn {
    0% {
        transform: translateY(1rem);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

#checkbox,
.dropdown {
    display: none
}

.navbar {
    position: relative;
    width: 450px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 2px 2px 2px inset #0079a9, 2px 2px 2px #9c0fb5;
    transition: .25s .25s;
    background-color: transparent
}

.navbar ul {
    display: flex;
    width: 400px
}

.navbar ul li {
    position: relative;
    width: 70px;
    height: 70px;
    z-index: 1
}

.navbar ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-size: 500
}

.navbar ul li a .icon {
    position: relative;
    display: block;
    line-height: 75px;
    font-size: 2em;
    text-align: center;
    color: #fff;
    transition: .5s
}

.navbar ul li a .icon:first-child {
    font-size: 10px;
}

.navbar ul li a .icon>i {
    font-size: 18px;
}

.navbar ul li.active a .icon {
    transform: translateY(28px)
}

.navbar ul li a .text {
    position: absolute;
    color: #fff;
    font-weight: 400;
    font-size: 1em;
    letter-spacing: .05em;
    top: 10px;
    transform: rotateY(20px);
    transition: .5s;
    opacity: 0
}

.navbar ul li.active a .text {
    opacity: 1;
    top: 10px
}

.navbar ul li a .circle {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border-radius: 50%;
    border: 1.8px solid #fff;
    transform: translateY(25px) scale(0)
}

.navbar ul li.active a .circle {
    transform: translateY(25px) scale(1);
    transition: .3s;
    transition-delay: .2S
}

.indicator {
    position: absolute;
    bottom: -40% !important;
    width: 70px;
    height: 70px;
    background: linear-gradient(90deg, var(--main_color), var(--pink));
    border: 6px solid var(--bg);
    border-radius: 50%;
    display: flex;
    transform: translateX(50%);
    justify-content: center;
    align-items: center;
    transition: .5s;
    box-shadow: inset 0 0 10px 0 #000
}

.auto-type {
    color: var(--main_color)
}

.navbar ul li:first-child.active~.indicator {
    transform: translateX(calc(70px * 0))
}

.navbar ul li:nth-child(2).active~.indicator {
    transform: translateX(calc(65px * 1))
}

.navbar ul li:nth-child(3).active~.indicator {
    transform: translateX(calc(66px * 2))
}

.navbar ul li:nth-child(4).active~.indicator {
    transform: translateX(calc(66px * 3))
}

.navbar ul li:nth-child(5).active~.indicator {
    transform: translateX(calc(66px * 4))
}

.navbar ul li:nth-child(6).active~.indicator {
    transform: translateX(calc(66.4px * 5))
}

.toggle {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition-duration: .5s;
    display: none
}

.bars {
    width: 100%;
    height: 4px;
    background: linear-gradient(45deg, var(--main_color), var(--pink));
    border-radius: 4px
}

#bar2 {
    transition-duration: .8s
}

#bar1,
#bar3 {
    width: 70%
}

#checkbox:checked+.toggle .bars {
    position: absolute;
    transition-duration: .5s;
    background: linear-gradient(-45deg, var(--main_color), var(--pink))
}

#checkbox:checked+.toggle #bar2 {
    transform: scaleX(0);
    transition-duration: .5s
}

#checkbox:checked+.toggle #bar1 {
    width: 100%;
    transform: rotate(45deg);
    transition-duration: .5s
}

#checkbox:checked+.toggle #bar3 {
    width: 100%;
    transform: rotate(-45deg);
    transition-duration: .5s
}

#checkbox:checked+.toggle {
    transition-duration: .5s;
    transform: rotate(180deg)
}

/* -------------------header----------------- */
/* -------------------main----------------- */

/* -------------------hero----------------- */

.ufo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    animation: fly 5s infinite;
    background: red;
    width: 100dvw;
}

/*UFO parts*/
.ufo {
    position: absolute;
    top: 20px;
    width: 200px;
    height: 87.5px;
    background: #898988;
    border-radius: 50%;

}

.ufo-underside {
    position: absolute;
    top: 5px;
    width: 200px;
    height: 87.5px;
    background: #414141;
    border-radius: 50%;
    z-index: -1;
}

.ufo-top {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.3);
    height: 87.5px;
    width: 137.5px;
    border-radius: 50% 50% 50% 50% / 50% 50% 30% 30%;
    border-bottom: 8px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

@keyframes fly {
    50% {
        transform: translate(50px, 0) rotate(0);
    }

    33% {
        transform: translate(50px, 50px);
    }

    66% {
        transform: translate(0, 50px);
    }

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

.ufo-inner {
    position: absolute;
    top: 10px;
    background: var(--main_color);
    filter: blur(10px);
    left: 50%;
    transform: translate(-50%);
    width: 95px;
    height: 30px;
    border-radius: 50%;
}

.ufo::before {
    content: "";
    left: 25px;
    bottom: 35px;
    position: absolute;
    width: 20px;
    height: 12.5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-bottom: 2px solid black;
}

.ufo::after {
    content: "";
    right: 25px;
    bottom: 35px;
    position: absolute;
    width: 20px;
    height: 12.5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-bottom: 2px solid black;
}

.center-dot {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 12.5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-bottom: 2px solid black;
    bottom: 12.5px;
    z-index: 1;
}

/*Beam*/
.beam {
    position: absolute;
    top: 107.5px;
    height: 250px;
    width: 150px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    z-index: -2;
}

.beam::before {
    content: '';
    position: absolute;
    height: 250px;
    width: 150px;
    background: linear-gradient(to bottom,
            var(--pink),
            #4708537b);
    animation: beamIn 5s infinite;
}

@keyframes beamIn {
    0% {
        transform: translateY(-300px);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-500px);
    }
}


.home,
.water-btn {
    overflow: hidden
}

section {
    min-height: 100vh;
    padding: 15rem .2em
}

.home {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    height: fit-content;
    padding-top: 16em;
    padding-left: 4rem;
    justify-content: space-between;
}


.home .space {
    width: 510px;
    margin-top: 6rem;
    animation: 9s ease-in-out infinite upAndDown;
    position: relative;
    z-index: 1
}

.blob {
    position: absolute;
    width: 90%;
    height: 80%;
    background: linear-gradient(-45deg, #e655d8, var(--bg));
    border-radius: 50%;
    filter: blur(14px);
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.btn-box,
.home-icons a {
    position: relative;
    z-index: 2
}

.gridItem__media {
    width: 100%;
    height: 100%
}

@keyframes upAndDown {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(50px)
    }
}

@keyframes leftandright {

    0%,
    100% {
        transform: translate(0)
    }

    50% {
        transform: translate(-50px)
    }
}

.home-content {
    max-width: 80rem;
    width: 60rem
}

.home-content .stroke {
    color: #fff
}

.home-content h1 {
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.3;
    width: fit-content;
    height: 150px;
    filter: drop-shadow(4px 6px 2px black)
}

.home-content p {
    font-size: 1.6rem;
    margin: 2rem 0 4rem;
    line-height: 2.6rem;
    padding: 0
}

.btn-box {
    width: 34.5rem;
    height: 5rem
}

.btn-box .btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 15rem;
    height: 100%;
    background: 0 0;
    border: .2rem solid var(--main_color);
    border-radius: .8rem;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: .1rem;
    transition: .5s;
    color: var(--white);
    z-index: 11;
    margin-right: 1em;
    cursor: pointer
}

.btn-box .btn::before,
.water-btn::before {
    display: block;
    content: '';
    background-color: var(--main_color)
}

.btn-box .btn:hover {
    color: var(--bg);
    color: #fff !important
}

.btn-box .btn::before {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 0%;
    width: 100%;
    transition: .5s;
    z-index: -1
}

.btn-box .btn:focus::before,
.btn-box .btn:hover::before {
    height: 100%;
    animation: 2s ease-in-out infinite water
}

.water-btn::before {
    width: 110% !important;
    height: 110% !important;
    left: 0;
    top: 0;
    animation: 2s ease-in-out infinite water
}

.water-btn:hover::before {
    background: linear-gradient(50deg, var(--main_color), var(--pink))
}

.water-btn:hover {
    border: none;
    transform: scale(1.1);
    box-shadow: 0 0 20px 0 #4b1854, inset 0 0 10px 0 #6d6d6d;
    text-shadow: 0 0 20px #12e3dc;
    color: var(--main_color) !important;
    -webkit-text-fill-color: var(--main_color)
}

.home-icons {
    width: fit-content;
    display: flex;
    margin-top: 3rem
}

.home-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--main_color);
    align-items: center;
    justify-content: center;
    display: flex;
    margin-right: 14px;
    transition: all .6s ease-in-out;
}

.home-icons a:hover {
    background: linear-gradient(-45deg, var(--pink), var(--main_color));
}

.home-icons a>i {
    color: white;
    font-size: 120%;
}


/* ////////////////////about//////////////////////////////// */
.about {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    background: var(--secon_bg);
    padding: 10em;
    height: fit-content;
}

.heading {
    font-size: 5rem;
    margin-bottom: .5rem;
    text-align: center;
    text-shadow: #fff 0 0 8px, pink 0 0 2px, #fff 0 0 2px;
    filter: blur(.6px)
}

.heading span {
    text-shadow: var(--main_color) 0 0 8px, #fff 0 0 2px, var(--main_color) 0 0 2px;
    filter: blur(.6px)
}

.about-img {
    position: relative;
    width: 18rem;
    height: 18rem !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.about-img img {
    width: 90%;
    border-radius: 50%;
    border: .2rem solid var(--main_color)
}

span {
    color: var(--main_color)
}

.about-img .circle-spin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top: 5em solid var(--bg);
    border-bottom: 1rem solid #291140;
    border-left: .1rem var(--main_color);
    border-right: .5rem var(--main_color);
    animation: 6s linear infinite circle;
    box-shadow: inset 0 0 30px 0 #000
}

@keyframes circle {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

#more {
    display: none
}

#dots,
#more {
    color: #fff !important;
    line-height: 1.5em;
    text-align: start !important
}

.about-content h3 {
    font-size: 3rem;
    background: -webkit-linear-gradient(45deg, var(--main_color)20%, #fe53bb 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.about-content p {
    font-size: 1.4rem;
    margin: 1rem 0 3rem;
    line-height: 25px
}

.btn-box.btns {
    display: inline-block;
    width: 15rem
}

.about-heading {
    display: block;
    margin: 10px 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--pink);
    z-index: 10;
}

.about-svg {
    position: absolute;
    width: 500px;
    right: 0;
    top: 0;
    z-index: 1;
    /* mix-blend-mode: multiply; */
}


/* ////////////////////about//////////////////////////////// */


#container-stars,
.sbtn {
    transition: .5s;
    backdrop-filter: blur(1rem)
}

#glow,
.sbtn {
    display: flex
}

#stars::after,
#stars::before {
    content: "";
    position: absolute;
    background-image: radial-gradient(#fff 1px, transparent 1%);
    background-size: 50px 50px
}

.sbtn {
    justify-content: center;
    align-items: center;
    width: 13rem;
    height: 3rem;
    background-size: 300% 300%;
    animation: 5s infinite gradient_301;
    border: 4px double transparent;
    background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%, var(--pink) 45%, #8f51ea 67%, #04f 87%);
    background-origin: border-box;
    background-clip: content-box, border-box
}

#container-stars {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 5rem
}

strong {
    z-index: 2;
    font-size: 12px;
    letter-spacing: 5px;
    color: #fff;
    text-shadow: 0 0 4px #fff
}

#glow {
    position: absolute;
    width: 12rem
}

.circle {
    width: 100%;
    height: 30px;
    filter: blur(2rem);
    animation: 4s infinite pulse_3011;
    z-index: -1
}

.circle:first-of-type {
    background: rgba(254, 83, 186, .636)
}

.circle:nth-of-type(2) {
    background: rgba(142, 81, 234, .704)
}

.sbtn:hover #container-stars {
    z-index: 1;
    background-color: #212121
}

.sbtn:hover {
    transform: scale(1.1)
}

.sbtn:active {
    border: 4px double #fe53bb;
    background-origin: border-box;
    background-clip: content-box, border-box;
    animation: none
}

.sbtn:active .circle {
    background: #fe53bb
}

#stars {
    position: relative;
    background: 0 0;
    width: 200rem;
    height: 200rem
}

#stars::after {
    top: -10rem;
    left: -100rem;
    width: 100%;
    height: 100%;
    animation: 90s linear infinite animStarRotate
}

#stars::before {
    top: 0;
    left: -50%;
    width: 170%;
    height: 500%;
    animation: 60s linear infinite animStar;
    opacity: .5
}

@keyframes animStar {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-135rem)
    }
}

@keyframes animStarRotate {
    from {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0)
    }
}

@keyframes gradient_301 {

    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@keyframes pulse_3011 {
    0% {
        transform: scale(.75);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px transparent
    }

    100% {
        transform: scale(.75);
        box-shadow: 0 0 0 0 transparent
    }
}

/* -------------------hero----------------- */




/* -------------------skills----------------- */
.skills {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.pg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4em
}

.progress-card {
    display: inline-block;
    text-align: center
}

.progress-card h5 {
    color: #fff;
    letter-spacing: 2px;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: #fff 0 0 5px, pink 0 0 1px, #fff 0 0 1px
}

.progress-circle {
    position: relative;
    background-color: transparent;
    box-shadow: 0 0 6px 0 rgba(255, 255, 255, .356);
    border: 8px solid #1b1b1b85;
    width: 20rem;
    height: 20rem;
    border-radius: 100%;
    overflow: hidden;
    margin: 1rem
}

.progress {
    position: absolute;
    width: 19rem;
    height: 18rem;
    bottom: -100%;
    background: linear-gradient(0deg, var(--main_color), var(--pink) 100%, var(--secon_bg));
    box-shadow: inset 0 0 10px 0 #fff;
    transition: 3s
}

.progress-content {
    background: linear-gradient(0deg, #000 0, var(--bg));
    width: 17.5rem;
    height: 17.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 1
}

.progress-content h5 {
    font-size: 2em;
    font-weight: 500
}

/* -------------------skills----------------- */
/* -------------------testimonial----------------- */
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
    background-color: transparent !important;
    font-size: 90px !important;
    top: 50%;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(2px 2px 2px var(--pink));
}



.testimonial {
    background-color: var(--secon_bg);
    height: 120vh;
    padding: 20rem 10px;
    padding-left: 2rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.owl-carousel {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center
}

.owl-carousel .item {
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s all
}

.owl-carousel .item:hover {
    transition: .5s all;
    transform: translateY(-10px);
}

.owl-item.active {
    display: flex;
    align-items: center;
    justify-content: center
}

.owl-carousel .owl-prev {
    position: absolute;
    left: 10px
}

.owl-carousel .owl-next {
    position: absolute;
    right: 10px
}

.slide {
    height: 400px;
    width: 400px;
    padding-top: 50px
}

.slide>.slider-box {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .167);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(42, 42, 42, .278);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 5px solid rgba(255, 255, 255, .83);
    position: relative;
    padding: 0 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    box-shadow: 1.5px 1.5px 15px #000
}

.slide>.slider-box>h1 {
    font-size: 250%;
    text-transform: capitalize;
    filter: drop-shadow(2px 1px 1px black);
}

.slide>.slider-box .fa-quote-right,
.slide>.slider-box .fa-quote-left {
    font-size: 250%;
    color: var(--pink);
    position: absolute;
    filter: drop-shadow(3px 1px 1px black);
}

.slide>.slider-box .fa-quote-right {
    bottom: 19%;
    right: 10%;
}

.slide>.slider-box .fa-quote-left {
    top: 19%;
    left: 10%;
}

.slide>.slider-box>p {
    font-size: 150%;
    height: 50%;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    filter: drop-shadow(2px 1px 2px black);
    text-transform: capitalize;
}

.slider-box>figure {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: -2%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 6px solid #fff
}

.slider-box>figure>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.slide>.slider-box::before {
    top: 70px;
    left: 15px
}

.slide>.slider-box::after {
    bottom: 60px;
    right: 15px;
    transform: rotate(180deg)
}

/* -------------------testimonial----------------- */

/* -------------------projects----------------- */



.layer a,
.work {
    position: relative;
}

.project {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10rem 3rem 0;
    height: 110vh
}

.work img,
.work-list,
.work:hover .layer {
    height: 100%
}

.work-list {
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-shadow: 8px 14px 45px -13px var(--main_color) inset;
    -webkit-box-shadow: 8px 14px 45px -13px var(--main_color) inset;
    -moz-box-shadow: 8px 14px 45px -13px var(--main_color) inset;
    padding: 20px 0;
    border-radius: 25px;
}

.layer,
.work {
    bottom: 0;
    overflow: hidden
}

.work {
    border-radius: 20px;
    width: 40rem;
    height: 30rem;
    margin: 1em;
    transition: .5s;
    box-shadow: 0 0 10px 0 #000, inset 0 0 15px 0 var(--pink)
}

.layer,
.work img {
    border-radius: 10px;
    transition: .5s
}

.layer,
.layer a::after {
    position: absolute;
    width: 100%
}

.work:hover {
    transform: translateY(-10px)
}

.work img {
    width: 100%;
    object-fit: contain;
    display: block
}

.layer,
.layer a {
    box-shadow: inset 0 0 10px 0 #000;
    display: flex
}

.work:hover img {
    scale: 1.2
}

.layer {
    height: 0%;
    background: linear-gradient(rgba(0, 0, 0, .6), var(--pink));
    left: 0;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    flex-direction: column;
    text-align: center;
    font-size: 14px;
    line-height: 2em
}

.layer h3 {
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: capitalize
}

.layer a {
    margin-top: 20px;
    font-size: 18px;
    line-height: 60px;
    background-color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center
}

.work .layer i {
    color: var(--pink);
}

.layer a::after {
    content: '';
    height: 100%;
}

/* -------------------projects----------------- */

/* -------------------contact----------------- */
.contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 150em;
    padding-bottom: 0
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.solar-wrapper {
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    height: 100%;
    width: 100%;
    z-index: -1
}

.solar-syst {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgba(0, 0, 0, .567)
}

.solar-syst:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    top: -2px;
    background: #fff;
    box-shadow: 894px 236px 0 0 rgba(255, 255, 255, .224), 313px 378px 0 0 rgba(255, 255, 255, .345), 922px 723px 0 0 rgba(255, 255, 255, .096), 1112px 296px 0 0 rgba(255, 255, 255, .562), 1047px 749px 0 0 rgba(255, 255, 255, .032), 353px 1151px 0 0 rgba(255, 255, 255, .209), 1581px 869px 0 0 rgba(255, 255, 255, .146), 438px 472px 0 0 rgba(255, 255, 255, .039), 1726px 1372px 0 0 rgba(255, 255, 255, .018), 727px 1097px 0 0 rgba(255, 255, 255, .482), 392px 1059px 0 0 rgba(255, 255, 255, .008), 1724px 910px 0 0 rgba(255, 255, 255, .175), 24px 854px 0 0 rgba(255, 255, 255, .126), 109px 1068px 0 0 rgba(255, 255, 255, .533), 182px 291px 0 0 rgba(255, 255, 255, .468), 1333px 1477px 0 0 rgba(255, 255, 255, .581), 1597px 1580px 0 0 rgba(255, 255, 255, .839), 34px 1520px 0 0 rgba(255, 255, 255, .366), 1086px 1305px 0 0 rgba(255, 255, 255, .158), 589px 565px 0 0 rgba(255, 255, 255, .431), 489px 1742px 0 0 rgba(255, 255, 255, .541), 1149px 1216px 0 0 rgba(255, 255, 255, .392), 1169px 1632px 0 0 rgba(255, 255, 255, .881), 818px 1328px 0 0 rgba(255, 255, 255, .055), 758px 1783px 0 0 rgba(255, 255, 255, .787), 1700px 358px 0 0 rgba(255, 255, 255, .699), 1618px 1582px 0 0 rgba(255, 255, 255, .906), 1114px 160px 0 0 rgba(255, 255, 255, .803), 712px 15px 0 0 rgba(255, 255, 255, .461), 565px 1428px 0 0 rgba(255, 255, 255, .736), 331px 1668px 0 0 rgba(255, 255, 255, .117), 966px 32px 0 0 rgba(255, 255, 255, .562), 1140px 308px 0 0 rgba(255, 255, 255, .9), 201px 355px 0 0 rgba(255, 255, 255, .33), 1021px 8px 0 0 rgba(255, 255, 255, .348), 529px 401px 0 0 rgba(255, 255, 255, .496), 650px 1540px 0 0 rgba(255, 255, 255, .207), 1536px 140px 0 0 rgba(255, 255, 255, .597), 1702px 1386px 0 0 rgba(255, 255, 255, .915), 831px 677px 0 0 rgba(255, 255, 255, .727), 518px 966px 0 0 rgba(255, 255, 255, .604), 489px 548px 0 0 rgba(255, 255, 255, .275), 345px 833px 0 0 rgba(255, 255, 255, .808), 1752px 429px 0 0 rgba(255, 255, 255, .595), 312px 1473px 0 0 rgba(255, 255, 255, .354), 1292px 914px 0 0 rgba(255, 255, 255, .201), 200px 435px 0 0 rgba(255, 255, 255, .155), 174px 1003px 0 0 rgba(255, 255, 255, .541), 799px 915px 0 0 rgba(255, 255, 255, .749), 1337px 1357px 0 0 rgba(255, 255, 255, .979), 698px 1655px 0 0 rgba(255, 255, 255, .538), 1290px 896px 0 0 rgba(255, 255, 255, .392), 414px 307px 0 0 rgba(255, 255, 255, .445), 1266px 206px 0 0 rgba(255, 255, 255, .392), 1333px 1672px 0 0 rgba(255, 255, 255, .835), 691px 264px 0 0 rgba(255, 255, 255, .418), 1437px 385px 0 0 rgba(255, 255, 255, .644), 1493px 1056px 0 0 rgba(255, 255, 255, .771), 1424px 432px 0 0 rgba(255, 255, 255, .744), 962px 701px 0 0 rgba(255, 255, 255, .994), 1253px 697px 0 0 rgba(255, 255, 255, .143), 841px 1437px 0 0 rgba(255, 255, 255, .474), 284px 829px 0 0 rgba(255, 255, 255, .889), 230px 376px 0 0 rgba(255, 255, 255, .067), 405px 1763px 0 0 rgba(255, 255, 255, .797), 1068px 452px 0 0 rgba(255, 255, 255, .643), 497px 401px 0 0 rgba(255, 255, 255, .519), 948px 1622px 0 0 rgba(255, 255, 255, .187), 1397px 1026px 0 0 rgba(255, 255, 255, .584), 1416px 253px 0 0 rgba(255, 255, 255, .937), 754px 1528px 0 0 rgba(255, 255, 255, .202), 1248px 812px 0 0 rgba(255, 255, 255, .606), 929px 1420px 0 0 rgba(255, 255, 255, .4), 366px 840px 0 0 rgba(255, 255, 255, .65), 510px 1550px 0 0 rgba(255, 255, 255, .339), 1733px 1224px 0 0 rgba(255, 255, 255, .705), 210px 238px 0 0 rgba(255, 255, 255, .52), 1385px 1064px 0 0 rgba(255, 255, 255, .639), 1194px 339px 0 0 rgba(255, 255, 255, .954), 643px 136px 0 0 rgba(255, 255, 255, .458), 109px 697px 0 0 rgba(255, 255, 255, .804), 1794px 502px 0 0 rgba(255, 255, 255, .138), 823px 381px 0 0 rgba(255, 255, 255, .044), 1299px 1136px 0 0 rgba(255, 255, 255, .164), 1282px 886px 0 0 rgba(255, 255, 255, .431), 154px 1411px 0 0 rgba(255, 255, 255, .561), 773px 1022px 0 0 rgba(255, 255, 255, .172), 612px 467px 0 0 rgba(255, 255, 255, .736), 662px 1597px 0 0 rgba(255, 255, 255, .988), 562px 290px 0 0 rgba(255, 255, 255, .062), 1349px 542px 0 0 rgba(255, 255, 255, .061), 405px 142px 0 0 rgba(255, 255, 255, .287), 133px 1789px 0 0 rgba(255, 255, 255, .335), 891px 1528px 0 0 rgba(255, 255, 255, .961), 1095px 731px 0 0 rgba(255, 255, 255, .152), 764px 646px 0 0 rgba(255, 255, 255, .453), 758px 1589px 0 0 rgba(255, 255, 255, .276), 1759px 981px 0 0 rgba(255, 255, 255, .462), 738px 1175px 0 0 rgba(255, 255, 255, .906), 1573px 30px 0 0 rgba(255, 255, 255, .179), 467px 646px 0 0 rgba(255, 255, 255, .469), 402px 75px 0 0 rgba(255, 255, 255, .388), 316px 579px 0 0 rgba(255, 255, 255, .657), 133px 73px 0 0 rgba(255, 255, 255, .226), 1334px 1325px 0 0 rgba(255, 255, 255, .682), 471px 1717px 0 0 rgba(255, 255, 255, .046), 658px 1263px 0 0 rgba(255, 255, 255, .627), 436px 930px 0 0 rgba(255, 255, 255, .218), 294px 225px 0 0 rgba(255, 255, 255, .453), 1309px 284px 0 0 rgba(255, 255, 255, .601), 138px 268px 0 0 rgba(255, 255, 255, .063), 328px 860px 0 0 rgba(255, 255, 255, .67), 1347px 130px 0 0 rgba(255, 255, 255, .275), 1247px 487px 0 0 rgba(255, 255, 255, .367), 974px 1210px 0 0 rgba(255, 255, 255, .312), 1628px 1755px 0 0 rgba(255, 255, 255, .259), 1756px 1053px 0 0 rgba(255, 255, 255, .685), 1696px 615px 0 0 rgba(255, 255, 255, .069), 490px 832px 0 0 rgba(255, 255, 255, .349), 1186px 1788px 0 0 rgba(255, 255, 255, .482), 1685px 96px 0 0 rgba(255, 255, 255, .121), 565px 146px 0 0 rgba(255, 255, 255, .225), 974px 735px 0 0 rgba(255, 255, 255, .534), 1778px 42px 0 0 rgba(255, 255, 255, .297), 1268px 903px 0 0 rgba(255, 255, 255, .398), 1635px 761px 0 0 rgba(255, 255, 255, .955), 1553px 1099px 0 0 rgba(255, 255, 255, .432), 1226px 961px 0 0 rgba(255, 255, 255, .309), 1287px 652px 0 0 rgba(255, 255, 255, .335), 1436px 1338px 0 0 rgba(255, 255, 255, .732), 535px 141px 0 0 rgba(255, 255, 255, .204), 624px 189px 0 0 rgba(255, 255, 255, .661), 251px 559px 0 0 rgba(255, 255, 255, .822), 288px 887px 0 0 rgba(255, 255, 255, .619), 461px 3px 0 0 rgba(255, 255, 255, .303), 1744px 1750px 0 0 rgba(255, 255, 255, .914), 1024px 1327px 0 0 rgba(255, 255, 255, .946), 1248px 1493px 0 0 rgba(255, 255, 255, .238), 665px 179px 0 0 rgba(255, 255, 255, .11), 17px 962px 0 0 rgba(255, 255, 255, .449), 1264px 1387px 0 0 rgba(255, 255, 255, .528), 354px 300px 0 0 rgba(255, 255, 255, .424), 1633px 1001px 0 0 rgba(255, 255, 255, .62), 1207px 685px 0 0 rgba(255, 255, 255, .642), 374px 568px 0 0 rgba(255, 255, 255, .342), 556px 946px 0 0 rgba(255, 255, 255, .066), 1478px 641px 0 0 rgba(255, 255, 255, .755), 1280px 1608px 0 0 rgba(255, 255, 255, .52), 1797px 1256px 0 0 rgba(255, 255, 255, .813), 1366px 673px 0 0 rgba(255, 255, 255, .483), 763px 1182px 0 0 rgba(255, 255, 255, .476), 337px 1031px 0 0 rgba(255, 255, 255, .362), 39px 1139px 0 0 rgba(255, 255, 255, .633), 937px 705px 0 0 rgba(255, 255, 255, .333), 1234px 56px 0 0 rgba(255, 255, 255, .848), 888px 704px 0 0 rgba(255, 255, 255, .331), 792px 1694px 0 0 rgba(255, 255, 255, .901), 118px 1609px 0 0 rgba(255, 255, 255, .562), 661px 785px 0 0 rgba(255, 255, 255, .975), 163px 1752px 0 0 rgba(255, 255, 255, .609), 932px 1547px 0 0 rgba(255, 255, 255, .644), 1139px 1421px 0 0 rgba(255, 255, 255, .645), 203px 69px 0 0 rgba(255, 255, 255, .835), 1128px 54px 0 0 rgba(255, 255, 255, .287), 1073px 1544px 0 0 rgba(255, 255, 255, .787), 461px 1093px 0 0 rgba(255, 255, 255, .73), 552px 728px 0 0 rgba(255, 255, 255, .031), 159px 1158px 0 0 rgba(255, 255, 255, .553), 922px 658px 0 0 rgba(255, 255, 255, .767), 1412px 1422px 0 0 rgba(255, 255, 255, .134), 384px 130px 0 0 rgba(255, 255, 255, .268), 1585px 794px 0 0 rgba(255, 255, 255, .43), 1661px 504px 0 0 rgba(255, 255, 255, .823), 143px 488px 0 0 rgba(255, 255, 255, .191), 912px 151px 0 0 rgba(255, 255, 255, .78), 960px 608px 0 0 rgba(255, 255, 255, .565), 530px 1293px 0 0 rgba(255, 255, 255, .835), 145px 671px 0 0 rgba(255, 255, 255, .756), 1326px 1493px 0 0 rgba(255, 255, 255, .07), 1413px 674px 0 0 rgba(255, 255, 255, .376), 412px 1558px 0 0 rgba(255, 255, 255, .772), 1548px 1614px 0 0 rgba(255, 255, 255, .62), 1396px 836px 0 0 rgba(255, 255, 255, .349), 1034px 1110px 0 0 rgba(255, 255, 255, .708), 1505px 320px 0 0 rgba(255, 255, 255, .747), 253px 1737px 0 0 rgba(255, 255, 255, .897), 433px 1561px 0 0 rgba(255, 255, 255, .365), 1217px 125px 0 0 rgba(255, 255, 255, .615), 134px 1285px 0 0 rgba(255, 255, 255, .066), 1023px 101px 0 0 rgba(255, 255, 255, .746), 1126px 826px 0 0 rgba(255, 255, 255, .577), 1796px 1406px 0 0 rgba(255, 255, 255, .106), 336px 1548px 0 0 rgba(255, 255, 255, .717), 608px 936px 0 0 rgba(255, 255, 255, .063), 157px 813px 0 0 rgba(255, 255, 255, .569), 1142px 314px 0 0 rgba(255, 255, 255, .989), 1118px 1589px 0 0 rgba(255, 255, 255, .353), 342px 843px 0 0 rgba(255, 255, 255, .851), 172px 714px 0 0 rgba(255, 255, 255, .243), 772px 1088px 0 0 rgba(255, 255, 255, .819), 268px 972px 0 0 rgba(255, 255, 255, .061), 1192px 1181px 0 0 rgba(255, 255, 255, .16), 1313px 784px 0 0 rgba(255, 255, 255, .975), 662px 1728px 0 0 rgba(255, 255, 255, .989), 1141px 1004px 0 0 rgba(255, 255, 255, .313), 793px 1410px 0 0 rgba(255, 255, 255, .978), 967px 31px 0 0 rgba(255, 255, 255, .296), 785px 1456px 0 0 rgba(255, 255, 255, .344), 876px 436px 0 0 rgba(255, 255, 255, .869), 679px 168px 0 0 rgba(255, 255, 255, .186), 1674px 1238px 0 0 rgba(255, 255, 255, .637), 541px 433px 0 0 rgba(255, 255, 255, .007), 160px 1542px 0 0 rgba(255, 255, 255, .341), 1089px 1620px 0 0 rgba(255, 255, 255, .981), 470px 254px 0 0 rgba(255, 255, 255, .584), 15px 1239px 0 0 rgba(255, 255, 255, .568), 888px 786px 0 0 rgba(255, 255, 255, .784), 1000px 411px 0 0 rgba(255, 255, 255, .677), 868px 1415px 0 0 rgba(255, 255, 255, .017), 1240px 862px 0 0 rgba(255, 255, 255, .212), 668px 321px 0 0 rgba(255, 255, 255, .327), 637px 574px 0 0 rgba(255, 255, 255, .262), 1757px 436px 0 0 rgba(255, 255, 255, .157), 462px 1563px 0 0 rgba(255, 255, 255, .727), 1182px 1082px 0 0 rgba(255, 255, 255, .603), 1644px 1327px 0 0 rgba(255, 255, 255, .578), 1758px 463px 0 0 rgba(255, 255, 255, .852), 833px 771px 0 0 rgba(255, 255, 255, .631), 1730px 442px 0 0 rgba(255, 255, 255, .765), 951px 1068px 0 0 rgba(255, 255, 255, .404), 56px 1563px 0 0 rgba(255, 255, 255, .428), 769px 826px 0 0 rgba(255, 255, 255, .036), 260px 1461px 0 0 rgba(255, 255, 255, .431), 1443px 984px 0 0 rgba(255, 255, 255, .227), 626px 618px 0 0 rgba(255, 255, 255, .272), 1042px 11px 0 0 rgba(255, 255, 255, .303), 1717px 1710px 0 0 rgba(255, 255, 255, .386), 746px 710px 0 0 rgba(255, 255, 255, .435), 1483px 1597px 0 0 rgba(255, 255, 255, .228), 1568px 1395px 0 0 rgba(255, 255, 255, .54), 789px 534px 0 0 rgba(255, 255, 255, .684), 346px 1640px 0 0 rgba(255, 255, 255, .88), 884px 687px 0 0 rgba(255, 255, 255, .326), 1442px 1192px 0 0 rgba(255, 255, 255, .284), 910px 139px 0 0 rgba(255, 255, 255, .289), 1447px 622px 0 0 rgba(255, 255, 255, .462), 452px 68px 0 0 rgba(255, 255, 255, .278), 1009px 19px 0 0 rgba(255, 255, 255, .122), 1342px 800px 0 0 rgba(255, 255, 255, .983), 826px 227px 0 0 rgba(255, 255, 255, .437), 518px 1487px 0 0 rgba(255, 255, 255, .342), 160px 1643px 0 0 #fff, 803px 862px 0 0 rgba(255, 255, 255, .005), 1466px 179px 0 0 rgba(255, 255, 255, .958), 162px 1601px 0 0 rgba(255, 255, 255, .842), 1588px 424px 0 0 rgba(255, 255, 255, .231), 1442px 1142px 0 0 rgba(255, 255, 255, .239), 1599px 1181px 0 0 rgba(255, 255, 255, .085), 455px 867px 0 0 rgba(255, 255, 255, .568), 1631px 1193px 0 0 rgba(255, 255, 255, .495), 1374px 1079px 0 0 rgba(255, 255, 255, .416), 32px 1197px 0 0 rgba(255, 255, 255, .698), 501px 12px 0 0 rgba(255, 255, 255, .04), 1684px 465px 0 0 rgba(255, 255, 255, .071), 608px 1369px 0 0 rgba(255, 255, 255, .461), 470px 550px 0 0 rgba(255, 255, 255, .641), 178px 1462px 0 0 rgba(255, 255, 255, .823), 255px 937px 0 0 rgba(255, 255, 255, .643), 233px 579px 0 0 rgba(255, 255, 255, .932), 1367px 191px 0 0 rgba(255, 255, 255, .745), 38px 432px 0 0 rgba(255, 255, 255, .634), 1187px 1623px 0 0 rgba(255, 255, 255, .987), 1247px 538px 0 0 rgba(255, 255, 255, .262), 286px 398px 0 0 rgba(255, 255, 255, .185), 1089px 735px 0 0 rgba(255, 255, 255, .018), 819px 1742px 0 0 rgba(255, 255, 255, .002), 177px 510px 0 0 rgba(255, 255, 255, .338), 1485px 998px 0 0 rgba(255, 255, 255, .849), 941px 504px 0 0 rgba(255, 255, 255, .065), 1018px 1328px 0 0 rgba(255, 255, 255, .124), 1778px 835px 0 0 rgba(255, 255, 255, .604), 682px 468px 0 0 rgba(255, 255, 255, .061), 203px 1328px 0 0 rgba(255, 255, 255, .857), 1018px 85px 0 0 rgba(255, 255, 255, .84), 163px 599px 0 0 rgba(255, 255, 255, .422), 570px 984px 0 0 rgba(255, 255, 255, .689), 1768px 1461px 0 0 rgba(255, 255, 255, .947), 846px 1770px 0 0 rgba(255, 255, 255, .322), 1193px 1261px 0 0 rgba(255, 255, 255, .469), 505px 713px 0 0 rgba(255, 255, 255, .368), 361px 307px 0 0 rgba(255, 255, 255, .14), 148px 499px 0 0 rgba(255, 255, 255, .306), 737px 1601px 0 0 rgba(255, 255, 255, .728), 1017px 285px 0 0 rgba(255, 255, 255, .315), 1403px 650px 0 0 rgba(255, 255, 255, .307), 1213px 233px 0 0 rgba(255, 255, 255, .741), 72px 441px 0 0 rgba(255, 255, 255, .262), 1510px 1121px 0 0 rgba(255, 255, 255, .381), 1201px 997px 0 0 rgba(255, 255, 255, .47), 1706px 1661px 0 0 rgba(255, 255, 255, .35), 1316px 105px 0 0 rgba(255, 255, 255, .107), 933px 861px 0 0 rgba(255, 255, 255, .118), 84px 840px 0 0 rgba(255, 255, 255, .104), 145px 832px 0 0 rgba(255, 255, 255, .366), 499px 1350px 0 0 rgba(255, 255, 255, .909), 830px 955px 0 0 rgba(255, 255, 255, .464), 621px 1567px 0 0 rgba(255, 255, 255, .873), 1432px 614px 0 0 rgba(255, 255, 255, .66), 846px 807px 0 0 rgba(255, 255, 255, .876), 1271px 1527px 0 0 rgba(255, 255, 255, .307), 93px 533px 0 0 rgba(255, 255, 255, .556), 940px 85px 0 0 rgba(255, 255, 255, .407), 1592px 36px 0 0 rgba(255, 255, 255, .137), 1386px 982px 0 0 rgba(255, 255, 255, .411), 271px 1744px 0 0 rgba(255, 255, 255, .081), 3px 135px 0 0 rgba(255, 255, 255, .891), 484px 464px 0 0 rgba(255, 255, 255, .715), 1407px 1173px 0 0 rgba(255, 255, 255, .53), 1142px 338px 0 0 rgba(255, 255, 255, .258), 361px 957px 0 0 rgba(255, 255, 255, .146), 1426px 927px 0 0 rgba(255, 255, 255, .723), 1043px 257px 0 0 rgba(255, 255, 255, .615), 440px 958px 0 0 rgba(255, 255, 255, .544), 724px 9px 0 0 rgba(255, 255, 255, .326), 1653px 1246px 0 0 rgba(255, 255, 255, .067), 1220px 1539px 0 0 rgba(255, 255, 255, .687), 216px 618px 0 0 rgba(255, 255, 255, .933), 1083px 1050px 0 0 rgba(255, 255, 255, .751), 416px 1789px 0 0 rgba(255, 255, 255, .16), 1084px 460px 0 0 rgba(255, 255, 255, .834), 732px 662px 0 0 rgba(255, 255, 255, .454), 995px 1210px 0 0 rgba(255, 255, 255, .946), 168px 982px 0 0 rgba(255, 255, 255, .259), 75px 347px 0 0 rgba(255, 255, 255, .671), 292px 776px 0 0 rgba(255, 255, 255, .045), 242px 1059px 0 0 rgba(255, 255, 255, .069), 902px 1154px 0 0 rgba(255, 255, 255, .94), 359px 757px 0 0 rgba(255, 255, 255, .785), 1075px 1227px 0 0 rgba(255, 255, 255, .244), 567px 1209px 0 0 rgba(255, 255, 255, .043), 938px 744px 0 0 rgba(255, 255, 255, .407), 341px 194px 0 0 rgba(255, 255, 255, .458), 1390px 1026px 0 0 rgba(255, 255, 255, .551), 752px 1243px 0 0 rgba(255, 255, 255, .672), 340px 109px 0 0 rgba(255, 255, 255, .486), 140px 1687px 0 0 rgba(255, 255, 255, .708), 682px 1732px 0 0 rgba(255, 255, 255, .703), 226px 1384px 0 0 rgba(255, 255, 255, .418), 14px 1741px 0 0 rgba(255, 255, 255, .693), 1039px 1114px 0 0 rgba(255, 255, 255, .182), 229px 921px 0 0 rgba(255, 255, 255, .178), 75px 1230px 0 0 rgba(255, 255, 255, .361), 1114px 144px 0 0 rgba(255, 255, 255, .575), 267px 1600px 0 0 #fff, 172px 1518px 0 0 rgba(255, 255, 255, .704), 1681px 1276px 0 0 rgba(255, 255, 255, .181), 1362px 652px 0 0 rgba(255, 255, 255, .668), 111px 536px 0 0 rgba(255, 255, 255, .534), 1285px 942px 0 0 rgba(255, 255, 255, .11), 52px 110px 0 0 rgba(255, 255, 255, .248), 840px 1074px 0 0 rgba(255, 255, 255, .131), 1306px 450px 0 0 rgba(255, 255, 255, .26), 871px 1601px 0 0 rgba(255, 255, 255, .051), 1476px 1135px 0 0 rgba(255, 255, 255, .222), 940px 17px 0 0 rgba(255, 255, 255, .859), 1678px 349px 0 0 rgba(255, 255, 255, .612), 1141px 1566px 0 0 rgba(255, 255, 255, .227), 1266px 285px 0 0 rgba(255, 255, 255, .7), 998px 620px 0 0 rgba(255, 255, 255, .025), 300px 686px 0 0 rgba(255, 255, 255, .742), 134px 466px 0 0 rgba(255, 255, 255, .957), 1535px 54px 0 0 rgba(255, 255, 255, .757), 1386px 318px 0 0 rgba(255, 255, 255, .734), 1084px 1469px 0 0 rgba(255, 255, 255, .553), 200px 1002px 0 0 rgba(255, 255, 255, .062), 723px 382px 0 0 rgba(255, 255, 255, .954), 1788px 748px 0 0 rgba(255, 255, 255, .917), 1726px 1075px 0 0 rgba(255, 255, 255, .188), 861px 8px 0 0 rgba(255, 255, 255, .413), 679px 1619px 0 0 rgba(255, 255, 255, .577), 17px 804px 0 0 rgba(255, 255, 255, .142), 1116px 1044px 0 0 rgba(255, 255, 255, .282), 1318px 615px 0 0 rgba(255, 255, 255, .287), 955px 873px 0 0 rgba(255, 255, 255, .712), 567px 1004px 0 0 rgba(255, 255, 255, .392), 57px 1275px 0 0 rgba(255, 255, 255, .841), 1282px 200px 0 0 rgba(255, 255, 255, .749), 996px 618px 0 0 rgba(255, 255, 255, .857), 671px 1703px 0 0 rgba(255, 255, 255, .261), 620px 879px 0 0 rgba(255, 255, 255, .87), 99px 1798px 0 0 rgba(255, 255, 255, .717), 933px 644px 0 0 rgba(255, 255, 255, .338), 884px 1535px 0 0 rgba(255, 255, 255, .254), 1698px 1185px 0 0 rgba(255, 255, 255, .053), 850px 1072px 0 0 rgba(255, 255, 255, .145), 1092px 1213px 0 0 rgba(255, 255, 255, .172), 170px 235px 0 0 rgba(255, 255, 255, .047), 1217px 1652px 0 0 rgba(255, 255, 255, .747), 1039px 912px 0 0 rgba(255, 255, 255, .775), 624px 1770px 0 0 rgba(255, 255, 255, .292), 1677px 842px 0 0 rgba(255, 255, 255, .134), 1169px 551px 0 0 rgba(255, 255, 255, .127), 796px 62px 0 0 rgba(255, 255, 255, .259), 261px 1599px 0 0 rgba(255, 255, 255, .158), 288px 944px 0 0 rgba(255, 255, 255, .069), 257px 973px 0 0 rgba(255, 255, 255, .824), 209px 932px 0 0 rgba(255, 255, 255, .655), 473px 557px 0 0 rgba(255, 255, 255, .803), 1430px 332px 0 0 rgba(255, 255, 255, .771), 287px 1426px 0 0 rgba(255, 255, 255, .062), 894px 1345px 0 0 rgba(255, 255, 255, .45), 1501px 1596px 0 0 rgba(255, 255, 255, .427), 1432px 718px 0 0 rgba(255, 255, 255, .804), 560px 1120px 0 0 rgba(255, 255, 255, .713), 1001px 474px 0 0 rgba(255, 255, 255, .349), 1131px 1391px 0 0 rgba(255, 255, 255, .194), 1619px 1156px 0 0 rgba(255, 255, 255, .388), 932px 1579px 0 0 rgba(255, 255, 255, .202), 526px 181px 0 0 rgba(255, 255, 255, .609), 971px 501px 0 0 rgba(255, 255, 255, .069), 88px 1601px 0 0 rgba(255, 255, 255, .471), 266px 547px 0 0 rgba(255, 255, 255, .265), 530px 708px 0 0 rgba(255, 255, 255, .171), 527px 642px 0 0 rgba(255, 255, 255, .565), 558px 1502px 0 0 rgba(255, 255, 255, .434), 1206px 988px 0 0 rgba(255, 255, 255, .023), 285px 1740px 0 0 rgba(255, 255, 255, .103), 844px 1598px 0 0 rgba(255, 255, 255, .886), 1204px 1094px 0 0 rgba(255, 255, 255, .615), 915px 285px 0 0 rgba(255, 255, 255, .603), 492px 564px 0 0 rgba(255, 255, 255, .27), 1759px 1561px 0 0 rgba(255, 255, 255, .359), 1378px 1362px 0 0 rgba(255, 255, 255, .021), 837px 461px 0 0 rgba(255, 255, 255, .404), 722px 869px 0 0 rgba(255, 255, 255, .053), 1305px 509px 0 0 rgba(255, 255, 255, .808), 1332px 995px 0 0 rgba(255, 255, 255, .449), 554px 1756px 0 0 rgba(255, 255, 255, .399), 1449px 1495px 0 0 rgba(255, 255, 255, .645), 1159px 1321px 0 0 rgba(255, 255, 255, .28), 1028px 397px 0 0 rgba(255, 255, 255, .508), 1492px 1343px 0 0 rgba(255, 255, 255, .195), 821px 1483px 0 0 rgba(255, 255, 255, .501), 1474px 908px 0 0 rgba(255, 255, 255, .021), 120px 195px 0 0 rgba(255, 255, 255, .388), 1199px 1227px 0 0 rgba(255, 255, 255, .419), 1653px 756px 0 0 rgba(255, 255, 255, .81), 1203px 1082px 0 0 rgba(255, 255, 255, .351), 1056px 411px 0 0 rgba(255, 255, 255, .143), 70px 1443px 0 0 rgba(255, 255, 255, .115), 545px 884px 0 0 rgba(255, 255, 255, .356), 1209px 446px 0 0 rgba(255, 255, 255, .512), 546px 71px 0 0 rgba(255, 255, 255, .607), 31px 1138px 0 0 rgba(255, 255, 255, .476), 775px 158px 0 0 rgba(255, 255, 255, .651), 955px 616px 0 0 rgba(255, 255, 255, .198), 659px 665px 0 0 rgba(255, 255, 255, .792), 1653px 1793px 0 0 rgba(255, 255, 255, .447), 1679px 787px 0 0 rgba(255, 255, 255, .812), 381px 62px 0 0 rgba(255, 255, 255, .354), 1669px 1622px 0 0 rgba(255, 255, 255, .309), 1013px 428px 0 0 rgba(255, 255, 255, .726), 407px 931px 0 0 rgba(255, 255, 255, .352), 857px 1037px 0 0 rgba(255, 255, 255, .134), 1450px 388px 0 0 rgba(255, 255, 255, .473), 517px 1726px 0 0 rgba(255, 255, 255, .332), 347px 1726px 0 0 rgba(255, 255, 255, .543), 765px 111px 0 0 rgba(255, 255, 255, .162), 604px 555px 0 0 rgba(255, 255, 255, .768), 139px 924px 0 0 rgba(255, 255, 255, .967), 831px 1767px 0 0 rgba(255, 255, 255, .144), 690px 711px 0 0 rgba(255, 255, 255, .372), 1439px 1536px 0 0 rgba(255, 255, 255, .058), 1704px 656px 0 0 rgba(255, 255, 255, .47), 226px 994px 0 0 rgba(255, 255, 255, .63), 1047px 600px 0 0 rgba(255, 255, 255, .731), 1681px 1404px 0 0 rgba(255, 255, 255, .005), 1738px 1613px 0 0 rgba(255, 255, 255, .342), 584px 459px 0 0 rgba(255, 255, 255, .487), 844px 384px 0 0 rgba(255, 255, 255, .693), 239px 490px 0 0 rgba(255, 255, 255, .921), 1452px 1133px 0 0 rgba(255, 255, 255, .358), 488px 61px 0 0 rgba(255, 255, 255, .113), 904px 371px 0 0 rgba(255, 255, 255, .308), 533px 33px 0 0 rgba(255, 255, 255, .991), 271px 441px 0 0 rgba(255, 255, 255, .707), 574px 1161px 0 0 rgba(255, 255, 255, .221), 267px 464px 0 0 rgba(255, 255, 255, .574), 837px 1037px 0 0 rgba(255, 255, 255, .989), 369px 752px 0 0 rgba(255, 255, 255, .597), 1287px 174px 0 0 rgba(255, 255, 255, .455), 1072px 1006px 0 0 rgba(255, 255, 255, .455), 218px 998px 0 0 rgba(255, 255, 255, .941), 1387px 1608px 0 0 rgba(255, 255, 255, .873), 222px 407px 0 0 rgba(255, 255, 255, .445), 1688px 415px 0 0 rgba(255, 255, 255, .592), 1260px 1191px 0 0 rgba(255, 255, 255, .986), 589px 1793px 0 0 rgba(255, 255, 255, .549), 1524px 1352px 0 0 rgba(255, 255, 255, .352), 675px 1751px 0 0 rgba(255, 255, 255, .409);
    border-radius: 100px
}

.earth:after,
.saturn:after {
    content: "";
    left: 50%;
    top: 0;
    position: absolute
}

.solar-syst div {
    border-radius: 1000px;
    top: 50%;
    left: 50%;
    position: absolute;
    z-index: 999
}

.solar-syst div:not(.sun) {
    border: 1px solid rgba(102, 166, 229, .12)
}

.solar-syst div:not(.sun):before {
    left: 50%;
    border-radius: 100px;
    content: "";
    position: absolute
}

.solar-syst div:not(.asteroids-belt):before {
    box-shadow: inset 0 6px 0 -2px rgba(0, 0, 0, .25)
}

.sun {
    background: radial-gradient(ellipse at center, #ffd000 1%, #f9b700 39%, #f9b700 39%, #e06317 100%);
    height: 40px;
    width: 40px;
    margin-top: -20px;
    margin-left: -20px;
    background-clip: padding-box;
    border: 0 !important;
    background-position: -28px -103px;
    background-size: 175%;
    box-shadow: 0 0 10px 2px rgba(255, 107, 0, .4), 0 0 22px 11px rgba(255, 203, 0, .13)
}

.mercury {
    height: 70px;
    width: 70px;
    margin-top: -35px;
    margin-left: -35px;
    animation: 7.18673s linear infinite orb
}

.mercury:before {
    height: 4px;
    width: 4px;
    background: #9f5e26;
    margin-top: -2px;
    margin-left: -2px
}

.venus {
    height: 100px;
    width: 100px;
    margin-top: -50px;
    margin-left: -50px;
    animation: 18.45553s linear infinite orb
}

.venus:before {
    height: 8px;
    width: 8px;
    background: #beb768;
    margin-top: -4px;
    margin-left: -4px
}

.earth {
    height: 145px;
    width: 145px;
    margin-top: -72.5px;
    margin-left: -72.5px;
    animation: 30s linear infinite orb
}

.earth:before {
    height: 6px;
    width: 6px;
    background: #11abe9;
    margin-top: -3px;
    margin-left: -3px
}

.earth:after {
    height: 18px;
    width: 18px;
    margin-left: -9px;
    margin-top: -9px;
    border-radius: 100px;
    box-shadow: 0 -10px 0 -8px grey;
    animation: 2.24404s linear infinite orb
}

.mars {
    height: 190px;
    width: 190px;
    margin-top: -95px;
    margin-left: -95px;
    animation: 56.42613s linear infinite orb
}

.mars:before {
    height: 6px;
    width: 6px;
    background: #cf3921;
    margin-top: -3px;
    margin-left: -3px
}

.jupiter {
    height: 340px;
    width: 340px;
    margin-top: -170px;
    margin-left: -170px;
    animation: 355.72282s linear infinite orb
}

.jupiter:before {
    height: 18px;
    width: 18px;
    background: #c76e2a;
    margin-top: -9px;
    margin-left: -9px
}

.saturn {
    height: 440px;
    width: 440px;
    margin-top: -220px;
    margin-left: -220px;
    animation: 882.69525s linear infinite orb
}

.saturn:before {
    height: 12px;
    width: 12px;
    background: #e7c194;
    margin-top: -6px;
    margin-left: -6px
}

.saturn:after {
    height: 2.34%;
    width: 4.676%;
    transform: rotateZ(-52deg);
    margin-left: -2.3%;
    margin-top: -1.2%;
    border-radius: 50%;
    box-shadow: 0 1px 0 1px #987641, 3px 1px 0 #987641, -3px 1px 0 #987641;
    animation: 882.69525s linear infinite reverse orb;
    transform-origin: 52% 60%
}

.neptune:before,
.uranus:before {
    height: 10px;
    width: 10px;
    margin-top: -5px;
    margin-left: -5px
}

.uranus {
    height: 520px;
    width: 520px;
    margin-top: -260px;
    margin-left: -260px;
    animation: 2512.4002s linear infinite orb
}

.uranus:before {
    background: #b5e3e3
}

.neptune {
    height: 630px;
    width: 630px;
    margin-top: -315px;
    margin-left: -315px;
    animation: 4911.78386s linear infinite orb
}

.neptune:before {
    background: #175e9e
}

.asteroids-belt {
    opacity: .7;
    border-color: transparent !important;
    height: 300px;
    width: 300px;
    margin-top: -150px;
    margin-left: -150px;
    animation: 179.95583s linear infinite orb;
    overflow: hidden
}

.asteroids-belt:before {
    top: 50%;
    height: 210px;
    width: 210px;
    margin-left: -105px;
    margin-top: -105px;
    background: 0 0;
    border-radius: 140px !important;
    box-shadow: -93px 77px 0 -104px rgba(255, 255, 255, .763), 22px -121px 0 -104px rgba(255, 255, 255, .732), 86px -111px 0 -104px rgba(255, 255, 255, .07), -100px -94px 0 -104px rgba(255, 255, 255, .652), 4px 114px 0 -104px rgba(255, 255, 255, .928), -24px -61px 0 -104px rgba(255, 255, 255, .955), -108px -97px 0 -104px rgba(255, 255, 255, .257), -84px -94px 0 -104px rgba(255, 255, 255, .435), -11px 53px 0 -104px rgba(255, 255, 255, .325), -77px 32px 0 -104px rgba(255, 255, 255, .953), 14px -1px 0 -104px rgba(255, 255, 255, .005), -61px 12px 0 -104px rgba(255, 255, 255, .052), 110px -32px 0 -104px rgba(255, 255, 255, .041), 119px 63px 0 -104px rgba(255, 255, 255, .368), -113px 40px 0 -104px rgba(255, 255, 255, .768), 76px -66px 0 -104px rgba(255, 255, 255, .245), -72px 103px 0 -104px rgba(255, 255, 255, .054), 122px -25px 0 -104px rgba(255, 255, 255, .852), -5px -119px 0 -104px rgba(255, 255, 255, .243), 98px -59px 0 -104px rgba(255, 255, 255, .18), -40px -75px 0 -104px rgba(255, 255, 255, .391), 85px 11px 0 -104px rgba(255, 255, 255, .12), 39px 84px 0 -104px rgba(255, 255, 255, .502), -29px 28px 0 -104px rgba(255, 255, 255, .851), -79px 44px 0 -104px rgba(255, 255, 255, .696), -33px -87px 0 -104px rgba(255, 255, 255, .66), -132px 48px 0 -104px rgba(255, 255, 255, .147), 8px -71px 0 -104px rgba(255, 255, 255, .08), 134px 19px 0 -104px rgba(255, 255, 255, .084), 127px 7px 0 -104px rgba(255, 255, 255, .349), 10px -105px 0 -104px rgba(255, 255, 255, .102), 137px 112px 0 -104px rgba(255, 255, 255, .718), -132px 122px 0 -104px rgba(255, 255, 255, .186), -102px -17px 0 -104px rgba(255, 255, 255, .498), -86px 17px 0 -104px rgba(255, 255, 255, .434), -48px 41px 0 -104px rgba(255, 255, 255, .8), -28px 101px 0 -104px rgba(255, 255, 255, .215), -19px -52px 0 -104px rgba(255, 255, 255, .96), 97px 133px 0 -104px rgba(255, 255, 255, .797), -104px 15px 0 -104px rgba(255, 255, 255, .349), 21px 103px 0 -104px rgba(255, 255, 255, .533), -36px -84px 0 -104px rgba(255, 255, 255, .435), 66px 15px 0 -104px rgba(255, 255, 255, .37), -122px 66px 0 -104px rgba(255, 255, 255, .984), 20px -88px 0 -104px rgba(255, 255, 255, .602), 104px -3px 0 -104px rgba(255, 255, 255, .759), 88px -144px 0 -104px rgba(255, 255, 255, .406), 17px -16px 0 -104px rgba(255, 255, 255, .402), 126px 110px 0 -104px rgba(255, 255, 255, .474), 129px 47px 0 -104px rgba(255, 255, 255, .018), -22px -115px 0 -104px rgba(255, 255, 255, .008), 123px -138px 0 -104px rgba(255, 255, 255, .64), 137px 73px 0 -104px rgba(255, 255, 255, .232), -101px 126px 0 -104px rgba(255, 255, 255, .435), 135px -40px 0 -104px rgba(255, 255, 255, .033), -55px 77px 0 -104px rgba(255, 255, 255, .703), 83px -26px 0 -104px rgba(255, 255, 255, .415), 42px -93px 0 -104px rgba(255, 255, 255, .116), 81px 143px 0 -104px rgba(255, 255, 255, .298), 81px 62px 0 -104px rgba(255, 255, 255, .041), 103px -103px 0 -104px rgba(255, 255, 255, .785), -21px -129px 0 -104px rgba(255, 255, 255, .656), 92px 70px 0 -104px rgba(255, 255, 255, .272), -21px 52px 0 -104px rgba(255, 255, 255, .784), -113px -90px 0 -104px rgba(255, 255, 255, .637), -114px -98px 0 -104px rgba(255, 255, 255, .29), -9px 96px 0 -104px rgba(255, 255, 255, .121), 35px -38px 0 -104px rgba(255, 255, 255, .705), 65px -58px 0 -104px rgba(255, 255, 255, .604), -48px -57px 0 -104px rgba(255, 255, 255, .321), 1px 78px 0 -104px rgba(255, 255, 255, .148), 84px 25px 0 -104px rgba(255, 255, 255, .545), -124px -85px 0 -104px rgba(255, 255, 255, .606), 104px 77px 0 -104px rgba(255, 255, 255, .5), -57px 67px 0 -104px rgba(255, 255, 255, .675), -109px -63px 0 -104px rgba(255, 255, 255, .3), -123px -38px 0 -104px rgba(255, 255, 255, .551), -113px 20px 0 -104px rgba(255, 255, 255, .171), 35px 97px 0 -104px rgba(255, 255, 255, .8), -64px -36px 0 -104px rgba(255, 255, 255, .671), -50px 16px 0 -104px rgba(255, 255, 255, .858), 99px 59px 0 -104px rgba(255, 255, 255, .04), -79px -35px 0 -104px rgba(255, 255, 255, .583), -42px 106px 0 -104px rgba(255, 255, 255, .696), 83px 70px 0 -104px rgba(255, 255, 255, .603), 21px 1px 0 -104px rgba(255, 255, 255, .295), 91px -96px 0 -104px rgba(255, 255, 255, .077), -103px 98px 0 -104px rgba(255, 255, 255, .038), 48px 42px 0 -104px rgba(255, 255, 255, .102), -127px -103px 0 -104px rgba(255, 255, 255, .534), 5px -98px 0 -104px rgba(255, 255, 255, .822), -118px 131px 0 -104px rgba(255, 255, 255, .724), -128px 95px 0 -104px rgba(255, 255, 255, .436), -92px 27px 0 -104px rgba(255, 255, 255, .82), -23px -125px 0 -104px rgba(255, 255, 255, .619), -44px -3px 0 -104px rgba(255, 255, 255, .918), 16px -98px 0 -104px rgba(255, 255, 255, .687), 7px 35px 0 -104px rgba(255, 255, 255, .029), 28px -62px 0 -104px rgba(255, 255, 255, .866), 31px -59px 0 -104px rgba(255, 255, 255, .57), 122px -58px 0 -104px rgba(255, 255, 255, .288), 104px 55px 0 -104px rgba(255, 255, 255, .25), 125px 83px 0 -104px rgba(255, 255, 255, .314), 48px 37px 0 -104px rgba(255, 255, 255, .793), -8px 56px 0 -104px rgba(255, 255, 255, .462), -105px -17px 0 -104px rgba(255, 255, 255, .046), 22px -67px 0 -104px rgba(255, 255, 255, .077), 31px 20px 0 -104px rgba(255, 255, 255, .105), 78px 108px 0 -104px rgba(255, 255, 255, .929), -105px -62px 0 -104px rgba(255, 255, 255, .619), -51px 130px 0 -104px rgba(255, 255, 255, .984), 51px 79px 0 -104px rgba(255, 255, 255, .651), 15px 45px 0 -104px rgba(255, 255, 255, .318), -53px 48px 0 -104px rgba(255, 255, 255, .483), -101px -81px 0 -104px rgba(255, 255, 255, .375), -36px 64px 0 -104px rgba(255, 255, 255, .122), 110px 39px 0 -104px rgba(255, 255, 255, .195), -18px -31px 0 -104px rgba(255, 255, 255, .92), -77px -106px 0 -104px rgba(255, 255, 255, .599), -33px -1px 0 -104px rgba(255, 255, 255, .244), 145px -2px 0 -104px rgba(255, 255, 255, .709), -69px -77px 0 -104px rgba(255, 255, 255, .76), 123px -36px 0 -104px rgba(255, 255, 255, .045), 102px -77px 0 -104px rgba(255, 255, 255, .625), -62px -43px 0 -104px rgba(255, 255, 255, .322), -9px -111px 0 -104px rgba(255, 255, 255, .743), 78px -13px 0 -104px rgba(255, 255, 255, .22), 71px -96px 0 -104px rgba(255, 255, 255, .434), 91px 58px 0 -104px rgba(255, 255, 255, .115), 93px 99px 0 -104px rgba(255, 255, 255, .589), -23px 13px 0 -104px rgba(255, 255, 255, .081), -14px 30px 0 -104px rgba(255, 255, 255, .82), 17px 38px 0 -104px rgba(255, 255, 255, .082), -136px -63px 0 -104px rgba(255, 255, 255, .667), -51px -59px 0 -104px rgba(255, 255, 255, .468), 3px -21px 0 -104px rgba(255, 255, 255, .34), -84px 8px 0 -104px rgba(255, 255, 255, .618), 53px 15px 0 -104px rgba(255, 255, 255, .523), -22px 27px 0 -104px rgba(255, 255, 255, .716), -34px -16px 0 -104px rgba(255, 255, 255, .77), 107px 58px 0 -104px rgba(255, 255, 255, .935), 50px -11px 0 -104px rgba(255, 255, 255, .488), 118px -60px 0 -104px rgba(255, 255, 255, .751), 6px 43px 0 -104px rgba(255, 255, 255, .118), -59px -69px 0 -104px rgba(255, 255, 255, .286), -92px 46px 0 -104px rgba(255, 255, 255, .075), -49px -73px 0 -104px rgba(255, 255, 255, .866), 106px -80px 0 -104px rgba(255, 255, 255, .028), 52px 2px 0 -104px rgba(255, 255, 255, .663), 45px 69px 0 -104px rgba(255, 255, 255, .337), -14px 116px 0 -104px rgba(255, 255, 255, .25), -71px -30px 0 -104px rgba(255, 255, 255, .851), -135px -72px 0 -104px rgba(255, 255, 255, .815), -115px 35px 0 -104px rgba(255, 255, 255, .743), -107px 22px 0 -104px rgba(255, 255, 255, .607), 45px -76px 0 -104px rgba(255, 255, 255, .886), -100px -69px 0 -104px rgba(255, 255, 255, .614), -81px 11px 0 -104px rgba(255, 255, 255, .951), -132px 70px 0 -104px rgba(255, 255, 255, .619), -77px -92px 0 -104px rgba(255, 255, 255, .699), -6px 110px 0 -104px rgba(255, 255, 255, .677), -8px 44px 0 -104px rgba(255, 255, 255, .927), -83px -82px 0 -104px rgba(255, 255, 255, .702), 101px -42px 0 -104px rgba(255, 255, 255, .317), 19px 47px 0 -104px rgba(255, 255, 255, .672), -130px 112px 0 -104px rgba(255, 255, 255, .641), 50px 6px 0 -104px rgba(255, 255, 255, .328), 16px -31px 0 -104px rgba(255, 255, 255, .843), -67px 42px 0 -104px rgba(255, 255, 255, .497), 10px 91px 0 -104px rgba(255, 255, 255, .76), -96px 104px 0 -104px rgba(255, 255, 255, .2), -120px -33px 0 -104px rgba(255, 255, 255, .841), 27px -44px 0 -104px rgba(255, 255, 255, .049), -27px 69px 0 -104px rgba(255, 255, 255, .239), 79px 68px 0 -104px rgba(255, 255, 255, .277), 91px -89px 0 -104px rgba(255, 255, 255, .886), 87px -142px 0 -104px rgba(255, 255, 255, .562), 57px -48px 0 -104px rgba(255, 255, 255, .655), 72px 59px 0 -104px rgba(255, 255, 255, .633), 64px 127px 0 -104px rgba(255, 255, 255, .788), -142px 98px 0 -104px rgba(255, 255, 255, .246), -52px 94px 0 -104px rgba(255, 255, 255, .12), 76px 102px 0 -104px rgba(255, 255, 255, .021), 134px 67px 0 -104px rgba(255, 255, 255, .714), -75px 141px 0 -104px rgba(255, 255, 255, .965), 10px -67px 0 -104px rgba(255, 255, 255, .352), 123px 97px 0 -104px rgba(255, 255, 255, .555), 43px 125px 0 -104px rgba(255, 255, 255, .056), 43px 22px 0 -104px rgba(255, 255, 255, .232), 88px -127px 0 -104px rgba(255, 255, 255, .403), 89px -21px 0 -104px rgba(255, 255, 255, .012), -117px 40px 0 -104px rgba(255, 255, 255, .347), 8px 23px 0 -104px rgba(255, 255, 255, .672), 66px -50px 0 -104px rgba(255, 255, 255, .408), 112px 103px 0 -104px rgba(255, 255, 255, .053), -108px -89px 0 -104px rgba(255, 255, 255, .819), 4px -19px 0 -104px rgba(255, 255, 255, .319), -108px -39px 0 -104px rgba(255, 255, 255, .326), 36px 58px 0 -104px rgba(255, 255, 255, .027), 23px 132px 0 -104px rgba(255, 255, 255, .092), 66px -111px 0 -104px rgba(255, 255, 255, .209), 50px 129px 0 -104px rgba(255, 255, 255, .284), 131px -104px 0 -104px rgba(255, 255, 255, .359), -111px -128px 0 -104px rgba(255, 255, 255, .853), -10px 107px 0 -104px rgba(255, 255, 255, .436), -121px 35px 0 -104px rgba(255, 255, 255, .928), -121px -126px 0 -104px rgba(255, 255, 255, .183), 110px 142px 0 -104px rgba(255, 255, 255, .428), 129px 28px 0 -104px rgba(255, 255, 255, .651), -31px -46px 0 -104px rgba(255, 255, 255, .648), 128px 122px 0 -104px rgba(255, 255, 255, .347), 23px 64px 0 -104px rgba(255, 255, 255, .4), 134px 13px 0 -104px rgba(255, 255, 255, .32), 55px 103px 0 -104px rgba(255, 255, 255, .811), -83px -34px 0 -104px rgba(255, 255, 255, .404), -139px -19px 0 -104px rgba(255, 255, 255, .197), 102px 119px 0 -104px rgba(255, 255, 255, .264), -96px -21px 0 -104px rgba(255, 255, 255, .601), -46px -124px 0 -104px rgba(255, 255, 255, .565), -2px -23px 0 -104px rgba(255, 255, 255, .071), -94px 128px 0 -104px rgba(255, 255, 255, .325), -66px -17px 0 -104px rgba(255, 255, 255, .211), 37px -99px 0 -104px rgba(255, 255, 255, .178), -52px -69px 0 -104px rgba(255, 255, 255, .959), -11px -48px 0 -104px rgba(255, 255, 255, .545), -104px 29px 0 -104px rgba(255, 255, 255, .64), -114px -21px 0 -104px rgba(255, 255, 255, .993), -71px 124px 0 -104px rgba(255, 255, 255, .121), 87px -113px 0 -104px rgba(255, 255, 255, .887), 141px -82px 0 -104px rgba(255, 255, 255, .704), -12px -69px 0 -104px rgba(255, 255, 255, .184), -79px 0 0 -104px rgba(255, 255, 255, .815), -115px 81px 0 -104px rgba(255, 255, 255, .09), -29px 92px 0 -104px rgba(255, 255, 255, .837), -70px 108px 0 -104px rgba(255, 255, 255, .16), -99px 82px 0 -104px rgba(255, 255, 255, .405), 145px -23px 0 -104px rgba(255, 255, 255, .065), -47px 53px 0 -104px rgba(255, 255, 255, .161), 124px -143px 0 -104px rgba(255, 255, 255, .677), -54px -95px 0 -104px rgba(255, 255, 255, .963), -10px 29px 0 -104px rgba(255, 255, 255, .614), 123px -2px 0 -104px rgba(255, 255, 255, .87), 38px 91px 0 -104px rgba(255, 255, 255, .261), 9px -127px 0 -104px rgba(255, 255, 255, .71), 66px -139px 0 -104px rgba(255, 255, 255, .621), 12px -77px 0 -104px rgba(255, 255, 255, .507), -10px -124px 0 -104px rgba(255, 255, 255, .782), 64px -68px 0 -104px rgba(255, 255, 255, .036), -140px -89px 0 -104px rgba(255, 255, 255, .949), 14px -130px 0 -104px rgba(255, 255, 255, .804), 38px 91px 0 -104px rgba(255, 255, 255, .421), 32px -55px 0 -104px rgba(255, 255, 255, .417), 40px 25px 0 -104px rgba(255, 255, 255, .35), -67px -29px 0 -104px rgba(255, 255, 255, .64), -91px 127px 0 -104px rgba(255, 255, 255, .242), 32px -39px 0 -104px rgba(255, 255, 255, .815), -36px 47px 0 -104px rgba(255, 255, 255, .434), 114px 98px 0 -104px rgba(255, 255, 255, .278), -117px 37px 0 -104px rgba(255, 255, 255, .481), -50px -113px 0 -104px rgba(255, 255, 255, .986), -19px -11px 0 -104px rgba(255, 255, 255, .254), -63px -77px 0 -104px rgba(255, 255, 255, .956), 134px -54px 0 -104px rgba(255, 255, 255, .941), 142px 106px 0 -104px rgba(255, 255, 255, .372), -75px -111px 0 -104px rgba(255, 255, 255, .092), 40px 67px 0 -104px rgba(255, 255, 255, .275), 69px 139px 0 -104px rgba(255, 255, 255, .13), -64px 55px 0 -104px rgba(255, 255, 255, .193), 132px 38px 0 -104px rgba(255, 255, 255, .859), -11px 83px 0 -104px rgba(255, 255, 255, .583), -88px 96px 0 -104px rgba(255, 255, 255, .821), -19px 18px 0 -104px rgba(255, 255, 255, .427), -128px 34px 0 -104px rgba(255, 255, 255, .367), 57px -93px 0 -104px rgba(255, 255, 255, .089), 40px -106px 0 -104px rgba(255, 255, 255, .004), -10px 21px 0 -104px rgba(255, 255, 255, .974), 136px -139px 0 -104px rgba(255, 255, 255, .335), -87px -100px 0 -104px rgba(255, 255, 255, .626), 126px -74px 0 -104px rgba(255, 255, 255, .341), 36px 22px 0 -104px rgba(255, 255, 255, .365), 118px 90px 0 -104px rgba(255, 255, 255, .482), 19px -41px 0 -104px rgba(255, 255, 255, .442), -11px -88px 0 -104px rgba(255, 255, 255, .448), -61px -71px 0 -104px rgba(255, 255, 255, .042), -140px -74px 0 -104px rgba(255, 255, 255, .769), -38px -113px 0 -104px rgba(255, 255, 255, .255), 61px -92px 0 -104px rgba(255, 255, 255, .353), 76px 139px 0 -104px rgba(255, 255, 255, .433), -113px -77px 0 -104px rgba(255, 255, 255, .756), -60px 103px 0 -104px rgba(255, 255, 255, .935), 84px 14px 0 -104px rgba(255, 255, 255, .932), 8px -142px 0 -104px rgba(255, 255, 255, .029), -138px 34px 0 -104px rgba(255, 255, 255, .766), 76px -143px 0 -104px rgba(255, 255, 255, .953), -1px 4px 0 -104px rgba(255, 255, 255, .907), 129px -34px 0 -104px rgba(255, 255, 255, .456), 135px 78px 0 -104px rgba(255, 255, 255, .646), -33px 35px 0 -104px rgba(255, 255, 255, .365), 49px 0 0 -104px rgba(255, 255, 255, .725), -66px -95px 0 -104px rgba(255, 255, 255, .314), -74px -96px 0 -104px rgba(255, 255, 255, .823), -35px -32px 0 -104px rgba(255, 255, 255, .882), 105px 29px 0 -104px rgba(255, 255, 255, .693), -54px -5px 0 -104px rgba(255, 255, 255, .302), 53px -139px 0 -104px rgba(255, 255, 255, .523), 30px -77px 0 -104px rgba(255, 255, 255, .882), -57px -10px 0 -104px rgba(255, 255, 255, .545), -23px -90px 0 -104px rgba(255, 255, 255, .528), -126px -134px 0 -104px rgba(255, 255, 255, .674), -39px 68px 0 -104px rgba(255, 255, 255, .157), 137px -101px 0 -104px rgba(255, 255, 255, .92), 36px 126px 0 -104px rgba(255, 255, 255, .232), 20px -127px 0 -104px rgba(255, 255, 255, .279), 43px 19px 0 -104px rgba(255, 255, 255, .118), 9px 34px 0 -104px rgba(255, 255, 255, .194), 74px -131px 0 -104px rgba(255, 255, 255, .699), 53px 115px 0 -104px rgba(255, 255, 255, .158), 76px 99px 0 -104px rgba(255, 255, 255, .565), 11px 25px 0 -104px rgba(255, 255, 255, .077), 74px -66px 0 -104px rgba(255, 255, 255, .92), 32px 139px 0 -104px rgba(255, 255, 255, .207), -50px 29px 0 -104px rgba(255, 255, 255, .743), 43px -67px 0 -104px rgba(255, 255, 255, .701), -35px 40px 0 -104px rgba(255, 255, 255, .417), -82px 89px 0 -104px rgba(255, 255, 255, .95), 126px -1px 0 -104px rgba(255, 255, 255, .376), 104px 38px 0 -104px rgba(255, 255, 255, .941), 98px -73px 0 -104px rgba(255, 255, 255, .5), -69px 108px 0 -104px rgba(255, 255, 255, .33), -104px 123px 0 -104px rgba(255, 255, 255, .347), -46px 10px 0 -104px rgba(255, 255, 255, .189), 32px -3px 0 -104px rgba(255, 255, 255, .074), -117px -109px 0 -104px rgba(255, 255, 255, .427), 118px 108px 0 -104px rgba(255, 255, 255, .547), 119px 47px 0 -104px rgba(255, 255, 255, .65), -144px -57px 0 -104px rgba(255, 255, 255, .477), -68px 88px 0 -104px rgba(255, 255, 255, .391), 92px 92px 0 -104px rgba(255, 255, 255, .835), 128px 27px 0 -104px rgba(255, 255, 255, .559), 67px -132px 0 -104px rgba(255, 255, 255, .63), 56px -34px 0 -104px rgba(255, 255, 255, .756), 65px -116px 0 -104px rgba(255, 255, 255, .669), -76px -97px 0 -104px rgba(255, 255, 255, .586), -113px -99px 0 -104px rgba(255, 255, 255, .175), -74px 12px 0 -104px rgba(255, 255, 255, .141), 84px -82px 0 -104px rgba(255, 255, 255, .362), -31px 138px 0 -104px rgba(255, 255, 255, .142), -127px 22px 0 -104px rgba(255, 255, 255, .702), 86px -90px 0 -104px rgba(255, 255, 255, .026), 126px 77px 0 -104px rgba(255, 255, 255, .882), -112px 80px 0 -104px rgba(255, 255, 255, .522), 38px 145px 0 -104px rgba(255, 255, 255, .928), -141px 97px 0 -104px rgba(255, 255, 255, .581), -32px 45px 0 -104px rgba(255, 255, 255, .983), 120px 89px 0 -104px rgba(255, 255, 255, .362), -35px 60px 0 -104px rgba(255, 255, 255, .445), -77px 133px 0 -104px rgba(255, 255, 255, .249), -130px -96px 0 -104px rgba(255, 255, 255, .483), -119px -85px 0 -104px rgba(255, 255, 255, .986), 143px -85px 0 -104px rgba(255, 255, 255, .656), 10px 46px 0 -104px rgba(255, 255, 255, .951), 53px -129px 0 -104px rgba(255, 255, 255, .608), -17px -61px 0 -104px rgba(255, 255, 255, .534), -106px 128px 0 -104px rgba(255, 255, 255, .978), 98px -57px 0 -104px rgba(255, 255, 255, .681), -51px -84px 0 -104px rgba(255, 255, 255, .517), 2px 121px 0 -104px rgba(255, 255, 255, .2), -89px 43px 0 -104px rgba(255, 255, 255, .887), 92px -89px 0 -104px rgba(255, 255, 255, .3), 122px -100px 0 -104px rgba(255, 255, 255, .986), 25px 112px 0 -104px rgba(255, 255, 255, .699), -107px 140px 0 -104px rgba(255, 255, 255, .883), -49px 85px 0 -104px rgba(255, 255, 255, .81), -112px -46px 0 -104px rgba(255, 255, 255, .296), 74px -22px 0 -104px rgba(255, 255, 255, .459), -75px -51px 0 -104px rgba(255, 255, 255, .578), -32px 13px 0 -104px rgba(255, 255, 255, .903), -27px -10px 0 -104px rgba(255, 255, 255, .741), 78px -52px 0 -104px rgba(255, 255, 255, .982), -58px -44px 0 -104px rgba(255, 255, 255, .587), 72px 130px 0 -104px rgba(255, 255, 255, .781), 129px -13px 0 -104px rgba(255, 255, 255, .03), -40px 18px 0 -104px rgba(255, 255, 255, .956), -99px 75px 0 -104px rgba(255, 255, 255, .786), 50px -115px 0 -104px rgba(255, 255, 255, .668), 125px 26px 0 -104px rgba(255, 255, 255, .71), -86px -106px 0 -104px rgba(255, 255, 255, .826), -63px 126px 0 -104px rgba(255, 255, 255, .008), 133px 59px 0 -104px rgba(255, 255, 255, .21), -114px 144px 0 -104px rgba(255, 255, 255, .424)
}

.pluto {
    height: 780px;
    width: 780px;
    margin-top: -450px;
    margin-left: -320px;
    animation: 7439.70741s linear infinite orb
}

.pluto:before {
    height: 3px;
    width: 3px;
    background: #fff;
    margin-top: -1.5px;
    margin-left: -1.5px
}

@keyframes orb {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

.contact>h2 {
    margin-bottom: 80px
}

form {
    display: flex;
    flex-direction: column;
    padding: 3vw 4vw;
    width: 90%;
    max-width: 600px;
    background: 0 0;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .3), inset 0 0 10px #000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, .3);
    position: absolute
}

form :is(input, textarea) {
    border: 0;
    margin: 20px 0;
    padding: 20px;
    outline: 0;
    font-size: 16px;
    border-radius: 16px;
    color: #fff;
    box-shadow: inset 0 0 8px 0 #000;
    resize: vertical;
    background: 0 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(5px)
}

form button {
    padding: 15px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    width: 150px;
    margin: 20px auto 0;
    border-radius: 16px !important
}


/* -------------------contact----------------- */

/* -------------------footer----------------- */
footer {
    width: 100dvw;
}

.footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 4rem 2em;
    background: linear-gradient(45deg, #9c0fb5, var(--main_color) 30%, var(--secon_bg) 30%);
    box-shadow: inset 0 0 10px 0 #000
}

.footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.footer>ul>li>p>span {
    color: var(--text_color)
}

.footer>ul>li>p:hover span {
    color: var(--main_color);
    transform: scale(1, 1)
}

.footer-text p {
    font-size: 2rem
}

.footer-links {
    display: flex;
    flex-wrap: wrap
}

.footer-links li {
    margin-left: 2rem
}

.footer-links li img {
    width: 30px
}

.footer-icons {
    width: fit-content;
    display: flex
}

.footer-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--main_color);
    align-items: center;
    justify-content: center;
    display: flex;
    margin-right: 14px;
    transition: all 1s ease-in-out;
}

.footer-icons a:hover {
    background: linear-gradient(-45deg, var(--pink), var(--main_color));
}

.footer-icons a>i,
.footer-icons a>p {
    color: white;
    font-size: 120%;
}

.footer-icons a>p {
    font-size: 165%;
    font-weight: bold;
}

.footer-icons a>p span {
    color: white;
    margin-left: 1.3px;
}

/* -------------------footer----------------- */



/* -------------------scroll_btn----------------- */
.to-top {
    position: fixed;
    right: 32px;
    bottom: 100px;
    opacity: 0;
    transition: .4s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1111;
    width: fit-content;
    height: fit-content;
}

.to-top:hover {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
    animation: vibrate-1 0.3s linear infinite both;

}

.to-top i:first-child {
    transform: rotate(-90deg);
    filter: drop-shadow(1px 2px 3px black);
    font-size: 30px;
    color: var(--main_color);
}

.to-top i:nth-child(2) {
    transform: rotate(-180deg);
    filter: drop-shadow(1px 2px 3px black);
    font-size: 18px;
    color: var(--pink);
    position: absolute;
    bottom: -25px;
    opacity: 0;
}

.to-top:hover i:nth-child(2) {
    opacity: 1;
}

.to-top.active {
    bottom: 15%;
    pointer-events: auto;
    opacity: 1
}

@-webkit-keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

@keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}


/* ----------------custom-scroll-bar------------------ */
::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background-color: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(-450deg, var(--pink), #014661);
    border-radius: 25px
}

/* ----------------custom-scroll-bar------------------ */

@keyframes water {

    0%,
    100% {
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%)
    }

    50% {
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%)
    }
}



/* ----------------responsive------------------ */
@media (max-width:575.98px) {
    .slide>.slider-box>h1 {
        font-size: 200%;
    }

    .about-content p {
        font-size: .9rem
    }

    .btn-box {
        width: fit-content;
        height: fit-content;
        margin: 0
    }

    .btn-box .btn {
        width: 15rem;
        height: 5rem;
        margin-bottom: 1em
    }

    .home-content h1 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.3;
        width: fit-content;
        height: 200px
    }

    .home-content p {
        font-size: 1em;
        line-height: 1.2em
    }

    .filter-button-w {
        width: 100%
    }

    .filter-button-w>button {
        margin: .2em .1em;
        font-size: 10px
    }

    .work-list {
        width: 95vw
    }

    .work {
        width: 90% !important;
        margin: .6em 0
    }

    .progress-card h5 {
        font-size: 1.4rem
    }

    .progress-circle {
        width: 18rem;
        height: 18rem
    }

    .progress-content {
        width: 15.6rem;
        height: 15.6rem
    }

    .progress {
        width: 18rem;
        height: 17rem
    }

    .skills>h2 {
        padding-top: 1em !important
    }

    .pg-container {
        padding: 2rem 0 8rem
    }

    .heading {
        font-size: 4rem
    }

    .work {
        height: 300px
    }

    .slide {
        height: 400px;
        width: 80vw;
        padding-top: 50px
    }

    .contact .heading {
        font-size: 30px;
    }

    .sparkle-button {
        font-size: 1rem;
    }

    form {
        width: 80dvw;
        padding: 30px 10px;
    }

    form :is(input, textarea) {
        padding: 14px;
        font-size: 10px;
        margin: 8px 0;
    }

    form button {
        padding: 10px;
        font-size: 10px;
        width: 150px;
        margin: 10px auto 0;
    }


}

@media (max-width:767.98px) {

    .navbar ul,
    .navbar ul li a {
        height: 100%
    }

    .about {
        padding: 10em 1em
    }

    .heading,
    .home-content h1 {
        font-size: 4rem
    }

    .home-content p {
        font-size: 1.2em;
        line-height: 1.6em
    }

    .footer-icons a {
        margin: 6px 4px;
        width: 30px;
        height: 30px;
    }

    .footer-icons a>p {
        font-size: 150%;
    }

    .footer-icons {
        display: flex;
        flex-wrap: wrap
    }

    .toggle {
        display: flex
    }

    .indicator {
        width: 56px;
        height: 56px;
        transform: translateX(15%) !important;
        border: 0px solid
    }

    .navbar {
        right: 2%;
        top: 80px;
        position: absolute;
        width: 70px;
        height: 450px;
        background-image: linear-gradient(to bottom right, #112e42, rgba(0, 0, 0, 0.4));
        display: none;
    }

    .navbar ul {
        display: block;
        width: 100%
    }

    .navbar ul li.active a .icon {
        transform: translateY(22px)
    }

    .navbar ul li:first-child.active~.indicator {
        transform: translateX(1px);
        top: 5%
    }

    .navbar ul li:nth-child(2).active~.indicator {
        transform: translateX(1px);
        top: 21%
    }

    .navbar ul li:nth-child(3).active~.indicator {
        transform: translateX(1px);
        top: 36%
    }

    .navbar ul li:nth-child(4).active~.indicator {
        transform: translateX(1px);
        top: 52%
    }

    .navbar ul li:nth-child(5).active~.indicator {
        transform: translateX(1px);
        top: 68%
    }

    .navbar ul li:nth-child(6).active~.indicator {
        transform: translateX(1px);
        top: 83%
    }

    .about-img {
        position: relative;
        width: 14rem;
        height: 14rem !important;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .about-img .circle-spin {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border-top: 5rem solid var(--bg);
        border-bottom: 1rem solid #663399;
        border-left: .1rem var(--main_color);
        border-right: .5rem var(--main_color);
        animation: 6s linear infinite circle
    }
}