stylesheet.css

.hero-banner {
    background-image: url('images/herobanner.png');
    background-size: cover;
    background-position: center;
    height: 600px; /* Adjust the height as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}
/* Tilted Game Art */
.tilted-game-art {
    position: relative;
    perspective: 1000px;
    width: 300px; /* Adjust the size as needed */
    height: 300px; /* Adjust the size as needed */
    margin: 50px auto;
    transform-style: preserve-3d;
}

.tilted-game-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(-10px);
    transition: transform 0.5s ease;
}

.tilted-game-art:hover img {
    transform: rotateX(10deg) rotateY(10deg) translateZ(-10px);
}
/* Popular Games Section Styles */
.popular-games {
    padding: 4rem 0;
    background-color: #f5f5f5;
}
.Upcoming-games{
    padding: 4rem 0;
    background-color: #cecece;
}

.section-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
}

.horizontal-tilted-game-art {
    display: flex;
    justify-content: center; /* Center images horizontally */
    align-items: center;
}

.tilted-game-art {
    position: relative;
    perspective: 1000px;
    width: 300px; /* Adjust the size as needed */
    height: 300px; /* Adjust the size as needed */
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
    margin: 0 5px; /* Adjust margin for spacing */
}

.tilted-game-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(-10px);
}

.tilted-game-art:hover {
    transform: rotateX(10deg) rotateY(10deg) translateZ(-10px);
}