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


::selection{
text-shadow: -1px -1px 0 #B0B1B3, 1px -1px 0 #B0B1B3, -1px 1px 0 #FBFBFB, 1px 1px 0 #FBFBFB;
background: rgba(255, 0, 0, 0);
}

a{
text-decoration: none;
color: #000; 
}

a:hover{
text-shadow: -1px -1px 0 #B0B1B3, 1px -1px 0 #B0B1B3, -1px 1px 0 #FBFBFB, 1px 1px 0 #FBFBFB;
}


#pagedoll{
-webkit-animation: fade-in 0.8s steps(6, end) 1.1s both;
	        animation: fade-in 0.8s steps(6, end) 1.1s both;
	        
-webkit-animation: fade-in 0.8s steps(6, end) 1.1s both, floating 5s infinite ease-in-out;
	      animation: fade-in 0.8s steps(6, end) 1.1s both, floating 5s infinite ease-in-out;
}


#logo{
position: absolute;
top: 104px;
left: 700px;
z-index: 99;
pointer-events: none;

-webkit-animation: fade-in 0.8s steps(6, end) 0.8s both;
	        animation: fade-in 0.8s steps(6, end) 0.8s both;
}

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.15) 50%);
z-index: 100;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}


#container{
cursor: url("/cursors/sburbR.png"), default !important;
margin: 0 auto;
width: 650px;
height: 250px;
padding: 0px;
border: 4px double #000;
margin-top: 142px;
margin-left: 650px;
background-color:#E0E2E3;
overflow-x:scroll;
overflow-y:hidden;
box-shadow: 0px 0px 5px #000000, inset 0px 0px 5px #fff;
border-top-left-radius: 70px;
border-bottom-right-radius: 70px;
z-index: 4;
-webkit-animation: fade-in 0.8s steps(6, end) 0.5s both;
	        animation: fade-in 0.8s steps(6, end) 0.5s both;
}

#circle{
width: 55px;
height: 55px;
padding: 0px;
border: 3px double #000;
position: absolute;
top: -20px;
left: -15px;
background-image: radial-gradient(#B0B1B3, #D2D3D5, #B0B1B3, #D2D3D5, #B0B1B3);
overflow-x:hidden;
overflow-y:hidden;
box-shadow: 0px 0px 2px #000000, inset 0px 0px 2px #fff;
border-radius: 50%;
border-bottom-right-radius: 50%;
z-index: 52;
text-align: center;
}

#headerdark{
width: 1370px;
height: 10px;
padding: 0px;
border: 3px double #000;
position: absolute;
top: -9px;
left: -4px;
background-image: linear-gradient(#b0b1b3, #666869, #5b5c5d, #666869, #5b5c5d);
overflow-x:hidden;
overflow-y:hidden;
box-shadow: 0px 0px 2px #000000;
border-radius: 0px;
z-index: 51;
}

#header{
width: 1370px;
height: 20px;
padding: 0px;
border: 3px double #000;
position: absolute;
top: 3px;
left: -4px;
background-image: linear-gradient(#E0E2E3, #D2D3D5, #B0B1B3, #D2D3D5, #B0B1B3);
overflow-x:hidden;
overflow-y:hidden;
box-shadow: 0px 0px 2px #000000;
border-radius: 0px;
z-index: 50;
}

#footer{
width: 1370px;
height: 15px;
padding: 0px;
border: 3px double #000;
position:absolute;
top: 752px;
left: -4px;
background-image: linear-gradient(#E0E2E3, #D2D3D5, #B0B1B3, #D2D3D5, #B0B1B3);
overflow-x:hidden;
overflow-y:hidden;
box-shadow: 0px 0px 2px #000000;
border-radius: 0px;
z-index: 50;
}

#headbutton{
width: 100px;
height: 20px;
padding: 0px;
border: 1px solid #000;
position:absolute;
top: 25px;
background-image: linear-gradient(#E0E2E3, #D2D3D5, #B0B1B3, #D2D3D5, #B0B1B3);
box-shadow: 0px 0px 2px #000000,  inset 0px 0px 2px #fff;
overflow-x:hidden;
overflow-y:hidden;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 50px;
z-index: 5;
cursor: url("/cursors/sburbR.png"), default !important;
}

#headbutton:hover{
transition: .2s ease;
transform: translate(-8px, 0px);
cursor: url("/cursors/sburbR.png"), default !important;
}

.buttontext{
font-family: dogica;
font-size: 8px;
text-shadow: -1px -1px 0 #FBFBFB, 1px -1px 0 #FBFBFB, -1px 1px 0 #B0B1B3, 1px 1px 0 #B0B1B3;
padding: 0;
text-decoration: none;
cursor: url("/cursors/sburbR.png"), default !important;
}

.buttontext:hover{
font-family: dogica;
font-size: 8px;
text-shadow: -1px -1px 0 #B0B1B3, 1px -1px 0 #B0B1B3, -1px 1px 0 #FBFBFB, 1px 1px 0 #FBFBFB;
cursor: url("/cursors/sburbR.png"), default !important;
}

select {
  width: 50px;
  height: 10px;
  padding: 1px;
  border: none;
  background-color: #f1f1f1;
  font-family: dogica;
  font-size: 8px;
  box-shadow: 0px 0px 2px #000000,  inset 0px 0px 2px #fff;
}

.musicplayer {
    background-image: linear-gradient(#E0E2E3, #D2D3D5, #B0B1B3, #D2D3D5, #B0B1B3);
    border: 3px double #000;
    box-shadow: 0px 0px 2px       #000000,  inset 0px 0px 6px #fff;
    border-top-left-radius: 40px;
    margin-top: 15px;
    width: 240px;
    height: 60px;
    overflow: hidden;
    position: absolute;
    top: 675px;
    left: 1122px;
    color: #000; 
    z-index: 49;
}

.songholder {
    background-image: linear-gradient(#5b5c5d, #666869, #8E8E8F, #5b5c5d);
    border: 1px solid #000;
    border-top-left-radius: 150px;
    height: 20px;
    width: 240px;
    margin-top: 2px;
    margin-left: 12px;
    overflow: hidden;
}
  
 
.songtitle {
    padding: 5px;
    float: right;
    display: flex;
    align-items: center;
    font-family: dogica;
    font-size: 8px;
    color: #FBFBFB; 
    
}
 
.controls{
    font-size:15px !important;
    color: #000;
    text-align: center;
    width: 100%;
    height: 10px;
    border-top: 1px solid #E0E2E3;
}
 
.controls td{
    padding: 5px; 
    text-shadow: -1px -1px 0 #FBFBFB, 1px -1px 0 #FBFBFB, -1px 1px 0 #666869, 1px 1px 0 #666869;
}

.controls td:hover{
text-shadow: -1px -1px 0 #B0B1B3, 1px -1px 0 #B0B1B3, -1px 1px 0 #FBFBFB, 1px 1px 0 #FBFBFB;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}