@font-face {
  font-family: 'MyWebFont';
  src: url('./christmasflakes/Flakes.ttf')  format('truetype')
}

.backDoor
{
  background-color: #333;
  position:relative;
  width:100px;
  height:100px;
  
  margin: 0 auto;
  margin-top:50px;
  z-index: 200;
}

.fixed-size {
  width:150px;
  height:100px; 
}

.door
{
  background-color: brown;
  position:absolute;
  top:0px;
  left:0px;
  width:100px;
  height:100px;

  border-color: white;  
  border-style: solid;
  border-width: 1px;

  z-index: -200;
  transform-origin: left;
  /*Speed of the Door animation*/
  transition: all 1.5s ease-in-out;
}

.doorOpen
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-105deg);
}