body{
    background-color: azure;
}


h1{
    background-color: crimson;
    text-align: center;
    padding: 10px;
    text-decoration: dotted;
}
img{
    border-style: dashed;
    align-content: center;
}

#f1{
    background-color:antiquewhite;
    padding: 10px;
}

#f2{
    background-color:antiquewhite;
     padding: 10px;
}

#foot{
    background-color: crimson;
    padding: 25px;
    text-align: center;
}

/* body {
    background-color: black;
  } */
  
  [class^="tree"] {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #004511 transparent;
    border-radius: 100%;
    margin: auto;
     -webkit-transform:rotate(360deg);
    z-index: 2;
  }
  
  .tree1 {
    margin-left: 100px;
    border-width: 0 100px 50px 100px;
    margin: auto;
  }
  
  .tree2 { 
    top: -10px; 
    margin-left: 50px;
    margin: auto;
    border-width: 0 150px 80px 150px;
  }
  
  .tree3 {
    top: -30px; 
    border-width: 0 200px 100px 200px;
    margin: auto;
  }
  
  .trunk {
    position: relative;
    width: 30px;
    height: 50px;
    margin-left: 180px;
    top: -35px;
    background-color: #53350a;
    margin: auto;
    z-index: 1;
  }
  
  .star-container {
    position: relative;
    height: 100px;
    width: 100px;
    margin-left: 175px;
    top: 35px;
    margin: auto;
    z-index: 3;
  }
  
  .star {
     margin: 50px 0;
     position: absolute;
     width: 0px;
     height: 0px;
     border-style: solid;
     border-width: 0 25px 17px 25px;

     margin: 31px;
     border-color: transparent transparent #ffd105 transparent;
     -moz-transform:    rotate(35deg);
     -webkit-transform: rotate(35deg);
     -ms-transform:     rotate(35deg);
     -o-transform:      rotate(35deg);
  }
  
  .star:before {
    position: absolute;
    height: 0;
    width: 0;
    top: 0px;
    left: -25px;
    content: '';
     border-style: solid;
     margin: auto;
     border-width: 0 25px 17px 25px;
     border-color: transparent transparent #ffd105 transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform:    rotate(-70deg);
    -ms-transform:     rotate(-70deg);
    -o-transform:      rotate(-70deg);
  }
  
  .star:after {
    position: absolute;
    height: 0;
    width: 0;
    top: -12px;
    left: -16px;
    content: '';
    margin: auto;
     border-style: solid;
     border-width: 0 10px 20px 10px;
     border-color: transparent transparent #ffd105 transparent;
    -webkit-transform: rotate(-35deg);
    -moz-transform:    rotate(-35deg);
    -ms-transform:     rotate(-35deg);
    -o-transform:      rotate(-35deg);
  }