:root{--primary-color:#504d87;--primary-gradient:linear-gradient(90deg,#504d87,#3a2059)}*,:after,:before{box-sizing:border-box;font-family:inherit}body{position:relative;font-family:system-ui;background-image:url(/star-wars-app/static/media/stormtrooper_bg.c397b523.jpg);background-size:100vh;background-position:50%;background-repeat:no-repeat;max-width:800px;margin:auto}button{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;font-size:1em;cursor:pointer;border:0;background-color:#504d87;background-color:var(--primary-color);color:#fff;text-transform:uppercase;font-weight:700;border-radius:3px;padding:5px 10px}a,a:link,a:visited{color:#504d87;color:var(--primary-color);text-decoration:none}a:hover{text-decoration:underline}.home{height:100vh;background-position:50%;background-size:cover;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.home .logo{max-width:100px;position:absolute;top:0;left:0;margin:1em}.home>.container{background-color:hsla(0,0%,100%,.8);padding:1em;text-align:center;width:90%}.home>.container>*+*{margin-top:1em}.home .container .character{cursor:pointer}.home .container .character:hover{color:var(--primary-color)}.home .container .pagination{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;grid-gap:1em;gap:1em}.home .container span.page-number{width:auto;color:var(--primary-color);font-weight:700}.home footer{position:absolute;bottom:1em;left:1em}.home span.swipe{opacity:.5;margin-top:.5em;-webkit-animation:swipe 3s ease-in-out infinite alternate both;animation:swipe 3s ease-in-out infinite alternate both}@-webkit-keyframes swipe{0%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}to{-webkit-transform:rotate(20deg);transform:rotate(20deg)}}@keyframes swipe{0%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}to{-webkit-transform:rotate(20deg);transform:rotate(20deg)}}.aside{background-color:rgba(34,34,34,.4);position:fixed;top:0;width:100%;left:0;height:100vh;-webkit-transform:translateX(100%);transform:translateX(100%);transition:all .4s ease-in-out;--clip:polygon(110px 0,100% 0,100% 100%,177px 100%,162px 77.6%,170px 75.97%,158px 74.75%,128px 23.92%,140px 22.47%,126px 20.78%);--shadow:2px 0 2px 10px rgba(34,34,34,0.4)}aside.active{-webkit-transform:translateX(0);transform:translateX(0)}.aside .container-wrap{height:100vh;-webkit-filter:drop-shadow(-4px 0 5px rgba(50,50,0,.8));filter:drop-shadow(-4px 0 5px rgba(50,50,0,.8))}.aside .container{max-width:360px;min-height:100vh;color:#fff;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;margin-left:auto;-webkit-align-items:flex-end;align-items:flex-end;-webkit-justify-content:space-between;justify-content:space-between;padding:1.5em 1.5em 10em 0;text-align:right;text-transform:capitalize;background:var(--primary-color);background:var(--primary-gradient);-webkit-clip-path:var(--clip);clip-path:var(--clip);box-shadow:var(--shadow)}.aside .container .details{max-width:200px}.aside .container .link,.aside .container p{display:-webkit-flex;display:flex;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-align-items:center;align-items:center;grid-gap:1em;gap:1em}.aside h1{margin:0}.aside .container .link{cursor:pointer;color:inherit;text-decoration:none}.aside .container .link:hover{color:#0ff}.character-details{min-height:100vh}.character-details .container{font-size:1.3em;height:100vh;background:rgb(255 255 255/80%);padding:1em 2em;max-width:400px;margin:auto}.character-details .container h1{color:var(--primary-color);border-bottom:3px solid var(--primary-color);padding-bottom:10px}.character-details .container ul{padding:0;list-style:inside;line-height:1.7;text-transform:capitalize}.character-details .container button{position:absolute;bottom:5em;font-size:14px}.character-details .container ul li ul{padding-left:18px;list-style-type:circle;font-size:16px}
/*# sourceMappingURL=main.4b6c5cfd.chunk.css.map */