html {
  scroll-behavior: smooth;
}

body {
	text-rendering: optimizeLegibility;
    margin: 0;
}

::selection {
    background-color: #fff !important;
    color: #000 !important;
}

* {
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: #000 #e1d5ba;
  	box-sizing: border-box;
}

* img {
    user-select:none;
    pointer-events:none;
}

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

*::-webkit-scrollbar-track {
    background: #e1d5ba;
}

*::-webkit-scrollbar-thumb {
    background-color: #000;
}

.favechars {
    width: 100%;
    height: auto;
    background-image: url("/about/favouritecharacters/img/bg.gif"), url("/about/favouritecharacters/img/bubble.png");
    background-position: bottom, center;
    background-blend-mode: multiply;
    background-repeat: no-repeat, repeat;
    position: relative;
    box-sizing: border-box;
    cursor: url("/about/favouritecharacters/img/cur.gif"), auto;
    background-color: #fffaff;
}

.favecharsinner {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    background-image:url("/about/favouritecharacters/img/sparklelips3.gif"), url("/about/favouritecharacters/img/sparklelips2.gif"), url("/about/favouritecharacters/img/sparklelips.gif");
    background-repeat: repeat-y, repeat-y, repeat-y;
    background-size:9%, 10%, auto;
    background-attachment:fixed, fixed, fixed;
    background-position: 81%, 72% 40%, left;
    filter: invert(100%) hue-rotate(180deg);
    &::after {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #ffffff50;
        content: "";
        display: block;
        top:0;
        left:0;
        z-index:200;
    }
}

a {
    cursor: url("/about/favouritecharacters/img/Link.cur"), auto;
    color:#ff1870;
    text-decoration-color: #ff1870;
    &:hover {
        color: blue;
        text-decoration-color: blue;
    }
}

.favechars {
.side {
  width: 20%;
  height: 100%;
  position: absolute;
  mix-blend-mode: hard-light;
  filter: invert(100%) hue-rotate(180deg);
  background-image: url('https://bettysgraphics.neocities.org/images/backgrounds/pattern%20627.gif');
  &.two {
    background-position: 135px -125px;
    background-attachment: fixed;
    right: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 30%, black 100%);
    mask-image: linear-gradient(to right, transparent, black 30%, black 100%);
  }
  &.one {
    background-position: -20px -125px;
    background-attachment: fixed;
    left: 0;
    -webkit-mask-image: linear-gradient(to left, transparent, black 30%, black 100%);
    mask-image: linear-gradient(to left, transparent, black 30%, black 100%);
  }
}
}

.date {
    font-family:monospace;
    color:rgba(0, 0, 0, 0.9);
    right:1em;
    top:1em;
    z-index:10000;
    padding:1em 1.3em;
    letter-spacing: 0.1rem;
    background-color: #fdfced;
    border-radius: 50px;
    text-shadow: 1px 1px #fff;
    border:2px dashed #ff1870;
    border-top:none;
    border-right:none;
    position:fixed;
    filter: invert(100%);
}

.favechars .chars {
    width: 70%;
    margin: 5em auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap:8em;
    flex-wrap: wrap;
}

.favechars .char {
    width: 500px;
    height: 350px;
    background: transparent;
    border-image: url(/about/favouritecharacters/img/doily.png) 80 / 40px round;
    border-image-outset: 0;
    border-image-outset: 35px;
    border-radius: 50px;
    z-index:201;
    box-shadow: 0 0 60px red;
    &:hover {
        transform: rotate(-3deg);
        image-rendering: pixelated;
    }
}

.favechars .bottom {
    height: 9em;
    text-align: center;
    color:#ffffff;
    font-size: 4rem;
    font-family: 'wobble';
    text-shadow: 3px 3px 0 #000;
    width: fit-content;
    margin: 3em auto auto;
    line-height: 3rem;
    span {
        display: inline-block;
        vertical-align: -5px;
    }
}

.char > .inner {
    background: rgba(255, 192, 203, 0.568);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
    border-radius: 30px;
    border: 4px ridge #ff2579;
    padding: 10px;
    filter: drop-shadow(0 0 5px rgb(255, 178, 208));
}

.char > .inner > .innerinner {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    border: 2px dashed #ffa4bc;
    padding: 10px;
    filter: invert(100%) hue-rotate(180deg);
}

.char > .inner > .innerinner > .knight {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 3px ridge pink;
    box-shadow: inset 0 0 15px #000000 , inset 0 0 5px #000000;
    overflow: hidden;
    &.vegeta {
    background-image: url('/about/favouritecharacters/img/vegetabg.gif'), url('/about/favouritecharacters/img/ftlO7Q.gif');
    background-blend-mode: lighten;
    background-position: center bottom, bottom;
    &::before {
        content: "";
        position: absolute;
        width: 200px;
        height: 114px;
        bottom:-50px;
        left:-60px;
        background-image: url('/about/favouritecharacters/img/loveyou.gif');
        z-index: 300;
        transform: rotate(-10deg);
        filter: hue-rotate(200deg) invert(100%);
    }
    &::after {
        content: "";
        position: absolute;
        width: 152px;
        height: 56px;
        top:0px;
        right:-50px;
        background-image: url('/about/favouritecharacters/img/kiss.gif');
        z-index: 300;
        transform: rotate(10deg);
        filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px #fff) hue-rotate(200deg) invert(100%);
    }
    }
    &.dante {
    background-image: url('/about/favouritecharacters/img/dantebg.gif'), url('/about/favouritecharacters/img/dantebg2.gif');
    background-position: center center, center;
    background-blend-mode: screen;
    }
    &.illidan {
    background-image: url('/about/favouritecharacters/img/illidanbg.gif'), url('/about/favouritecharacters/img/illidan2.gif');
    background-position: left center, center;
    background-blend-mode: screen;
    }
    &.vergil {
    background-image: url('/about/favouritecharacters/img/vergilbg.gif'), url('https://cdn.pixabay.com/animation/2025/03/20/16/33/16-33-20-645_512.gif');
    background-position: -275px center, center;
    background-blend-mode: overlay;
    &::before {
        content: "";
        position: absolute;
        width: 350px;
        height: 90px;
        top:-30px;
        left:-70px;
        background-image: url('/about/favouritecharacters/img/vergil3.gif');
        z-index: 300;
        transform: scaleX(-1) rotate(-10deg);
        filter: hue-rotate(200deg) invert(100%);
    }
    }
}

.type {
    width: 100%;
    height: 100%;
    position: relative;
    &.vegeta {
        .vegeta1 {
            position: absolute;
            top:10px;
            right:10px;
            filter: drop-shadow(3px 3px 0 #eac168) contrast(70%) brightness(110%);
            z-index: 201;
        }
        .vegeta2 {
            z-index: 202;
            position: absolute;
            bottom:-5px;
            left:80px;
            background-image: url('/about/favouritecharacters/img/whitegoldfill.gif');
            background-size: auto;
            background-position: center;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: 1px #000000;
            filter: hue-rotate(160deg) drop-shadow(3px 2px 0 #fff);
            .v1 {
                font-family: 'v1';
                font-size: 4rem;
            }
            .v2 {
                font-family: 'v2';
                font-size: 4.2rem;
            }
            .v3 {
                font-family: 'v3';
                font-size: 4.2rem;
            }
        }
        .vegeta3 {
            position: relative;
            top:10px;
            left:25px;
            z-index: 200;
            mix-blend-mode: hard-light;
        }
        .vegeta4 {
            position: relative;
            top:10px;
            left:25px;
            z-index: 200;
            mix-blend-mode: hard-light;
        }
        .vegeta5 {
            position: absolute;
            bottom:0px;
            left:0px;
            z-index: 200;
        }
        .vegeta6 {
            position: absolute;
            bottom:55px;
            left:140px;
            z-index: 200;
            transform: rotate(10deg);
            image-rendering: pixelated;
            opacity: 0.85;
        }
        .vegeta7 {
            position: absolute;
            bottom:10px;
            left:-40px;
            z-index: 201;
        }
        .vegeta8 {
            position: absolute;
            height: 100%;
            top:-50px;
            left:168px;
            z-index: 200;
            mix-blend-mode: lighten;
        }
        .vegeta9 {
            position: absolute;
            width: 100%;
            top:-50px;
            left:0px;
            z-index: 199;
            opacity: 0.4;
        }
        .vegeta10 {
            position: absolute;
            top:0px;
            image-rendering: pixelated;
            right:95px;
            transform: rotate(10deg);
            z-index: 201;
            filter: hue-rotate(-20deg) grayscale(40%);
        }
        .vegeta11 {
            position: absolute;
            bottom:5px;
            image-rendering: pixelated;
            left:30px;
            z-index: 201;
            transform: rotate(90deg);
            filter: hue-rotate(60deg);
        }
        .vegeta12 {
            position: absolute;
            image-rendering: pixelated;
            right:105px;
            z-index: 200;
            transform: rotate(-90deg);
        }
        .vegeta13 {
            position: absolute;
            image-rendering: pixelated;
            left:70px;
            top:180px;
            z-index: 200;
            transform: rotate(-5deg);
            filter: hue-rotate(-100deg);
            opacity: 0.7;
        }
    }
    &.dante {
        .dante1 {
            position: absolute;
            width: 350px;
            bottom:0;
            left:20px;
            filter: drop-shadow(0 0 10px #000) drop-shadow(0 0 20px #00000075);
            z-index: 198;
        }
        .dante2 {
            position: absolute;
            bottom:-5px;
            right:95px;
            z-index: 200;
            font-family: 'mistral';
            color:#fff;
            font-size: 4rem;
            background-image: url('/about/favouritecharacters/img/whitegoldfill.gif');
            background-size: auto;
            background-position: center;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: hue-rotate(-40deg) saturate(750%) drop-shadow(2px 2px 0 #000000);
        }
        .dante3 {
            position: absolute;
            top:-1px;
            z-index: 200;
            filter: hue-rotate(30deg);
            z-index: 199;
        }
        .dante4 {
            position: absolute;
            bottom:-1px;
            z-index: 196;
            transform: rotate(180deg);
            filter: hue-rotate(30deg);
        }
        .dante5 {
            position: absolute;
            top:65px;
            left:140px;
            z-index: 200;
            width: 100px;
        }
        .dante6 {
            position: absolute;
            bottom:80px;
            left:40px;
            z-index: 200;
            width: 100px;
            transform: rotate(-10deg);
        }
        .dante7 {
            position: absolute;
            top:15px;
            right:10px;
            z-index: 200;
        }
        .dante8 {
            position: absolute;
            bottom:-105px;
            right:-150px;
            z-index: 197;
            transform: scaleX(-1);
        }
        .dante9 {
            position: absolute;
            top:0px;
            right:0px;
            z-index: 199;
        }
        .dante10{
            position: absolute;
            top:5px;
            right:100px;
            z-index: 200;
            width: 80px;
            transform: scaleX(-1) rotate(10deg);
        }
        .dante11{
            position: absolute;
            top:35px;
            right:10px;
            z-index: 200;
            width: 40px;
            transform: scaleX(-1) rotate(-10deg);
        }
    }
    &.vergil {
    border-image: url("/about/favouritecharacters/img/vergil6.gif") 40 fill round;
    border-width: 20px;
    border-style: solid;
        .vergil1 {
            position: absolute;
            top:10px;
            right:10px;
            width: 350px;
            filter: drop-shadow(0 0 10px #000d49);
            z-index: 198;
            
        }
        .vergil2 {
            position: absolute;
            top:10px;
            right:6px;
            mix-blend-mode: lighten;
            filter: invert(100%);
            transform: rotate(5deg);
            z-index: 200;
        }
        .vergil3 {
            position: absolute;
            bottom:-20px;
            left:55px;
            color:#fff;
            font-family: 'wobble';
            font-size: 2.7rem;
            text-shadow: 3px 3px 1px #000;
            z-index: 200;
        }
        .vergil4 {
            position: absolute;
            bottom:-20px;
            left:5px;
            width:50px;
            z-index: 197;
        }
        .vergil5 {
            position: absolute;
            top:0;
            right:0;
            width: 150px;
            z-index: 200;
        }
        .vergil6 {
            position: absolute;
            top:90px;
            left:100px;
            width: 70px;
            z-index: 200;
        }
        .vergil7 {
            position: absolute;
            top:0px;
            left:80px;
            z-index: 199;
            opacity: 0.7;
        }
    }
    &.illidan {
    border-image: url("/about/favouritecharacters/img/vegeta.png") 40 fill round;
    border-width: 20px;
    border-style: solid;
        .illidan1 {
            position: absolute;
            top:10px;
            left:-250px;
            width: 600px;
            filter: brightness(140%) drop-shadow(0 0 10px #000000);
            transform: scaleX(-1);
            z-index: 199;
        }
        .illidan2 {
            position: absolute;
            top:-5px;
            right:5px;
            font-family: 'sinera';
            font-size: 2rem;
            font-weight: 1000;
            background-image: url('/about/favouritecharacters/img/whitegoldfill.gif');
            background-size: auto;
            background-position: center;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: hue-rotate(50deg) drop-shadow(2px 2px 0 #000);
            z-index: 200;
        }
        .illidan3 {
            position: absolute;
            top:-6px;
            left:115px;
            width: 35px;
            filter: hue-rotate(70deg) saturate(150%);
            z-index: 196;
        }
        .illidan4 {
            position: absolute;
            top:-10px;
            right:0px;
            width: 60px;
            filter: hue-rotate(100deg) grayscale(30%);
            z-index: 196;
        }
        .illidan5 {
            position: absolute;
            bottom:60px;
            right:0px;
            z-index: 196;
        }
        .illidan6 {
            position: absolute;
            bottom:0px;
            right:0px;
            z-index: 196;
        }
    }
}

@font-face {
	font-family: 'sinera';
	src: url('/fonts/Sinera.otf');
}
@font-face {
	font-family: 'wobble';
	src: url('/fonts/wobble.otf');
}
@font-face {
	font-family: 'mistral';
	src: url('/fonts/MISTRAL.TTF');
}
@font-face {
	font-family: 'v1';
	src: url('/fonts/Saiyan-Sans.ttf');
}
@font-face {
	font-family: 'v2';
	src: url('/fonts/Saiyan-SansLeft.ttf');
}
@font-face {
	font-family: 'v3';
	src: url('/fonts/Saiyan-SansRight.ttf');
}