amq test 564 by mileskomeiji

/* ==UserStyle==
@name         KOKOLOSTA V1.2
@version      2022.01.07
@namespace    userstyles.world/user/kolosta
@description  A script to improve the rendering of the Anime Music Quiz web site
@author       Kolosta (based on melodyelodie's work)
==/UserStyle== */

/* @-moz-document domain(animemusicquiz.com) */
/* @document domain(animemusicquiz.com) */


/* Original script by melodyelodie here ;
https://userstyles.world/style/1435/elodie-s-amq-script-v8-4-4 */

 :root {
    /* Change the URL in quotes to whatever you want the bg to be. */
/*     --bg: url(https://static.tumblr.com/6ed50bddfea34fd928ace05d42b51582/kr9wz9j/DoCnxitsy/tumblr_static_2w68fwtzcqec8ww4s0k00ws4c_2048_v2.png); */
/*      Some backgrounds :*/
     --bg: url(https://i.redd.it/2cioa12l3zv71.png);
/*      --bg: url(https://i.pinimg.com/originals/8f/b7/06/8fb706c006b8777e8738f901ebefcc10.jpg); */
/*      --bg: url(https://wallpapercave.com/wp/wp1906477.png); */
/*      --bg: url(https://i.imgur.com/uIOaQbf.png); */
/*      --bg: url(https://i.imgur.com/CEW3dUK.jpeg); */
/*      --bg: url(https://images.hdqwalls.com/download/oneshot-2o-1920x1080.jpg); */
/*      x-x-x-x-x-x-x-x-x-x-x-x-x-x */
    /* Optional: if you want a different background for chat. Phone wallpapers tend to work best. */
     --chatbg: rgba(0, 0, 0, 0.5);
     
     --gris0: rgb(66, 66, 66);
     --gris2: rgba(66, 66, 66, .2);
     --gris4: rgba(66, 66, 66, .4);
     --gris75:rgba(66, 66, 66, .75);
     --gris6: rgba(66, 66, 66, .6);
     --gris8: rgba(66, 66, 66, .8);
     
     --gris01: rgba(27, 27, 27, .4);
     --gris02: rgba(27, 27, 27, .6);
     --gris03: rgba(27, 27, 27, .8);
     
     --noir0: rgb(0, 0, 0);
     --noir2: rgba(0, 0, 0, .2);
     --noir4: rgba(0, 0, 0, .4);
     --noir5: rgba(0, 0, 0, .5);
     --noir6: rgba(0, 0, 0, .6);
     --noir8: rgba(0, 0, 0, .8);
     
     --jauneXP: rgba(255, 221, 0, 0.6);
     
     --textColor: white;
     
}

/* ______________________________________________________________________________________________________________________________________________________ */
/* ______________________________________________________________________________________________________________________________________________________ */
/* ______________________________________________________________________________________________________________________________________________________ */

#mainContainer {
    color: var(--textColor);
}



#mainContainer{
    font-family: 'Posterama Text' ;
}


/* AVATAR ET FOND */
.qpAvatarImageContainer.Standard > .particleEmiter {
/*     background-image: url("https://cdn.animemusicquiz.com/v1/backgrounds/200px/Marine_Standard_BLUE_vert.webp"); */
    background-size: contain;
    opacity: 1;
}

.qpAvatarImageContainer.Standard{
    background-image: url("https://cdn.animemusicquiz.com/v1/backgrounds/200px/Marine_Standard_BLUE_vert.webp");
    background-size: contain;
    opacity: 1;
}

.qpAvatarImageContainer{
    border-radius: 10px;
/*     color: #19930b; */
}

.qpAvatarImageContainer.Standard {
    background: none !important;
    background: transparent !important;
    opacity: 1;
}

.floatingContainer {
    background-color: var(--gris75);
}

#mpKomugiPromo,  #mpSpringSkinPromo, #mpPatreonContainer, #mpHalloweenSkinPromo{
    border-radius: 10px;
}

#mpKomugiPromo, #mpPatreonContainer{
    background-color: var(--gris4);
}

.mpSpringPromoContainer{
    background-color: transparent;
}



#mpRankedButton{
    border-radius: 20px;
}

#mpPatreonContainerInner h3{
    font-size: 1.5em;
}

#startPageSocailContainer .startPageSocailIcon.button {
        background-color: var(--noir5);
}

#infoFooter{
    opacity: 0.6;
}


#mpNewsMerchTab .leftRightButtonTop{
    opacity: 0.4;
}

#mpNewsMerchTab .leftRightButtonTop h3{
    opacity: 1;
}

.mpNewsBottomTab{
    border-color: rgba(0, 0, 0, 0); 
}


#mpNewsMerchTab{
    border-bottom-left-radius: 12px 20px;
}

#mpAvatarDriveHeaderShadowHider {
    top: -33px;
    padding: 0px 0px 0px 0px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#mpDriveStatsContainer{
    opacity: 0.8;
}

#mpRankedDescriptionButton{
    opacity: 0.4;
}

#mpPlayButton h1 {
    color: rgba(255, 255, 255, 1);
}



/* Daily Quests */
#qcStickOut{
/*     opacity: 0.8; */
    background-color: var(--gris02);
    right: -60px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 7px;
        box-shadow: 0px 0px 10px rgb(0 0 0 / 0%);
}

#questContainer{
    background-color: var(--grisV306);
    transition: transform ease-in-out 0.4s, box-shadow ease-in-out 2s;
    bottom: max(calc(0% - 0px), 100px);
}

#questContainer.open {
    transform: translateX(0%);
    box-shadow: 0 0 0px 0px black;
    transition: transform ease-in-out 0.5s;
/*     background-color:  rgba(27, 27, 27, 0.7); */
}


#mainMenuSocailButton{
    opacity: 0.6;
}

#footerMenuBarBackground{
    opacity: 0.4;
}

#xpOuterContainer {
    height: 100%;
    opacity: 1;
}

#xpBarInner{
    background: rgba(255, 193, 51, .8) !important;
}

#xpBarOuter {
    background-color: rgba(4, 35, 43, .6) !important;
}

#xpBarOuter, #xpBarInner{
    border-radius: 10px 10px 10px 10px;
}

#xpBarInnerOverflow{
    border-radius: 10px 10px 10px 10px;
}

#menuBarOptionContainer{
    opacity: 1;
    bottom: 3px;
}

#rightMenuBarPartContainer::before{
    opacity: 0;
} 

#mpRankedTimer{
    opacity: 0.4;
}


#roomBrowserPage{
    opacity: 1;
}

#rbBackButton{
    opacity: 1;
}

.modal-content{
    opacity: 1;
    border-radius: 20px;
}

.modal-header{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.mhAdvancedContainerTitle {
    background-color: rgba(0, 0, 0, 0);
}

.mhCustomSliderContainer{
    border-radius: 10px;
}

#mhQuickSelectContainer{
    opacity: 1;
}

#rbMajorFilters, #rbFilterContainer{
    border-radius: 0 0 0 10px;
}

#lbStartButton, #lnSettingsButton{
     opacity: 0.6;
}

#gameChatContainer, #lobbyCountContainer{
    background: rgba(0, 0, 0, 0.6) !important;
}


#lobbyRoomNameContainer {
    color: rgba(0, 0, 0, .5);
    mix-blend-mode: difference;
}


#popoutMessageContainer{
    opacity: 0.6;
    border-radius: 0 10px 10px 0;
}


/* .lobbyAvatarLevelContainer{
    opacity: 0.7;
} */

#qpInfoHider{
    opacity: 0;
    background: #f00;
    -webkit-mask-image: radial-gradient(circle at right bottom , transparent 0, transparent 24px, black 25px);
    border-bottom-right-radius: 40px;
}

#qpReportFeedbackContainer {
    margin-top: 0px;
}

.awesomplete > ul {
    background: rgba(66, 66, 66, .8);
    border: none;
    -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, .3);
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .3);
    border-radius: 0 0 6px 6px;
    top: 34px;
}
#qpInnerContainer{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.qpSingleRateContainer {
    -webkit-box-shadow: 1px -3px 10px rgba(0, 0, 0, 0);
    box-shadow: 1px -3px 10px rgba(0, 0, 0, 0);
    
    border-left: 1px rgba(0, 0, 0, .6) solid;
}

#qpCenterInfoContainer{
    opacity: 1;
}

#qpAnimeNameHider{
    opacity: 0;
}

#qpOptionContainer{
    right: 20px;
}

#qpOptionContainer {
    -webkit-box-shadow: -1px -1px 10px rgba(0, 0, 0, 0);
    box-shadow: -1px -1px 10px rgba(0, 0, 0, 0);
    background-color: hsla(0, 0%, 11%, .4);
}

#qpOptionContainerHider {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 27, 27, 0);
    left: 20px;
}

#qpQualityList {
    opacity: 1;
    background-color: rgba(27, 27, 27, .4);
    -webkit-box-shadow: 0 7px 10px 0px rgba(0, 0, 0, 0);
    box-shadow: 0 7px 10px 0px rgba(0, 0, 0, 0);
    transform: translateY(-160%);
    transition: transform 0.5s ease-in-out, opacity 1.4s;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
}

#qpQualityList.show {
    opacity: 1;
}


#rbSettingFilterContainer {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.7s ease-in-out, opacity 1s;
    background-color: rgba(27, 27, 27, .8);
}

#rbSettingFilterContainer.open{
    opacity: 1;
}

#qpUpvoteContainer{
    border-radius: 0 0 0 10px;
}

#qpInnerContainer {
    border-top: solid 1px #1b1b1bad;
}

#qpVideoTroubleshootingContainer{
    opacity: 0.7;
}

#swRightColumn{
    opacity: 0.8;
}

#swContentTicketsContainer{
    opacity: 0.6;
}

.fade.in{
    backdrop-filter: blur(4px);
    animation: blurAnime 5s linear;
}

@keyframes blurAnime {
    from {
    backdrop-filter: blur(0px);
  }

  to {
    backdrop-filter: blur(4px);
  }
}

.tab-modal .tabContainer, .tab-modal .modal-header {
    background-color: rgba(27, 27, 27, 0);
}

div.modal-content {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.modal-content {
    top: calc( 50px);
    left: calc(0px);
    box-shadow:
    0px 0px 15px 0px #fff, /*inner*/
    0px 0px 100px 10px #fbfd8d, /*midle*/
    0px 0px 100px 30px #e69b04; /*outer*/
    
    opacity: 1;
}

.close {
    font-size: 26px;
    line-height: 0.5;
    color: #fff;
    text-shadow: 0 0px 0 #ee076b00;
    opacity: 1;
}

.modal-header .close {
    opacity: 0.8;
}


.qpAvatarAnswerContainer {
    position: absolute;
    height: 37px;
    top: -40px;
    z-index: 5;
    width: 120%;
    left: -10%;
    word-wrap: break-word;
}


.floatingContainer {
    background-color: #424242d1;
    -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0);
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0);
}

.topRightBackButton{
    background-color: rgba(27, 27, 27, .4);
}


.leftRightButtonTop {
    -webkit-box-shadow: 1px -3px 1...