@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: #042792;
  background: rgba(255, 0, 0, 0);
  text-shadow: 0 0 1px #000;
}

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

#fullbody {
position: absolute;
top: -60px;
left: 90px;
z-index: 50;
pointer-events: none;
} 

#logo{
position: absolute;
top: -75px;
left: 480px;
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;
top: -75px;
left: 485px;
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;
top: -75px;
left: 475px;
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;
top: -75px;
left: 495px;
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;
top: -75px;
left: 465px;
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;
}

a{
  text-decoration: none;
  cursor: url("/cursors/clickable.png"), default;
}

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.20) 50%);
z-index: 100;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
  
body{
cursor: url("/cursors/default.png"), default;
background-image: url('');
background-color: #000;
background-size: 100%;
height: 768px;
width: 1366px;
overflow-x: hidden;
overflow-y: hidden;
color: #000;
z-index: 1;
}


#containerblur{
margin: 0 auto;
width: 865px;
height: 415px;
padding: 10px;
border: 1px solid #000;
position:absolute;
top: 130px;
left: 390px;
z-index: 10;
overflow-x:hidden;
overflow-y:hidden;
box-shadow: 0px 0px 0.2px #000000;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(2px) contrast(100%);
}

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

#welcometext{
margin: 0 auto;
width: 420px;
height: 115px;
padding: 5px;
border: 1px solid #000;
position:absolute;
top: 40px;
left: 70px;
z-index: 10;
background-color:#E7E9E9;
overflow-x:hidden;
overflow-y:hidden;
box-shadow: inset 0px 0px 3px #373939, 0px 0px 1px #000;
}

#buttons{
margin: 0 auto;
width: 190px;
height: 340px;
padding: 0px;
border: 0px solid #000;
position:absolute;
top: 29px;
left: 660px;
z-index: 10;
overflow-x:hidden;
overflow-y:hidden;
}

#openbutton{
margin: 0;
width: 64px;
height: 14px;
padding: 3px;
border: 1px solid #A0ADAF;
position:absolute;
top: 377px;
left: 779px;
z-index: 10;
background-color:#000;
overflow-x:hidden;
overflow-y:hidden;
}

#openbutton2{
margin: 0;
width: 64px;
height: 14px;
padding: 3px;
border: 1px solid #A0ADAF;
position:absolute;
top: 377px;
left: 708px;
z-index: 10;
background-color:#000;
overflow-x:hidden;
overflow-y:hidden;
}

#openbutton3{
margin: 0;
width: 64px;
height: 14px;
padding: 3px;
border: 1px solid #A0ADAF;
position:absolute;
top: 377px;
left: 637px;
z-index: 10;
background-color:#000;
overflow-x:hidden;
overflow-y:hidden;
}

#openbutton4{
margin: 0;
width: 64px;
height: 14px;
padding: 3px;
border: 1px solid #A0ADAF;
position:absolute;
top: 377px;
left: 566px;
z-index: 10;
background-color:#000;
overflow-x:hidden;
overflow-y:hidden;
}

#openbutton:hover{
transition: .2s ease;
transform: translate(0px, -3px);
}

#openbutton2:hover{
transition: .2s ease;
transform: translate(0px, -3px);
}

#openbutton3:hover{
transition: .2s ease;
transform: translate(0px, -3px);
}

#openbutton4:hover{
transition: .2s ease;
transform: translate(0px, -3px);
}

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

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

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

#updates{
margin: 0 auto;
width: 160px;
height: 50px;
padding: 5px;
position:absolute;
top: 180px;
left: 440px;
z-index: 10;
background-color: #E7E9E9;
overflow-x:hidden;
overflow-y:scroll;
border: 1px solid #000;
box-shadow: inset 0px 0px 3px #373939, 0px 0px 1px #000;
}

#navbar{
background: linear-gradient(to right, #000 25%, #1F2A0F);
margin: 0px;
width: 850px;
height: 15px;
position:absolute;
top: 0px;
left: 0px;
padding: 1px;
border-bottom: 1px solid #000000;
text-align:right;
}

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

#dividertop{
background-color: #A0ADAF;
margin: 0px;
width: 850px;
height: 5px;
position:absolute;
top: 18px;
left: 0px;
border-bottom: 1px solid #000000;
z-index: 12;
}

#dividerbottom{
background-color: #A0ADAF;
margin: 0px;
width: 850px;
height: 5px;
position:absolute;
top: 394px;
left: 0px;
border-top: 1px solid #000000;
z-index: 12;
}

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

#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;
}

#portal{
float:right;
image-rendering: pixelated;
}

#portal:hover{
cursor: url("/cursors/clickable.png"), default;
filter: invert(1);
}

.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;
}
}