@font-face {
    font-family: 'bebas';
    src: url('fonts/BebasNeueBold.woff2') format('woff2'),
        url('fonts/BebasNeueBold.woff') format('woff');
    font-weight: 300;font-style: normal;
}
:root {
    --c-white: #FFFFFF;
    --c-bg: #131519;
    --c-black: #131519;
    --c-lbg: #1d2026;
    --c-dbg: #0c0d0f;
    --c-red: #C3083F;
    --c-gray: #808080;
    --c-lgray: #b3b3b3;

    --c-pbg: #1E1F21;


    --s0-bg: rgba(19, 21, 25, 0);
    --s1-bg: rgba(19, 21, 25, 0.1);
    --s2-bg: rgba(19, 21, 25, 0.2);
    --s3-bg: rgba(19, 21, 25, 0.3);
    --s4-bg: rgba(19, 21, 25, 0.4);
    --s5-bg: rgba(19, 21, 25, 0.5);
    --s8-bg: rgba(19, 21, 25, 0.8);


    --s0-lbg: rgba(29, 32, 38, 0);
    --s3-lbg: rgba(29, 32, 38, 0.3);
    --s5-lbg: rgba(29, 32, 38, 0.5);
    --s6-lbg: rgba(29, 32, 38, 0.6);
    --s8-lbg: rgba(29, 32, 38, 0.8);
    --s9-lbg: rgba(29, 32, 38, 0.9);

    --s0-red: rgba(195, 8, 63, 0);
    --s1-red: rgba(195, 8, 63, 0.1);
    --s3-red: rgba(195, 8, 63, 0.3);
    --s5-red: rgba(195, 8, 63, 0.5);
    --s8-red: rgba(195, 8, 63, 0.8);


    --main-p: 5%;
    --main-w: 90%;

    
    --b-radius: 1rem;
    --b-radius2: 1.5rem;
    --b-radius3: 2rem;
}

::-webkit-scrollbar {width: .35vw;}
::-webkit-scrollbar-track {background: var(--c-bg);}
::-webkit-scrollbar-thumb {background: var(--c-red);border-radius: 0.35vw;}
iframe {z-index: 1 !important;}
::selection  {background-color: var(--c-red);color: var(--c-white);}
.noselect, img {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
input, select, .textarea {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
a {text-decoration: none;cursor: pointer;color: var(--c-red);}
body, html {
    width: 100%;margin: 0;padding: 0;
    color: var(--c-white);font-weight: normal;
    font-family: 'Roboto', sans-serif;background-color: var(--c-bg);
}
h1, h2, h3, h4, h5, h6 {line-height: 1;font-weight: normal;display:block;position:relative;margin: 0;padding: 0;}
.bold {font-weight: 700;}
.thin {font-weight: 100;}
.reg, .roboto, .regular {font-family: 'Roboto', sans-serif;}
.bebas {font-family: 'Fjalla One', sans-serif;}
.extra-title {font-size: 80px;}
h1, .s1 {font-size: 40px;}
h2, .s2 {font-size: 25px;}
h3, .s3, .smallh {font-size: 22px;}
h4, .s4 {font-size: 20px;}
h5, .s5 {font-size: 16px;}
h6, .s6 {font-size: 14px;}

.white {color: var(--c-white);}
.lgray {color: var(--c-lgray);}
.gray {color: var(--c-gray);}
.red {color: var(--c-red);}
.green {color: #4ee048;}
.bg, .black {color: var(--c-bg);}
.pointer {cursor: pointer;}
.inline {display:inline-block !important;vertical-align: middle;position:relative;}
.block {position:relative;display:block;}
.top-inline {display:inline-block;vertical-align: top;}
.bottom-inline {display:inline-block;vertical-align: bottom;}
.underline {text-decoration: underline;text-decoration-color: var(--c-red);}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}

.line-0 {line-height:0;}
.line-1 {line-height:1;}
.line-2 {line-height:1.25;}
.extra-line, .line-3 {line-height: 1.5 !important;}
.line-4 {line-height: 1.75;}
.line-5 {line-height: 2;}

.no-whitespace {white-space: nowrap;}

.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

.red-bg {background-color: var(--c-red) !important;}
.reg-bg {background-color: var(--c-bg) !important;}
.dark-bg {background-color: var(--c-dbg) !important;}
.light-bg {background-color: var(--c-lbg) !important;}
.white-bg {background-color: var(--c-white) !important;}

.outline-bg {background-color: transparent;border: solid 1px var(--c-bg);}
.outline-lbg {background-color: transparent;border: solid 1px var(--c-lbg);}
.outline-gray {background-color: transparent;border: solid 1px var(--c-gray);}

button {outline: none;border:none;position:relative;width:100%;}
.button {
    position:relative;padding: 2vh 2.5vh;border-radius: var(--b-radius);
    overflow: hidden;cursor: pointer;
}
.sm-button {padding: 1.25vh 2.25vh !important;}
.button::before {
    top:-50%;left:-70%;width:30%;height: 200%;background-color: var(--c-white);
    position:absolute;content: "";transform: rotate(30deg);opacity: 0.3;
    transition: left 0.6s ease-in-out;
}
.button:hover::before {left: 150%;}

.grid {position:relative;display: grid;width: 100%;}
.one-grid {grid-template-columns: 100%;column-gap: 0%;row-gap: 3vh;}
.two-grid {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 3vh;}
.tri-grid {grid-template-columns: repeat(3, minmax(0, 1fr));gap: 3vh;}
.four-grid {grid-template-columns: repeat(4, minmax(0, 1fr));gap: 3vh;}
.five-grid {grid-template-columns: repeat(5, minmax(0, 1fr));gap: 3vh;}
.six-grid {grid-template-columns: repeat(6, minmax(0, 1fr));gap: 3vh;}
.in-grid {position:relative;display: inline-grid;}
.in-main-gr {position:relative;display:block;overflow: hidden;}

.tooltip, .force-tooltip {
    position:absolute;bottom: 0;left:50%;transform: translateX(-50%);text-align: center;
    padding: 0.5vh 1vh;background-color: var(--c-white);color: var(--c-black);
    transition: all 0.2s ease-in-out;opacity: 0;white-space: nowrap;z-index:100;
    pointer-events: none;
}
.tooltip::before, .force-tooltip::before {
    position:absolute;bottom:-6px;left: calc(50% - 5px);
    clip-path: polygon(50% 100%, 0 0, 100% 0);content:"";
    background-color: var(--c-white);z-index:100;
    height:6px;width:10px;
}
.tooltip.tooltip-bottom::before {
    position:absolute;top:-6px;left: calc(50% - 5px);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);content:"";
    background-color: var(--c-white);z-index:100;
    height:6px;width:10px;
}
.tooltip *, .force-tooltip * {color: var(--c-black) !important;}
.tooltip-hover:hover .tooltip,
.tooltip-hover:hover .force-tooltip {
    bottom: calc(100% + 1vh);opacity: 1;
}

.tooltip-hover:hover .tooltip-bottom {bottom:-140% !important;}

.bg-over {
    position:fixed;top:0;left:0;height:0;width:100%;background-color: var(--c-dbg);
    opacity: 0;transition: opacity 0.2s ease-in-out;z-index: 900;
}
.opened {opacity: 0.6;height:100%;}
.down-box {
    position:fixed;top: -200%;left:50%;min-width:60%;min-height:50%;
    border-radius: var(--b-radius2);background-color: var(--c-bg);z-index: 901;
    transform: translate(-50%, -50%);transition: top 0.3s ease-in-out;
    overflow: auto;max-height: 90%;max-width: 80%;
}
.box-bottom-btn {
    position:absolute !important;bottom:2vh;left:50%;transform:translateX(-50%);
    display:block !important;width:80%;padding-left:0;padding-right: 0;margin: 0 !important;
    text-align: center !important;
}
.box-banner {
    display:block;width:100%;height:20vh;overflow: hidden;position:relative;
}
.box-banner img {width:100%;height:100%;object-fit: cover;display:block;}
.box-banner::before {
    top:0;left:0;width:100%;height: 120%;content:"";
    background: linear-gradient(to top, var(--c-bg), var(--s3-bg));
    position:absolute;
}
.box-in {display:block;width: 90%;padding: 2.5% 5% 5% 5%;}
.box-top {
    padding: 2vh 5%;background-color: var(--c-lbg);position:relative;
}
.close-box {position:absolute;top:calc(50% - 2.5vh);right:5%;height: 3vh;cursor: pointer;padding:1vh;}
.close-box img {height: 3vh;}
.box-bottom {padding:2vh;display:block;position:relative;}
.full-bottom {position:unset;}
.download-link {
    display:block;padding:1vh 2vh;background-color: rgba(0, 0, 0, 0.5);
    margin-bottom:1vh;
}


.auth-box {
    left: auto;transform: translateY(-50%);right:0;width: 50%;min-width:50%;min-height:100%;height:100%;
    border-radius: 0;
}
.auth-box .close-box {top: 2vh;right:2vh;}
.show-logform {display:none;}
.show-register {display:block;}
.alr-registered, .need-acc {margin-top:2vh;cursor:pointer;}
.move-top {margin-top: 2vh;}
.move-bottom {margin-bottom: 2vh;}

.auth-box .box-banner {height:40vh;}
.pick-form {width:80%;position:relative;height:calc(100% - 50vh);margin:5vh 10%;}
.pick-form-flex {
    display:flex;align-items: center;gap:10%;position:absolute;bottom:0;left:0;width:100%;
}
.in-flex {display:block;width:100%;text-align: center;}
.split-form-text {margin:4vh 0;}
.auth-box input {width:calc(90% - 1vw);}
.auth-box input[type="submit"] {width:100%;}


.banner-message {
    display:flex;margin: 4vh 0;width: 100%;border-radius: var(--b-radius);
    background-color: var(--c-red);padding: 2vh;box-sizing: border-box;gap: 2vh;align-items: center;
}
.read-mode .banner-message {margin: 4vh 0;width:100%;}
.banner-message img {height:2.5vh;border-radius:4px;}
.banner-message a {background-color: var(--c-white);border-radius:4px;padding: 2px 6px;}

.toggle-switch {
    width: 9vh;height:4vh;border-radius: var(--b-radius2);background-color: var(--c-lbg);
    position:relative;transition: all 0.2s ease-in-out;
}
.toggle-switch::before {
    position:absolute;top:0.5vh;left:0.5vh;height:3vh;width:3vh;
    border-radius:100%;content:"";background-color: var(--c-white);
    transition: all 0.2s ease-in-out;
}
.active-switch {background-color: var(--c-red);}
.active-switch::before {left:5.5vh;}

.loader {
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;
    background-color: var(--c-lbg);display:block;
}
@keyframes logo-appear {
    0% {transform: scale(0);}
    20% {transform: scale(1.1);}
    25% {transform: scale(0.9);}
    30% {transform: scale(1);}
    70% {transform: scale(1);}
    75% {transform: scale(0);}
    100% {transform: scale(0);}
}
@keyframes circle-before {
    from {transform: translate(-50%, -50%) scale(0);}
    to {transform: translate(-50%, -50%) scale(1);}
}
.logo-build {
    position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
}
.logo-build::before {
    position:absolute;top:42%;left:50%;transform: translate(-50%, -50%);
    content:"";background-color: var(--c-red);z-index:1;width: 18vw;height:18vw;
    opacity:0.3;border-radius:100%;animation: circle-before 0.2s ease-in-out forwards;
}
.logo-build-in {
    width: 14vw;animation: logo-appear 1.85s ease-in-out infinite;
    position:absolute;transform: scale(0);top:0;left:0;z-index:2;
}
.eyes {animation-delay: 0.2s;position:relative;}
.mouth-2 {animation-delay: 0.5s;}
.loading-text {position:absolute;bottom:5%;left:0%;width:100%;text-align:center;}

@keyframes loading-after {
    from{opacity:0;}
    to{opacity:1;}
}
.loading-text-after {display:block;opacity:0;animation:loading-after 0.2s ease-in-out 3s forwards;}

.down-box form {padding: 5%;}
.input-box {
    position:relative;display:block;margin-bottom:1vw;box-sizing: border-box;
}
input, select, textarea {
    display: block;padding: 0.75vw 1vw 0.75vw 10%;background-color: var(--c-lbg);
    outline: none;border: none;border-radius: var(--b-radius);width: 100%;
    font-family: Roboto;font-weight: 400;color: var(--c-white);
}
.input-icon {
    width: 8%;background-color: var(--c-red);height: 100%;
    top:0;left:0;position:absolute;border-top-left-radius: 0.25vw;
    border-bottom-left-radius: 0.25vw;
}
.input-icon img {
    position:absolute;top:50%;left:50%;height: 1vw;
    transform: translate(-50%, -50%);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
input:-webkit-autofill::first-line,
select:-webkit-autofill:focus {
    background-color: transparent !important;
    background: transparent !important;
    -webkit-box-shadow: 0 0 0 50px var(--c-white) inset;
    -webkit-text-fill-color: var(--c-bg);
    font-size: 20px !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: normal;
}

.swap-password {position:absolute;top:calc(50% - 0.5vw);right: 1vw;cursor: pointer;}
.swap-password svg {height:1vw;width:1vw;}

hr {border: solid 1px var(--c-gray);}

label {position: absolute;top:0.75vw;left:10%;transition: all 0.25s ease-in-out;}

input[type="submit"] {
    padding: 0.75vw 0;background-color: var(--c-red);cursor: pointer;
    font-weight: 700;font-size: 0.75vw;
}

input:not(:placeholder-shown) ~ label,
input:focus ~ label,
input:hover ~ label,
label:hover {left:0;top: -0.85vw;transform: scale(0.75);transform-origin: left;}

.swap-to-register, .swap-to-login {cursor: pointer;}


.manage-content {
    z-index: 800;position:fixed;bottom:10%;left:20%;width:calc(60% - 8vh);
    padding: 4vh 4vh 2vh 4vh;border-radius: var(--b-radius2);background-color: var(--c-red);
}
.preferences-grid {grid-template-columns: repeat(4, minmax(0, 1fr));gap:2vw;justify-items: center;}
.manage-content form {margin-top:3vh;}
.checkbox-eff {
    position:relative;display:inline-block;vertical-align: middle;
    height:5vh;width:5vh;border-radius: var(--b-radius);background-color: var(--c-dbg);
    margin-right: 0.5vw;cursor: pointer;
}
.checkbox-eff.checked::before {
    position:absolute;top:1vh;left:1vh;content:"";width:3vh;height:3vh;
    background-image:url(../assets/ic/tickbox.png);background-size:100% 100%;
}
.submit-pref {margin-top:5vh;}
.manage-content input[type="submit"] {
    width: 100%;font-size:0.8vw;
}

menu {
    position:fixed;top:0;left:0;padding: 2.5% var(--main-p);width: var(--main-w);
    z-index: 900;margin: 0;transition: all 0.2s ease-in-out;
}
.pc {
    position:fixed;top:0;left:0;width:100%;margin:0;padding: 2.5% var(--main-p);box-sizing: border-box;
    display:flex;align-items:center;
}
.pc-scrolled {padding: 0.75% var(--main-p);background-color: rgba(0,0,0,0.75);backdrop-filter: blur(6px);}
.right-side {margin-left:auto;text-align:right;position:relative;}
.wrap-links {position:relative;margin-right:3vh;}
.right-side a, .right-side .notifications {
    padding: 1vh 2vh;position:relative;display:inline-block;vertical-align: middle;
    margin-left:3vh;
}
.pc .icon-im {height: 2.5vh;width:2.5vh;object-fit: contain;object-position: center;margin-right:2vh;}
#notifications-url .icon-im {margin-right: 0 !important;}
.link-span {
    position:absolute;bottom:-12px;left:2vw;width: 3vw;height:2px;border-radius:2px;background-color: var(--c-white);
    transition: left 0.25s cubic-bezier(0.39, -0.29, 0.5, 1.53), width 0.1s;
}
.icon-im {height: 1.25vw;}

.notification-in {position:relative;min-width:12vw;margin-bottom:2vh;}
.notif-info {position:relative;}
.notif-actions {position:absolute;top:0;right:0;gap:0.5vh;display:none;}
.notif-actions img {height:3vh;width:3vh;object-fit: contain;cursor:pointer;margin-right: 0 !important;}
.notif-text {margin-top: 0.25vh;}
.notification-in:hover {background-color: var(--c-bg);}
.notification-in:hover .notif-actions {display:flex;}

.show-notif-amount {position:absolute;top:0;right:0;width:2vh;height:2vh;border-radius: 100%;background-color: var(--c-red);}
.show-notif-amount font {position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);}

@keyframes icon-anim {
    0% {transform:rotate(0);}
    25% {transform:rotate(-15deg);}
    50% {transform:rotate(0) scale(1.1);}
    75% {transform:rotate(15deg);}
    100% {transform:rotate(0);}
}
.right-side a:hover .icon-im {
    animation: icon-anim 0.3s ease-in-out;
}
.phone-notifs {display: none;}
menu .profile {position:relative;display:inline-block;vertical-align: middle;text-align: left;}
menu .profile a {margin-left: 0 !important;position:relative;}
.menu-pfp-eff {cursor:pointer;margin-right:-1.75vw;}
.profile-drop, .logo-drop {
    position:absolute;top:-100vh;left:50%;transform:translate(-50%, 0);z-index:998;
    padding: 2vh 0;background-color: var(--c-lbg);border-radius: var(--b-radius2);opacity:0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.profile-drop::before, .logo-drop::before {
    content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);z-index:998;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);width:25px;height:15px;background-color: var(--c-lbg);
}
.profile-drop::after, .logo-drop::after {
    position:absolute;top:-10vh;left:0;width:100%;height:12vh;content:"";
}
.profile-drop .in-drop, .logo-drop .in-drop {
    margin: 0 0 .5vh 0 !important;white-space: nowrap;
    color: var(--c-white);transition: all 0.2s ease-in-out;
    width:calc(100% - 2.5vw);display:block;padding: 1.5vh 1.5vw 1.5vh 1vw;
}
.profile-drop .in-drop:last-child {margin-bottom: 0 !important;}
.profile-drop img, .logo-drop img {
    position:relative;display:inline-block;vertical-align: middle;
    height:auto;width:2.5vh;margin-right: 1vw;
}
.profile-drop .in-drop:hover, .logo-drop .in-drop:hover {background-color: var(--c-bg);}
.profile-drop span {
    position:relative;display:block;height: 1px;background-color: var(--c-gray);margin: 2vh 1vw;
    width: calc(100% - 2vw);opacity:0.5;
}
.profile-pic {
    height:6vh;width:6vh;border-radius:100%;box-sizing: border-box;border: solid 3px var(--c-gray);
    background-color: var(--c-bg);
}
.profile-pic img {height:100%;width:100%;object-fit: cover;object-position: center;border-radius: 100%;}

.profile:hover .profile-drop {top:0;opacity:1;transform:translate(-50%, 15%);}
.profile-drop:hover {top:0;opacity:1;transform:translate(-50%, 15%);}
.logo-a:hover .logo-drop {top:150%;opacity:1;transform:translate(-50%, 10%);}
.logo-drop:hover {top:150%;opacity:1;transform:translate(-50%, 10%);}
.logo-drop::after:hover {top:150%;opacity:1;transform:translate(-50%, 10%);}



.oppy-choice {position:absolute;height:8vh;width:8vh;top:-1vh;left:-1vh;z-index:100;}
.oppy-choice img {display:block;width:8vh;margin:0;padding:0;position:relative;transform:rotate(-15deg);}


.logo-img {height: 1.5vw;}
.santa-hat {
    position:absolute;
    top:-2.25vh;left:-1.5vh;width:3vh;
    transform:rotate(-15deg) scaleX(-1);
}


menu .profile, menu .notifications {position:relative;display:inline-block;vertical-align: middle;text-align: left;}
menu .profile a, menu .notifications a {margin-left: 0 !important;position:relative;}
.notifications {position:relative;}
.ntfdrop {max-height: 60vh;overflow:auto;}
.notifications .icon-im {margin-right: 0;height:3vh;width:3vh;margin-top:0.5vh;}
.menu-pfp-eff {cursor:pointer;margin-right:-1.75vw;}
.profile-drop, .logo-drop {
    position:absolute;top:-100vh;left:50%;transform:translate(-50%, 0);z-index:998;
    padding: 2vh 0;background-color: var(--c-lbg);border-radius: var(--b-radius2);opacity:0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.profile-drop::before, .logo-drop::before {
    content:"";position:absolute;top:-15px;left:50%;transform:translateX(-50%);z-index:998;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);width:25px;height:15px;background-color: var(--c-lbg);
}
.profile-drop::after, .logo-drop::after {
    position:absolute;top:-10vh;left:0;width:100%;height:12vh;content:"";
}
.profile-drop .in-drop, .logo-drop .in-drop {
    margin: 0 0 .5vh 0 !important;white-space: nowrap;
    color: var(--c-white);transition: all 0.2s ease-in-out;
    width:calc(100% - 2.5vw);display:block;padding: 1.5vh 1.5vw 1.5vh 1vw;
}
.profile-drop .in-drop:last-child {margin-bottom: 0 !important;}
.profile-drop img, .logo-drop img {
    position:relative;display:inline-block;vertical-align: middle;
    height:auto;width:2.5vh;margin-right: 1vw;
}
.profile-drop .in-drop:hover, .logo-drop .in-drop:hover {background-color: var(--c-bg);}
.profile-drop span {
    position:relative;display:block;height: 1px;background-color: var(--c-gray);margin: 2vh 1vw;
    width: calc(100% - 2vw);opacity:0.5;
}

.profile:hover .profile-drop {top:0;opacity:1;transform:translate(-50%, 15%);}
.notifications:hover .profile-drop {top:140%;opacity:1;transform:translateX(-50%);}
.profile .profile-drop:hover {top:0;opacity:1;transform:translate(-50%, 15%);}
.notifications .profile-drop:hover {top:140%;opacity:1;transform:translateX(-50%);}

.logo-a:hover .logo-drop {top:150%;opacity:1;transform:translate(-50%, 10%);}
.logo-drop:hover {top:150%;opacity:1;transform:translate(-50%, 10%);}
.logo-drop::after:hover {top:150%;opacity:1;transform:translate(-50%, 10%);}

.act-frame {position:absolute;top:-100vh;left:-100vw;height:1px;width:1px;opacity:0;}

section {
    padding: 4% var(--main-p);z-index: 4;background-color: var(--c-bg);position:relative;
    width: var(--main-w);
}
.light-section {background-color: var(--c-lbg);}
.like-section {margin: 2% var(--main-p);position:relative;width: var(--main-w);}
.red-section {background-color: var(--c-red);}
.half-half {margin:0 var(--main-p);display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap:2vh;}

.above-results {display:block;position:relative;}
.above-results .inline {width: 50%;}
.right-actions {text-align: right;}
.action-icon {
    padding: 1vw;position:relative;display: inline-block;vertical-align: middle;
    cursor: pointer;transition: all 0.2s ease-in-out;
}
.inactive {cursor: not-allowed;}
.inactive svg g g {fill: var(--c-gray);}
.aspect {display:block;position:relative;width:100%;margin:0;}

.cover-img {
    display:block;border-radius: var(--b-radius2);position:relative;
    margin-bottom: 0.5vw;background-color: var(--c-dbg);overflow:hidden;
}
.cover-img:hover::before {opacity: 0;}
.cover-img-in {
    display:block;border-radius: var(--b-radius2);width:100%;position:absolute;top:0;left:0;height:100%;
    object-fit:cover;transition:transform 0.2s ease-in-out;
}
.blur {filter:blur(6px);}
.cplaying {position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);z-index:200;}
.pic-preview {position:absolute;top:0;left:0;display: none;}
.pic-preview-shown {
    width:100%;height:100%;display:block;z-index: 10;
    object-fit:cover;border-radius: var(--b-radius);
}
.undertitle-info {margin-right: 1vw;}
.undertitle-info img {display: inline-block;vertical-align: middle;width:1vw;height: 1vw;margin: 2px 0.5vw 0 0;}
.undertitle-info svg g g {fill: var(--c-gray);transition: all 0.2s ease-in-out;}
.undertitle-info font {margin-top: 2px;position:relative;}

.wrap-ep-info .title {max-width:calc(100% - 26px);overflow:hidden;white-space:nowrap;text-overflow: ellipsis;}


.stats-grid {
    display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 1vh;margin-top:1vh;
}
.icon-box {margin-right: 0.5vh;}
.icon-box img {height:1.5vh;}

.stats-grid .in-grid-wrap {
    padding: 1vh;border-radius: var(--b-radius);background-color: var(--c-lbg);
    display: inline-block;text-align:center;
}
.stats-flex {display:flex;gap:1vh;margin-top:1vh;position:relative;width:100%;}
.stats-in {
    padding: 1vh 1.5vh;border-radius: var(--b-radius);background-color: var(--c-lbg);
    display: inline-block;text-align:center;position:relative;white-space: nowrap;
}
.light-section .stats-in {background-color: var(--c-bg);}

.episode-shown object {white-space: nowrap;overflow:hidden;}

.episodes .in-grid {cursor: pointer;}
.tags-video {
    position:absolute;bottom:1vh;right:1vh;display:flex;
    justify-content: end;justify-items: center;gap: 1vh;
}
.fh-tag {
    padding:0.75vh;background-color: rgba(195, 8, 63, 0.45);
    border-radius: 8px;
}
.fh-tag:last-child {border-bottom-right-radius: var(--b-radius);}


.wrap-flags {position: absolute;top:1vh;right:1vh;display:flex;justify-content: end;justify-items: center;gap:1vh;}
.flag-in {position:relative;}
.flag-in img {height:2vh;border-radius:4px;}

.ep-hover {
    position:absolute;top:0;left:0;background-color: rgba(19, 21, 25, 0.8);border-radius: var(--b-radius);padding: 2vh;
    max-width:20vw;display:none;z-index:999;
}
#ep-inf-tags {margin-left: -1vh;}
#ep-inf-tags font {position:relative;padding: 1vh;display:inline-block;}


.search-tag-box, .studio-toggle {
    padding: 0.75vh 1.25vh;background-color: var(--c-dbg);margin: 0 0.75vh 0.75vh 0;
    border-radius: var(--b-radius);cursor: pointer;
}
.search-tag-box:hover, .studio-toggle:hover {background-color: var(--s3-red);}
.active-tag {background-color: var(--c-red);color: var(--c-white) !important;}



#social {
    background-color: var(--c-red);text-align: center;
    padding-top:14vh;padding-bottom:14vh
}
#social::before {
    width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;
    content:"";background-color: var(--c-bg);opacity:0.8;
}
.social-cover {width:100%;height:100%;position:absolute;top:0;left:0;object-fit: cover;z-index:1;}
.social-title {margin-bottom: 2vh;z-index:3;}
#social .button {margin: 0 1vh;z-index:3;}
#social .button img {margin-right: 1vh;}


.rate-feature {
    display:none;padding: 4vh var(--main-p);box-sizing: border-box;overflow:hidden;
    margin:4vh 0 0 0;background-color: var(--c-dbg);border-radius:var(--b-radius2);
    position:relative;
}
.rate-feature::before {
    position:absolute;bottom:0;left:0;width:100%;height:4px;background-color: var(--c-red);
    content:"";
}

.starrating {display:flex;gap:1vh;}
.starrating img {height:5vh;cursor:pointer;transition: transform 0.3s ease-in-out;}
.starrating img:hover {transform:scale(1.1);}
.optionalexplain {display:none;}
.optionalexplain textarea {
    padding:2vh !important;margin-top:2vh;
}


footer {
    padding: 5% var(--main-p);width: var(--main-w);margin:0;
    background-color: rgba(0, 0, 0, 0.5);position:relative;
}
footer .four-grid {
    display:grid;grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6vh;
}
.footer-in-title {margin-bottom: 2vh;}
.footer-first {
    padding: 4vh;border-radius: var(--b-radius);background-color:var(--c-lbg);
}
footer a {
    padding: 2vh 1vh;transition:all 0.2s ease-in-out;border-radius: var(--b-radius);
    margin-bottom: 1vh;
}
footer a:hover {
    background-color: rgba(0, 0, 0, 0.25);
}


.patreon-box {
    position:fixed;bottom:1vh;left:10%;width: calc(80% - 8vh);z-index:990;border-radius: var(--b-radius2);
    padding:4vh;background-color: var(--c-lbg);transition: bottom 0.2s ease-in-out;
}
.p-title {margin-bottom:1vh;}
.close-patreon {position:absolute;top:4vh;right:4vh;height:4vh;cursor:pointer;z-index:991;}
.pbtn {margin-top:4vh;}


.banners-grid {display:block;width:100%;}
.pc-ver {display:block;}
.phone-ver {display:none;}

div#snow {
    width: 10px;height: 10px;opacity:0.3;
    border-radius: 50%;filter: blur(0px);
    background-color: white;position: absolute;
    animation: fall 10s linear infinite;
    top: -50px;pointer-events:none;z-index:900;
}
@keyframes fall {100%{top: 100%;}}



.pat-up-box, .pat-up-box .box-top, .pat-up-box .box-in {background-color: var(--c-red);}
.pat-up-box .box-in {
    display:flex;align-items: center;flex-direction: column;gap:2vh;
}
.box-oppy {height:12vh;}

.wrap-features {margin-top:2vh;display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap:4vh;}
.feature-in {
    display:flex;align-items: center;gap: 1vh;position:relative;
}
.feature-icon {padding:1vh;border-radius: var(--b-radius);background-color: rgba(255,255,255,0.25);}
.feature-icon img {height:3vh;width:3vh;object-fit: contain;object-position: center;}

.pat-up-box .wrap-actions {margin-top: 4vh;}
.pat-up-box .wrap-actions .button {padding: 2.5vh 5vh 2vh 5vh;}

.pat-up-box .close-box {
    top: 2vh;right:2vh;transform: none;
}



details {display:block;margin:2vh 0;}
summary {
    padding: 2vh 2vh;display:flex;align-items:center;cursor: pointer;position:relative;
    background-color: var(--c-lbg);border-radius: var(--b-radius);
}
.summary-plus {
    display:block;background-color: var(--c-bg);font-size: 40px;
    margin-left:auto;width:3.5vh;height:3.5vh;position:relative;
    border-radius: 0.25em;
}
.summary-plus::before {
    content:"+";position:absolute;top: 50%;left: 50%;
    line-height:1;font-size: 40px;transform: translate(-50%, -50%);
    color: var(--c-white);
}
details .expanded {margin-top: 0;padding: 2vh;}
details[open] .summary-plus::before {content: "-";}


.close-pa {
    position:relative;display:flex;width:100%;background-color: var(--c-bg);
    padding:0.5vh 1vh;box-sizing: border-box;align-items: center;
    border-top-left-radius: var(--b-radius);
    border-top-right-radius: var(--b-radius);
}
.close-pa p {margin: 0;}
.close-pa-img {margin-left:auto;width:3vh;height:3vh;object-fit:contain;cursor:pointer;}
.pa {
    position:absolute;height: 60%;bottom:25%;left: 50%;transform:translateX(-50%);
    display:inline-block;max-height:60%;max-width:60%;overflow:hidden;z-index: 600;
}


.phone {display: none;}
@media (max-width: 980px) {
    .logo-build-in {width: 20vw;}
    .logo-build::before {width: 26vw;height:26vw;}
    .pc, .wrap-imht {display: none !important;}
    body {padding-bottom: 12vh;}
    footer .four-grid {grid-template-columns: 100%;}
    .phone {
        display:grid;height: 18px;background-color: var(--c-dbg);
        position:fixed;left:0;top:auto;bottom:0;
        grid-template-columns: repeat(5, minmax(0, 1fr));column-gap: 0;
        align-items: center;justify-content: center;justify-items: center;
        padding: 2vh 0;width: 100%;
    }
    .phi {
        align-items: center;justify-content: center;justify-items: normal;
        height:28px;padding: 1.5vh 0;
    }
    .lcen img {transform: scale(2);transform-origin: bottom center;}
    .phone:not(.phi) img {height:22px !important;width:auto;}
    .phi img {height: 18px !important;width:18px;object-fit: contain;}
    .phone-in {position:relative;}
    .show-notif-amount {right:1vh;top:-0.5vh;}
    .phone-in .pfp {border-radius:100%;height: 20px !important;width: 20px !important;object-fit: cover;margin-top:-1px;}

    .phone-notifs {
        position:fixed;top:0;left:0;width:100%;height:96%;z-index:950;background-color: var(--c-lbg);display:none;
    }
    .view-phone-notifs {display:block;}
    .phone-wrap-notifs {
        position:relative;background-color: var(--c-bg);padding:2vh;box-sizing: border-box;width:100%;
        margin-bottom:2vh;display:flex;align-items: center;
    }
    .close-notifs {margin-left:auto;height:3vh;width:3vh;object-fit: contain;}
    .phone-load-notifs {display:flex;gap:0;flex-direction: column;padding:2vh;box-sizing: border-box;max-height:80vh;overflow:auto;z-index:850;}
    .notification-in {display:grid;grid-template-columns: auto min-content;gap:0;align-items: center;background-color: var(--c-bg);padding: 2vh;border-radius: var(--b-radius);}
    .notif-actions {position:relative;top:unset;right:unset;display:inline-flex !important;}

    
    
    .float-options {
        display:none;gap:2vh;position:absolute;bottom:120%;left:0;
        width:100%;justify-content: center;align-items: center;
    }
    .view-bubbles {display:flex;}
    .phone-bubble {
        border-radius: 100%;background-color: var(--c-white);
        height:9vh;width:9vh;position:relative;transform: scale(0);
        transition: transform 0.25s ease-in-out;
    }
    .wrap-bubble {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
    .phone-bubble.mup {margin-top:-4vh;}

    @keyframes showbubble {
        from {transform: scale(0);}
        to {transform: scale(1);}
    }
    .view-bubbles .phone-bubble {animation: showbubble 0.25s cubic-bezier(0.42, 0, 0.65, 1.41) forwards;}
    .manhwa-bubble {
        background-color: #246bc9;transform-origin: bottom right;
        animation-delay: 0.2s !important;
    }
    .hentai-bubble {background-color: var(--c-red);transform-origin: bottom center;}
    .htok-bubble {
        background-color: #c97a24;transform-origin: bottom left;
        animation-delay: 0.4s !important;
    }


    h1, .s1 {font-size: 30px;}
    h2, .s2 {font-size: 20px;}
    h3, .s3, .smallh {font-size: 18px;}
    h4, .s4 {font-size: 16px;}
    h5, .s5 {font-size: 12px;}
    h6, .s6 {font-size: 10px;}

    section {padding: 4vh var(--main-p);}
        
    .half-half {margin:0 var(--main-p);display:grid;grid-template-columns: 100%;gap:2vh;}
    .extra-title {font-size: 35px;}
    .button {
        position:relative;padding: 2.25vh 2vh 2vh 2vh;border-radius: var(--b-radius);
        overflow: hidden;border: none;outline:none;
    }
    .manage-content {left:0%;width:calc(100% - 8vh);}
    .preferences-grid {grid-template-columns: repeat(2, minmax(0, 1fr));gap:2vh;justify-items: start;}
    .checkbox-eff {border-radius: 0.5vh;}

    .undertitle-info {margin-right: 1.5vh;}
    .undertitle-info img {margin-right: 0.5vh;}
    .menu-pfp {margin-left: 0;}
    .icon-im, .undertitle-info img, .menu-pfp, .menu-pfp img {height:3vh;}
    

    .cover-img {margin-bottom: 0.75vh;border-radius: var(--b-radius);}
    .cover-img img {border-radius: var(--b-radius);}

    .tooltip {display:none;}

    .action-icon {padding: 1.5vh;}

    .pc-ver {display:none !important;}
    .phone-ver {display:block;}

    .down-box {
        left:0%;min-width:100%;min-height:100%;overflow: auto;
        border-radius: 0;max-height: 100%;max-width: 100%;
        transform: translateY(-50%);
    }
    .down-box .two-grid {grid-template-columns: 100%;margin-bottom:5vh;}
    .down-box .in-grid:nth-child(5) {position:absolute;bottom:-4vh;left:0;}
    .down-box .in-grid:nth-child(6) {position:absolute;bottom:-4vh;right:0;}
    .auth-box .close-box {position:absolute;top:2vh;right:2vh;z-index:900;}
    .auth-box .close-box img {height: 5vh;}
    .auth-box input {width:calc(78% - 1vh);}
    .box-bottom {padding:5vh;}

    .manage-content input[type="submit"] {font-size:3vw;padding: 2vh 0;}
    input[type="submit"] {font-size:3vw;padding: 2vh 0;}
    label {position: absolute;top:1.5vh;left:22%;transition: all 0.25s ease-in-out;}
    input:not(:placeholder-shown) ~ label,
    input:focus ~ label,
    input:hover ~ label,
    label:hover {top: -2.25vh;}
    input, select, textarea {padding: 1.5vh 1vh 1.5vh 22%;border-radius: 0.5vh;}
    .input-box {margin-bottom:4vh;}
    .input-icon {
        width: 20%;
        border-top-left-radius: 0.5vh;
        border-bottom-left-radius: 0.5vh;
    }
    .input-icon img {height: 3vh;}
    .swap-password {top: calc(50% - 1.5vh);}

    
    .toggle-switch {width: 10vh;height:4.5vh;border-radius:4.5vh;}
    .toggle-switch::before {top:0.75vh;left:1vh;height:3vh;width:3vh;}
    .active-switch::before {left:6vh;}


    .stats-grid {grid-template-columns: repeat(2, minmax(0, 1fr));} 

    .oppy-choice {height:6vh;width:6vh;}
    .oppy-choice img {width:6vh;margin:0;}

    #social .button {
        display:block !important;margin-bottom:2vh;
    }
    #social .button h3 {margin-top:4px;}

    
    .patreon-box {bottom:6vh;left:0;width: calc(100% - 6vh);border-radius: var(--b-radius2);padding:3vh;}
    .p-title {margin-bottom:2vh;}
    .close-patreon {top:1vh;right:1vh;height:4vh;}


    .rate-feature {padding:4vh 4vh;}
    .starrating img {height:4vh;}
    .optionalexplain textarea {box-sizing: border-box;}
}
@media (max-width: 1300px) {
    :root {
        --main-p: 2.5%;
        --main-w: 95%;
    }
}
@media (max-width: 1400px) {
    .pc a font:not(.keep) {display:none !important;}
    .pc .icon-im {margin-right:0;}
    .link-span {left:3.5vw;}
}
@media (max-width: 1500px) {
    .stats-grid {grid-template-columns: repeat(2, minmax(0, 1fr));} 
    .profile-drop {left:0%;}
}
@media (min-width: 2000px) {
    :root {
        --main-p: 10%;
        --main-w: 80%;
    }
}




.exo-native-widget-item-title {color: white !important;}
.exo-native-widget-item-text {color: white !important;}


.htok-early {
    position:fixed;bottom:5vh;left:5vh;width:calc(100% - 10vh);
    border-radius: var(--b-radius);padding:2vh 4vh;box-sizing: border-box;
    background-color: var(--c-lbg);z-index:800;
}
.htok-early .wrap-flex {position:relative;display:flex;gap:2vh;align-items: center;}
.wrap-htok {position:relative;}
.htok-early img {position:relative;height:20vh;}

.close-htok {position:absolute;top:2vh;right:2vh;padding:2vh;cursor:pointer;z-index:10;}
.close-htok img {height: 3vh;width:3vh;object-fit: contain;}