@font-face {
    font-family: "skin"; 
    src: url("fonts/skin.ttf") format("truetype");
}

@font-face {
    font-family: "dogica"; 
    src: url("fonts/dogica.ttf") format("truetype");
}

::selection {
  color: #fff;
  background: rgba(255, 0, 0, 0);
  text-shadow: 0 0 1px #000;
}

h1::selection {
  color: #fff;
  background: rgba(255, 0, 0, 0);
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.0) 50%);
z-index: 100;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
  
body{
cursor: url("/cursors/small.png"), default;
background-image: url('zzz');
background-color: #000;
background-repeat: no-repeat;
overflow-x: hidden;
overflow-y: hidden;
color: #000;
z-index: 1;
}

#inside{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0px;
}

#logo{
position: absolute;
margin-top: -270px;
margin-left: -570px;
font-family: skin;
font-size: 138px;
z-index: 49;
font-weight: 400;
color: #fff; 
text-shadow: 0 0 6px #000;
pointer-events: none;
}

#logoback1{
position: absolute;
margin-top: -270px;
margin-left: -565px; 
font-family: skin;
font-size: 138px;
z-index: 2;
font-weight: 400;
color: #398DD1; 
text-shadow: 0 0 5px #000;
pointer-events: none;
filter: blur(2px);
opacity: 0.4;
mix-blend-mode: screen;
}

#logoback2{
position: absolute;
margin-top: -270px;
margin-left: -575px; 
font-family: skin;
font-size: 138px;
z-index: 2;
font-weight: 400;
color: #398DD1; 
text-shadow: 0 0 5px #000;
pointer-events: none;
filter: blur(2px);
opacity: 0.4;
mix-blend-mode: screen;
}

#logoback3{
position: absolute;
margin-top: -270px;
margin-left: -555px;
font-family: skin;
font-size: 138px;
z-index: 2;
font-weight: 400;
color: #123754; 
text-shadow: 0 0 5px #000;
pointer-events: none;
filter: blur(2px);
opacity: 0.1;
mix-blend-mode: screen;
}

#logoback4{
position: absolute;
margin-top: -270px;
margin-left: -585px; 
font-family: skin;
font-size: 138px;
z-index: 2;
font-weight: 400;
color: #123754; 
text-shadow: 0 0 5px #000;
pointer-events: none;
filter: blur(2px);
opacity: 0.1;
mix-blend-mode: screen;
}

#container{
margin: 0 auto;
background-image: url('/images/seabg.png');
background-position: top;
width: 830px;
height: 380px;
padding: 10px;
border: 1px solid #000;
background-color:#999;
overflow-x:hidden;
overflow-y:hidden;
box-shadow: 0px 0px 0px #000000;
}

#navbar{
margin: 0px;
width: 850px;
height: 15px;
position:absolute;
margin-top: -10px;
margin-left: -10px;
padding: 2px;
text-align:right;

background: linear-gradient(to right, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) );
}

#navtext{
color: #fff;
font-family: dogica;
font-size: 8px;
margin-top: 3px;
margin-left: 5px;
margin-right: 5px;
text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;
}

#navigation{
margin: 0px;
width: 850px;
height: 15px;
position:absolute;
margin-top: 425px;
margin-left: 0px;
padding: 1px;
border-bottom: 1px solid #000000;
text-align:right;
}

#navoptions{
color: #fff;
font-family: dogica;
font-size: 8px;
margin-top: 3px;
margin-left: 5px;
margin-right: 2px;
}

#side{
margin: 0px;
width: 86px;
height: 140px;
position: absolute;
margin-top: 90px;
margin-left: 754px;
padding: 0px;
border: 0px solid #000000;
background-color: ;

display: flex;
flex-wrap: wrap;
}

#sidebutt{
margin: 0px;
width: 80px;
height: 11px;
margin-top: 0px;
margin-left: 0px;
padding: 3px;

background: linear-gradient(to right, var(--myColor1) 15%, var(--myColor2));
  transition: --myColor1 0.1s, --myColor2 0.1s;
  
  
}


#sidebutt:hover {
--myColor1:  rgb(0, 0, 0, 0);
  --myColor2: rgb(255, 255, 255, 0.6);
}

@property --myColor1 {
  syntax: '<color>';
  initial-value: rgb(0, 0, 0, 0);
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: rgb(255, 255, 255, 0.0);
  inherits: false;
}

.navv1{
text-align: right;
margin-right: 5px;
}

.navv2{
text-align: right;
margin-right: 5px;
}

.navv3{
text-align: right;
margin-right: 5px;
}

.navv4{
text-align: right;
margin-right: 5px;
}

.navv5{
text-align: right;
margin-right: 5px;
}

p{
font-family: dogica;
font-size: 8px;
color: #fff;
margin: 0px;
line-height: 10px;

text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;
}

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    color: #000;
    display:none;
    background: #fff;
    outline: 1px solid #000;
    padding: 2px;
    font-family: dogica;
    z-index: 100;

}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
    z-index: 100;
}

@keyframes slide {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 300vw;
}
}

#special{
font-size: 11px;

text-shadow: 0 0 1px #035DDA;

-webkit-animation: 'slide' 20s infinite linear forwards;
	      animation: 'slide' 20s infinite linear forwards;

background: repeating-linear-gradient(-45deg, #53A6FF 0%, #2C6ED2 7.14%, #2165C6 14.28%, #06399F 35.7%, #042792 42.84%, #001A6C 50%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

#special::selection{
color: #fff;
text-shadow: 0 0 3px #035DDA;
}

a{
  text-decoration: none;
  color: #fff;
  cursor: url("/cursors/clickable.png"), default;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;
}

a:hover{
  text-decoration: none;
  color: #fff;
  cursor: url("/cursors/clickable.png"), default;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,;
}

a:visited{
  text-decoration: none;
  color: #fff;
  cursor: url("/cursors/clickable.png"), default;
  text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 1px #000, 0 0 2px #000, 0 0 3px #000;
}

#updates{
margin: 0 auto;
width: 170px;
height: 110px;
padding: 0px;
position:absolute;
margin-top: 50px;
margin-left: 50px;
z-index: 10;
background-color: ;
border: 0px solid #000;
overflow-x:hidden;
overflow-y:hidden;
}

#rings{
margin: 0 auto;
width: 300px;
height: 122px;
padding: 0px;
border: 0px solid #000;
position:absolute;
margin-top: 35px;
margin-left: 250px;
z-index: 12;
background-color: ;
overflow-x:hidden;
overflow-y:hidden;
}

#miniblog{
margin: 0 auto;
width: 320px;
height: 200px;
padding: 0px;
border: 0px solid #000;
position:absolute;
margin-top: 180px;
margin-left: 20px;
z-index: 12;
background-color: ;
overflow-x:hidden;
overflow-y:hidden;
}

#contact{
margin: 0 auto;
width: 240px;
height: 130px;
padding: 0px;
border: 0px solid #000;
position:absolute;
margin-top: 170px;
margin-left: 370px;
z-index: 12;
background-color: ;
overflow-x:hidden;
overflow-y:hidden;
}

#portal{
margin: 0 auto;
width: 130px;
height: 130px;
padding: 0px;
border: 0px solid #000;
position:absolute;
margin-top: 260px;
margin-left: 750px;
z-index: 12;
background-color: #;
overflow-x:hidden;
overflow-y:hidden;
}