@font-face {
font-family: cookie;
src:url(https://files.catbox.moe/bj3he9.otf);
}

@font-face {
font-family: cookiebold;
src:url(https://files.catbox.moe/ssqai6.otf);
}

* {
cursor: url("https://files.catbox.moe/r6fvay.png"), auto;
box-sizing: border-box;
}

@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: #A3FF00;
color: white;
}

::-moz-selection {
background: #A3FF00;
color: white;
}

a {
color: #A3FF00;
font-weight: bold;
text-decoration:none;
text-shadow: -1px 0 #45881B, 0 1px #45881B, 1px 0 #45881B, 0 -1px #45881B;
transition: 0.3s;
}

a:hover {
color: #7DFDF7;
text-shadow: -1px 0 #3DAED3, 0 1px #3DAED3, 1px 0 #3DAED3, 0 -1px #3DAED3;
transition: 0.3s;
}	


body {
background-image: url(https://files.catbox.moe/eqmq5a.jpg);
font-family: cookie;
color: white;
font-size: 20px;
overflow-x: hidden;
animation: fadein 1s;
}

@keyframes fadein {
from {
opacity: 0;
}
to   {
opacity: 1;
}
}


@keyframes glow {
0% {
-webkit-box-shadow: 0px 0px 20px 18px #A3FF00;
-moz-box-shadow: 0px 0px 20px 18px #A3FF00;
box-shadow: 0px 0px 20px 18px #A3FF00;
}
50% {
-webkit-box-shadow: 0px 0px 22px 20px #A3FF00;
-moz-box-shadow: 0px 0px 22px 20px #A3FF00;
box-shadow: 0px 0px 22px 20px #A3FF00;
}
100% {
-webkit-box-shadow: 0px 0px 20px 18px #A3FF00;
-moz-box-shadow: 0px 0px 20px 18px #A3FF00;
box-shadow: 0px 0px 20px 18px #A3FF00;
}
}

#main {
position: absolute;
top: 90px;
left: 50%;
transform: translate(-50%);
width: 850px;
height: 2500px;
font-size: 17px;
animation: glow 1.5s infinite;
border-radius: 20px;
background: rgba(0, 0, 0, 0.6);
border: 2px solid white;
}

.cringe {
position: absolute;
bottom: 0px;
left: 0px;
width: 850px;
height: 400px;
border: 1px solid blue;
}

#gacha {
position: absolute;
right: -120px;
top: 10px;
z-index: 5;
pointer-events: none;
height: 450px;
}

#desc {
position: absolute;
top: 60px;
left: 30px;
background: linear-gradient(to top, #A85EE7 0%, #5E2B88 100%);
width: 480px;
padding: 20px;
border: 4px solid white;
border-radius: 20px;
outline: 2px solid #A3FF00;
text-shadow: 0 0 2px white;
font-size: 22px;
font-style: italic;
box-shadow: 0px 0px 20px 0px rgba(145,255,1,1);
}

.linesticker {
position: absolute;
top: 460px;
left: 20px;
z-index: 2;
height: 235px;
width: auto;
}

h2 {
position: absolute;
top: -135px;
right: -100px;
font-size: 92px;
font-family: cookiebold;
filter: drop-shadow(4px 0 1px #65b300) drop-shadow(0 4px 1px #65b300) drop-shadow(-4px 0 1px #65b300) drop-shadow(0 -4px 1px #65b300) drop-shadow(-0px 1px 1px #65b300);
z-index: 1;
width: 900px;
}

h2:nth-child(1) {
background: linear-gradient(to top, #EA9CFF 0%, #53149E 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: white;
}

h2:nth-child(2) {
color: #91FF01;
animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
0%,
100% {
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}

50% {
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
}

/* actually purple cause i'm dumb*/
.g {
filter: sepia(100%) saturate(300%) hue-rotate(230deg);
transition: filter 0.5s ease-in-out;
will-change: filter;
}

.g:hover {
filter: sepia(0%) saturate(100%) hue-rotate(0deg);
}

/* actually green cause i'm dumb*/
.p {
filter: sepia(100%) saturate(380%) brightness(100%) hue-rotate(35deg);
transition: filter 0.5s ease-in-out;
will-change: filter;
}

.p:hover {
filter: sepia(0%) saturate(100%) brightness(100%) hue-rotate(0deg);
}

.content {
position: absolute;
background: linear-gradient(to top, #B292F3 0%, #7A5EA7 100%);
text-align: justify;
padding: 20px;
border-radius: 20px;
font-size: 20px; 
text-shadow: 0 0 2px white;
border: 2px solid white;
}

#torture {
position: absolute;
bottom: -245px;
left: -275px;
animation: bounce 2s infinite alternate;
}

@keyframes bounce {
to {
bottom: 70vh; /* Adjust the bounce height */
}
}

#s-m-t-tooltip {
/* basic */
max-width: 300px;
z-index: 10;
margin: 24px 14px 7px 12px;
/* style and design */
padding: 10px;
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
color: white;
}

.blinkies {
position: absolute;
top: 707px;
width: 790px;
left: 20px;
}

button {
background-color: #A3FF00;
border: 2px solid #65b300;
border-radius: 20px;
color: white;
text-shadow: 0 0 2px white;
font-family: cookiebold;
padding: 15px 30px;
text-align: center;
font-size: 20px;
box-shadow:0 0 10px #65b300;
}

button:active {
animation: enlarge 0.15s alternate ease-in;
}

@keyframes enlarge {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

img.shrine {
float: right;
margin-left: 20px;
border-radius: 20px;
height: 240px;
box-shadow: 0px 0px 8px 5px #A3FF00;
transition: 0.5s;
}

img.shrine:hover {
transform: scale(1.5);
transition: 0.3s;
}

img.crkmaxed {
position: absolute;
top: 1460px;
left: 23px;
border: 2px solid #B390F5;
border-radius: 20px;
margin-top:-15px;
width: 800px;
}

img.doll1 {
position: absolute;
left: 20px;
top: 1045px;
border: 2px solid #B390F5;
border-radius: 20px;
height: 380px;
}

img.doll2 {
position: absolute;
left: 300px;
top: 1045px;
border: 2px solid #B390F5;
border-radius: 20px;
height: 380px;
}

.hcs {
position: absolute;
left: 20px;
top: 1880px;
width: 810px;
height: 265px;
}

img.smug {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 3;
height: 265px;
}

#hc {
text-shadow: 0 0 2px white;
text-align: justify;
overflow: auto;
height: 115px;
margin-top: 10px;
}

.days {
width: 500px;
font-size: 25px;
background: linear-gradient(to top, #A3FF00 0%, #629900 100%);
border: 2px solid white;
padding: 10px 20px 10px 20px;
border-radius: 20px;
margin: 10px;
}

@keyframes float {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}

#alchhop {
position: absolute;
left: -120px;
top: -80px;
z-index: 3;
animation: float 1s infinite alternate;
pointer-events: none;
}

.collage {
position: absolute;
bottom: 22px;
width: 850px;
height: 300px;
}

img.marriage {
position: absolute;
left: 280px;
box-shadow: 0px 0px 10px 5px #A3FF00;
height: 300px;
}

img.gheart1 {
position: absolute;
left: 20px;
height: 300px;
}

img.gheart2 {
position: absolute;
right: 20px;
height: 300px;
}

/* left */
img.potion1 {
position: absolute;
top: 0px;
left: 60px;
height: 270px;
}

img.phearts1 {
position: absolute;
left: 20px;
top: 0px;
transform: scaleX(-1);
height: 150px;
}

img.grapes1 {
position: absolute;
left: 0px;
bottom: -10px;
transform: rotate(-40deg);
height: 165px;
}

img.bear {
position: absolute;
bottom: -10px;
left: 205px;
transform: scaleX(-1);
width: 150px;
}

/* right */
img.phearts2 {
position: absolute;
right: 20px;
top: 0px;
height: 150px;
}

img.grapes2 {
position: absolute;
right: 0px;
bottom: -10px;
transform: rotate(40deg) scaleX(-1);
height: 165px;
}

img.potion2 {
position: absolute;
top: 0px;
right: 60px;
height: 270px;
transform: scaleX(-1);
}

img.chibi {
position: absolute;
bottom: -10px;
right: 210px;
height: 160px;
}