/* Mobile Responsiveness - Vercel redeploy trigger */
@media (max-width: 1200px) {
    * {
        max-width: 100% !important;
        resize: both;
        overflow: auto;
    }
    
    body {
        padding: 0;
        font-size: 10px;
        min-height: 100vh;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }
    
    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    section {
        width: 95% !important;
        height: auto !important;
        min-height: 100vh;
        padding: 10px;
        margin: 0;
        border-radius: 0;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    #title {
        font-size: 3em !important;
        margin-left: 0 !important;
        margin-top: -50px !important;
    }
    
    #pfp {
        width: 400px !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    #roses {
        width: 450px !important;
        display: block !important;
        margin: -40px auto 10px !important;
    }
    
    #title {
        font-size: 10em !important;
        text-align: center !important;
        margin: 10px auto !important;
        display: block !important;
    }
    
    h1 {
        font-size: 7em !important;
        text-align: center !important;
    }
    
    p, span {
        font-size: 4em !important;
        text-align: center !important;
    }
    
    .sidebox {
        padding: 40px !important;
    }
    
    .fuckimg {
        width: 150px !important;
    }
    
    #newimage {
        width: 150px !important;
    }
    
    .sidebox {
        width: 100% !important;
        font-size: 0.9em !important;
    }
    
    h1 {
        font-size: 1.5em !important;
    }
    
    p {
        font-size: 0.85em !important;
        line-height: 1.4 !important;
    }
    
    #belt, #belt2 {
        width: 50px !important;
    }
    
    #bow {
        width: 80px !important;
    }
    
    #socials, #socials2, #socials3, #socials4, #socials5 {
        position: relative !important;
        margin: 5px !important;
    }
    
    #socials img, #socials2 img, #socials3 img, #socials4 img, #socials5 img {
        width: 30px !important;
    }
    
    .mini {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Hide elements not needed on mobile */
    #rightone, #faq, #socials2, #socials3, #socials4, #socials5, #bow, #belt, #belt2, .visitor-counter, #socials-container, #bones, #socials-title {
        display: none !important;
    }
    
    .sidebox {
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        border-image: none !important;
        padding: 5px !important;
    }
    
    section, main {
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        background-image: none !important;
        background: transparent !important;
        padding: 5px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    #info, #fuck {
        display: block !important;
    }
    
    #top {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

body {
    padding: 50px;
    background-image: url('img/0060526b857df32d88a2eb4e2de3faba.jpg');
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(5px);
    background-color: white;
    font-family: 'pixel';
    font-size: 12px;
    overflow: hidden;
    height: 100vh;
}

/* Start https://www.cursors-4u.com */

* {
    cursor: url(https://cur.cursors-4u.net/others/oth-8/oth705.cur), auto !important;
}

/* End https://www.cursors-4u.com */

section {
    margin: auto;
    border: ridge 4px white;
    border-radius: 13px 280px 13px 13px;
    padding: 15px;
    width: 870px;
    height: 730px;
    background-image: url('abt v2/image.jpg');
}

#title {
    font-family: 'inked';
    z-index: 200;
    background: none;
    box-shadow: none;
    position: absolute;
    color: black;
    margin-top: -100px;
    margin-left: -90px;
    font-size: 7em;
    border: none;
    filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 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);
    letter-spacing: 3px;
    font-weight: lighter;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #77BBFF;
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
}

main {
    border: ridge 4px gray;
    outline: solid 3px black;
    border-radius: 10px;
    border-radius: 13px 280px 13px 13px;
    background-image: url('abt v2/4.jpg');
    height: 700px;
    padding: 10px;
}

.mini {
    outline-offset: -5px;
    border-radius: 4px;
    padding: 10px;
    margin: 7px;
    background-image: url('img/downloadhgjyfg (6).jpg');
    background-size: 100px;
    border: ridge 4px black;
}

.sidebox {
    padding: .5em;
    box-shadow: inset 2px 2px 7px 0px rgb(66 66 66 / 56%), inset -2px 0px 6px 1px rgb(66 66 66 / 56%), inset -11px -3px 6px 0px #ffffff, inset 0px -13px 6px -10px #77BBFF;
    border: solid 8px black;
    border-image: url(img/pixelborder.png) 8 fill round;
    background: white;
    border-image-outset: -35px;
}

#pinkie {
    width: 150px;
    position: absolute;
    margin-left: -200px;
    margin-top: -80px;
}

#top {
    display: flex;
}

#info {
    text-align: center;
}

#info h1 {
    margin-top: 3px;
    font-family: 'angel';
    z-index: 999;
    background: none;
    box-shadow: none;
    position: relative;
    color: black;
    margin-top: -30px;
    font-size: 3.9em;
    border: none;
    filter: drop-shadow(2px 0 0 white) drop-shadow(-2px 0 0 white) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black);
    letter-spacing: 3px;
    font-weight: lighter;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #77BBFF;
    text-decoration-thickness: 1px;
    text-align: center;
}

#fuck h1 {
    position: absolute;
    z-index: 1000;
    margin-top: -60px;
    margin-left: 43%;
    transform: translateX(-50%);
    font-family: 'angel';
    font-size: 4em;
    color: black;
    text-shadow: 2px 2px 0 white, -2px 2px 0 white, 2px -2px 0 white, -2px -2px 0 white;
}

#fuck p {
    padding-top: 0px;
    margin-top: 2px;
    background: white;
}

#fuck div {
    overflow: scroll;
    overflow-x: hidden;
    height: 145px;
}

#fuck {
    height: 174px;
    position: relative;
}

.fuckdiv {
    width: 180px;
}

.fuckimg {
    filter: grayscale(100%);
}

h1 {
    text-shadow: 0 0 3px white;
    font-family: 'inked';
    text-decoration: none;
    font-size: 20px;
    font-weight: lighter;
    height: 20px;
    padding-left: 5px;
}

p {
    padding: 10px;
    background: white;
    border: dashed 1px black;
}

.tooltip {
    text-decoration-line: none;
    position: relative;
}

.tooltiptext {
    text-decoration-line: none;
    top: 0;
    right: 1;
    margin-left: -120px;
    margin-top: -50px;
    visibility: hidden;
    width: 140px;
    border: solid 1px black;
    background: white;
    color: black;
    padding: 5px;
    text-align: center;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

#leaks {
    margin-right: 5px;
    float: left;
}

#rightone {
    border-radius: 4px 250px 4px 4px;
    overflow: auto;
    overflow: hidden;
}

#biooo {
    height: 315px;
    border-radius: 0px 240px 0px 0px;
}

#biooo span {
    margin-top: -20px;
    line-height: 0%;
    background: black;
    color: white;
    height: 20px;
    width: 100px;
    margin-left: -10px;
}

#biooo div {
    height: 295px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-radius: 0px 240px 0px 0px;
}

#rightone p {
    margin-top: 5px;
}

#faq {
    overflow-y: hidden;
    overflow-x: scroll;
    height: 126px;
}

#faq div {
    display: flex;
    height: 95px;
    width: 980px;
}

#faq p {
    width: 200px;
    margin-right: 5px;
    height: 65px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.userbar {
    width: 224px;
}

#quotes {
    border: ridge 2px;
    width: 420px;
}

#bottom {
    margin-top: -4px;
    display: flex;
}

#interests {
    overflow-y: scroll;
    height: 150px;
    width: 380px;
    padding: 10px;
}

#interests p {
    color: white;
    background: linear-gradient(180deg, white 0%, white 25%, rgb(30, 30, 30) 26%, rgb(30, 30, 30) 50%, white 51%, white 76%, rgb(30, 30, 30) 77%);
    margin-top: 0px;
}

#interests img {
    width: 100%;
    margin-bottom: 2px;
}

#interests i {
    font-style: normal;
    color: black;
}

#interests div {
    width: 330px;
}

#whythefuckdidiformatitlikthis {
    height: 150px;
    width: 400px;
    overflow-y: hidden;
    overflow-x: scroll;
}

#quiz {
    display: flex;
    width: 2470px;
    margin-bottom: -10px;
}

#quiz img {
    border: dashed 1px black;
    filter: sepia(90%) hue-rotate(160deg) grayscale(40%);
    height: 110px;
    margin-right: 5px;
}

#quiz:hover img {
    filter: none;
}

span {
    margin-top: -15px;
    line-height: 70%;
    text-shadow: 0 0 3px white;
    font-family: 'inked';
    font-size: 20px;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #77BBFF;
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
}

#pfp {
    width: 230px;
    background-image: url('abt v2/4.jpg');
    background-size: 400px;
    filter: grayscale(100%)drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0 gray) drop-shadow(0 0.5px 0.5px gray) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black);
    border: solid 8px black;
    border-image: url(img/pixelborder.png) 8 fill round;
    border-image-outset: -35px;
}

#roses {
    margin-top: -30px;
    margin-bottom: -10px;
    width: 220px;
    filter: drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px 1px black);
    animation: float 3s ease-in-out infinite;
}

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

#tinyren {
    filter: grayscale(100%);
    width: 50px;
}

#bones {
    width: 230px;
    position: relative;
    margin-left: -150px;
    margin-top: -120px;
    transform: scaleX(-1);
    filter: drop-shadow(0 0.5px 0 white) drop-shadow(0 0.5px 0 white) drop-shadow(0.5px 0.5px 1px white) drop-shadow(0.5px 0.5px 1px white)drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black);
}

#belt {
    z-index: 100;
    width: 100px;
    position: absolute;
    margin-left: 710px;
    margin-top: -50px;
    border: 2px solid black;
}

#belt2 {
    z-index: 100;
    width: 70px;
    position: absolute;
    margin-left: 815px;
    margin-top: 50px;
    filter: grayscale(90%) drop-shadow(0 0.5px 0 white) drop-shadow(0 0.5px 0 white) drop-shadow(0.5px 0.5px 1px white) drop-shadow(0.5px 0.5px 1px white)drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black);
}

#bow {
    z-index: -1;
    width: 350px;
    position: absolute;
    margin-left: -250px;
    margin-top: -190px;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(0deg);
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: lightgray;
    -webkit-border-radius: 10px;
    border-radius: 4px;
    border: 1px solid black;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 6px;
    background: black;
    border: 1px solid black;
    box-shadow: inset 9px 0px 3px -10px white, inset -13px 0px 6px -12px white, inset 0px 13px 6px -10px white, inset 0px -13px 6px -10px white;
}

::-webkit-scrollbar-button,
.lyrics::-webkit-scrollbar-button {
    display: none;
    background-color: none;
}

::selection {
    color: white;
    background: black;
}

#fuck div::-webkit-scrollbar {
    width: 0;
    /* remove scrollbar space */
    background: transparent;
    /* to make scrollbar invisible */
}

#fuck div::-webkit-scrollbar-thumb {
    background: transparent;
}