<h1 class="topics">The Image Sprite
<ul class="foods_list">
  <li class="doughnuts"><a href="#">Doughnuts</a></li>
  <li class="coffees"><a href="#">Coffees</a></li>
  <li class="fried_chickens"><a href="#">Fried Chickens</a></li>
  <li class="beers"><a href="#">Beers</a></li>
  <li class="cheeses"><a href="#">Cheeses</a></li>
</ul>





				

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

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

.topics {
   border: 1px solid #a55eb1;
   width: 600px;
   margin: 100px auto 50px;
   text-align: center;
   font-size: 60px;
   padding: 20px 0 10px;
}

.foods_list {
   width: 400px;
   margin: 0 auto;
}

.foods_list a {
   display: block;
   background-color: #481e4e;
   font-size: 30px;
   padding: 20px 15px 8px;
   border-bottom: 1px solid #8f5099;
}

.foods_list li.cheeses a {
   border: 0;
}

.foods_list a:hover {
   background-color: #62306a;
   background-image: url(images/food_icons.png);
   background-repeat: repeat-y;
   background-size: 68px auto;
   color: #ffd700;
}

.foods_list li.doughnuts a:hover {
   background-position: 324px 5px;
}

.foods_list li.coffees a:hover {
   background-position: 324px -63px;
}

.foods_list li.fried_chickens a:hover {
   background-position: 324px -132px;
}

.foods_list li.beers a:hover {
   background-position: 324px -200px;
}

.foods_list li.cheeses a:hover {
   background-position: 324px -268px;
}