:root{--primary-color:#cdb4db;--secondary-color:#bde0fe;--button-color:#ffafcc;--button-hover:#ffc8dd;--special-color:#a2d2ff;--heading-color:#023047}*{margin:0;padding:0;box-sizing:border-box}body{font-family:sans-serif;height:100vh;background-color:var(--secondary-color)}.App>h1{text-align:center;font-size:3em;padding:20px;font-style:italic;letter-spacing:5px;color:var(--heading-color)}.wrapper{border:2px solid var(--primary-color);border-radius:20px;width:80%;min-height:85vh;margin:0 auto;padding:10px;flex-direction:column}.card,.wrapper{display:flex;justify-content:center}.card{overflow-x:scroll;scroll-snap-type:x mandatory;align-items:center}figure{padding:10px;margin:10px;text-align:center;scroll-snap-align:center;position:relative;overflow:hidden;opacity:.7}figcaption{display:none}figure.main{overflow:visible;position:absolute;z-index:999;animation-name:slider;animation-duration:.7s;animation-timing-function:ease-in-out;background-color:hsla(0,0%,40%,.2);border-radius:20px;opacity:1}figure.main figcaption{display:block;border-radius:20px;padding:3px}@keyframes slider{0%{opacity:.7}to{opacity:1}}.controls{text-align:center;max-height:15vh;display:flex;justify-content:center;align-items:center}.controls button{width:120px;padding:5px;font-size:1.2em;margin:5px;border-radius:20px;background-color:var(--button-color);color:var(--special-color);border:none}button:hover{cursor:pointer;text-decoration:underline;background-color:var(--button-hover);color:var(--secondary-color)}.dots{text-align:center;margin-top:30px;min-height:3vh}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 5px;cursor:pointer;transition:background-color .3s;background-color:var(--special-color)}.dot.active{background-color:var(--primary-color)}.card.widescreen{width:90%;margin:5px auto;height:90vh}.card.laptop{width:80%;margin:auto;height:90vh}figure.laptop{width:75%}.card.tablet{width:70%;margin:auto}figure.tablet{width:-moz-fit-content;width:fit-content;margin:auto;height:90vh}.card.mobile{width:70%;margin:auto}figure.mobile{width:-moz-fit-content;width:fit-content;margin:auto;height:90vh}