body {
  height: 100vh;
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat; /*스크롤시 반복 없음*/
  background-attachment: fixed; /*스크롤시 움직임 없음*/
}

.container {
  padding: 50px 0;
}

.container .heroes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
}

.container .heroes .hero {
  width:80px;
  height:84px;
  margin: 4px;
  border: 3px solid #fff; /* 6자리가 모두 같을 땐 세개만 써도 됨 */
  border-radius: 10px;
  box-sizing: border-box; 
  background-color: #555555;
  overflow: hidden; /*칸 밖으로 출력 되는 것 방지*/
  transform: skewX(-14deg);
  transition: 
    transform .1s, 
    background-color .6s;
}

.container .heroes .hero:hover {
  background-color: #ff9c00;
  transform: skewX(-14deg) scale(1.3);
  z-index: 1;
}

.container .heroes .hero .image {
  width: 140%;
  height: 100%;
  /* 가로, 세로 지정을 안해주면 이미지가 띄워지지 않음*/
  background-position: center;
  background-size: 90px;
  background-repeat: no-repeat;
  transform: skewX(14deg) translateX(-16px); 
    /*부모요소 -14 자식요소 +14 이미지 찌그러짐 방지 
      |왼쪽 으로 캐릭터 끌어와서 중심에 놓아주기*/
}

.container .heroes .hero:nth-child(1) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png);}
.container .heroes .hero:nth-child(2) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero2.png);}
.container .heroes .hero:nth-child(3) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero3.png);}
.container .heroes .hero:nth-child(4) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero4.png);}
.container .heroes .hero:nth-child(5) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero5.png);}
.container .heroes .hero:nth-child(6) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero6.png);}
.container .heroes .hero:nth-child(7) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero7.png);}
.container .heroes .hero:nth-child(8) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero8.png);}
.container .heroes .hero:nth-child(9) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero9.png);}
.container .heroes .hero:nth-child(10) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero10.png);}
.container .heroes .hero:nth-child(11) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero11.png);}
.container .heroes .hero:nth-child(12) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero12.png);}
.container .heroes .hero:nth-child(13) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero13.png);}
.container .heroes .hero:nth-child(14) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero14.png);}
.container .heroes .hero:nth-child(15) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero15.png);}
.container .heroes .hero:nth-child(16) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero16.png);}
.container .heroes .hero:nth-child(17) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero17.png);}
.container .heroes .hero:nth-child(18) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero18.png);}
.container .heroes .hero:nth-child(19) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero19.png);}
.container .heroes .hero:nth-child(20) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero20.png);}
.container .heroes .hero:nth-child(21) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero21.png);}
.container .heroes .hero:nth-child(22) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero22.png);}
.container .heroes .hero:nth-child(23) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero23.png);}
.container .heroes .hero:nth-child(24) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero24.png);}
.container .heroes .hero:nth-child(25) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero25.png);}
.container .heroes .hero:nth-child(26) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero26.png);}
.container .heroes .hero:nth-child(27) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero27.png);}
.container .heroes .hero:nth-child(28) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero28.png);}
.container .heroes .hero:nth-child(29) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero29.png);}
.container .heroes .hero:nth-child(30) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero30.png);}
.container .heroes .hero:nth-child(31) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero31.png);}
.container .heroes .hero:nth-child(32) .image { background-image: url(https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero32.png);}

/* heroes 에대한 정의가 끝났으니까 그 아래에*/
.container .logo {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 20px;
}

.container .logo img{
  width: 100%; /* 이미지의 부모요소(300px)보다 커질수 없음 */
}