* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background-image: url(Assets/xmas4.png);
    background-repeat: no-repeat;
    background-size: 25%;
    background-attachment: local;
    background-position: bottom left;
    background-color: whitesmoke;
    z-index: -1;
}

.darkMode {
    background-color: #212529;
    color: #f8f9fa;
}

.container {
    position: relative;
    width: 350px;
    height: 300px;
    margin: auto;
}

.tree {
    position: absolute;
    background: #2e7055;
    width: 65%;
    height: 70%;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 13%;
    left: 18%;
    z-index: 2;
}

.floor {
    position: absolute;
    width: 35%;
    height: 15%;
    border-radius: 50%;
    background: #69122a;
    bottom: -8%;
    left: 32%;
}

.star {
    position: absolute;
    width: 20%;
    height: 20%;
    background: #ffdc5e;
    clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%);
    left: 40.5%;
    top: 5%;
    z-index: 3;
}

.star-highlight {
    position: absolute;
    width: 20%;
    height: 20%;
    background: #ffedad;
    clip-path: polygon(50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            50% 70%,
            50% 60%,
            50% 46%,
            50% 36%);
    left: 40.5%;
    top: 5%;
    z-index: 3;
}

.trunk {
    position: absolute;
    height: 15%;
    width: 10%;
    background: #2e2713;
    bottom: 0;
    left: 45%;
    z-index: 1;
}

.ornament {
    position: absolute;
    border-radius: 50%;
    z-index: 3;
}

.large {
    height: 10%;
    width: 10%;
    animation: lights 1.5s linear infinite;
}

.medium {
    height: 7%;
    width: 7%;
    animation: lights 1.4s linear infinite;
}

.small {
    width: 5%;
    height: 5%;
    animation: lights 1.2s linear infinite;
}

.orange {
    background: #fdc590;
}

.pink {
    background: #f799d2;
}

.green {
    background: #9af5c6;
}

.blue {
    background: #7dd4ff;
}

.purple {
    background: rgb(175, 166, 255);
}

.or1 {
    left: 33%;
    top: 42%;
}

.or2 {
    top: 26%;
    left: 52%;
}

.or3 {
    top: 38%;
    left: 48%;
}

.or4 {
    top: 29%;
    left: 41.5%;
}

.or5 {
    top: 59%;
    left: 35%;
}

.or6 {
    top: 41%;
    left: 59%;
}

.or7 {
    top: 51%;
    right: 42%;
}

.or8 {
    top: 55%;
    right: 26%;
}

.or9 {
    top: 67%;
    left: 55%;
}

.or10 {
    top: 75%;
    left: 42%;
}

.or11 {
    top: 70%;
    left: 21%;
}

.or12 {
    top: 73%;
    right: 22.5%;
}

.shine {
    position: absolute;
    width: 60%;
    height: 60%;
    background: white;
    border-radius: 50%;
    filter: opacity(48%);
    top: 6%;
    right: 10%;
}

#footer-text {
    font-size: 0.8em;
}