.img{
max-width:640ps;
}
.triangle{
width:0;
height:0;
border-left:220px solid transparent;
border-right:220px solid transparent;
border-bottom:200px solid lime;
margin:0 auto;
}
.stem{
width:100px;
height:50px;
background:brown;
margin:0 auto;
}


.star-five {
margin:0 auto;
  width: 300px;
  aspect-ratio: 1;
  background: #F8CA00;
  position:relative;
  bottom: -100px;
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn)))
   );
 }

.garland1{
width:70px;
height:70px;
border-radius:50%;
background:red;
position:absolute;
margin-top: -110px;
margin-left:220px;
}
.garland2{
width:70px;
height:70px;
border-radius:50%;
background:blue;
position:absolute;
margin-top: -60px;
margin-left:420px;
}
.garland3{
width:70px;
height:70px;
border-radius:50%;
background:cyan;
position:absolute;
margin-top: -110px;
margin-left:230px;
}
.garland4{
width:70px;
height:70px;
border-radius:50%;
background:yellow;
position:absolute;
margin-top: -70px;
margin-left:420px;
}
.garland5{
width:70px;
height:70px;
border-radius:50%;
background:pink;
position:absolute;
margin-top: -110px;
margin-left:190px;
}
.garland6{
width:70px;
height:70px;
border-radius:50%;
background:orange;
position:absolute;
margin-top: -110px;
margin-left:400px;
}
.garland7{
width:70px;
height:70px;
border-radius:50%;
background:magenta;
position:absolute;
margin-top: -50px;
margin-left:200px;
}
.garland8{
width:70px;
height:70px;
border-radius:50%;
background:purple;
position:absolute;
margin-top: -120px;
margin-left:360px;
}

.garland-on {
 background: radial-gradient(yellow,orange);
 filter:drop-shadow(0 0 20px #FAA500);
}