ExploreUniverse.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px red solid; */

}

a:active,
a:visited,
a:link {
    color: rgb(255, 255, 255);
    text-decoration: none;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* cursor falcon space x */
[id^=root],
[id^=docs],
.cc_cursor,
body,
.ogdlpmhglpejoiomcodnpjnfgcpmgale_default,
body,
html,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input::-webkit-contacts-auto-fill-button,
input:read-only {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA5tJREFUWEft1l1IW2cYB/B/PvyoNrZobJUlu5EtSrtOmOyibUJgdmXmPW7CMFiMRlB2EgLFrrDCILa1m9Di2s2S0JXVrmMYb+Y85wUd/UAKo164Qtc1bO4i07jGrqaORJ2pxrecoDBYt5zExKudqwN53+f55Tn/8yYKQsjRqqqqC4FAAMvLy82U0q+xhZeC53nWYmuBXq8HA4PT6ZyllJZvlUHhdDoZ/54DAENxcQnKynejoaFhQRRFzVYgFISQlc8+7VMvLi5CU6RBfl4eduzcgcbGxquiKLZlGyEBrNeufeV7/MdjLCwsQKfXQaVUYvLXSfT09OwVRfFBNhEKqbjdbmdnz56DhAiH52AwGLCtYBu63F04f+F8Yk22rkTxurq6MrvdHtq//wDmn8wj9jQGMIZhYRjd3d3ZB0gIjuM+vPLFlTPRaBShUAjFJSXQ6V5AU1PTKqU0J6sT2ChOCAmaTCady+VCMDgDtUqFvPw88DyfNcQ/xms2m9VGo3HlxAcnMDExgc5jncjNzYVWq62llN7M9CSe+3wtFsthq9U66na7E/0qKioQj8el25yxsbHVTCL+NWCEkOuRSKR2amoKKpUKOeocGCoNq4IgZDQP/5lwjuNWpqen1T7fYAKwXVOIjo6OUVEU38rUFJK+Yvte2cfujN/B7dHrUH5yGUvH29Hf339QEITvM4FICiCEvOFyuW4U/TCJQmMNyitfwskuNzxeb9K9coCyinAcN/T5pUvvxONriESiifOh2dackTzIAkjfhBDy16BvMN91+Tu8f3gvynYVo62tbdN5kA2QEA6Hg/X29uKbsbsw7nkRfv8DeL3eTeUhJQDHcXva29t/MhpNOO27De71lzH8pQc/3r+f9vmQEmD9N6Pf4/HY703P49GTP/Gu6VXYbLa085AyYB0RHRgY2D47+whr8TWU7tJKiBuU0kNykv/3NWkBzGbzztjy0/lbt24iEPgNBYUF+PijM3gYCp2klJ5KBZEWQGpQX19vsFqtP1vqLJiZ+R28g0dRkQaMMf3IyMiMXETagPVHcS4YDB7v7DyGmtdqcOjNWlRXV2NpaUl2KDcF2Dgf/H5/fmtLK4a+HUI4HE4gRFGUVVvWomTjJISw8fFxxGKxxH+HI01H0HexT1ZtWYuSASwWS+vcXPgqoEBpqRZKpaJSEIRfku2TPs8IYD0PbzPGLlJK9XIab6zJGCCVpps+B9Jt9rx9/0/gGXO0VjCFXIBIAAAAAElFTkSuQmCC) 1 1, auto !important;
}

[role^=button],
button,
.cc_pointer,
[type="search"]::-webkit-search-cancel-button,
a,
select,
[type="search"]::-webkit-search-decoration,
.paper-button,
.ytp-progress-bar-container,
input[type=submit],
:link,
:visited,
a>*,
button,
::-webkit-scrollbar-button,
.ogdlpmhglpejoiomcodnpjnfgcpmgale_pointer,
::-webkit-file-upload-button,
button,
.ytp-volume-panel,
#myogdlpmhglpejoiomcodnpjnfgcpmgale .icon {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA15JREFUWEe9lm9IE2Ecx78DxUU2LF020wVlK6EXNfHdIqn1R7qTymnkeuELzVcV9UK2XGyi5IIi2oISWdIgL4gsfZ7ai3oh1MugMI+CjMhzaritDPP8g7u44V5I6vZidwf35u6e7/P9fT/3+91pAKC2tlbS6/UQBKGREBKQr6l1aFiWfdt5w2vRarWIRCPo6Gg/Tyl9rKYBqfOGFwsL8zAUFeFhIIBWV6tGNQM2m03ydnoRi/1CcUkxCgryUVNT844QclANEzIC6f79B4hFY8jPz4d2gxZtbR74fD5VUki8A8FHQUs4PI65ORFF27cjHl9CU1NTSSgUGlM6BU1VVVVxIBAQZv/OYnLyJ0p3l2Lz5jzYbDZVMCRibmlpkS5dupzAkJeXB0mK48rVK+jr61McQ2IDGYPf57eEw2Hk5OTAtMcEu90+QgjZrTiC5AYsy37mOG6vMDoGnU6H9vY2POjqUieB5RQKPG731NathRDFOSwszsPhcNyjlF5UMoUVFTY3N0sTExMYGhpCRUUFRFGcpJQaVDPAMMzr8fFxazQahfxtyM3NxeDgoKIYVoizLFuwtBSf4vlhZGdnJzrCYDCUEUK+KJXCf9WdPMlI5WYz6urOwrijBPX19R8ppQdUM8AwzOITjst69qwPFlMZvD3d6O7uVgzDf8IyBqfDMbVx+Dsmnz5H4S0XnM5rio3lVStraGiQ/D4/fvwYTWCw2+2KjeVVDcjd8ITjrIIQhk63CZ42j2IYVjWQxPDlTxb2bctFVnwOrS6XIhjWfLkSGPx+PH7zHvVHyhXDsKYBGQPHcdZzt1+gq/EwXNdd6OnpyXg3rCmYxCDMazEyEUNV2Ra43R49ISSSyZmwbkUyhjt3fQiPCsmh9IZSelQ1A/L/Ym9vL8aWu8F5zYlgMJhRDOuKJTGUGHdAnBXxe/oX3G53aSgU+papFFJWI2O4cKEZuk06HD9xDGazOUII0atmgGGYDzzP73/1MoTTZ07BZDJhYGAgpfF0DaYUqq6uLo1MRb7u3LULkiRhePgTjEajgxByM91N1nsupQF5sdVqlXieh0ajSZxmsxmEkLTWpjKZlgjDMCLP89rp6WkctBwCNHH09/entTYjBiorK7MMBsPizMyMjKGDUno9lXC69/8Be2JmMFjGiBwAAAAASUVORK5CYII=) 2 1, auto !important;
}

html {
    scroll-behavior: smooth;
    margin: 0 auto;
    /* overflow-x: hidden; */
}

body {
    pointer-events: painted;
    background-color: #000000;
    /* overflow-x:hidden; */
    /* margin: 0 auto; */
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-shadow: 0 0 2px #555;
}

.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 50%;
    position: absolute;
    transition-duration: 0ms;
    transition-timing-function: ease-out;
    animation: cursorAnim .5s infinite alternate;
    pointer-events: none;
    z-index: 999;
    opacity: 0.5;
}

.cursor::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 10px solid rgb(255, 255, 255);
    border-radius: 50%;
    opacity: .5;
    top: -11px;
    left: -11px;
    animation: cursorAnim2 .5s infinite alternate;
}

@keyframes cursorAnim {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(.7);
    }
}

@keyframes cursorAnim2 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(.4);
    }
}

@keyframes cursorAnim3 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(3);
    }

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

.expand {
    animation: cursorAnim3 .5s forwards;
    border: 1px solid rgb(255, 255, 255);
}

.padded {
    padding: 0 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* img.copyimage {
	width:70px;
	display:flex;
	top:700px;
	position:relative;
	margin-left:10px;
} */
/* pick text */
::-moz-selection {
    color: #000;
    background: #fff;
}

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

/* scroll */
/* for opera safari and chrome */
::-webkit-scrollbar {
    width: 7px;
    height: 0px;
    border-radius: 10px;
}

::-webkit-scrollbar:hover {
    width: 7px;
    height: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(41, 38, 38);
    border-radius: 10px;
    background-color: rgb(0, 0, 0);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(255, 255, 255);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #1b1b1b;
}

.center {
    text-align: center;
    align-items: center;
    align-self: center;
    align-content: center;
    background-position: center;
    text-align: -webkit-center;
    margin-right: auto;
    margin-left: auto;
    float: center;
    justify-content: center;
    justify-self: center;
    justify-items: center;
    text-justify: center;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    transition: all 0.7s ease-in;
}

@keyframes fade {
    from {
        opacity: 0.8;
        transform: scale(0.97.5);
    }

    to {
        opacity: 1;
    }
}

/* footer  all*/
footer {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0px;
    background: rgb(0, 0, 0);
    height: auto;
    width: 100vw;
    padding-top: 40px;
    font-family: "Din";
    color: #fff;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.footer-content h3 {
    font-size: 2.1rem;
    text-transform: uppercase;
    line-height: 3rem;
    font-family: "DinBold";
}

.footer-content p {
    max-width: 500px;
    margin: 10px 4px;
    line-height: 28px;
    font-size: 14px;
    color: #cacdd2;
}

.socials {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 3rem 0;
}

.socials li {
    margin: 0 10px;
}

.socials a {
    text-decoration: none;
    color: #fff;
    border: 1.5px solid rgb(0, 0, 0);
    padding: 12px;
    background-color: #171718;

    border-radius: 50%;

}

.socials a i {
    font-size: 1.1rem;
    width: 20px;

    transition: color .4s ease;

}

.socials a:hover i {
    color: rgb(109, 109, 109);
}

.footer-bottom {
    background-color: rgb(10 9 9);
    /* width: 100vw; */
    padding: 20px;
    padding-bottom: 40px;
    text-align: center;
    /* display: none; */
}

.footer-bottom p {
    float: left;
    font-size: 14px;
    word-spacing: 2px;
    text-transform: capitalize;
}

.footer-bottom p a {
    font-size: 16px;
    text-decoration: none;
}

.footer-bottom span {
    text-transform: uppercase;
    opacity: .4;
    font-weight: 200;
}

.footer-menu {
    float: right;

}

.footer-menu ul {
    display: flex;
}

.footer-menu ul li {
    padding: 0 5px;
    display: block;
}

.footer-menu ul li a {
    color: #cfd2d6;
    text-decoration: none;
}

.footer-menu ul li a:hover {
    color: #686d6e;
}

@media (max-width:500px) {
    .footer-menu ul {
        display: flex;
        /* margin-top: 10px;
        margin-bottom: 20px; */
    }

    .footer-content p {
        margin: 10px 17.5px;
    }
    .footer-bottom {
        background-color: rgb(10 9 9);
        display: flex;
        text-align: center;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        padding-bottom: none;
        justify-content: center;
    }

    .footer-menu {
        float: none;
        margin-top: 2px;
    }

    .footer-bottom p {
        float: none;
        margin-bottom: 2px; 
    }
}

/* right click  */
#context-menu {
    position: fixed;
    width: 150px;
    background: rgb(7, 11, 30);
    border-radius: 10px;
    transform: scale(0);
    transform-origin: top left;
    z-index: 999;
    font-family: "Din";
}

#context-menu.active {
    transform: scale(1);
    transition: transform 500ms ease-in-out;
}

#context-menu .item {
    padding: 8px 10px;
    font-size: 15px;
    color: rgb(116, 110, 107);
}

#context-menu .item a {
    padding: 8px 10px;
    font-size: 15px;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

#context-menu .item:hover {
    background: rgb(30, 25, 98);
    background: linear-gradient(133deg, rgba(30, 25, 98, 1) 0%, rgba(26, 34, 117, 1) 46%, rgba(50, 49, 161, 1) 100%);
    border-radius: 10px;
    /* background: linear-gradient(45deg, #60646e, #333); */
}

#context-menu .item i {
    display: inline-block;
    margin-right: 5px;
}

#context-menu hr {
    margin: 2px 0px;
    border-color: rgb(3, 7, 255);
}

/* untuk preload  */

#preloader {

    background: #000000 no-repeat center center;
    background-size: 100%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 1000;
    /* background-image: url(images/loadersuper.gif); */
    overflow: hidden;
    touch-action: none;
}

.center-ring {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.ring {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    animation: ring 2s linear infinite;
}

@keyframes ring {
    0% {
        transform: rotate(0deg);
        box-shadow: 1px 5px 2px #120e4b;
    }

    25% {
        transform: rotate(90deg);
        box-shadow: 1px 5px 2px #ffffff;
    }

    50% {
        transform: rotate(180deg);
        box-shadow: 1px 5px 2px #0456c8;
    }

    75% {
        transform: rotate(270deg);
        box-shadow: 1px 5px 2px #b30000;
    }

    100% {
        transform: rotate(360deg);
        box-shadow: 1px 5px 2px #2e2e2e;
    }
}

.ring:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, .3);
}

span.spanloader {
    color: #737373;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 200px;
    animation: text 3s ease-in-out infinite;
    font-family: "DinBold";
}

@keyframes text {
    50% {
        color: black;
    }
}

.active-slide,
.active-slide-2,
.dot:hover {
    color: #ffffff !important;
    background-color: #ffffff;
    height: 10px;
    width: 10px;
}

/* .active-slide- {
    color: white;
} */
a.off {
    color: #868686;
}

a.on {
    color: #ffffff;
    background: none;
}