@font-face {
font-family: blackletter;
src: url(https://files.catbox.moe/wdwzo3.ttf);
}

@font-face {
font-family: deutsch;
src: url(https://files.catbox.moe/yy4474.ttf);
}

@font-face {
font-family: duke;
src: url(https://files.catbox.moe/f1f5xm.ttf);
}



* {
box-sizing: border-box;
cursor: url("https://i.imgur.com/0yHkN5F.png"), auto;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}


html {
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}

::-webkit-scrollbar {
display: none;
}


::selection {
background: #58388F;
color: white;
}

::-moz-selection {
background: #58388F;
color: white;
}

#s-m-t-tooltip {
/* basic */
max-width: 300px;
z-index: 10;
margin: 24px 14px 7px 12px;
/* style and design */
padding: 10px;
background: black;
border: 1px solid white;
box-shadow: 0px 0px 25px 0px #600B01 inset, 0px 0px 15px 10px #600B01;
color: white;
}

body {
background: url('https://i.imgur.com/WsX1P7u.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
color: white;
animation: fadein 1s;

}

#container {
position: absolute;
top: 10px;
left: 50%;
width: 1200px;
height: 1250px;
transform: translate(-50%);
}

#main {
position: absolute;
height: 1080px;
width: 1100px;
top: 60px;
left: 50px;
font-size: 17px;
color: white;

/* lace border by solaria on neocities */
border: 30px solid transparent;
border-image: url("https://i.imgur.com/4fT8SuX.png") 34 round;
border-image slice: fill;
background: rgba(0, 0, 0, 0.8);
/* background: url('https://i.imgur.com/UOy3zxc.png'); */
background-clip: padding-box;	
}

#desc {
position: absolute;
background: black;
border: 1px solid #A80202;
color: white;
width: 680px;
padding: 30px;
font-size: 20px;
top: 70px;
left: 40px;
z-index: 0;
background-image: url("https://i.imgur.com/zNxzvEb.gif"), url('https://i.imgur.com/PzM3ALR.png');
background-position: left top, left top;
background-repeat: repeat-x, repeat;
text-align: justify;
text-shadow: 0 0 2px white;
animation: glow 1.5s infinite;
}

/* glow animation */
@keyframes glow {
0% {
-webkit-box-shadow: 0px 0px 18px 16px #600B01, 0px 0px 25px 0px #600B01 inset;
-moz-box-shadow: 0px 0px 18px 16px #600B01, 0px 0px 25px 0px #600B01 inset;
box-shadow: 0px 0px 18px 16px #600B01, 0px 0px 25px 0px #600B01 inset;
}
50% {
-webkit-box-shadow: 0px 0px 22px 20px #600B01, 0px 0px 25px 0px #600B01 inset;
-moz-box-shadow: 0px 0px 22px 20px #600B01, 0px 0px 25px 0px #600B01 inset;
box-shadow: 0px 0px 22px 20px #600B01, 0px 0px 25px 0px #600B01 inset;
}
100% {
-webkit-box-shadow: 0px 0px 18px 16px #600B01, 0px 0px 25px 0px #600B01 inset;
-moz-box-shadow: 0px 0px 18px 16px #600B01, 0px 0px 25px 0px #600B01 inset;
box-shadow: 0px 0px 18px 16px #600B01, 0px 0px 25px 0px #600B01 inset;
}
}

#title {
position: absolute;
z-index: 1;
left: -60px;
top: -75px;
}	

/* bounce text */
.lebounce mark {
font-family: blackletter;
font-size: 100px;
letter-spacing: 5px;
z-index: 99;
animation: bounce 2s infinite;
animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto;
/* color: #58388F; */


-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
background: linear-gradient(to top, #000 0%, #58388F 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

filter: drop-shadow(2px 0 2px #600B01) drop-shadow(0 2px 2px #600B01) drop-shadow(-2px 0 2px #600B01) drop-shadow(0 -2px 2px #600B01) drop-shadow(-2px 0px 2px #600B01);

/* text-shadow: -1px 0 #400700, 0 1px #400700, 1px 0 #400700, 0 -1px #400700;

background: linear-gradient(to top, #58388F 0%, #000 100%);
background-clip: text;
-webkit-background-clip: text;

-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: white; */

}

.lebounce mark:nth-child(1) { 
animation-delay:0s; display:inline-block;
}

.lebounce mark:nth-child(2) { 
animation-delay:0.3s; display:inline-block;
}

.lebounce mark:nth-child(3) { 
animation-delay:0.5s; display:inline-block; 
}

.lebounce mark:nth-child(4) { 
animation-delay:0.7s; display:inline-block;
}

.lebounce mark:nth-child(5) { 
animation-delay:0.9s; display:inline-block;
}

.lebounce mark:nth-child(6) { 
animation-delay:1.1s; display:inline-block;
}

.lebounce mark:nth-child(7) { 
animation-delay:1.3s; display:inline-block;
}

.lebounce mark:nth-child(8) { 
animation-delay:1.5s; display:inline-block;
}

.lebounce mark:nth-child(9) { 
animation-delay:1.7s; display:inline-block;
}

.lebounce mark:nth-child(10) { 
animation-delay:1.9s; display:inline-block;
}

.lebounce mark:nth-child(11) { 
animation-delay:2.1s; display:inline-block;
}

.lebounce mark:nth-child(12) { 
animation-delay:2.4s; display:inline-block;
}

.lebounce mark:nth-child(13) { 
animation-delay:2.6s; display:inline-block;
}

@keyframes bounce { 
0% { 
transform: scale(1,1) translateY(0); 
} 
10% { 
transform: scale(1.1,.9) translateY(0); 
} 
30% { 
transform: scale(.9,1.1) translateY(-30px); 
} 
50% { 
transform: scale(1.05,.95) translateY(0); 
} 
60% { 
transform: scale(1,1) translateY(-4px); 
} 
100% { 
transform: scale(1,1) translateY(0); 
} 
}

.heading {
position: absolute;
z-index: 2;
font-size: 55px;
color: white;
font-family: deutsch;
color: #754bbf;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
background: linear-gradient(to top, #000 0%, #58388F 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.content {
position: absolute;
background: url('https://i.imgur.com/PzM3ALR.png');
border: 1px solid white;
box-shadow: 0px 0px 25px 0px #600B01 inset, 0px 0px 15px 10px #600B01;
color: white;
padding: 25px;
z-index: 0;
text-align: justify;
text-shadow: 0 0 2px white;	
}

/* .inside {
border-width:7px;
border-style:solid;
border-image: url("https://files.catbox.moe/73qaqe.png") 8 fill round;
padding: 10px;
background: white;
background-clip: padding-box;
color: black;
height: 100%;
} */

.stickers img {
position:absolute;
max-width: 145px;
left: 10px;
top: 10px;
filter: none;

}

/* drops */
@-webkit-keyframes drops-fall {
0% {
top: -10%
}

100% {
top: 100%
}
}

@-webkit-keyframes drops-shake {

0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}

50% {
-webkit-transform: translateX(80px);
transform: translateX(80px)
}
}

@keyframes drops-fall {
0% {
top: -10%
}
100% {
top: 100%
}
}

@keyframes drops-shake {

0%,
100% {
transform: translateX(0)
}

50% {
transform: translateX(80px)
}
}

.drop {
position: fixed;
top: -10%;
z-index: 9999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-animation-name: drops-fall, drops-shake;
-webkit-animation-duration: 10s, 3s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-play-state: running, running;
animation-name: drops-fall, drops-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running
}

.drop:nth-of-type(0) {
left: 1%;
-webkit-animation-delay: 0s, 0s;
animation-delay: 0s, 0s
}

.drop:nth-of-type(1) {
left: 10%;
-webkit-animation-delay: 1s, 1s;
animation-delay: 1s, 1s
}

.drop:nth-of-type(2) {
left: 20%;
-webkit-animation-delay: 6s, .5s;
animation-delay: 6s, .5s
}

.drop:nth-of-type(3) {
left: 30%;
-webkit-animation-delay: 4s, 2s;
animation-delay: 4s, 2s
}

.drop:nth-of-type(4) {
left: 40%;
-webkit-animation-delay: 2s, 2s;
animation-delay: 2s, 2s
}

.drop:nth-of-type(5) {
left: 50%;
-webkit-animation-delay: 8s, 3s;
animation-delay: 8s, 3s
}

.drop:nth-of-type(6) {
left: 60%;
-webkit-animation-delay: 6s, 2s;
animation-delay: 6s, 2s
}

.drop:nth-of-type(7) {
left: 70%;
-webkit-animation-delay: 2.5s, 1s;
animation-delay: 2.5s, 1s
}

.drop:nth-of-type(8) {
left: 80%;
-webkit-animation-delay: 1s, 0s;
animation-delay: 1s, 0s
}

.drop:nth-of-type(9) {
left: 90%;
-webkit-animation-delay: 3s, 1.5s;
animation-delay: 3s, 1.5s
}

.drop:nth-of-type(10) {
left: 25%;
-webkit-animation-delay: 2s, 0s;
animation-delay: 2s, 0s
}

.drop:nth-of-type(11) {
left: 65%;
-webkit-animation-delay: 4s, 2.5s;
animation-delay: 4s, 2.5s
}

#back {
position: fixed;
top: 10px;
left: 5px;
animation: float 1.5s infinite alternate;
}

@keyframes float {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}

.ass {
position: absolute;
top: 665px;
left: 385px;
height: 325px;
width: 160px;
}
.ass img {
border: 1px solid white;
}

a {
color: #58388F;
font-weight: bold;
text-shadow: -1px 0 #371B72, 0 1px #371B72, 1px 0 #371B72, 0 -1px #371B72;
text-decoration: none;
}

a:hover {
font-style: italic;
}