/*---------------------------------------------------------------------------------------------------*/
/*-------------------------------- IMPORTANT STUFF --------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
* {
    box-sizing: border-box;
    scrollbar-color: transparent;
    scrollbar-width: none;
    cursor:
        url("https://cdn.cursors-4u.net/previews/black-widow-spider-0aae4d43-32.webp") 32 32,
        auto !important;
}
body {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    height: 1328px;
    z-index: -10;
    margin: 0;
    background-blend-mode: hard-light;
    background: #111111 url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/0da57e4c51f5b6e054b2694e51f7661b.jpg")
        center fixed;
    background-size: 241px;
}
.overlay {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/shadow.webp"),
        url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/9uwz5t.jpeg");
    background-size: cover;
    filter: opacity(0.11);
}
/*---------------------------------------------------------------------------------------------------*/
::selection {
/* Change highlight background color */
background: #000000;
/* Change highlight text color */
color: #bebebe;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------- OUTTER CONTAINERS --------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.out {
    border-width: 4px;
    filter: drop-shadow(1px 1px 0 #b9b9b9) drop-shadow(-1px 1px 0 #4d4d53) drop-shadow(0 2px 0 black)
        drop-shadow(0 -1px 0 black) drop-shadow(0 1px 1.5px black) drop-shadow(0 -1px 1.5px black)
        drop-shadow(1px -1px 1.5px black) drop-shadow(-1px -1px 1.5px black) brightness(87%);
    margin: auto;
    width: 63%;
    padding: 17px;
    border: 4px solid;
    border-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/borders/outterborder.webp") 6 fill round;
}
.inside {
    background: #111111 url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/0da57e4c51f5b6e054b2694e51f7661b.jpg")
        center fixed;
    background-size: 241px;
    border: 3px solid;
    border-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/borders/innerborder.webp") 14 fill round;
    margin: 0;
    padding: 4px;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------- INTERIOR CONTAINERS --------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.container {
    padding: 2px 1px;
    border-width: 11px;
    border-style: solid;
    border-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/borders/border2.png") 41 fill round;
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 25%;
    grid-template:
        "header header header header"
        "music music music music"
        "changelog middlebox middlebox nav"
        "divider divider divider divider"
        "stairsleft site extra stairsright"
        "footer footer footer footer";
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------- TOP CONTENT (HEADER - MUSIC PLAYER) ---------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.header {
    height: 99px;
    background-blend-mode: difference;
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/borders/dividertop1.webp"),
        url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/headerBG.webp");
    background-position: center top;
    background-repeat: repeat-x, repeat;
    background-size: 377px, auto;
    padding: 15px;
    border: double 4px #ffffff;
    text-align: center;
    color: #ffffff;
    background-color: #000000;
    grid-area: header;
    font-family: Font1;
}
.musicplayer {
    background-color: transparent;
    grid-area: music;
}
/*---------------------------------------------------------------------------------------------------*/
/*------------------ MIDDLE CONTENT (CHANGELOG - middlebox - NAVIGATION) ---------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.changelog {
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/pattern.png");
    background-position: center 100%;
    background-size: 100%;
    background-color: #000000;
    overflow: hidden;
    position: relative;
    border: 1mm ridge #4a4a4a;
    grid-area: changelog;
} /*-- For background purposes/frame purposes --*/
.changelogframe img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    overflow-y: scroll;
    position: absolute;
    margin-left: -13%;
    display: block;
    width: 125%;
    height: 115%;
} /*-- do not remove "img" or else it will break. --*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.middlebox {
    height: 456px;
    overflow: hidden;
    position: relative;
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/background4.webp");
    background-position: center;
    background-size: 67% 126%;
    background-repeat: repeat-x;
    border: 1mm ridge #4a4a4a;
    background-color: #000000;
    grid-area: middlebox;
}
.middleboxframe img {
    overflow-y: auto;
    position: absolute;
    margin-left: -9%;
    display: block;
    width: 113%;
    height: 118%;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.nav {
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/patternFlipped.png");
    background-position: center 100%;
    background-size: 100%;
    background-color: #000000;
    overflow: hidden;
    position: relative;
    border: 1mm ridge #4a4a4a;
    grid-area: nav;
}
.navframe img {
    overflow-y: auto;
    position: absolute;
    margin-left: -13%;
    display: block;
    width: 125%;
    height: 115%;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------- DIVIDER (SEPERATOR) --------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.divider {
    border: 2mm ridge #4a4a4a;
    filter: contrast(1.4) brightness(0.7);
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/bush.webp");
    background-position: center 60%;
    background-size: 29% 156%;
    background-color: black;
    grid-area: divider;
    height: 63px;
}
/*---------------------------------------------------------------------------------------------------*/
/*------------------ BOTTOM CONTENT (stairsleft - ABOUT SITE - ABOUT ME - stairsright) ---------------------*/
/*---------------------------------------------------------------------------------------------------*/
.stairsleft {
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/stairs.webp");
    background-position: 3px 107px;
    background-size: 100%;
    background-color: #000000;
    overflow: hidden;
    position: relative;
    grid-area: stairsleft;
    height: 457px;
    border: 1mm ridge #4a4a4a;
}
.stairsleftframe img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    overflow-y: auto;
    position: absolute;
    margin-left: -13%;
    display: block;
    width: 125%;
    height: 115%;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.site {
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/witch.png");
    background-position: 3px 77px;
    background-size: 100%;
    background-color: #000000;
    overflow: hidden;
    position: relative;
    border: 1mm ridge #4a4a4a;
    grid-area: site;
}
.siteframe img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    overflow-y: auto;
    position: absolute;
    margin-left: -41.5%;
    display: block;
    width: 182%;
    height: 140%;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.extra {
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/witch3.webp");
    background-position: -14px 77px;
    background-size: 108%;
    background-color: #000000;
    overflow: hidden;
    position: relative;
    border: 1mm ridge #4a4a4a;
    grid-area: extra;
}
.extraframe img {
    overflow-y: auto;
    position: absolute;
    margin-left: -41.5%;
    display: block;
    width: 182%;
    height: 140%;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.stairsright {
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/stairsflipped.webp");
    background-position: 3px 107px;
    background-size: 100%;
    background-color: #000000;
    border: 1mm ridge #4a4a4a;
    overflow: hidden;
    position: relative;
    grid-area: stairsright;
}
.stairsrightframe img {
    overflow-y: auto;
    position: absolute;
    margin-left: -13%;
    display: block;
    width: 125%;
    height: 115%;
}
/*---------------------------------------------------------------------------------------------------*/
/*------------------------------- FOOTER (END OF CONTENT) -------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.footer {
    filter: contrast(1.8) brightness(0.7);
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/stone.webp");
    background-position: center;
    background-size: 16%;
    background-color: #000000;
    border: 2mm ridge #4a4a4a;
    height: 67px;
    grid-area: footer;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------- FOR MOBILE SUPPORT ---------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
@media (max-width: 800px) {
    .container {
        grid-auto-columns: 100%;
        padding: 0;
        grid-template:
            "out"
            "inside"
            "header"
            "nav"
            "middlebox"
            "changelog"
            "divider"
            "site"
            "extra"
            "footer";
    }
    .out {
        width: 100%;
    }
    .header {
        background-size: 377px, auto;
    }
    .stairsright {
        display: none;
    }
    .stairsleft {
        display: none;
    }
    .musicplayer {
        display: none;
    }
    .siteframe img,
    .extraframe img {
        height: 195%;
    }
    .Decor {
        display: none;
    }
    .overlay {
        display: none;
    }
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------- STYLIZED TEXT --------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
#text {
    color: #fefefe;
    background-image: radial-gradient(#000000 25%, transparent 50%);
}
/*---------------------------------------------------------------------------------------------------*/
/*--------------------------------------- FONTS -----------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: Font1;
    src: url("https://file.garden/Z1oOf9tnlFqMuTJE/fonts/scochflashfont.ttf");
}
@font-face {
    font-family: Font2;
    src: url("https://file.garden/Z1oOf9tnlFqMuTJE/fonts/MomsTypewriter.ttf");
}

/*---------------------------------------------------------------------------------------------------*/
/*--------------------------------------- MUSIC PLAYER ----------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/

#musicplayer {
    font-family: "basiic";
    font-weight: bold;
    height: 30px;
    width: 100%;
    left: 0;
    top: 0;
    position: relative;
    display: flex;
    background: linear-gradient(180deg, black 0%, #1e1e1e 45%, black 47%, black 60%, gray 100%);
    border: ridge 2px #ffffff; /* border around player */
    outline: solid 2px black;
    box-shadow:
        inset 13px 0px 6px -10px rgb(66 66 66 / 20%),
        inset -13px 0px 6px -10px rgb(66 66 66 / 56%),
        inset 0px 13px 6px -10px #ffffff,
        inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

.songtitle {
    display: block;
    font-family: "Font2";
    margin-top: 1px;
    margin-right: 5px;
    font-size: 15px;
    color: #000000;
    letter-spacing: 1px;
    background: #d0d0d0; /* background of song title */
    border: #000000 solid 1px;
    border-radius: 100px;
    box-shadow:
        inset 13px 0px 6px -10px rgb(66 66 66 / 20%),
        inset -13px 0px 6px -10px rgb(66 66 66 / 56%),
        inset 0px 13px 6px -10px #6b6b6b,
        inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}

.controls {
    font-size: 12px; /* size of controls */
    text-align: center;
    width: 100px;
    height: 20px;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white)
        drop-shadow(0 -2px 0 white) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black)
        drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black)
        drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}

.controls td {
    padding-top: 2px; /* padding around controls */
}

.seeking {
    padding-top: 1px;
    width: 75%;
    background: transparent; /* background color of seeking bar */
    display: flex;
    justify-content: space-evenly;
}

.current-time {
    padding-right: 5px;
    margin-right: 3px;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white)
        drop-shadow(0 -2px 0 white) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black)
        drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black)
        drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}

.total-duration {
    padding-left: 5px;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white)
        drop-shadow(0 -2px 0 white) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black)
        drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black)
        drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
}
.ctrlimg {
    height: 16px;
    width: 16px;
}
.ctrlimg:hover {
    cursor: help;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px; /* thickness of seeking track */
    cursor: help;
    border-radius: 6px;
    background: #000000; /* color of seeking track */
    border: 1px white solid;
}

input[type="range"]::-webkit-slider-thumb {
    height: 30px; /* height of seeking square */
    width: 20px; /* width of seeking square */
    background-image: url("https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif"); /* image of  seeking square */
    background-size: 25px;
    -webkit-appearance: none;
    margin-top: -10px;
}

input[type="range"].volume_slider::-webkit-slider-runnable-track {
    background: white; /* color of volume seeking track */
    filter: drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black)
        drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black)
        drop-shadow(0.5px 0.5px 0 black); /* outline of volume seeking track */
}

input[type="range"].volume_slider::-webkit-slider-thumb {
    background-image: url("https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png"); /* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px;
    margin-top: -8px;
}

.slider_container {
    width: 15%; /* width of volume seeker */
    display: flex;
    justify-content: center;
    align-items: center;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*----------------------------------- // MISC // ----------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------// img no selection //-------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
img {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------// Button for nav //-------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.NAVbutton {
    overflow: hidden;
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/1826759463445734dc2145f6636711c6.jpg");
    background-size: cover;
    border: solid 1px #000000;
    color: black;
    padding: 4px;
    text-align: center;
    font-family: font2;
    font-size: 1.1em;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 28px;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------// STYLIZED TAGS //-------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
a {
    text-decoration: none;
}
/*---------------------------------------------------------------------------------------------------*/
hr.stylized {
    border: none;
    font-size: 5px;
}
hr.stylized2 {
    border: none;
    font-size: 16px;
}
/*---------------------------------------------------------------------------------------------------*/
.float {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }
    50% {
        transform: translate(0, 15px);
    }
    100% {
        transform: translate(0, -0px);
    }
}
/*---------------------------------------------------------------------------------------------------*/
a:hover {
    animation: pop 1s ease-in-out infinite alternate;
    -moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
    from {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1);
    }

    to {
        transform: scale(0.95);
    }
}
/*---------------------------------------------------------------------------------------------------*/
.heartanim {
    animation: heart 0.5s infinite;
}

@keyframes heart {
    0% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    51% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(-2deg);
    }
}
/*---------------------------------------------------------------------------------------------------*/
.spideranim {
    animation: spider 0.5s infinite;
}

@keyframes spider {
    0% {
        transform: rotate(-126deg);
    }

    50% {
        transform: rotate(-126deg);
    }

    51% {
        transform: rotate(-130deg);
    }

    100% {
        transform: rotate(-130deg);
    }
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------// Container for text //----------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
.changelogcontainer {
    -webkit-mask-image: url(https://i.ibb.co/KhqQW5x/73696-B1-E-A0-D7-4529-B2-D2-FB27-F0-D5-B437.png);
    -webkit-mask-size: 150%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    border-radius: 10px;
    overflow: auto;
    overflow-x: hidden;
    height: max-content;
    padding: 1rem;
    border: double #000000;
    filter: brightness(0.81);
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/shadow.webp"),
        url("https://file.garden/Z1oOf9tnlFqMuTJE/backgrounds/lined.webp");
    background-position: center;
    background-repeat: no-repeat, repeat;
    background-size: 98% 593px;
}
.container2 {
    -webkit-text-stroke: 1px #696969;
    color: #dddddd;
    overflow: auto;
    overflow-x: hidden;
    height: max-content;
    padding: 1rem;
    border: double #4a4a4a;
    border-radius: 10px;
    background: linear-gradient(to top, rgba(255, 253, 254, 0.27) 2%, #000000 100%);
}

.middleboximg {
    -webkit-mask-image: url(https://file.garden/Z1oOf9tnlFqMuTJE/masks/ezgif-2afebe3fa6125ab0.webp);
    -webkit-mask-size:  115% 114%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------// Loading Screen //----------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
body {
    overflow-y: hidden;
} /*Hides the scrollbar while loading.*/
#loadingScreen {
    position: fixed; /*Keeps the loading screen fixed on the screen */
    inset: 0; /*Makes loading screen wrap full screen.*/
    z-index: 999999; /*Makes loading screen stay on top.*/
    user-select: none; /*Disables user interaction with loading screen.*/
    transition: opacity 300ms; /*Adds a nice fading effect.*/
    background: #000;
    background-image: url("https://file.garden/Z1oOf9tnlFqMuTJE/gifs/rain.webp");
    background-size: contain;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: font1;
    font-size: 7rem;
}
#loadingScreen::after {
    content: "";
    animation: loadingDots 1s linear infinite;
}
@keyframes loadingDots {
    0%,
    100% {
        content: "";
    }
    25% {
        content: ".";
    }
    50% {
        content: "..";
    }
    75% {
        content: "...";
    }
}