@import url('https://fonts.googleapis.com/css2?family=Roboto');

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

.slider{position: relative;overflow: hidden;height: 100vh;max-width: 100vw;font-family: 'Roboto', sans-serif;background: #333;color: #fff;line-height: 1.6;}
.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;}

button#next{position:absolute;top: 50%;right: 15px;margin-top: -20px;font-size: 50px;font-weight: bold;}
button#prev{position: absolute;top: 50%;left: 15px;margin-top: -20px;font-size: 50px;font-weight: bold;}
.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;}

@media(max-width: 500px) {
    .slide .content{bottom: -300px;left: 0;width: 100%;}
    .slide.current .content{transform: translateY(-300px);}
}
/* 
.slide:first-child{background: url('./images/slider/desk.png') no-repeat center center/cover;}
.slide:nth-child(2){background: url('./images/slider/desk2.png') no-repeat center top/cover;}
.slide:nth-child(3){background: url('./images/slider/desk.png') no-repeat center top/cover;}
.slide:nth-child(4){background: url('./images/slider/desk3.png') no-repeat center top/cover;}
.slide:nth-child(5){background: url('./images/slider/desk.png') no-repeat center top/cover;}
.slide:nth-child(6){background: url('./images/slider/desk2.png') no-repeat center top/cover;} */