html, body {
top: 0;
bottom: 0;
left: 0;
right: 0;
height:100%;
width:100%;
font-size: 15px;
cursor: crosshair;
user-select: none;
overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.0);
font-family: "Times New Roman", Times, serif;
}

html::-webkit-scrollbar,
html::-moz-scrollbar,
html::-ms-scrollbar,
html::-o-scrollbar,
html::scrollbar {
display: none;
}

/*
======================================================================
------------------------------ PRELOADER -----------------------------
======================================================================
*/

#black-preloader {
z-index: 90000;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 1.0);
}

@keyframes preload {
0% {transform:scale(0);}
50% {transform:scale(1);}
100% {transform:scale(0);}
}

/*
======================================================================
-------------------------------- LOGO --------------------------------
======================================================================
*/

#black-preloader .logo {
position: fixed;
margin-top: -75px;
margin-left: -75px;
top: 50%;
left: 50%;
width: 150px;
pointer-events: none;
filter: grayscale(0%);
animation: preload 2s ease-in-out infinite;
}

/*
======================================================================
-------------------------- PROTECT CREDITS ---------------------------
======================================================================
*/

.protect-credits {
z-index: 10000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: none;
pointer-events: none;
background: rgba(0, 0, 0, 1.0);
}

/*
======================================================================
------------------------- CREDITS BORDERS ----------------------------
======================================================================
*/

.creditsborder-top {
z-index: 60000;
position: fixed;
top: 0;
left: 50px;
right: 50px;
height: 50px;
border-bottom: solid 1.5px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}

.creditsbordercorner-all:hover .creditsborder-top {
border-bottom: solid 1.5px rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
}

.creditsborder-bottom {
z-index: 60000;
position: fixed;
bottom: 0;
left: 50px;
right: 50px;
height: 50px;
border-top: solid 1.5px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}

.creditsbordercorner-all:hover .creditsborder-bottom {
border-top: solid 1.5px rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
}

.creditsborder-left {
z-index: 60000;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
width: 50px;
border-right: solid 1.5px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}

.creditsbordercorner-all:hover .creditsborder-left {
border-right: solid 1.5px rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
}

.creditsborder-right {
z-index: 60000;
position: fixed;
top: 50px;
bottom: 50px;
right: 0;
width: 50px;
border-left: solid 1.5px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}

.creditsbordercorner-all:hover .creditsborder-right {
border-left: solid 1.5px rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
}

/*
======================================================================
------------------------- CREDITS CORNERS ----------------------------
======================================================================
*/

.creditscorder-topleft {
z-index: 60000;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}

.creditscorder-topright {
z-index: 60000;
position: fixed;
top: 0;
right: 0;
height: 50px;
width: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}

.creditscorder-bottomleft {
z-index: 60000;
position: fixed;
bottom: 0;
left: 0;
height: 50px;
width: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}

.creditscorder-bottomright {
z-index: 60000;
position: fixed;
bottom: 0;
right: 0;
height: 50px;
width: 50px;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease-in-out;
}

.creditsbordercorner-all:hover .creditscorder-topleft,
.creditsbordercorner-all:hover .creditscorder-topright,
.creditsbordercorner-all:hover .creditscorder-bottomleft,
.creditsbordercorner-all:hover .creditscorder-bottomright {
background: rgba(255, 255, 255, 0.5);
}

/*
======================================================================
---------------------------- BUTTON CREDITS --------------------------
======================================================================
*/

.button-credits {
z-index: 60000;
position: fixed;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
border-radius: 100%;
border: solid 1.5px rgba(0, 0, 0, 1.0);
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
font-family: "Times New Roman", Times, serif;
transform: translateX(-50%) translateY(-50%);
transition: all 0.5s ease-in-out;
}

.button-credits:hover {
height: 140px;
width: 140px;
line-height: 140px;
font-size: 20px;
border-radius: 0%;
border: solid 1.5px rgba(255, 255, 255, 1.0);
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
}

/*
========================================================================
----------------------------- PUBLIC AUDIO -----------------------------
========================================================================
*/

.public-audio .cover {
z-index: 7000;
position: fixed;
bottom: 30px;
right: 70px;
width: 40px;
height: 40px;
opacity: 1.0;
line-height: 40px;
text-align: center;
border-radius: 0;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

.public-audio .open {
z-index: 7000;
position: fixed;
bottom: 30px;
right: 70px;
width: 40px;
height: 40px;
opacity: 0.0;
line-height: 40px;
text-align: center;
border-radius: 0;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

.public-audio:hover .cover {opacity: 0.0;}
.public-audio:hover .open {opacity: 1.0;}

/*
======================================================================
------------------------------- EMBED -------------------------------
======================================================================
*/

embed {
position: relative;
height: 500px;
width: 100%;
border: none;
overflow-y: scroll;
}

/*
======================================================================
------------------------------- VIDEO --------------------------------
======================================================================
*/

.twinkle-video {
-webkit-z-index: 50000;
-moz-z-index: 50000;
-ms-z-index: 50000;
-o-z-index: 50000;
z-index: 50000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.video-box {
-webkit-z-index: 50000;
-moz-z-index: 50000;
-ms-z-index: 50000;
-o-z-index: 50000;
z-index: 50000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.video-box video {
-webkit-z-index: 50000;
-moz-z-index: 50000;
-ms-z-index: 50000;
-o-z-index: 50000;
z-index: 50000;
-webkit-position: fixed;
-moz-position: fixed;
-ms-position: fixed;
-o-position: fixed;
position: fixed;
-webkit-top: 50%;
-moz-top: 50%;
-ms-top: 50%;
-o-top: 50%;
top: 50%;
-webkit-left: 50%;
-moz-left: 50%;
-ms-left: 50%;
-o-left: 50%;
left: 50%;
-webkit-height: auto;
-moz-height: auto;
-ms-height: auto;
-o-height: auto;
height: auto;
-webkit-width: auto;
-moz-width: auto;
-ms-width: auto;
-o-width : auto;
width: auto;
-webkit-min-height: 100%;
-moz-min-height: 100%;
-ms-min-height: 100%;
-o-min-height: 100%;
min-height: 100%;
-webkit-min-width: 100%;
-moz-min-width: 100%;
-ms-min-width: 100%;
-o-min-width: 100%;
min-width: 100%;
-webkit-pointer-events: auto;
-moz-pointer-events: auto;
-ms-pointer-events: auto;
-o-pointer-events: auto;
pointer-events: auto;
-webkit-filter: grayscale(100%) contrast(100%) brightness(50%);
-moz-filter: grayscale(100%) contrast(100%) brightness(50%);
-ms-filter: grayscale(100%) contrast(100%) brightness(50%);
-o-filter: grayscale(100%) contrast(100%) brightness(50%);
filter: grayscale(100) contrast(100%) brightness(50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}