header {}

nav {
    height: 80px;
    width: 100vw;
    background-color: rgb(15, 23, 42);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;

}

div:nth-child(2) {
    width: 400px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

a {
    text-decoration: none;
    color: white;
}

* {
    margin: 0;
}

nav>div:nth-child(3)>input {
    outline: none;
    padding: 7px;
    padding-left: 10px;
    border-radius: 20px;
    width: 250px;
    transition: box-shadow 0.3s ease-in-out;
}

nav>div:nth-child(3)>input:hover {
    box-shadow: 0px 0px 5px 3px white;
}

main {
    height: 500vh;
    width: 100vw;
    background-color: rgb(30, 41, 59);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;

}

main>div:first-child {
    width: 30vw;
    height: 100vh;
    background-color: gray;
    border-radius: 20px;
    background-image: url("https://i.pinimg.com/1200x/ce/f5/98/cef5986c4484fa316464313ffd115b12.jpg");
    background-size: 30vw 100vh;
    position: absolute;
    top: 250px;
    left: 15%;
    background-repeat: no-repeat;
    transition: background-image 0.5s linear, transform 0.5s linear, right 0.5s linear;
}

main>div:first-child:hover {
    background-image: url("https://i.pinimg.com/474x/22/7c/8f/227c8f6e1610d449b769ae74c8aa5fe7.jpg");
    background-size: 30vw 100vh;
    box-shadow: 0px 0px 10px 5px white;
    background-repeat: no-repeat;
    transform: translate(200px, 200px);
    transform: skew(20deg);
    transform: rotate(-90deg);

}

main>div:nth-child(2) {
    width: 30vw;
    height: 100vh;
    background-color: gray;
    border-radius: 20px;
    background-image: url("https://i.pinimg.com/736x/8c/90/de/8c90de3a6b92398f6d0c0dca601b91c7.jpg");
    background-size: 30vw 100vh;
    background-repeat: no-repeat;
    position: absolute;
    right: 15%;
    top: 250px;
    transition: background-image 0.5s linear, transform 1s ease;
}

main>div:nth-child(2):hover {
    background-image: url("https://i.pinimg.com/1200x/24/ed/f8/24edf845cdac54f390db0579e979106d.jpg");
    background-size: 30vw 100vh;
    box-shadow: 0px 0px 10px 5px white;
    transform: translate(-200px, 200px);
    transform: skew(20deg);
    transform: rotate(-90deg);

}

main>p {

    font-size: 30px;
    color: black;
}

main>h1 {
    position: absolute;
    top: 100px;
    left: 50%;
    font-size: 40px;
    transform: translateX(-50%);
    color: rgb(146, 16, 16);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-shadow: 0px 0px 5px white;
    transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}

main>h1::after {
    content: " Click on the posters to know more!";
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Show the extra text on hover */
main>h1:hover::after {
    opacity: 2;
}

main>h1:hover {
    text-shadow: 0px 0px 10px 5px white;
    color: darkred;
}