@import url('https://fonts.googleapis.com/css?family=Roboto');
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            
            body {
                font-family: 'Roboto', sans-serif;
                background-color: #333 !important;
                color: #fff;
                overflow-x: hidden;
            }
            
            body::-webkit-scrollbar {
                display: none;
            }
            
            .slider {
                position: relative;
                overflow: hidden;
                height: 80vh;
                width: 100vw;
                justify-content: center;
                overflow-x: hidden;
            }
            
            .slide {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                transition: opacity 0.4s ease-in-out;
            }
            
            .slide.current {
                opacity: 1;
            }
            
            .slide .content {
                position: absolute;
                bottom: 70px;
                left: -600px;
                opacity: 0;
                width: 600px;
                background-color: rgba(255, 255, 255, 0.8);
                color: #333;
                padding: 35px;
            }
            
            .slide .content h1 {
                margin-bottom: 10px;
            }
            
            .slide.current .content {
                opacity: 1;
                transform: translateX(600px);
                transition: all 0.7s ease-in-out 0.3s;
            }
            
            .buttons button#next {
                position: absolute;
                top: 30%;
                right: 15px;
            }
            
            .buttons button#prev {
                position: absolute;
                top: 30%;
                left: 15px;
            }
            
            .buttons button {
                border: 2px solid #fff;
                background-color: transparent;
                color: #fff;
                cursor: pointer;
                padding: 13px 15px;
                border-radius: 50%;
                outline: none;
            }
            
            .buttons button:hover {
                background-color: #fff;
                color: #333;
            }
            
            .sub-title {
                position: relative;
                width: -moz-fit-content;
                width: fit-content;
                margin-bottom: 30px;
                margin-left: 1em;
                color: #fff;
                margin-top: 1rem;
                align-items: center;
            }
            
            .sub-title :after {
                position: absolute;
                left: 0;
                bottom: 0;
                content: "";
                width: 100%;
                height: 4px;
                background-color: white;
            }
            
            .p {
                text-align: center;
            }
            
            @media(max-width: 500px) {
                .slide .content {
                    bottom: -300px;
                    left: 0;
                    width: 100%;
                }
                .slider {
                    height: 55vh;
                }
                .slide.current .content {
                    transform: translateY(-300px);
                }
                .buttons button#next {
                    position: absolute;
                    top: 20%;
                    right: 15px;
                }
                .buttons button#prev {
                    position: absolute;
                    top: 20%;
                    left: 15px;
                }
            }
            
            .slide:first-child {
                background: url('https://wallpapermemory.com/uploads/550/john-wick-wallpaper-ultra-hd-4k-246389.jpg') no-repeat center top/cover;
            }
            
            .slide:nth-child(2) {
                background: url('https://cdn.wallpapersafari.com/32/83/Pi9BhL.jpg') no-repeat center top/cover;
            }
            
            .slide:nth-child(3) {
                background: url('https://wallpapers.net/web/wallpapers/jurassic-world-fallen-kingdom-movie-wallpaper/3840x2160.jpg') no-repeat center top/cover;
            }
            
            .slide:nth-child(4) {
                background: url('https://images8.alphacoders.com/110/1106852.jpg') no-repeat center top/cover;
            }
            
            .slide:nth-child(5) {
                background: url('https://www.pixelstalk.net/wp-content/uploads/images6/Movie-Desktop-Wallpaper.jpg') no-repeat center top/cover;
            }
            
            .slide:nth-child(6) {
                background: url('https://images3.alphacoders.com/131/1317115.jpeg') no-repeat center top/cover;
            }