body {
  height: 100vh;
  background-image: url('./image/wp2337008-blockchain-wallpapers.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container {
  padding: 50px 0;
}

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

.container .coins .coin {
  width: 80px;
  height: 84px;
  margin: 4px;
  border: 3px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
  /* border까지 포함해서 */
  background-color: #555;
  overflow: hidden;
  /* 넘치는 부분은 보이지 않게 */
  transform: skewX(-14deg);
  transition: transform 0.1s, background-color 0.6s;
  /* 각각 다른 속도 변화 적용 */
}

.container .coins .coin:hover {
  background-color: pink;
  transform: skewX(-14deg) scale(1.3);
  z-index: 1;
}

.container .coins .coin .image {
  width: 140%;
  height: 100%;
  background-position: center;
  /* 사진을 정 가운데 지정 */
  background-size: 60px;
  background-repeat: no-repeat;
  transform: skewX(14deg) translateX(-14px);
  /* 사진이 찌그러지는 것을 방지 및 위치 조정*/
}

.container .coins .coin:nth-child(1) .image {
  background-image: url('./image/pngwing.com (1).png');
}
.container .coins .coin:nth-child(2) .image {
  background-image: url('./image/pngwing.com (2).png');
}
.container .coins .coin:nth-child(3) .image {
  background-image: url('./image/pngwing.com (3).png');
}
.container .coins .coin:nth-child(4) .image {
  background-image: url('./image/pngwing.com (4).png');
}
.container .coins .coin:nth-child(5) .image {
  background-image: url('./image/pngwing.com (5).png');
}
.container .coins .coin:nth-child(6) .image {
  background-image: url('./image/pngwing.com (6).png');
}
.container .coins .coin:nth-child(7) .image {
  background-image: url('./image/pngwing.com (7).png');
}
.container .coins .coin:nth-child(8) .image {
  background-image: url('./image/pngwing.com (8).png');
}
.container .coins .coin:nth-child(9) .image {
  background-image: url('./image/pngwing.com (9).png');
}
.container .coins .coin:nth-child(10) .image {
  background-image: url('./image/pngwing.com (10).png');
}

.container .coins .coin:nth-child(11) .image {
  background-image: url('./image/pngwing.com (11).png');
}
.container .coins .coin:nth-child(12) .image {
  background-image: url('./image/pngwing.com (12).png');
}
.container .coins .coin:nth-child(13) .image {
  background-image: url('./image/pngwing.com (13).png');
}
.container .coins .coin:nth-child(14) .image {
  background-image: url('./image/pngwing.com (14).png');
}
.container .coins .coin:nth-child(15) .image {
  background-image: url('./image/pngwing.com (15).png');
}
.container .coins .coin:nth-child(16) .image {
  background-image: url('./image/pngwing.com (16).png');
}
.container .coins .coin:nth-child(17) .image {
  background-image: url('./image/pngwing.com (17).png');
}
.container .coins .coin:nth-child(18) .image {
  background-image: url('./image/pngwing.com (18).png');
}
.container .coins .coin:nth-child(19) .image {
  background-image: url('./image/pngwing.com (19).png');
}
.container .coins .coin:nth-child(20) .image {
  background-image: url('./image/pngwing.com (20).png');
}

.container .coins .coin:nth-child(21) .image {
  background-image: url('./image/pngwing.com (21).png');
}
.container .coins .coin:nth-child(22) .image {
  background-image: url('./image/pngwing.com (22).png');
}
.container .coins .coin:nth-child(23) .image {
  background-image: url('./image/pngwing.com (23).png');
}
.container .coins .coin:nth-child(24) .image {
  background-image: url('./image/pngwing.com (24).png');
}
.container .coins .coin:nth-child(25) .image {
  background-image: url('./image/pngwing.com (25).png');
}
.container .coins .coin:nth-child(26) .image {
  background-image: url('./image/pngwing.com (26).png');
}
.container .coins .coin:nth-child(27) .image {
  background-image: url('./image/pngwing.com (27).png');
}
.container .coins .coin:nth-child(28) .image {
  background-image: url('./image/pngwing.com (28).png');
}
.container .coins .coin:nth-child(29) .image {
  background-image: url('./image/pngwing.com (29).png');
}
.container .coins .coin:nth-child(30) .image {
  background-image: url('./image/pngwing.com (30).png');
}

.container .coins .coin:nth-child(31) .image {
  background-image: url('./image/pngwing.com (31).png');
}
.container .coins .coin:nth-child(32) .image {
  background-image: url('./image/pngwing.com (32).png');
}

.container .logo {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 20px;
}

.container .logo img {
  width: 100%;
}