<h1 class="topics">Background Properties in CSS</h1>
<ul class="christmas_menu">
  <li><a class="santa_claus" href="#">Santa Claus</a></li>
  <li><a class="rudolph" href="#">Rudolph</a></li>
  <li><a class="snows" href="#">Snows</a></li>
  <li><a class="christmas_trees" href="#">Christmas Trees</a></li>
  <li><a class="gifts" href="#">Gifts</a></li>
</ul>





				

/* Web Fonts */
	Web Fonts 부분은 영상을 참고하여 직접 작성해 보세요!
	웹폰트 적용하는 방법에 익숙해집니다.

/* CSS Resets */
	CSS Resets 부분은 영상을 참고하여 직접 작성해 보세요!
	HTML 요소와 친밀해지는 시간입니다.
	
/* Desgin Areas */
body {
   font-family: 'Josefin Slab', serif;
   font-size: 24px;
   background-color: #094111;
}

.topics {
   font-size: 60px;
   text-align: center;
   margin: 250px 0 50px;
   color: #b2972d;
}

.christmas_menu {
   width: 820px;
   margin: 0 auto;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.christmas_menu a {
   display: block;
   background-image: url(images/background.png);
   border: 1px solid #605b47;
   padding: 30px 30px 25px;
   border-radius: 5px;
   background-size: 1250px auto;
   color: transparent;
}

.christmas_menu a.santa_claus {
   background-position: -282px -350px;
}

.christmas_menu a.rudolph {
   background-position: -1047px -518px;
}

.christmas_menu a.snows {
   background-position: -1070px -120px;
}

.christmas_menu a.christmas_trees {
   background-position: -530px -50px;
}

.christmas_menu a.gifts {
   background-position: -115px -655px;
}

.christmas_menu a:hover {
   background-image: none;
   background-color: #1d7129;
   color: #ffce00;
   border-color: #b2972d;
}