/*Copyright 2023-2026, You Are Machines, All rights reserved lol*/

.home-ui-container {
    margin-top: 0em;
    width: 99%;
    height: 0;
    padding-bottom: calc(99%*0.5);
    position: relative;
    margin-top: 1em;
    display: flex;
}

.home-ui-sub-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

.home-ui-sub-container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.home-ui-back-container {
    height: 100%;
    transform: translate(0px, 0px);
    overflow: hidden;
}

.home-juke-dialogue > img {
    position: absolute;
    width: 50%;
    height: auto;
}

/*Layers*/

/* .template {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
} */

.home-ui-visits {
    position: absolute;
    top: 4.3%;
    left: 75.2%;
    /* translate: 1883% 234%; */
    transform: rotate(-3.8deg);
    width: 10%;
    /* width: 4%; */
    font-family: LCD;
    color: rgb(214, 168, 17);
    font-size: 1.05em;
}

@media only screen and (max-width: 1980px) {
    .home-ui-visits {
        font-size: 0.87vw;
    }
}

@media only screen and (max-width: 1460px) {
    .home-ui-visits {
        font-size: .8em;
    }
}

@-moz-document url-prefix() {
    .home-ui-visits {
        position: absolute;
        top: 0px;
        left: 0px;
        translate: 1883% 234%;
        transform: rotate(-3.8deg);
        width: 4%;
        font-family: LCD;
        color: rgb(214, 168, 17);
        font-size: 1.05em;
    }
    
    @media only screen and (max-width: 1980px) {
        .home-ui-visits {
            font-size: 0.87vw;
            translate: 1883% 206%;
        }
    }
    
    @media only screen and (max-width: 1460px) {
        .home-ui-visits {
            font-size: .8em;
            translate: 1883% 206%;
        }
    }
}

.home-ui-hit-counter {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 1448% 136%;
    transform: rotate(-3.8deg);
    width: 5.5%;
    height: 2.7%;
    opacity: 85%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.home-ui-hit-counter > img {
    height: 82%;
}

.home-ui-hit-counter-link {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 500% 222%;
    transform: rotate(-3.8deg);
    width: 15%;
    opacity: 65%;
    font-size: 1.08em;
    color: rgb(175, 175, 175);
}

@media only screen and (max-width: 1980px) {
    .home-ui-hit-counter-link {
        font-size: 0.87vw;
    }
}

@media only screen and (max-width: 1460px) {
    .home-ui-hit-counter-link {
        font-size: .8em;
    }
}

.home-ui-links {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 875% 113%;
    width: 10%;
}

.youtube-link {
    position: absolute;
    top: 6.3%;
    left: 89%;
    width: 1.8%;
    height: 3%;
}
.bluesky-link {
    position: absolute;
    top: 6.3%;
    left: 91%;
    width: 1.8%;
    height: 3%;
}
.twitter-link {
    position: absolute;
    top: 6.3%;
    left: 93%;
    width: 1.5%;
    height: 3%;
}
.kofi-link {
    position: absolute;
    top: 6.3%;
    left: 94.7%;
    width: 1.8%;
    height: 4%;
}

.home-ui-aux-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 17.3%;
    margin-top: 9%;
    margin-left: 81.4%;
}

.home-ui-aux-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 21.5%;
    margin-top: 6%;
    margin-left: 78%;
    pointer-events: none;
}

.home-ui-visitor {
    position: absolute;
    top: 0;
    left: 0;
    width: 18.5%;
    margin-top: 0.2%;
    margin-left: 68.6%;
}

.home-ui-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 73.4%;
    margin-top: 7.2%;
    margin-left: 6%;
}


/* stero */

.home-ui-voltrack {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 155% 7023%;
    width: 10%;
}

.home-ui-volslider-container {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 149% 4011%;
    height: 2.2%;
    width: 10.3%;
}

.home-ui-back-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent; 
    border-color: transparent;
    outline: none;

    position: absolute;
    top: 0px;
    left: 0px;
    translate: 0% 0%;
    width: 100%;
}

@-moz-document url-prefix() {
    .home-ui-back-container input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        background: transparent; 
        border-color: transparent;
        outline: none;
    
        position: absolute;
        top: 0px;
        left: 0px;
        translate: 0% -12%;
        width: 100%;
    }
    .home-ui-back-container input[type="range"]::-moz-range-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: transparent; 
        border-color: transparent;
        outline: none;
    }
}

.home-ui-back-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16.7%;
    aspect-ratio: 23/11;
    background-image: url("/media/assets/ui/VolSlider.webp");
    background-size: contain;
    pointer-events: none;
}

.home-ui-back-container input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16.7%;
    aspect-ratio: 23/11;
    background-image: url("/media/assets/ui/VolSlider.webp");
    background-size: contain;
    pointer-events: none;
}

.home-ui-stereo {
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
    margin-top: 37.5%;
    margin-left: 8.3%;
}

.stereo-lcd-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 3%;
    width: 9.4%;
    transform: translate(167%,2590%);
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-size: 1.35em;
}

@media only screen and (max-width: 1980px) {
    .stereo-lcd-container {
        font-size: 1.1vw;
    }
}

@media only screen and (max-width: 1460px) {
    .stereo-lcd-container {
        font-size: 1em;
    }
}


.stereo-lcd {
    font-family: LCD;
    color: rgb(19, 223, 0);
    animation: lcdScroll 10s linear infinite;
}

@keyframes lcdScroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

.stereo-lcd2 {
    font-family: LCD;
    color: rgb(19, 223, 0);
    animation: lcdScroll2 10s linear infinite;
}

@keyframes lcdScroll2 {
    0% { transform: translateX(50%); }
    100% { transform: translateX(-100%); }
}

.stereo-lcd-replace {
    font-family: LCD;
    color: rgb(19, 223, 0);
    left: 0;
    position: inherit;
}

.home-ui-radio-sign {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 371% 83%;
    width: 8%;
}

.home-ui-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 78.3%;
    margin-top: 6.8%;
    margin-left: 4.3%;
    pointer-events: none;
}

.home-ui-fan {
    position: absolute;
    top: 0;
    left: 0;
    width: 4.7%;
    margin-top: 42.4%;
    margin-left: 77%;
}

.home-ui-grate {
    position: absolute;
    top: 0;
    left: 0;
    width: 5.5%;
    margin-top: 42.1%;
    margin-left: 76.6%;
}

.home-ui-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 74.3%;
    margin-top: 2.2%;
    margin-left: 7.1%;
}

.home-ui-wires {
    position: absolute;
    top: 0;
    left: 0;
    width: 31.7%;
    margin-top: 5.4%;
    margin-left: 3.4%;
    pointer-events: none;
}

.yam-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 11%;
    margin-top: 1.6%;
    margin-left: 0.3%;
    transform: rotate(-28.9deg);
}

.yam-logo-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 11%;
    margin-top: 1.6%;
    margin-left: 0.3%;
    transform: rotate(-28.9deg);
}

.home-ui-homeicon {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 2153% 196%;
    width: 2%;
    opacity: 60%;
}

.home-ui-galleryicon {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 1898% 526%;
    width: 2.5%;
    opacity: 60%;
}

.home-ui-featuredicon {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 2800% 399%;
    width: 2%;
    opacity: 60%;
}

.home-ui-usersicon {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 3704% 275%;
    width: 1.7%;
    opacity: 60%;
}

.home-ui-updatesicon {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 3370% 394%;
    width: 2%;
    opacity: 60%;
}


.home-ui-navhome {
    position: absolute;
    top: 0;
    left: 0;
    width: 6.3%;
    margin-top: 1.7%;
    margin-left: 40.5%;
}

.home-ui-corner-klair {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 1770% 810%;
    width: 5.3%;
    opacity: 75%;
}

.home-ui-speech-bubble {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 1687% 1354%;
    width: 5.3%;
    opacity: 75%;
}

/* Banners */

.home-ui-banner-screen {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 642% 1969%;
    width: 6.8%;
    height: 4.6%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    z-index: 0;
}

.home-ui-banner-shadow {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 641.3% 1969%;
    width: 6.8%;
    height: 4.6%;
    -moz-box-shadow: 4px 0px 5px rgba(0,0,0,.75) inset;
    -webkit-box-shadow: 4px 0px 5px rgba(0,0,0,.75) inset;
    box-shadow: 4px 0px 5px rgba(0,0,0,.75) inset;
    pointer-events: none;
}

.home-ui-banner-shadow2 {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 642.5% 1969%;
    width: 6.8%;
    height: 4.6%;
    -moz-box-shadow: 4px 0px 5px rgba(0,0,0,.75) inset;
    -webkit-box-shadow: 4px 0px 5px rgba(0,0,0,.75) inset;
    box-shadow: -4px 0px 5px rgba(0,0,0,.75) inset;
    pointer-events: none;
}

.home-ui-banner-wrapper {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.banner-link {
    display: block;
    /* min-width: 88px; */
    height: 100%;
    margin: 0;
    aspect-ratio: 88/31;
}

.home-ui-banner  {
    display: block;
    object-fit: cover;
}




.home-ui-navgallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 7.3%;
    margin-top: 8.3%;
    margin-left: 45.2%;
}

.home-ui-navfeatured {
    position: absolute;
    top: 0;
    left: 0;
    width: 5.9%;
    margin-top: 5.8%;
    margin-left: 54.1%;
}

.home-ui-navusers {
    position: absolute;
    top: 0;
    left: 0;
    width: 5.2%;
    margin-top: 2.8%;
    margin-left: 61.2%;
}

.home-ui-navupdates {
    position: absolute;
    top: 0;
    left: 0;
    width: 6.1%;
    margin-top: 7.7%;
    margin-left: 65.6%;
}

.ui-audioplayer-full-container {
    width: 100%;
    height: 0;
    padding-bottom: calc(100%*0.3);
    position: relative;
}

.ui-audioplayer-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.ui-audioplayer {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 32% 0%;
    width: 62%;
}

.ui-audioplayer-slider {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 1000% 0%;
    width: 7%;
}

.ui-audioplayer-light {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 409% 166%;
    width: 9%;
}

.ui-audioplayer-vol {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 20.2%;
    height: 10%;
    translate: 278% 599%;
    align-items: center;
    justify-content: center;
}

.ui-audioplayer-container input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent; 
    border-color: transparent;
    outline: none;

    position: absolute;
    top: 0px;
    left: 0px;
    translate: 0% -19%;
    width: 100%;
}

@-moz-document url-prefix() {
    .ui-audioplayer-container input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border-color: transparent;
        outline: none;

        position: absolute;
        top: 0px;
        left: 0px;
        translate: 0% 0%;
        width: 100%;
        
    }
    .ui-audioplayer-container input[type="range"]::-moz-range-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border-color: transparent;
        outline: none;
        

    }
}

.ui-audioplayer-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32%;
    aspect-ratio: 18/11;
    background-image: url("/media/assets/ui/AudioPlayerSlider.webp");
    background-size: contain;
    pointer-events: none;
}

.ui-audioplayer-container input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    width: 3.4em;
    height: 2em;
    background-image: url("/media/assets/ui/AudioPlayerSlider.webp");
    background-size: contain;
    pointer-events: none;
}

/* ---- */

.ui-audioplayer-scrub-cover {
    position: absolute;
    top: 0px;
    left: 0px;
    translate: 0% 0%;
    width: 100%;
}

.ui-audioplayer-scrubber {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 18.8%;
    height: 20%;
    translate: 291% 364%;
    align-items: center;
    justify-content: center;
}

.ui-audioplayer-scrubber > input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent; 
    border-color: transparent;
    outline: none;

    position: absolute;
    top: 0px;
    left: 0px;
    translate: 3% 0%;
    width: 90%;
}

@-moz-document url-prefix() {
    .ui-audioplayer-scrubber > input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border-color: transparent;
        outline: none;

        position: absolute;
        top: 0px;
        left: 0px;
        translate: 3% 0%;
        width: 90%;
        height: 100%;
    }

    .ui-audioplayer-scrubber > input[type="range"]::-moz-range-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border-color: transparent;
        outline: none;
        position: absolute;
        top: 0px;
        left: 0px;
        translate: 3% 0%;
        width: 90%;
        height: 100%;
    }
}

.ui-audioplayer-scrubber > input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15%;
    aspect-ratio: 5.3/11;
    background-image: url("/media/assets/ui/AudioPlayerScrubber.webp");
    background-size: contain;
    pointer-events: none;
}

.ui-audioplayer-scrubber > input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.4em;
    height: 3em;
    background-image: url("/media/assets/ui/AudioPlayerScrubber.webp");
    background-size: contain;
    pointer-events: none;
}

/* hitboxes */

.radio-sign-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 11.5%;
    height: 10%;
    translate: 234% 18%;
    transform: rotate(3deg);
}

.audio-player-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 33%;
    translate: 412% 143%;
    clip-path: polygon(23% 37%, 96% 36%, 99% 37%, 100% 73%, 96% 75%, 6% 75%, 6% 69%, 14% 64%, 19% 58%, 20% 40%);
}

.nav-home-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    height: 26.9%;
    margin-top: 1.5%;
    margin-left: 38.4%;
    clip-path: polygon(11% 10%, 23.1% 2%, 24.7% 16.1%, 24% 40.5%, 7.8% 55%, 8% 35%, 6.1% 19.5%);}

.nav-gallery-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 34.3%;
    height: 27%;
    margin-top: 1.3%;
    margin-left: 38.4%;
    clip-path: polygon(27.6% 52.3%, 41% 57.3%, 34.8% 87%, 21.2% 89%, 20% 76.4%);}

.nav-featured-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 33.7%;
    height: 26%;
    margin-top: 1.7%;
    margin-left: 38.8%;
    clip-path: polygon(46.4% 38.6%, 63% 31.5%, 59.6% 64.1%, 51.5% 65.7%, 45.4% 59.8%);}

.nav-playground-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 33.5%;
    height: 24%;
    margin-top: 1.6%;
    margin-left: 39%;
    clip-path: polygon(67% 15.6%, 73% 15%, 80.3% 10%, 81.8% 43%, 75% 52.3%, 66.2% 51.5%);}

.nav-updates-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 37%;
    height: 28%;
    margin-top: 1%;
    margin-left: 35.8%;
    clip-path: polygon(88.1% 47.8%, 97% 66%, 88% 94%, 80.5% 81.6%, 83.1% 61.9%);
}

.pause-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.7%;
    height: 3.8%;
    margin-top: 41.7%;
    margin-left: 15.2%;
}

.skip-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.6%;
    height: 3.8%;
    margin-top: 41.7%;
    margin-left: 17.9%;
}

.mute-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.7%;
    height: 3.8%;
    margin-top: 41.7%;
    margin-left: 20.5%;
}

.info-hitbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.4%;
    height: 3.8%;
    margin-top: 41.7%;
    margin-left: 23.2%;
}

.edge-mask {
    mask-image: url(/media/assets/ui/EdgeMask.webp);
    -webkit-mask-image: url(/media/assets/ui/EdgeMask.webp);

    mask-position: top-left;
    -webkit-mask-position: top-left;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* === Homepage Seasonal === */

/* Halloween */
.home-ui-web-1 {
    position: absolute;
    top: 19.9%;
    left: 6.3%;
    width: 11%;
}

.home-ui-web-2 {
    position: absolute;
    top: 17%;
    left: 69.1%;
    width: 9%;
}

.home-ui-web-3 {
    position: absolute;
    top: 18%;
    left: 81%;
    width: 4%;
}

.home-ui-boo {
    position: absolute;
    top: 90.7%;
    left: 23.7%;
    width: 8.2%;
}

.home-ui-fan-pumpkin {
    position: absolute;
    top: 73.1%;
    left: 74.4%;
    width: 5.8%;
}

.home-ui-happy-halloween {
    position: absolute;
    top: 17.2%;
    left: 21.7%;
    width: 18.4%;
}

.home-ui-jack-o {
    position: absolute;
    top: 60.1%;
    left: 93.2%;
    width: 5.8%;
}

.home-ui-jack-glow {
    position: absolute;
    top: 60.1%;
    left: 93.2%;
    width: 5.8%;
    transition: opacity 0.2s ease-in-out;
}

.home-ui-juke-pumpkin {
    position: absolute;
    top: 87%;
    left: 6.2%;
    width: 4.2%;
}

.home-ui-moon {
    position: absolute;
    top: 0.3%;
    left: 51.2%;
    width: 5%;
}

.home-ui-witch-hat {
    position: absolute;
    top: 0.3%;
    left: 22%;
    width: 6.5%;
}

.home-ui-spider {
    position: absolute;
    top: 23%;
    left: 7%;
    width: 3%;
    animation: spiderMove 30s linear infinite;
}

@keyframes spiderMove {
    0% {
        top: 23%;
        left: 7%;
    }
    23% {
        top: 23%;
        left: 7%;
    }
    25% {
        top: 25%;
        left: 11%;
    }
    48% {
        top: 25%;
        left: 11%;
    }
    50% {
        top: 30%;
        left: 9%;
    }
    68% {
        top: 30%;
        left: 9%;
    }
    70% {
        top: 25%;
        left: 8.7%;
    }
    78% {
        top: 25%;
        left: 8.7%;
    }
    80% {
        top: 31%;
        left: 7.5%;
    }
    98% {
        top: 31%;
        left: 7.5%;
    }
    100% {
        top: 23%;
        left: 7%;
    }
}

.home-ui-bat-1 {
    position: absolute;
    top: 0%;
    left: 3%;
    width: 8%;

    offset-rotate: 0deg;
    offset-path: path('M1500,650s-625,6-980-780');
    animation: followPath 3s ease-in forwards;
}
.home-ui-bat-2 {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 8%;

    offset-rotate: 0deg;
    offset-path: path('M1700,600s-697.1-30-1030-660');
    animation: followPath 3s ease-in forwards;
}
.home-ui-bat-3 {
    position: absolute;
    top: -2%;
    left: 0%;
    width: 8%;

    offset-rotate: 0deg;
    offset-path: path('M1550,520.25S1419.3,600,750,.1');
    animation: followPath 3s ease-in forwards;
}

.home-ui-ghost {
    position: absolute;

    offset-rotate: 0deg;
    offset-path: path('M550,775s-165-164-80.47-300,115-260,64-400');
    animation: followPath 5s ease-in forwards, fadeOut 5s ease-out forwards;
}

.ghost-animation{
    width:168px; 
    height:273px; 
    background:url(/media/assets/ui/halloween/GhostSpritesheet.webp) left top;
    animation: ghostFrames 0.5s steps(60, end) infinite;
}

@keyframes ghostFrames {
    to {
        background-position:-10080px top;
    }
}

@keyframes followPath {
    0% {offset-distance: 0%;}
    100% {offset-distance: 100%;}
}
@keyframes fadeOut {
    0% {opacity: 100%;}
    50% {opacity: 100%;}
    100% {opacity: 0%;}
}

@media only screen and (min-width: 1660px) {
    .home-ui-bat-1, .home-ui-bat-2, .home-ui-bat-3 {
        left: 25%;
    }
    .home-ui-ghost {
        top: 15%;
        left: 10%;
    }
}


/* Christmas */

.home-ui-title-hat {
    position: absolute;
    top: 0%;
    left: 22.8%;
    width:  5%;
}

.home-ui-tinsel {
    position: absolute;
    top: 6.6%;
    left: 35.3%;
    width:  64.5%;
}

.home-ui-gingerbread {
    position: absolute;
    top: 62.4%;
    left: 95.5%;
    width:  4%;
}

.home-ui-corner-hat {
    position: absolute;
    top: 83.4%;
    left: 94.8%;
    width:  5%;
}

.home-ui-present {
    position: absolute;
    top: 77.8%;
    left: 75.5%;
    width:  4%;
}

.home-ui-tree {
    position: absolute;
    top: 75.4%;
    left: 5.6%;
    width:  5.9%;
}

.home-ui-hohoho {
    position: absolute;
    top: 90.7%;
    left: 21%;
    width:  12.4%;
}

.home-ui-wreath {
    position: absolute;
    top: 81.9%;
    left: 75.7%;
    width:  7.3%;
}

.home-ui-wreath-lights {
    position: absolute;
    top: 81.9%;
    left: 75.7%;
    width:  7.3%;
    animation: wreathGlow 3s infinite ease-in-out;
}

@keyframes wreathGlow {
    0% { opacity: 100%; }
    50% { opacity: 25%; }
    100% { opacity: 100%; }
}

.home-ui-left-lights {
    position: absolute;
    top: 23.7%;
    left: 1.5%;
    width:  7.9%;
}

.home-ui-left-red-lights {
    position: absolute;
    top: 23.7%;
    left: 1.5%;
    width:  7.9%;
    animation: redGlow 2s infinite ease-in-out;

}

.home-ui-left-green-lights {
    position: absolute;
    top: 23.7%;
    left: 1.5%;
    width:  7.9%;
    animation: greenGlow 2s infinite ease-in-out;
}

.home-ui-right-lights {
    position: absolute;
    top: 18.4%;
    left: 76.1%;
    width:  6.7%;
}

.home-ui-right-red-lights {
    position: absolute;
    top: 18.4%;
    left: 76.1%;
    width:  6.7%;
    animation: redGlow 2s infinite ease-in-out;

}

.home-ui-right-green-lights {
    position: absolute;
    top: 18.4%;
    left: 76.1%;
    width:  6.7%;
    animation: greenGlow 2s infinite ease-in-out;
}

@keyframes greenGlow {
    0% { opacity: 100%; }
    50% { opacity: 35%; }
    100% { opacity: 100%; }
}
@keyframes redGlow {
    0% { opacity: 35%; }
    50% { opacity: 100%; }
    100% { opacity: 35%; }
}


/* New Year's */

.fireworks-1 {
    position: absolute;
    top: 11%;
    left: 74%;
    width:  13%;
    transition: opacity 2s;
}
.fireworks-2 {
    position: absolute;
    top: 46%;
    left: 24%;
    width:  13%;
    transition: opacity 2s;
}
.fireworks-3 {
    position: absolute;
    top: 9%;
    left: 25%;
    width:  17%;
    transition: opacity 2s;
}
.fireworks-4 {
    position: absolute;
    top: 22%;
    left: 52%;
    width:  17%;
    transition: opacity 2s;
}
.fireworks-5 {
    position: absolute;
    top: 63%;
    left: 8%;
    width:  5%;
    transition: opacity 2s;
}
.fireworks-6 {
    position: absolute;
    top: -1%;
    left: -2%;
    width:  17%;
    transition: opacity 2s;
}
.fireworks-7 {
    position: absolute;
    top: 79%;
    left: 67%;
    width:  10%;
    transition: opacity 2s;
}
.fireworks-8 {
    position: absolute;
    top: 59%;
    left: 90.6%;
    width:  10%;
    transition: opacity 2s;    
}
.fireworks-9 {
    position: absolute;
    top: 0%;
    left: 48%;
    width:  6%;
}
.fireworks-10 {
    position: absolute;
    top: 0%;
    left: 55%;
    width:  4%;
}

/* Devnews */

.devnews-back {
    width: 95%;
    z-index: -1;
}