@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css?family=Manrope");

:root {
    --theme-color-one: #025ba0;
    --theme-color-two: #9bc72b;
    --theme-color-three: #f0c517;
    --theme-color-four: #bf1724;
    --theme-color-five: #5cc9f4;
    --white: #fff;
    --black: #0f1011;
    --grey: #999;
    background: var(--black);
    color: var(--white);
}

html,
body {
    font-family: "manrope", sans-serif;
}

#app {
    font-family: "manrope", sans-serif;
}

.fullHeight {
    height: calc(100vh - 72px);
}

.cursor-santa {
    cursor: url("../images/music/cursor-candy.cur"), auto !important;
}

.light-bulbs {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    margin-top: -1%;
    z-index: 99999999999;
}

.light-bulb {
    border-radius: 50%;
    height: 30px;
    width: 30px;
}

.light-bulb {
    /* prior styles go here */
    position: relative;
}

.light-bulb::before {
    content: "";
    position: absolute;
    border: 2px solid #222;
    width: 10px;
    height: 10px;
    background: #222;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    left: 25%;
    top: -12px;
}

.light-bulb::after {
    content: "";
    top: -20px;
    left: 60%;
    position: absolute;
    width: 300%;
    height: 28px;
    border-bottom: 4px solid #31353d;
    border-radius: 50%;
}

.light-bulb:last-of-type::after {
    border: none;
}

.light-bulb.theme-color-one {
    background: var(--theme-color-one);
}

.light-bulb.theme-color-two {
    background: var(--theme-color-two);
}

.light-bulb.theme-color-three {
    background: var(--theme-color-three);
}

.light-bulb.theme-color-four {
    background: var(--theme-color-four);
}

.light-bulb.theme-color-five {
    background: var(--theme-color-five);
}

.light-bulb {
    /* prior styles go here */
    animation-duration: 1.1s;
    animation-iteration-count: infinite;
}

.light-bulb.theme-color-one {
    animation-name: light-up-theme-color-one;
}

.light-bulb.theme-color-two {
    animation-name: light-up-theme-color-two;
}

.light-bulb.theme-color-three {
    animation-name: light-up-theme-color-three;
}

.light-bulb.theme-color-four {
    animation-name: light-up-theme-color-four;
}

.light-bulb.theme-color-five {
    animation-name: light-up-theme-color-five;
}

@keyframes light-up-theme-color-one {
    0% {
        box-shadow: 0 1px 10px 5px var(--theme-color-one);
    }

    25% {
        box-shadow: 0 1px 15px 5px var(--theme-color-one);
    }

    50% {
        box-shadow: 0 1px 20px 5px var(--theme-color-one);
    }

    75% {
        box-shadow: 0 1px 25px 5px var(--theme-color-one);
    }

    100% {
        box-shadow: none;
    }
}

@keyframes light-up-theme-color-two {
    0% {
        box-shadow: 0 1px 10px 5px var(--theme-color-two);
    }

    25% {
        box-shadow: 0 1px 15px 5px var(--theme-color-two);
    }

    50% {
        box-shadow: 0 1px 20px 5px var(--theme-color-two);
    }

    75% {
        box-shadow: 0 1px 25px 5px var(--theme-color-two);
    }

    100% {
        box-shadow: none;
    }
}

@keyframes light-up-theme-color-three {
    0% {
        box-shadow: 0 1px 10px 5px var(--theme-color-three);
    }

    25% {
        box-shadow: 0 1px 15px 5px var(--theme-color-three);
    }

    50% {
        box-shadow: 0 1px 20px 5px var(--theme-color-three);
    }

    75% {
        box-shadow: 0 1px 25px 5px var(--theme-color-three);
    }

    100% {
        box-shadow: none;
    }
}

@keyframes light-up-theme-color-four {
    0% {
        box-shadow: 0 1px 10px 5px var(--theme-color-four);
    }

    25% {
        box-shadow: 0 1px 15px 5px var(--theme-color-four);
    }

    50% {
        box-shadow: 0 1px 20px 5px var(--theme-color-four);
    }

    75% {
        box-shadow: 0 1px 25px 5px var(--theme-color-four);
    }

    100% {
        box-shadow: none;
    }
}

@keyframes light-up-theme-color-five {
    0% {
        box-shadow: 0 1px 10px 5px var(--theme-color-five);
    }

    25% {
        box-shadow: 0 1px 15px 5px var(--theme-color-five);
    }

    50% {
        box-shadow: 0 1px 20px 5px var(--theme-color-five);
    }

    75% {
        box-shadow: 0 1px 25px 5px var(--theme-color-five);
    }

    100% {
        box-shadow: none;
    }
}

@media (max-width: 1000px) {
    .light-bulb::after {
        content: "";
        top: -20px;
        left: 60%;
        position: absolute;
        width: 200%;
        height: 28px;
        border-bottom: 4px solid #31353d;
        border-radius: 50%;
    }
}

@media (max-width: 600px) {
    .light-bulbs {
        display: flex;
        justify-content: space-between;
        width: 350px;
        margin: 0 auto;
        margin-bottom: 10%;
        margin-top: -2%;
        z-index: 99999999999;
    }

    .light-bulb {
        border-radius: 50%;
        height: 30px;
        width: 30px;
    }

    .light-bulb {
        /* prior styles go here */
        position: relative;
    }

    .light-bulb::before {
        content: "";
        position: absolute;
        border: 2px solid #222;
        width: 10px;
        height: 10px;
        background: #222;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        left: 25%;
        top: -12px;
    }

    .light-bulb::after {
        content: "";
        top: -20px;
        left: 60%;
        position: absolute;
        width: 60px;
        height: 28px;
        border-bottom: 4px solid #31353d;
        border-radius: 50%;
    }

    .light-bulb:last-of-type::after {
        border: none;
    }

    .light-bulb.theme-color-one {
        background: var(--theme-color-one);
    }

    .light-bulb.theme-color-two {
        background: var(--theme-color-two);
    }

    .light-bulb.theme-color-three {
        background: var(--theme-color-three);
    }

    .light-bulb.theme-color-four {
        background: var(--theme-color-four);
    }

    .light-bulb.theme-color-five {
        background: var(--theme-color-five);
    }

    .light-bulb {
        /* prior styles go here */
        animation-duration: 1.1s;
        animation-iteration-count: infinite;
    }

    .light-bulb.theme-color-one {
        animation-name: light-up-theme-color-one;
    }

    .light-bulb.theme-color-two {
        animation-name: light-up-theme-color-two;
    }

    .light-bulb.theme-color-three {
        animation-name: light-up-theme-color-three;
    }

    .light-bulb.theme-color-four {
        animation-name: light-up-theme-color-four;
    }

    .light-bulb.theme-color-five {
        animation-name: light-up-theme-color-five;
    }

    @keyframes light-up-theme-color-one {
        0% {
            box-shadow: 0 1px 10px 5px var(--theme-color-one);
        }

        25% {
            box-shadow: 0 1px 15px 5px var(--theme-color-one);
        }

        50% {
            box-shadow: 0 1px 20px 5px var(--theme-color-one);
        }

        75% {
            box-shadow: 0 1px 25px 5px var(--theme-color-one);
        }

        100% {
            box-shadow: none;
        }
    }

    @keyframes light-up-theme-color-two {
        0% {
            box-shadow: 0 1px 10px 5px var(--theme-color-two);
        }

        25% {
            box-shadow: 0 1px 15px 5px var(--theme-color-two);
        }

        50% {
            box-shadow: 0 1px 20px 5px var(--theme-color-two);
        }

        75% {
            box-shadow: 0 1px 25px 5px var(--theme-color-two);
        }

        100% {
            box-shadow: none;
        }
    }

    @keyframes light-up-theme-color-three {
        0% {
            box-shadow: 0 1px 10px 5px var(--theme-color-three);
        }

        25% {
            box-shadow: 0 1px 15px 5px var(--theme-color-three);
        }

        50% {
            box-shadow: 0 1px 20px 5px var(--theme-color-three);
        }

        75% {
            box-shadow: 0 1px 25px 5px var(--theme-color-three);
        }

        100% {
            box-shadow: none;
        }
    }

    @keyframes light-up-theme-color-four {
        0% {
            box-shadow: 0 1px 10px 5px var(--theme-color-four);
        }

        25% {
            box-shadow: 0 1px 15px 5px var(--theme-color-four);
        }

        50% {
            box-shadow: 0 1px 20px 5px var(--theme-color-four);
        }

        75% {
            box-shadow: 0 1px 25px 5px var(--theme-color-four);
        }

        100% {
            box-shadow: none;
        }
    }

    @keyframes light-up-theme-color-five {
        0% {
            box-shadow: 0 1px 10px 5px var(--theme-color-five);
        }

        25% {
            box-shadow: 0 1px 15px 5px var(--theme-color-five);
        }

        50% {
            box-shadow: 0 1px 20px 5px var(--theme-color-five);
        }

        75% {
            box-shadow: 0 1px 25px 5px var(--theme-color-five);
        }

        100% {
            box-shadow: none;
        }
    }
}