body{
    height: 100vh;
    background-image: url("./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;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #555;
    transform: skewX(-14deg);
    transition: 
        transform .1s,
        background-color 0.6s;
    overflow: hidden;
}

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

.container .heroes .hero .image {
    width: 140%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90px;
    transform: skewX(14deg) translateX(-16px);
}

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

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

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