html, body {
    overflow: hidden;
    height: 100%;
    text-rendering: optimizeLegibility;
}
.brainContainer{
    width:19vw;
    height:19vw;
    overflow:hidden;
    cursor:pointer;
    z-index: 0;
    border-radius: 50%;
    position: absolute;
    left: 17.25%;
    top: 28%;
    transition: z-index 0.1s ease;
}
.brain-card {
    height: 100%;
}
.neumorphic-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.1), -8px -8px 20px rgba(255, 255, 255, 0.7);
    height: 30vw;
    width:100%
}


.white-section, .black-section {
    width: 50%; /* Adjust as needed */
    height: 100%;
    overflow: hidden;
    transition: transform 1s ease;
}
.banner-bw-button-layer-white, .banner-bw-button-layer-black {
    width: 50%; /* Adjust as needed */
    height: 100%;
    overflow: hidden;
    transition: transform 1s ease;
}

.banner-bw-button-layer-white {
    background-color: transparent;
    z-index: 5 !important;
}
.banner-bw-button-layer-black {
    background-color: #131419 !important;
    z-index: 5 !important;
}
.white-section1 {
    background-color: #ededed;
    z-index: 1;
}
.black-section1 {
    background-color: #131419;
    z-index: 0;
}
.white-section2 {
    background-color: #131419;
}

.black-section2 {
    background-color: #ededed;
}

.white-section .circle {
    background: linear-gradient(145deg, #d7d7d7, #ffffff);
    box-shadow: 8px 8px 16px #cbcbcb57, -8px -8px 16px #ffffff6e;
    padding: 2vw 1.5vw 1.3vw 2vw;
    width: 22vw;
    height: 22vw;
    position: relative;
    left: 0;
    top: 23%;
    z-index: 2;
    margin-top: 15%;
    transition: background 2s ease-in-out;
}

div.circle,
div.circle_black {
    display: flex;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
div.circle_black {
    position: relative;
    width: 150px; /* Adjust circle size */
    height: 150px; /* Adjust circle size */
    border-radius: 50%;
    background-color: #131419;
    box-shadow: inset 16px -38px 39px #292929cf, 10px 6px 90px #717171db;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div.circle_black:hover .heart {
    transform: scale(1.1); /* Example of scaling effect on hover */
}

div.circle:before {
    box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff;
}
div.circle_black:before {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5),
    -8px -8px 20px rgba(255, 255, 255, 0.2);
}
div.circle:hover:before {
    box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff,
    inset -8px -8px 20px #fff, inset 8px 8px 20px #a9a8b7;
}
div.circle_black:hover:before {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5),
    -8px -8px 20px rgba(255, 255, 255, 0.2),
    inset 8px 8px 20px rgba(0, 0, 0, 1),
    inset -8px -8px 20px rgba(255, 255, 255, 0.2);
}
div.circle:hover:before,
div.circle_black:hover:before {
    transition: 0.3s ease-in;
    transform: scale(1.05);
}
div.circle p,
div.circle_black p {
    position: relative;
    z-index: 5;
    user-select: none;
    cursor: pointer;
}
div.circle_black {
    color: white;
}
@media (max-width: 700px) {
    .neumorphic-card {
        width: 100%;
    }
}
path{
    fill:transparent;
}
.brainPath{
    stroke:#00ff00;
    stroke-width:1;
}
.brainCircle{
    stroke:#00FF00;
    fill:#00FF00;
}
.brainRect{
    stroke:#00FF00;
    fill:#00FF00;
}
.brainEllipse{
    stroke:#00FF00;
    fill:#00FF00;
}
.animatePaths{
    animation: goPath 3000ms alternate infinite;
}
.animateCircles{
    animation: goCircle 3000ms alternate infinite;
}
.animateRects{
    animation: goRect 3000ms alternate infinite;
}
@keyframes goPath {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes goRect {
    to {
        opacity:0;
    }
}
@keyframes goCircle {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
canvas {
    display: block;
}
#particles-js {
    width: 50%;
    height: 100%;
    background: transparent;
    position: fixed;
    opacity: 0.2;
    z-index: 0;
    left: 50%;
}
#particles-js-w {
    background: transparent;
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0;
    z-index: 0;
}
.particles-js-canvas-el {
    z-index: 1;
    position: relative;
    background-color: transparent;
}
.particles-js-w .particles-js-canvas-el {
    z-index: 0;
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
}
.black-section .circle {
    border-radius: 50%;
    background-color: #131419;
    box-shadow: inset 8px 8px 16px rgba(38, 38, 38, 0.2), inset -8px -8px 16px rgba(43, 43, 43, 0.7);
    z-index: 2;
    transition: box-shadow 1s ease;
    width: 25vw;
    height: 25vw;
    opacity: 0.85;
    margin-top: 2%;
    position: relative;
}

.black-section-splash {
    right: 0;
    top: 0;
}
.white-section-splash {
    left: 0;
    top: 0;
}
#heart {
    width: 100vw;
    height: 50vw;
    max-height: 100%;
    opacity: 1;
    position: relative;
    right: -6%;
    top: -28%;
}
.toptext-brain {
    position: absolute;
    top: 7%;
    left: 34.5%;
    z-index: 1;
    font-size: 5.5vw;
    width: 30%;
}
.middletext-brain {
    position: absolute;
    left: 37.2%;
    z-index: 1;
    font-size: 7vw;
    width: 25%;
    bottom: -210%;
}
.bottomtext-brain {
    position: absolute;
    z-index: 1;
    bottom: -245%;
    font-size: 2vw;
    font-weight: 600;
    left: -0.2%;
    width: 100%;
}

.heart-container {
    position: relative;
    width: 146%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    top: 54%;
    left: 47%;
    padding: 0 0 3% 3px;
    box-shadow: none;
    border-radius: 50%;
    transition: width 1s ease, border-radius 1s ease, box-shadow 1s ease;
    translate: -39% -40%;
}

.heart-container:hover {
    position: relative;
    box-shadow: none;
    transition: width 1s ease, border-radius 1s ease, box-shadow 1s ease;
    translate: -39% -40%;
}


.heart,
.new-image-container img {
    width: 100%; /* Ensure heart fills container */
    height: auto;
    transition: all 0.3s ease; /* Adjust transition speed */
    opacity: 1;
    z-index:3;
}
/* Adjustments for hover effect if needed */
.glow-red {
    animation: pulseGlowRed 5s infinite;
}

.glow-white {
    animation: pulseGlowWhite 3s infinite;
}
.glow-purple {
    animation: pulseGlowPurple 3s infinite;
}
/* Define other glow animations as needed */

@keyframes pulseGlowRed {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.0);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.8;
    }
}

@keyframes pulseGlowWhite {
    0% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px rgba(255, 255, 255, 1));
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
        opacity: 0.8;
    }
}

@keyframes pulseGlowPurple {
    0% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 40px rgba(84, 36, 88, 0.8));
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 40px rgba(120, 72, 124, 1));
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        filter: drop-shadow(0 0 40px rgba(84, 36, 88, 0.8));
        opacity: 0.8;
    }
}
/* Add other styles for different effects */
.heart1 {
    translate: -2% -1%;
    width: 23vw !important;
}

.heart3 {
    translate: -3% -4%;
}
.heart5 {
    translate: -3% -4%;
}
.heart6 {
    translate: 0.5% -6%;
}
.heart7 {
    width: 21vw !important;
    translate: -4% -4.5%;
}
.heart10 {
    translate: 2% 1%;
    width: 25vw !important;
}

.heart12 {
    width: 23.5vw !important;
    translate: -0.5% -5%;
}
.heart13 {
    width: 21vw !important;
    translate: -4% -7%;
}
.heart16 {
    width: 21.5vw !important;
    translate: -3% -5%;
}
.heart20 {
    width: 21.5vw !important;
    translate: -3.5% -4%;
}
.heart22 {
    width: 21.5vw !important;
    translate: -4% -6%;
}
.heart23 {
    width: 21vw !important;
    translate: -6% -9%;
}
.heart24 {
    width: 21vw !important;
    translate: -5% 1%;
}
.heart25 {
    translate: -5% -6%;
    width: 21.5vw !important;
}
.heart26 {
    width: 21.5vw !important;
    translate: -3.5% -6%;
}
.heart28 {
    left: -1.5%;
    translate: -0.5% -4%;
}

.button-container {
    width: 50%;
    height: 100%;
    z-index: 2;
    left: -1px;
    top: 6%;
}

.button-left,
.button-right {
    position: absolute;
    width: 50%;
    height: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    z-index: 1;
}
.banner-bw-button-layer-left,
.banner-bw-button-layer-right {
    position: relative;
    width: 90%;
    height: auto;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}
.button-left {
    left: 7%;
    background: #ededed;
    box-shadow: 6px 6px 25px #bebebea8, -6px -6px 12px #fff;
    border-radius: 15% 15% 40% 40%;
    padding: 7% 0 10% 0;
    text-align: center;
    position: absolute;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    z-index: 1;
}

.button-right {
    background: #000;
    color: #fff;
    box-shadow: 0 1vw 2vw #262626a3, 1vw 1vw 2vw #090909, 0 0 1vw #1818188a;
    border-radius: 40% 40% 15% 15%;
    padding: 7% 0 10% 0;
    transition: border-radius 2s ease;
    top: 6%;
}
.button-right:hover {
    border-radius: 15%;
    transition: border-radius 2s ease;
}
.button-left:focus,
.button-right:focus {
    outline: none;
}
.letter-spacing-3 {
    letter-spacing: 0.3vw;
}
.letter-spacing-2 {
    letter-spacing: 0.2vw;
}
.letter-spacing-1 {
    letter-spacing: 0.1vw;
}
.word {
    font-family: 'Dosis', sans-serif;
    perspective: 1000px;
}
.register {
    left: 36%;
    position: relative;
    top: 12%;
    transition: color 1s ease;
}
.register:hover {
    color: #a6831c;
}
.clickto {
    position: relative;
    top: 80%;
    left: 33.5%;
    transition: color 1s ease;
}
.clickto:hover {
    color: red;
}
.word span {
    cursor: pointer;
    display: inline-block;
    font-size: 3vw;
    user-select: none;
    line-height: .8;
    letter-spacing: 0.3vw;
}
.word span:nth-child(6).active {
    animation: balance 1.5s ease-out;
    transform-origin: top left;
}
.word span:nth-child(1).active {
    animation: oppositebalance 1.5s ease-out;
    transform-origin: top right;
}
@keyframes oppositebalance {
    0%, 100% {
        transform: rotate(0deg);
    }

    30%, 60% {
        transform: rotate(45deg);
    }
}
@keyframes balance {
    0%, 100% {
        transform: rotate(0deg);
    }

    30%, 60% {
        transform: rotate(-45deg);
    }
}

.word span:nth-child(2).active {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
}

@keyframes shrinkjump {
    10%, 35% {
        transform: scale(2, .2) translate(0, 0);
    }

    45%, 50% {
        transform: scale(1) translate(0, -150px);
    }

    80% {
        transform: scale(1) translate(0, 0);
    }
}
.word span:nth-child(5).active {
    animation: shrinkjumpbottom 1s ease-in-out;
    transform-origin: bottom center;
}
@keyframes shrinkjumpbottom {
    10%, 35% {
        transform: scale(2, .2) translate(0, 0);
    }

    45%, 50% {
        transform: scale(1) translate(0, 50px);
    }

    80% {
        transform: scale(1) translate(0, 0);
    }
}
.word span:nth-child(3).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
}

@keyframes falling {
    12% {
        transform: rotateX(240deg);
    }

    24% {
        transform: rotateX(150deg);
    }

    36% {
        transform: rotateX(200deg);
    }

    48% {
        transform: rotateX(175deg);
    }

    60%, 85% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

.word span:nth-child(4).active {
    animation: rotate 1s ease-out;
}

@keyframes rotate {
    20%, 80% {
        transform: rotateY(180deg);
    }

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

.word span:nth-child(7).active {
    animation: toplong 1s linear;
}

@keyframes toplong {
    10%, 40% {
        transform: translateY(-20vh) scaleY(1);
    }

    90% {
        transform: translateY(-20vh) scaleY(4);
    }
}
.fixed {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}
.element {
    transition: border-radius 2s ease-out, box-shadow 2s ease-out;
}
.text-element {
    transition: width 2s ease-out, height 2s ease-out;
}
.text-zero {
    transition: font-size 0.3s ease-out;
}
.text-full {
    transition: font-size 1.5s ease-out;
}
.resize-buttons-container {
    width: 10%;
    height: 10%;
}
.changed-border-radius-1 {
    border-radius: 3vw 7vw 7vw 3vw;
}

.changed-border-radius-2 {
    border-radius: 7vw 3vw 3vw 7vw;
    box-shadow: 6px 6px 16px #333, 6px 6px 16px #35353500
}
.font-zero {
    font-size: 0 !important;
}
.font-full {
    font-size: 2vw !important;
}
.buttons-container-move {
    transition: left 0.3s ease-out, top 2s ease-out;
}
.toggle-visibility {
    transition: visibility 0.1s ease-out, opacity 1s ease-out;
}
.move-buttons-container {
    left: 45%;
    top: 36.5%;
    visibility: hidden;
    opacity: 0;
}
.move-word1 {
    top: 39%;
    left: 27%;
}
.button-visible1 {
    visibility: visible !important;
    opacity: 1 !important;
}
.button-invisible1 {
    visibility: hidden !important;
    opacity: 0 !important;
}
.button-invisible2 {
    visibility: hidden !important;
    opacity: 0 !important;
}
.button-visible2 {
    visibility: visible !important;
    opacity: 1 !important;
}
.move-word2 {
    top: 37%;
    left: 17%;
}
.word-move1 {
    transition: left 0.3s ease-out, top 2s ease-out;
}
.word-move2 {
    transition: left 0.3s ease-out, top 2s ease-out;
}
.button-left svg {
    top: 25%;
    position: absolute;
    left: 27%;
    color: initial;
    height: 1.5vw;
    width: 1.5vw;
}
.button-right svg {
    top: 0;
    position: relative;
    left: 0;
    height: 18.5vw;
    width: 18vw;
    opacity: 0.7;
}
.button-white-icon {
    visibility: hidden;
    opacity: 0;
}
.button-black-icon {
    visibility: hidden;
    opacity: 0;
}
.brain-card {
    height: 30vw;
}
.bottomtext-brain-left {
    position: relative;
    right: -20%;
}
.bottomtext-brain-right {
    position: relative;
    left: 27%;
}
.cardbody-brain {
    height: 30vw;
}
#textzero14 {
    top: 86%;
    font-weight: 600;
    left: 27%;
    position: initial;
    margin-top: 10%;
    padding-left: 1.5%;
    z-index: 3;
}
#textzero15 {
    font-weight: 600;
    left: 27%;
    position: initial;
    margin-top: 6%;
}

.glassmorphism-effect {
    background: rgba( 255, 255, 255, 0.10 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
    -webkit-backdrop-filter: blur( 4px ) !important;
    backdrop-filter: blur( 4px ) !important;
    border-radius: 16px !important;
    border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
}
#glassdiv {
    width: 100%;
    left: 5%;
    top: 6%;
    height: 88%;
}
.sidebar-wrapper, .header-wrapper, .page-header, .footer {
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
}
.splash {
    padding: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
}
.page-wrapper {
    position: absolute
}
#element3 {
    position: fixed;
}

.heart {
    width: 22vw;
}
.button-left .button-glass-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 1s ease, border-radius 1s ease;
    translate: -39% -40%;
    background: linear-gradient(145deg, #d7d7d7, #ffffff);
    box-shadow: 8px 8px 16px #cbcbcb57, -8px -8px 16px #ffffff6e;
    padding: 2vw 1.5vw 1.3vw 2vw;
    width: 25vw;
    height: 100%;
    position: absolute;
    left: 42%;
    top: 37%;
    z-index: 0;
    margin-top: 10%;
    transform: scale(0);
    opacity: 0;
}

.button-left:hover .button-glass-cover {
    left: 43.5%;
    top: 31.5%;
    border-radius: 1vw;
    height: 92%;
    width: 65.5%;
    transform: scale(1);
    z-index: 2;
    opacity: 0.35;
}
.button-left .heart-container-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 1s ease, border-radius 1s ease;
    translate: -39% -40%;
    background: linear-gradient(145deg, #d7d7d7, #ffffff);
    box-shadow: 8px 8px 16px #cbcbcb57, -8px -8px 16px #ffffff6e;
    padding: 2vw 1.5vw 1.3vw 2vw;
    width: 25vw;
    height: 25vw;
    position: absolute;
    left: 41%;
    top: 46%;
    z-index: 3;
    opacity: 0.4;
    transform: scale(1);
}
.button-left:hover .heart-container-highlight {
    transform: scale(0);
    z-index: 3;
    box-shadow: 8px 8px 16px #cbcbcb57, -8px -8px 16px #ffffff6e;
    opacity: 0.5;
    transition: transform 1s ease;
}
.white-section-login-text {
    font-size: 0.85vw;
    z-index: 3;
    position: relative;
}
.white-section .button-left:hover .circle {
    background: linear-gradient(315deg, #d7d7d7, #ffffff);
    box-shadow: 8px 8px 16px #cbcbcb57, -8px -8px 16px #ffffff6e;
    transition: transform 1s ease, border-radius 1s ease;
}
.black-section .button-container {
    left:51%;
}

.button-right:hover #scene {
    z-index: 0;
}
.button-right .button-glass-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    translate: -39% -40%;
    background: linear-gradient(145deg, #d7d7d7, #ffffff);
    position: absolute;
    left: 42%;
    top: 37%;
    border-radius: 50%;
    transition: transform 1s ease, border-radius 1s ease;
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(255, 255, 255), rgba(255,0,0,0));
    box-shadow: inset 8px 8px 16px #cbcbcb57, inset -8px -8px 16px #ffffff6e;
    padding: 2vw 1.5vw 1.3vw 2vw;
    width: 22vw;
    height: 22vw;
    z-index: 3;
    margin-top: 12.5%;
    transform: scale(1);
    opacity: 0.1;
}


.button-right-highlight {
    right: 0;
    background: #000;
    color: #fff;
    box-shadow: 6px 6px 16px #262626a3, 6px 6px 16px #090909;
    border-radius: 40% 40% 15% 15%;
    padding: 7% 0 10% 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.2;
    z-index: 0;
}
.black-section-register-text {
    font-size: 0.85vw;
    z-index: 3;
    position: relative;
}

.button-right:hover .button-glass-cover {
    border-radius: 1vw;
    height: 92%;
    width: 65.5%;
    transform: scale(1);
    z-index: 3;
    left: 42.5%;
    top: 30%;
    opacity: 0.35;
}
.button-right:hover .brainContainer {
    z-index: 3;
    transition: z-index 0.1s ease;
}
.black-section .button-right:hover .circle {
    box-shadow: none;
    transition: box-shadow 1s ease;
}

.button-left:hover {
    box-shadow: 6px 6px 25px #bebebea8, -6px -6px 12px #fff;
    border-radius: 15% 15% 15% 15%;
    transition: box-shadow 1s ease, border-radius 2s ease;
}
.central-section {
    position: relative;
    z-index: 10;
    border-radius: 50%;
    background-color: transparent;
    /* box-shadow: 0 0 4px rgba(255,255,255, 1), 0 0 4px rgba(0,0,0, 1); */
    width: 60% !important;
    height: auto;
    left: 0;
    top: 12%;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.blackhole {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.bg-50-white {
    left: 0;
    background-color: #ededed !important;
    top: 0;
}
.bg-50-black {
    left: 50%;
    transform: none !important;
    top: 0;
    background-color: #131419;
}
.splash-word1 {
    opacity: 0.95;
    position: relative;
    top: 0;
    left: 0;
}
.splash-word2 {
    opacity: 0.75;
    left: 0;
    margin-top: 8%;
    z-index: 3;
    position: relative;
}

.splash-word1 span {
    text-shadow: 0 2.5vw 0.3vw rgba(0, 0, 0, 0.15)
}
.splash-word2 span {
    text-shadow: 0 -2.5vw 0.3vw rgba(255, 255, 255, 0.4)
}
.blackhole-container img {
    max-width: 100%;
    height: auto;
}

.blackhole6, .blackhole28, .blackhole7, .blackhole9, .blackhole10, .blackhole12, .blackhole17, .blackhole18, .blackhole26, .blackhole37, .blackhole33  {
    left: 0.3%;
}
.blackhole16, .blackhole19, .blackhole21, .blackhole8, .blackhole25, .blackhole28, .blackhole41, .blackhole44, .blackhole45, .blackhole58, .blackhole70, .blackhole38 {
    left: 0.2%;
}
.blackhole34, .blackhole51 {
    left: 0.4%;
}
.blackhole35, .blackhole16, .blackhole39, .blackhole56, .blackhole57, .blackhole67, .blackhole80, .blackhole68, .blackhole62, .blackhole77, .blackhole30, .blackhole60, .blackhole75  {
    left: 0.1%;
}
.blackhole47, .blackhole74  {
    left: -0.4%;
}
.blackhole43  {
    left: -0.8%;
}
.blackhole46  {
    left: -0.7%;
}
.blackhole53, .blackhole73, .blackhole13, .blackhole52, .blackhole63, .blackhole64, .blackhole69, .blackhole11, .blackhole31, .blackhole76 {
    left: 0;
}
.blackhole54  {
    left: 0.5%;
}
.blackhole55, .blackhole79  {
    left: -0.2%;
}
.blackhole72, .blackhole84  {
    left: -0.5%;
}
.blackhole59, .blackhole65, .blackhole83 {
    left: 0.7%;
}
.blackhole78 {
    left: -0.1%;
}
.image-shadow-layer {
    position: absolute;
    height: 100%;
    width: 100%;
    box-shadow: inset 0 0 1vw rgb(0, 0, 0), inset 0 0 1vw rgb(0, 0, 0);
    z-index: 1;
    border-radius: 50%;
}

.blackhole-container:hover .logo-splash {
    position: absolute;
    height: 12.5vw;
    width: 12.5vw;
    box-shadow: inset 0 0 2vw rgb(255 255 255), inset 0 0 2vw rgb(0, 0, 0), 0 0 17px rgb(255 255 255 / 37%), 0 0 18px rgba(0, 0, 0, 1);
    z-index: 23;
    border-radius: 50%;
    left: 23%;
    bottom: -12.5vw;
    opacity: 0;
    background-color: white;
}
/* Initial states */
.logo_splash {
    width: 80%;
    top: -95%;
    left: 23%;
    opacity: 0;
    box-shadow: 0 0 17px rgba(255, 255, 255, 0.37), 0 0 18px rgba(0, 0, 0, 1);
    border-radius: 50%;
    z-index: 16;
    transition: opacity 1s;
}

.logo_splash_container {
    width: 80%;
    z-index: 0;
    top: -80%;
    position: absolute;
    left: -2%;
}

.logo-splash-layer {
    position: absolute;
    height: 12.5vw;
    width: 12.5vw;
    box-shadow: inset 0 0 2vw rgb(139, 139, 139), inset 0 0 2vw rgb(5, 0, 47), 0 0 1vw rgba(255, 255, 255, 0.37), 0 0 0.5vw rgba(26, 0, 205, 0.64), -0.5vw 0vw 2.5vw rgba(0, 2, 72, 0.82), 0.5vw 0vw 0.5vw rgba(96, 96, 96, 0.25), 0.5vw 0vw 0.5vw rgba(0, 2, 72, 0.85);
    z-index: 23;
    border-radius: 50%;
    left: 23%;
    bottom: -12.5vw;
    opacity: 1; /* Default opacity for logo-splash-layer */
    background-image: radial-gradient(rgb(255, 255, 255), rgb(0, 182, 255));
    transition: opacity 1s;
}

.pngLights {
    position: absolute;
    z-index: 2;
    width: 100%;
    top: -55%;
    left: -0.5%;
    opacity: 0.5; /* Default opacity for pngLights */
    transition: opacity 1s;
}

.lightray {
    width: 117%;
    z-index: 2;
    top: -55%;
    left: -5%;
}

/* Hover states */
.central-section:hover .pngLights,
.central-section:hover .lightray {
    opacity: 1; /* Change opacity of pngLights and lightray on hover */
}


.central-section:hover .logo_splash_container .logo-splash-layer {
    opacity: 0; /* Fade out wrap and its children on hover */
}

.central-section:hover .logo_splash {
    opacity: 1; /* Fade in logo_splash on hover */
}
.gohome {
    position: absolute;
    bottom: -20%;
    font-weight: 600;
    font-size: 1vw;
    left: 0;
    transition: color 1s ease;
}
#textzero16 {
    color: white;
    transition: color 2s ease; /* Smooth transition for color change */
}

#textzero16:hover {
    background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet, red);
    background-size: 200% auto; /* 200% width, auto height */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 10s linear infinite; /* Adjust duration as needed */
    transition: background 2s ease; /* Smooth transition for background change */
}

@keyframes rainbow {
    0% {
        background-position: 0 center;
    }
    100% {
        background-position: 200% center; /* Double the width for seamless looping */
    }
}
.go-home-text1 {

    color: initial;
}
.go-home-text2 {

}