*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: black;
}

/* Absolutes Start*/
#bg1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -10;
    /* fadeOut */
}

#bg2{
    position: absolute;
    top: -10px;
    right: -220px;
    width: 85%;
    z-index: -9;
    /* fadeOut */
}

#bg3{
    position: absolute;
    top: -50px;
    right: 0;
    width: 100%;
    opacity: 30%;
    pointer-events: none;
    /* zoom */
}

#video{
    position: absolute;
    top: -100px;
    left: -150px;
    width: 120%;
    height: 120%;
    z-index: -11;
}

#close{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 20px;
    opacity: 0%;
    cursor: pointer;
}
/* Absolutes End*/

.main-container{
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    font-family: "Russo One";
}

    .container{
        padding: 2rem 2rem;
    }

        .nav{
            height: 20vh;
            /* fadeOut */
        }

            .nav ul{
                display: flex;
                justify-content: space-between;
                color: white;
                list-style: none;
            }

                #div1{
                    width: 40px;
                    height: 2.5px;
                    background-color: white;
                    margin-bottom: 0.3rem;
                }

                #div2{
                    width: 20px;
                    height: 2.5px;
                    background-color: white;
                }

                ul a{
                    color: white;
                    text-decoration: none;
                    padding: 0.4rem 2.5rem;
                    background-color: transparent;
                    border: 1px solid rgba(255, 255, 255, 0.425);
                }

    .center{
        height: 55vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* swipe */
    }

        .center-left{
            flex: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

            .top{
                display: flex;
                flex-direction: row;
                width: 68%;
            }

                .top h2{
                    color: white;
                    font-family: "Roboto";
                    font-size: 1.2rem;
                    font-weight: 800;
                    width: 50%;
                }

                .top h3{
                    color: #434343;
                    font-family: "Roboto";
                    font-size: 1rem;
                    font-weight: 800;
                    width: 100%;
                    text-align: end;
                }

            .bottom{
                color: white;
                margin-top: -1rem;
            }

                .bottom h1{
                    font-size: 12rem;
                    letter-spacing: 20px;
                }

                .bottom h1:hover{
                    text-shadow: 1px 1px 14px white;
                }

                .bottom h2{
                    color: #9b3a3f;
                    text-align: end;
                    font-size: 1.8rem;
                    margin-top: -2rem;
                    letter-spacing: 4px;
                }

                .bottom h3{
                    text-align: end;
                    font-size: 1.5rem;
                    margin-top: 0.5rem;
                    letter-spacing: 4px;
                }

                    .bottom h3 span{
                        color: #434343;
                        font-size: 1rem;
                        vertical-align: top;
                    }

        .center-right{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

            .center-right a{
                margin: 1rem 0;
            }

                .center-right img{
                    width: 40px;
                }


    .footer{
        height: 20vh;
        display: flex;
        flex-direction: row;
        padding-bottom: 1rem;
        /* fallOff */
    }

        .footer-left{
            flex: 60%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding-left: 10%;
        }

            .footer-left h2{
                color: white;
                font-family: "Roboto";
                font-size: 1rem;
            }

            .trailers{
                display: flex;
                flex-direction: row;
            }

                .trailer-details h3{
                    font-family: "Roboto";
                    text-align: end;
                    color: #434343;
                    font-size: 1rem;
                    padding-bottom: 0.5rem;
                }


                .trailer-details div{
                    width: 300px;
                    height: 90px;
                }

                    #trailer1{
                        background-image: url(../img/joker_02.jpg);
                        background-size: cover;
                        background-position: top;
                        background-repeat: no-repeat;
                    }

                    #trailer2{
                        background-image: url(../img/joker_03.jpg);
                        background-size: cover;
                        background-position: top;
                        background-repeat: no-repeat;
                        margin-left: 2rem;
                        cursor: pointer;
                    }

        .footer-right{
            flex: 40%;
            align-self: flex-end;
            padding-top: 2rem;
        }

            .footer-right p{
                color: white;
                font-size: 0.75rem;
                text-align: center;
            }

/* Animation classes */
.fadeOut{
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-name: fadeOut;
}

.fadeIn{
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-name: fadeIn;
}

.zoom{
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-name: zoom;
}

.fallOff{
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-name: falloff;
}

.swipe{
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-name: swipe;
}

/* Animations */
@keyframes swipe{
    from{
        width: 100%;
    }
    to{
       margin-left: 1000px;
       width: 500%;
    }
}

@keyframes zoom{
    from{
        transform: scale(1.0);
    }
    to{
        transform: scale(30.0);
    }
}

@keyframes falloff{
    from{
        margin-top: 0px;
    }
    to{
       margin-top: 500px;
    }
}

@keyframes fadeOut{
    from{
        opacity: 100%;
    }
    to{
        opacity: 0%;
    }
}

@keyframes fadeIn{
    from{
        opacity: 0%;
    }
    to{
        opacity: 50%;
    }
}