Christmas CSS

/* holiday css by thaddeuz (thanks to oranda4040 for helping too!) */
/* Please credit me if you want to redistribute this code as part of your code. */

/* Updated 14 December 2024 */

:root {
      --div-grey: rgb(0 0 0 / 0%);
      --div-black: rgb(0 0 0 / 0%);
      --accent-color: #a5d8ed;
      --blue: #a5d8ed;
      --green: #a5edb2;
      --red: #eda5a5;
  }

     /* fonts */

@font-face {
      font-family: gamefont;
      src: url(https://fonts.gstatic.com/s/montserrat/v15/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2);
}

     /* removal */
#instructions,
#mainLogoFace,
#tlInfHold,
.menuSocialB,
#aHolder,
.endAHolder,
#topRightAdHolder,
#seasonLabel,
#termsInfo,
#streamContainer,
#editorBtnM, #timerIcon,
#bottomLeftClassImg,
#bottomLeftTeamHolder,
#bottomLeftChallIcon,
#bottomLeftHealth,
#voiceIcon,
#recTimer,
#ammoMax,
#ammoIcon,
.weapKey,
.weapSkin,
#menuClassSubtext,
#menuClassName,
#menuClassIcn,
#customizeButton .material-icons,
.menuItem .menuItemTitle,
#chatSwitch,
#mapInfoHld, #matchInfo.topLeftOld {
      display: none !important;
  }

  /* menu css */

     /* bottom */

#subLogoButtons {
      bottom: 90px;
      text-shadow: 2px 2px 3px rgba(30, 30, 30, .5);
}

.button, .button:hover {
      background-color: transparent !important;
      border: hidden ! important;
}

#subLogoButtons>.button {
      background-color: #00000000 !important;
      border: hidden ! important;
}

      /* spectate cred oranda4040 */

#uiBase.onMenu #spectButton {
    z-index: 0;
    width: 48px;
    top: 51%;
    transform: translate(-50%, -50%)
}

#spectButton span[style="font-size:15px;color:rgba(255,255,255,.6)"] {
    color: transparent !important;
    font-size: 0px
}

#spectButton .switchsml {
    margin: 0;
    position: absolute;
    width: 100%
}

.sliderSml {
    opacity: 1
}

.sliderSml::before {
    content: "Spectate";
    font-size: 20px;
    color: white;
    width: max-content;
    height: auto;
    background-color: transparent;
    text-align: center;
    transition-duration: 0.25s
}

.sliderSml::before {
    content: "play_arrow";
    font-size: 35px;
    color: white;
    width: max-content;
    height: auto;
    background-color: transparent;
    text-align: center;
    transition-duration: 0.25s;
    font-family: 'Material Icons';
    text-shadow: var(--text-shadow)
}

input:checked+.sliderSml::before {
    content: "visibility";
    color: white;
    transform: unset
}

input:checked+.sliderSml {
    background-color: transparent !important
}

.sliderSml {
    opacity: 1;
    background-color: transparent
}

     /* top left */

#mLevelCont,
    .headerBarLeft,
    .headerBarRight {
    background-color: transparent
}

#menuAccountUsername {
    font-size  : 23px;
    padding-top: 4px;
    padding-left: 6px
}

.verticalSeparator {
    opacity:0
}

.progressBar {
    height: 9px;
    margin-top: -4px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 999px
}

.progressBarInner {
    background-image: linear-gradient(to right,#a5d8ed, white);
    border-radius: 999px
}

#mailContainer {
    padding-bottom: 4px
}

#mLevelContV {
    font-size  : 60px
}

.krInfo {
    font-size: 18px !important;
    position : fixed;
    top      : 89px;
    left     : 20px
}

.junkInfo {
    font-size: 18px !important;
    position : fixed;
    top      : 94px;
    left     : 140px
}

     /* left cred Sakura Theme v1.0.0 */

.material-icons-outlined, span.material-symbols-outlined {
    color: #fff !important
}

#menuItemContainer {
    margin-left: -25px;
    bottom: unset;
    display: flex;
    flex-direction: column;
    top: 100px;
    background: transparent;
}

.menuItem {
    height: 84px;
    width: 84px;
    margin-left: 40px;
    margin-top: 12px;
    margin-bottom: 10px;
    background: var(--accent-color);
    border-radius: 999px;
    border-right: 0px solid var(--border-color);
    display: block;
    position: relative;
}

.menuItem:hover {
    width: 200px;
}

.menuItem .material-icons-outlined {
    position: absolute;
    top: 50%;
    left: calc(100% - 41.5px);
    transform: translate(-50%, -50%);
}

.menuItem .menuItemTitle {
    margin-top: unset;
    position: absolute;
    top: 50%;
    left: calc(0%);
    transform: translate(-50%, -50%);
    font-size: 20px !important;
    opacity: 0;
}

.menuItem:hover .menBtnIcn {
    position: absolute;
    top: 50%;
    left: calc(100% - 100px);
    transition: unset;
    transform: translate(-50%, -50%);
    color: #ffd1d1 !important
}

     /* hud class popup */

#menuClassContainer:hover #classPreviewCanvas {
    transform: unset !important;
}

#classPreviewCanvas {
    transform: translateY(500000px);
    margin-bottom: -135px;
    margin-right: -113px
}

.bigShadowT {
    text-shadow: none !important
}

     /* ammo */

#ammoHolder {
    position: fixed;
    top: calc(50% + 35px);
    left: calc(50% - 30px);
    transform: unset;
    height: 7px;
    width: 60px;
    background-color: transparent!important;
    background-image: linear-gradient(to right,rgb(255 255 255),rgb(255 255 255))
}

#ammoVal {
    font-size: 50px;
    position: fixed;
    right: calc(0% - -42px);
    bottom: 30px;
    text-shadow: 1px 1px 3px #a5d8ed
}

     /* weap */

.weapItem {
    transition-duration: 0.25s;
    filter: drop-shadow(0.5px 0.5px 2px #a9caeab8);
    height: 0;
    opacity: 0 !important;
    background-color: transparent;
}

.weapItemInner {
    background-color: transparent
}

.weapIcon {
    height: 50%;
    width: 50%;
}

.weapItem[style*="1"] {
    opacity: 1 !important;
    height: 80px;
}

.weapKey,.weapSkin, .weapStreakHolder, .weapStreakInner {
    display: none !important;
}

     /* health bar */

#bottomLeftHealthBar {
    width: 340px;
    position: fixed;
    left: calc(0% + 19px);
    bottom: calc(0% + 20px);
}

.nHealthBarSeg {
    display: flex;
    height: 31px;
    width: -webkit-fill-available;
    margin: 0 -3.88px;
    background:transparent
}

.nHpBSeg {
    border-radius: 3.5px
}

#bottomLeftHealthBar::after {
    content: " ";
    background: url(https://indiciashop.com/thaddeuz/wp-content/uploads/2024/12/image-1-1.png);
    background-size: 374px;
    width: 374px;
    height: 200px;
    position: fixed;
    bottom: -67px;
    left:10.5px;
    z-index:-999;
}

     /* timer */

#timerVal.topLeftOld {
    font-size: 40px!important;
    text-shadow: 1px 1px 3px #ffa0a0!important;
}

     /* counters */

#killsVal,#deathsVal,#streakVal,#myScoreVal,#kdVal {
    color: white;
    font-size: 30px;
    text-shadow: 1px 1px 3px #ffa0a0!important;
}

#killsIcon,#deathsIcon,#streakIcon,#kdIcon {
    width: 26px;
    height: 26px;
}

     /* fps and ping */

#ingameFPS,#fpsDisplay {
    margin-top: 20px
}

#menuFPSDisplay,#menuFPS,#ingameFPS,#fpsDisplay,
#menuPingText,#menuPingDisplay .material-icons,#pingDisplay,#pingText {
    color: white !important;
    text-shadow: 1px 1px  3px  #a9caeaa1;
}

     /* chat */

#chatInput {
    font-size: 18px;
    position:absolute;
    left:0px;
    background-color: rgb(255 255 255 / 0%);
    border: 0px solid rgb(255 255 255 / 0%);
}

#chatList {
    background-color: rgba(0, 0, 0, 0);
}

.chatItem {
    font-size: 18px;
    max-width: 265px;
    text-shadow: 2px 2px 3px rgba(30, 30, 30, .5);
}

.chatItem span[style="color:#fc03ec"] {
    color: #a5d8ed !important;
}

#uiBase.onMenu #chatHolder {
    left: 120px
}

#uiBase.onCompMenu #chatHolder {
    left: 120px
}

#uiBase.onGame #chatHolder {
    left: 18px;
    bottom: 80px
}

     /* settings - thanks jitchu for the help! */

#itemSearchH,#selectorContainer,.classCard,.skinCard {
    background-color: transparent;
    border-radius: 0px;
}

.setSugBox2 {
    border: 4px solid rgb(255 255 255 / 100%);
}

.settName,.settNameSmall {
    color: white !important;
}

#menuWindow.dark,
.settingsHeader,
.settingsBtn{
    background-color: black;
}

input[type=color],
.setHed {
    border: 4px solid rgba(219 105 105);
    background-color: black;
}

input:checked+.slider {
    background-color: #a5d8ed;
    box-shadow: 0px 0px 30px 1px #a5d8ed;
}

.slider:before {
    width: 0px;
}

.switch {
    width: 30px;
    height: 34px;
}

.slider {
    border-radius: 999px;
}

     /* logo */

#mainLogo {
    width: 1050px;
    height: 350px;
    content: url(https://indiciashop.com/thaddeuz/wp-content/uploads/2024/12/New_Project_10.png)
}

     /* snow */

#instructionHolder{
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.03%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    animation: animatedBackground 1000s linear infinite;
    opacity:0.7;
}

@keyframes animatedBackground {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0px 320000px;

    }