@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.roboto{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


body{  
    font-family: 'Roboto', sans-serif;  
    background-image: url("img/cybdo.gif");  
    background-size: 100px;
    color: black;
}  
  
#header, #footer{  
    text-align: center;  
}

#tree-container {
    max-width: 20rem;
    display: flex;
    margin: auto;
}

#tree {
    width: 20rem;
    margin-top: 4rem;
    z-index: 0;
}

#star {
    position: relative;
    margin: 0 -13rem;
    font-size: 5rem;
    cursor: pointer;
    z-index: 5;
    
}

#star img {
    max-width: 5rem;
}

.ornament {
    z-index: 10;
    position: relative;
    display: inline-block;
    margin-top: 10rem;
    margin-left: 30rem;
    max-width:4rem;
}

#decorations img {
    max-width: 4rem;

}

#decorations{
    max-width: 20rem;
}