CSS Code for  Christmas tree:

Step1: Setting up font faces:

We will be adding different font faces to our project, using the font-family property we will add christmas font to our project and using the src tag we will import the font-face and font width and style we will set to “normal”.

@font-face {
    font-family: 'mountains_of_christmasregular';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/mountainsofchristmas-webfont.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/mountainsofchristmas-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Step2: Adding background color :

Using the body tag , we will use background-color property we will add a black background to our webpage using the hex code and using the overflow condition property we will set the overflow of image to hidden.We will align all the content in our webpage to the center.

We will also add some modification to our SVG, we will set the svg width and height as 90% and visibility as “hidden”.

body {
  background-color:#151522;
  overflow: hidden;widht
    display: flex;
  align-items: center;
  justify-content: center; 
}
body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
svg{
  width:90%;
  height:90%;
  visibility:hidden;
 
}

Step3: final Styling:

Using the Id tag (endMessage), we will set the font-family as “mountains_of_christmasregular” and the font-size of the text as “2rem, and using the text-align property we will align the text to the center. We will set the font color as ‘white.’.

Now using the anchor tag, we will set the font color of the hyperlink as “white,” and after visiting the link by the user, we will set the font color as “red.

.sparkle{
  /* mix-blend-mode:luminosity */
}
#endMessage{
  font-family: mountains_of_christmasregular;
  font-size: 2rem;
  text-anchor: middle;
  text-align: center;
  fill: #FFFFFF;
  color: #FFFFFF;
  opacity:0;
  letter-spacing: 1px;
}
a {
  color: white;
  text-decoration: underline dotted #FFFFFF;
}
a:visited {
  color: red;