@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
*{box-sizing:border-box}body{font-family:"Roboto",sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;overflow:hidden;margin:0;background-position:center center;background-size:cover;transition:.4s}body::before{content:"";position:absolute;top:0;left:0;width:100%;height:100vh;background-color:rgba(0,0,0,.7);z-index:-1}.slider-container{box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);height:70vh;width:70vw;position:relative;overflow:hidden}.slide{opacity:0;height:100vh;width:100vw;background-position:center center;background-size:cover;position:absolute;top:-15vh;left:-15vw;transition:.4s ease;z-index:1}.slide.active{opacity:1}.arrow{position:fixed;background-color:rgba(0,0,0,0);color:#fff;padding:20px;font-size:30px;border:2px solid orange;top:50%;transform:translateY(-50%);cursor:pointer}.arrow:focus{outline:0}.left-arrow{left:calc(15vw - 65px)}.right-arrow{right:calc(15vw - 65px)}