*{padding:0;margin:0;font-family:"Ubuntu",serif;box-sizing:border-box;border:none;outline:none;-webkit-overflow-scrolling:touch;touch-action:manipulation;background-color:rgba(0,0,0,0)}body{position:relative;display:flex;align-items:center;justify-content:center;min-width:100vw;min-height:100vh;background-color:#fff}body *{flex-shrink:0}body>section.upload{display:flex;flex-flow:column;gap:2rem}body>section.upload>section.header{display:flex;flex-flow:column;justify-content:center;align-items:center;gap:1.5rem}@media screen and (min-width: 480px){body>section.upload>section.header{flex-flow:row}}body>section.upload>section.header>section{display:flex;flex-flow:column;justify-content:center;align-items:center;gap:.5rem}body>section.upload>section.header span.material-symbols-outlined{width:4rem;height:4rem;line-height:4rem;font-size:4rem;color:#000}body>section.upload>section.header h1{width:100%;font-weight:500;font-size:2rem;color:#000;text-align:center;letter-spacing:.25rem}@media screen and (min-width: 480px){body>section.upload>section.header h1{text-align:left;font-size:3rem}}body>section.upload>section.header h2{width:100%;text-align:center;font-size:1rem;letter-spacing:2px;color:#000}@media screen and (min-width: 480px){body>section.upload>section.header h2{text-align:left;font-size:1.5rem}}body>section.upload>section.header a{display:flex;align-items:center;gap:.75rem;margin-top:.5rem;width:100%;text-align:center;text-decoration:none;font-size:1rem;letter-spacing:2px;color:#000}@media screen and (min-width: 480px){body>section.upload>section.header a{text-align:left}}body>section.upload>section.header a span.material-symbols-outlined{width:1.5rem;height:1.5rem;line-height:1.5rem;font-size:1.5rem;color:#000}body>section.upload>section.button{display:flex;justify-content:center;align-items:center;gap:2rem}body>section.upload>section.button button{display:flex;justify-content:center;align-items:center;gap:1rem;color:#000;font-size:1.125rem;letter-spacing:1px;cursor:pointer;transition:.5s}body>section.upload>section.button button:active{transform:scale(90%);opacity:.5}body>section.upload>section.button span.material-symbols-outlined{width:2.5rem;height:2.5rem;line-height:2.5rem;font-size:2.5rem;color:#000}body>section.upload>section.button input[type=file]{display:none}body>section.gallery{position:fixed;top:100vh;display:flex;flex-flow:column;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:#000;transition:.5s}body>section.gallery:has(section.list img){top:0}body>section.gallery>section.button{z-index:1000;position:absolute;top:1.5rem;right:1.5rem;display:flex;justify-content:center;align-items:center;gap:1rem}body>section.gallery>section.button span.material-symbols-outlined{width:2.5rem;height:2.5rem;line-height:2.5rem;font-size:2.5rem;color:#fff;filter:drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.5019607843));-webkit-filter:drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.5019607843))}body>section.gallery>section.button button{cursor:pointer}body>section.gallery>section.button button:active{transform:scale(90%);opacity:.5}body>section.gallery>section.body{width:100%;height:calc(100% - 6rem)}body>section.gallery>section.body img{object-fit:contain;width:100%;height:100%}body>section.gallery>section.body button{z-index:10;position:absolute;top:0;bottom:0;width:30%;cursor:pointer}body>section.gallery>section.body button.left{left:0}body>section.gallery>section.body button.right{right:0}body>section.gallery>section.list{display:flex;justify-content:flex-start;align-items:center;max-width:100%;height:6rem;overflow:scroll}body>section.gallery>section.list img{padding:.5px;object-fit:cover;width:6rem;height:6rem;cursor:pointer;transition:.5s;opacity:.5}body>section.gallery>section.list img:active{transform:scale(90%);opacity:.5}body>section.gallery>section.list img.selected{transform:scale(90%);opacity:1}
