::-webkit-scrollbar-thumb {
    border-radius:1000px;
    background-image:url("/img/scrollbar.webp");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
::-webkit-resizer {
    height:20px;
    width:20px;
    background-color:black;
    border-top:1px solid rgb(100,100,100);
}
#notifications::-webkit-scrollbar {
    width:10px;
}
label[unlisted] {
    position:relative; left:60px; opacity:0.5; color:white; margin-top:-5px;
}
label[unlisted="false"] {
    display:none;
}
.a
#notifications::-webkit-scrollbar-thumb {
    background-image:none;
    background-color:rgba(255,255,255,0.3);
}
::-webkit-scrollbar-thumb:hover {
    border-radius:1000px;
    background-image:linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 100%), url("/img/scrollbar.webp");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
::-webkit-scrollbar {
    background-color:transparent;
    width:10px;
}
@font-face {
    font-family:Cosmoa;
    src: url("/font/Cosmoa.otf");
    font-display: swap;
}
@font-face {
    font-family:Cosmoa2;
    src: url("/font/Cosmoa2.otf");
    font-display: swap;
}
@media only screen and (max-width:800px) {
    .banner_button {
        display:none;
    }
}
@media only screen and (max-width:1190px) {
    #premium_notif p, .notif p {
        text-align:center;
    }
}
.notification {
    font-family:Cosmoa2;
    font-size:16px;
    margin-bottom:30px;
    float:left;
    width:100%;
    text-align:left;
    white-space: pre-wrap;
    -webkit-text-stroke:0.5px black;
    text-decoration-color:white;
    user-select:text;
}
#new_notifications {
    color:white;
    background-color:rgb(255,0,0);
    border-radius:100px;
    font-size:min(12px, 2vw);
    font-family:Cosmoa;
    line-height:12px;
    text-align:center;
    position:absolute;
    top:30px;
    right:0px;
    transform:translateX(-25%);
    padding:3px 4px 3px 4px;
    max-height:12px;
    min-width:10px;
}
.notification img {
    height:24px;
    width:24px;
    object-fit:cover;
    float:left;
}
.notification_link, .notification_author {
    color:rgb(0,255,255);
    transition:0.2s color, 0.2s text-decoration-color;
    text-decoration: underline;
    text-decoration-color: rgb(0,255,255);
}
.notification_link:hover, .notification_author:hover {
    color:white;
    text-decoration-color:white;
}
.banner_button:hover {
    background-color:rgba(255,255,255,0.2);
}
#premium_banner_button:hover {
    border-color:black;
    background-color:#FFDC00;
}
#premium_banner_button:hover p {
    color:black;
    text-shadow:0px 0px 1px white;
}
#premium_banner_button p b {
    -webkit-text-stroke:0.5px #FFDC00;     
}
#premium_banner_button:hover b {
    -webkit-text-stroke:0.5px black;
}
html {
    background-color:black;
    background-image:url('/img/bg2.webp?2');
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment: fixed;
    font-family:Cosmoa2;
}
body {
    margin:0px;
    padding:0px;
    overflow-y:scroll;
    overflow-x:hidden;
    margin-left:0px;
    user-select:none;
}
.comment_maker {
    resize:none;
    color:white; 
    background-color:rgba(0,0,0,0.4);
    border:2px solid rgba(255,255,255,0.2); 
    font-size:15px;
    align-self:end;
    font-family:Cosmoa2; 
    width:calc(100% - 24px); 
    overflow-x:hidden; 
    padding:0px 10px 0px 10px;
    height:min(50%, 45px);
    min-height:min(50%, 45px);
    border-radius:8px;
    transition:0.2s color, 0.2s background-color;
}
.reply {
    cursor:pointer;
    border-radius:8px;
    float:left;
    border:2px solid transparent;
    opacity:0.45;
    font-size:14px;
    font-family:Cosmoa2;
    -webkit-text-stroke:0.2px black;
    text-align:center;
    padding:0px 4px 0px 0px;
    transition:0.2s opacity, 0.2s border;
    margin-left:90px;
    margin-top:-18px;
    display:none;
}
.reply:hover, .reply:active, .reply[selected="true"] {
    opacity:1;
    border:2px solid rgba(255,255,255,0.6);
}
.delete_comment:hover, .delete_comment:active {
    opacity:1;
    border:2px solid red;
}
.delete_comment {
    border:2px solid transparent;
    transition:0.2s opacity, 0.2s border;
    opacity:0.7;
    cursor:pointer;
    border-radius:8px;
    color:red;
    font-size:16px;
    font-family:Cosmoa;
    -webkit-text-stroke:0.5px red;
    text-align:center;
    margin-left:4px;
    padding:2px 8px 2px 8px;
    line-height:18px;
    display:none;
}
.comment_maker::placeholder {
    color:rgba(255,255,255,0.7);
}
.comment_maker:focus {
    background-color:white;
    color:black;
}
.comment_maker:focus::placeholder {
    color:rgba(0,0,0,0.7);
}
iframe {
    border:none;
}
p,a,select {
    color:white;
    -webkit-text-stroke:0.5px black;
}
select {
    padding:4px;
    background-color:black;
    font-family:Cosmoa;
    font-size:16px;
    border:2px solid rgb(70,70,70);
    border-radius:8px;
    -webkit-text-stroke:0px black;
    user-select:none;
}
#sort {
    margin-top:0px;
}
.uploadDiv {
    user-select:none;
    display:flex;
    position:relative;
    flex-flow:row wrap;
    max-width:min(300px, 100%);
    align-items: flex-start;
    justify-content:space-around;
    transform:scale(0.98, 0.98);
    overflow:hidden;
    white-space:pre-wrap;
    border:2px solid rgb(70,70,70);
    border-radius:6px 6px 16px 16px;
    background-color:black;
    min-width:calc(25% - 4px);
    margin-bottom:40px;
    min-height:min(300px, calc(100dvh - 90px));
    transition:0.1s transform;
}
@media only screen and (max-width:500px) {
    .uploadDiv {
        max-width:100%;
        width:100%;
    }
}
.promo[data-ad-client]{
    margin:0px;
    min-width:calc(25% - 4px);
    width:min(100%, 300px);
    object-fit:contain;
    border:2px dashed rgb(255,255,0);
    background-color:black;
    align-self:center;
    height:auto;
    margin-bottom:40px;
}
.promo[data-ad-client] div {
    max-width:100%;
    position:absolute;
    left:50%;
    width:inherit;
    transform:translateX(-50%);
}
.uploadDiv[theatermode="true"] {
    order:-1;
    position:fixed;
    z-index:1000000;
    min-height: calc(100dvh - 56px);
    width: calc(100% - 4px);
    min-width:calc(100% - 4px);
    top:52px;
    left:0px;
    transform:scale(1,1);
}
.statsDiv {
    position:relative;
    left:0px;
    top:0px;
}
.uploadDiv[theatermode="true"] .theatermode_button {
    background-image: url('/img/shrink_icon.png');
}
.statsDiv {
    display:flex;
    flex-flow:column-reverse;
    order:1;
    width:100%;
}
.uploadContainer {
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    aspect-ratio:16/9;
    order:-1;
}
.comments {
    width:100%;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;
    flex-flow:column;
}
.commentContainer {
    width:100%;
    max-height: calc((100dvh - 100px) - 115px);
    order:-1;
    position:absolute;
    top:0px;
    display:flex;
    flex-flow:column;
    transition:0.2s left;
    overflow-y:hidden;
    overflow-x:hidden;
    background-color:rgba(0,0,0,0.4);
    z-index:999998;
}
.comment {
    order:1;
    transition:0.2s background-color;
    margin-top:40px;
    width:calc(100% - 10px);
    color:white;
    white-space:pre-wrap;
    word-wrap:break-word;
    -webkit-text-stroke:0.6px black;
}
.comment_message {
    max-width:calc(100% - 90px);
    margin-left:90px;
    user-select:text;
}
.comment_pfp {
    width:40px;
    height:40px;
    object-fit:contain;
    background-size:cover;
    border-radius:500px;
    background-position:center center;
    float:left;
    margin-top:14px;
}
.comment_author {
    margin-left:90px;
    max-width:calc(100% - 90px);
    -webkit-text-stroke:0.3px black;
}
.comment_time {
    display:inline-block;
    margin-left:10px;
    -webkit-text-stroke:0.3px black;
    opacity:1;
    color:rgb(200,200,200);
    font-size:14px;

}
.comment_score {
    height:20px;
    width:26px;
    border:2px solid rgba(255,255,255,1);
    border-radius:100px 100px 0px 0px;
    background-color:rgba(0,0,0,0.5);
    opacity:0.5;
    text-align:center;
    cursor:pointer;
    transition:0.2s opacity;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center top;
}
.comment_score[upvote="true"] {
    background-image:url("/img/upvote.png?v=3");
}
.comment_score[downvote="true"] {
    background-image:url("/img/downvote.png?v=3");
}
.comment_score_container {
    float:left;
    height:60px;
    text-align:center;
    cursor:pointer;
    transition:0.2s opacity;
    display:flex;
    flex-flow:column;
}
.comment_score:hover {
    opacity:1;
}
.context_menu {
    border:2px solid rgb(70,70,70);
    border-radius:4px;
    max-width:100vw;
    object-fit:contain;
    text-align:left;
}
.context_menu button {
    background-color:black;
    color:white;
    font-family:Cosmoa2;
    font-size:16px;
    border:none;
    transition:0.2s background-color;
}
div[divider='false'] {
    display:none;
}
div[divider='true'] {
    display:block;
}
.context_menu button:hover, .context_menu button:active {
    background-color:rgb(70,70,70);
}
.upload {
    width:100%;
    height:100%;
    object-fit:contain;
    margin:0px;
    padding:0px;
    order:999;
    transition:0.15s opacity;
}
div.upload {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    opacity:1;
    background-size:contain;
    background-position:center center;
    background-repeat: no-repeat;
}
.upload[txt-src]{
    overflow-y:auto; color:white; -webkit-text-stroke:0.5px black; width:calc(100% - 20px); padding:10px 10px 0px 10px; user-select:text;
    height:calc(100% - 10px); word-wrap:break-word; white-space:pre-wrap;
}
#uploads {
    display:flex;
    flex-flow:row wrap;
    align-items: flex-start;
    justify-content:center;
    padding-bottom:100px;
}
.stats {
    font-family:Cosmoa;
    -webkit-text-stroke:0.1px black;
    margin:0px;
    color:rgb(150,150,150);
    white-space:pre-wrap;
    font-size:12.5px;
    text-align:left;
    padding:0px 20px 0px 60px;
}
.title {
    -webkit-text-stroke:0.4px black;
    padding:0px;
    font-weight:bold;
    font-size:18px;
    white-space:pre-wrap;
    word-wrap:break-word;
    position:relative;
    top:-4px;
    left:0px;
    margin:0px 20px 0px 60px;
    min-height:18px;
    z-index:-1;
}
.date {
    -webkit-text-stroke:0.2px black;
    margin:0px;
    font-size:11px;
    font-family:Cosmoa;
    white-space:pre-wrap;
    word-wrap:break-word;
    position:relative;
    top:-4px;
    left:0px;
    padding:4px 20px 0px 60px;
    color:rgb(150,150,150);
    z-index:-1;
}
.author {
    -webkit-text-stroke:0.4px black;
    margin:0px;
    margin-left:60px;
    font-size:16px;
    white-space:pre-wrap;
    opacity:1;
}
a[class="author"] {
    width:40px;
    margin-left:10px;
    margin-bottom:-20px;
    padding:0px;
}
#banner {
    user-select:none;
    z-index:999999999999;
    position:sticky;
    font-family:Cosmoa;
    width:calc(100% - 4px);
    top:0;
    left:0;
    border:2px solid rgb(70,70,70);
    border-top:none;
    border-radius:0px 0px 20px 20px;
    background-color:#000000;
    margin-bottom:50px;
    letter-spacing:-1px;
    text-align:center;
    font-size:min(40px, 20vmax);
    min-height:50px;
    text-shadow:0px 0px 2px black;
    -webkit-text-stroke:0.5px black;
}
.statsDiv .average {
    display:inline; font-family:Cosmoa; font-size:15px; padding:0px 30px 6px 30px; color:rgb(255,200,61); text-align:center; order:1; margin-top:4px;
}
#banner_bg {
    z-index:-1;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    min-height:inherit;
    opacity:0.8;
    background-image:url('/img/banner_small.webp?v=1');
    background-size:cover;
    background-position:0px 100%;
    filter:saturate(50%) hue-rotate(0deg);
    border-radius:0px 0px 18px 18px;
    transition:0.2s filter, 0.2s opacity;
}
#banner:hover > #banner_bg, #banner:active > #banner_bg {
    filter:saturate(100%);
    opacity:1;
}
#search {
    position:absolute;
    top:0%;
    background-color:black;
    border:none;
    border-radius:0px 100px 100px 80px;
    color:white;
    left:50px;
    font-family:Cosmoa2;
    transition:0.2s width, 0.2s opacity;
    width:min(250px, calc(100vw - 200px));
    opacity:0;
    font-size:18px;
    margin:0px;
    line-height:18px;
    padding: 14.25px 80px 14.25px 60px;
    transform:translateX(-60px);
    z-index:-1;
    -webkit-text-stroke:0.5px black;
    outline:none;
}
#stopsearch {
    position:absolute;
    left:min(250px, calc(100vw - 200px));
    top:50%;
    padding:5px;
    margin:0px;
    line-height:14px;
    transform:translateY(-50%) translateX(56px);
    opacity:0.4;
    visibility:hidden;
    transition:0.2s opacity;
    font-size:14px;
    cursor:pointer;
    border-radius:100px;
    border:2px solid white;
}
#stopsearch:hover {
    opacity: 0.8;
}
#searchbar {
    cursor:pointer;
    position:absolute;
    top:0%;
    left:0px;
    height:100%;
    width:50px;
    margin-left:10px;
    border-radius:20px;
    z-index:10000;
}
::placeholder {
    color:white;
    font-family:Cosmoa2;
    -webkit-text-stroke:0.5px black;
    opacity:0.6;
}
#main {
    width:100vw;
}
.pfp {
    height:40px;
    width:40px;
    object-fit:cover;
    padding:0px;
    border-radius:100%;
    margin:0px;
}
.username {
    margin-left:60px;
    margin-bottom:-20px;
    cursor: pointer;
    width: min(100%, 156.613px);
    transition:0.2s color;
}
a {
    text-decoration:none;
}
.theatermode_button {
    position:absolute;
    right:0px;
    top:4px;
    display:block;
    cursor:pointer;
    height:24px;
    width:24px;
    background-image:url("/img/fullscreen_icon.png");
    background-size:contain;
    background-repeat:no-repeat;
    opacity:0.7;
    transition:0.2s opacity;
    order:1;
}
.theatermode_button:hover {
    opacity:1;
}
.copy_button {
    position:absolute;
    left:0px;
    top:4px;
    display:inline;
    cursor:pointer;
    height:24px;
    width:24px;
    background-image:url("/img/copy_icon.png");
    background-size:contain;
    background-repeat:no-repeat;
    opacity:0.7;
    transition:0.2s opacity;
    order:1;
    font-size:14px;
    line-height:24px;
    font-family:Cosmoa2;
    color:white;
    white-space:pre-wrap;
}
.play_button {
    position:absolute;
    top:50%;
    cursor:pointer;
    width:40px;
    margin:0px;
    aspect-ratio:1;
    background-image:url("/img/play.png");
    background-size:40px 40px;
    background-position:center center;
    background-repeat:no-repeat;
    transition:0.2s opacity;
    padding:5px;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    border-radius:12px;
    background-color:rgba(0,0,0,0.3);
    border:2px solid rgba(255,255,255,0.4);
    z-index:5001;
}
.loop {
    width:40px;
    aspect-ratio:1;
    background-image:url("/img/loop.png");
    background-size:40px 40px;
    background-position:center center;
    background-repeat:no-repeat;
    transition:0.5s opacity;
    position:absolute;
    top:50%;
    padding:5px;
    left:50%;
    opacity:0;
    transform:translateX(-50%) translateY(-50%);
    border-radius:12px;
    background-color:rgba(0,0,0,0.3);
    border:2px solid rgba(255,255,255,0.4);
    z-index:5000;
}
.volume {
    width:40px;
    aspect-ratio:1;
    opacity:0;
    background-image:url("/img/volume_plus.png");
    background-size:40px 40px;
    background-position:center center;
    background-repeat:no-repeat;
    transition:0.5s opacity;
    position:absolute;
    top:50%;
    padding:5px;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    border-radius:12px;
    background-color:rgba(0,0,0,0.3);
    border:2px solid rgba(255,255,255,0.4);
    z-index:5000;
}
.loading {
    background-color:rgba(0,0,0,0.3);
    display:none;
    cursor:pointer;
    width:40px;
    text-align:center;
    font-size:18px;
    line-height:13px;
    text-shadow:0px 0px 2px black;
    font-family:Cosmoa2;
    color:white;
    -webkit-text-stroke: 0.2px black;
    aspect-ratio:1;
    background-image:url("/img/galaxy.png");
    background-size:auto 40px;
    background-position:center center;
    background-repeat:no-repeat;
    transition:0.2s opacity;
    position:absolute;
    top:50%;
    left:50%;
    padding:10px;
    transform:translateX(-50%) translateY(-50%);
    border-radius:50%;
    z-index:5000;
    animation-name:loadAnim;
    animation-duration:1s;
    animation-timing-function:ease-in-out;
    animation-direction: alternate;
    animation-iteration-count:infinite;
}
@keyframes loadAnim {
    0% {transform:translateX(-50%) translateY(-50%) rotate(-10deg);}
    100% {transform:translateX(-50%) translateY(-50%) rotate(10deg);}
}
.copy_button:hover {
    opacity:1;
}
#filters {
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    background-color:black;
    border:2px solid rgb(70,70,70);
    border-radius:8px;
    margin-top:8px;
    display:none;
    position:sticky;
    top:50px;
    left:0px;
    margin-left:50%;
    width:calc(100% - 32px);
    transform:translateX(-50%);
    z-index:999998;
    padding:0px 4px 0px 4px;
}
#premium_notif, .notif {
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    margin-top:70px;
    position:relative;
    left:50%;
    top:0px;
    transform:translateX(-50%);
    width:min(1000px, 80vw);
    color:white;
    line-height:34px;
    padding:10px;
    -webkit-text-stroke:0.5px black;
    border-radius:60px;
    background-color:black;
    font-family:Cosmoa2;
    font-size:20px;
    text-align:left;
    border:3px solid rgba(255,255,255,0.5);
}
#sidebar_button {
    float:right;
    padding:0px;
    margin:0px;
    width:min(100px, 15vw);
    background-color:transparent;
    background-image:url("/img/menu.webp");
    background-size: 30px 30px;
    background-position: center center;
    background-repeat: no-repeat;
    height:50px;
    border-radius: 0px 0px 18px 0px;
    color:white;
    font-size:50px;
    font-family:Cosmoa;
    line-height:50px;
    cursor:pointer;
    border:none;
    -webkit-text-stroke:0px black;
    transition:0.2s background-color;
    outline:none;
}
#sidebar_button:hover {
    background-color:rgba(255,255,255,0.2);
}
#sidebar {
    position:fixed;
    height:calc(100vh - 50px);
    width:min(400px, 100%);
    z-index:9999999;
    top:50px;
    background-color:rgba(0,0,0,0.8);
    transition:0.2s right;
    display:flex;
    flex-flow: row wrap;
    overflow-x:hidden;
    overflow-y:auto;
    justify-content:center;
    align-content: flex-start;
}
[star="true"] {
    background-image:url("/img/star.png?v=1");
    background-size:28px;
    background-position:center center;
    background-repeat:no-repeat;
    cursor:pointer;
    opacity:0;
    display:inline-block;
    position:absolute;
    top:0px;
    left:0px;
    margin:0px;
    padding:0px;
    height:32px;
    width:32px;
    background-color:rgba(0,0,0,0.2);
    z-index:1000000;
    transition:0.1s opacity, 0.15s background-size;
}
[star="true"]:hover, [star="true"]:active {
    opacity:1;
}
.comment_button {
    transform:scaleX(-1);
    opacity:0.7;
    cursor:pointer;
    position:absolute;
    right:0px;
    top:0px;
    height:32px;
    width:32px;
    z-index:999999;
    background-size:contain;
    background-position:center center;
    background-image:url('/img/commenticont.png?v=2');
    transition:0.1s opacity;
}
.comment_button:hover {
    background-image:url("/img/commenticon.png?v=2");
    opacity:1;
}
[login="false"] {
    font-size:13px;
}
#filters * {
    flex-grow:0;
}
#filters span {
    flex-grow:0.9;
}
#toggle_ads {
    cursor:pointer;
    border:2px solid rgb(70,70,70);
    border-radius:4px;
    min-width:15%;
    font-size:18px;
    position:relative;
    background-color:black;
    color:white;
    height:28px;
    font-family:Cosmoa;
    transition:0.2s background-color;
}
#toggle_ads:hover, #toggle_ads:active {
    background-color:rgb(70,70,70);
}
[sidebar="button"] {
    cursor:pointer;
    margin-top:0px;
    width:90px;
    height:90px;
    padding:10px;
    text-align:center;
    font-size:18px;
    font-family:Cosmoa;
    color:white;
    background-color:rgba(0,0,0,0.4);
    border:2px solid rgba(255,255,255,0.5);
    transform:scale(0.9,0.9);
    border-radius:6px;
    transition: 0.1s background-color, 0.1s transform, 0.1s color;
}
[sidebar="button"] p {
    width:100%;
    text-align:center;
    margin-top:50%;
    transform:translateY(-50%);
}
[sidebar="button"]:hover {
    transform: scale(0.915,0.915);
    background-color:rgba(70,70,70,0.4);
}
#premium_button:hover, #premium_button:active {
    background-color:#FFDC00;
    color:black;
}
.waveform {
    transform:translateY(-50%) scaleY(0.75);
}
.promo {
    display:inline-block;
    width:100%;
    aspect-ratio:4/1;
    min-height:70px;
    padding:0px;
    margin:0px;
    margin-bottom:40px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    border:3px solid rgb(255,255,0);
    border-radius:4px;
}
@media only screen and (min-width:750px) {
    .promo {
        width:70%;
        margin:0px 15% 40px 15%;
    }
}
#clear_notifications {
    height:22px;
    width:22px;
    border:2px solid red;
    padding:0px;
    /*transform:translateY(0px) translateX(0px);*/
    border-radius:5px;
    position:absolute;
    top:0px;
    right:0px;
    opacity:0;
    visibility:hidden;
    background-color:black;
    transition:0.2s opacity, 0.2s background-color;
}
#clear_notifications:hover {
    background-color:rgb(100,0,0);
}
.discovearn-promo {
    margin:0px 40px 0px 40px;
}