@import"https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";:root{--primary-color: #fffdde;--secondary-color: #e40138;--tertiary-color: #050504}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Oswald,sans-serif;background-color:var(--primary-color);height:100%}#root{max-width:1500px;margin:0 auto;display:flex;height:100vh}.sidebar{padding:20px;max-width:250px;width:100%;border-right:1px solid var(--tertiary-color)}.sidebar .logo{letter-spacing:-1.2px;color:var(--secondary-color);font-family:Oswald,sans-serif;margin-bottom:30px}.link{background-color:var(--tertiary-color);list-style:none;padding:10px;font-weight:700;transition:all .2s linear;cursor:pointer}.link:not(:last-child){margin-bottom:10px}.link:hover{background-color:var(--secondary-color);color:var(--tertiary-color)}.link.active{background-color:var(--secondary-color)}.sidebar .link{text-decoration:none;display:block;color:var(--primary-color)}.container{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:20px}.filters{display:grid;gap:20px;grid-template-columns:1fr 1fr;background-color:var(--tertiary-color);padding:20px;font-family:Oswald,sans-serif;letter-spacing:.5px}.filter{display:flex;flex-direction:column;gap:10px}.filter label{color:var(--secondary-color);font-weight:700}.filter input,.filter select{padding:6px;font-family:Oswald,sans-serif;background-color:transparent;outline:none;border:1px solid var(--primary-color);color:var(--primary-color);letter-spacing:.5px}.comics{margin:0 0 30px;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.comic-link{border:2px solid var(--tertiary-color);box-shadow:2px 2px var(--tertiary-color);display:flex;align-items:center;gap:10px;padding:10px;text-decoration:none;cursor:pointer;transition:all .2s ease-in-out;color:var(--tertiary-color)}.comic-link:hover{box-shadow:none;transform:translate(2px,2px)}.comic-link img{display:block;width:50px;height:50px;border-radius:50%;object-fit:fill;box-shadow:0 1.9px 3px #0000001b,0 15px 24px #00000036}.comic-link .title{color:var(--tertiary-color);font-weight:700;font-size:14px;margin-bottom:4px;transition:color .2s ease-in-out}.comic-link:hover .title{color:var(--secondary-color)}.comic-link .year-published{color:#797979;font-size:12px;letter-spacing:1.2px;font-family:Oswald,sans-serif}.loading-message{display:flex;justify-content:center;align-items:center;height:calc(100vh - 450px)}.statistics{display:flex;gap:20px}.statistic{flex:1;border:2px solid var(--tertiary-color);padding:10px;display:flex;justify-content:space-between;align-items:center}.statistic:hover{box-shadow:none}.statistic p{font-weight:700}.statistic h2{font-family:Oswald,sans-serif;color:var(--secondary-color);font-size:32px;margin:0}.btns{display:flex;justify-content:space-between;align-items:center;width:100%;padding-top:30px;border-top:2px solid var(--tertiary-color);font-family:Oswald,sans-serif}.btn{padding:8px 16px;cursor:pointer;background-color:transparent;border:2px solid var(--tertiary-color);width:150px;text-transform:uppercase;font-weight:700;font-family:Oswald,sans-serif;transition:all .3s ease-in-out}.btn:hover{background-color:var(--secondary-color)}.btn:disabled{cursor:not-allowed;background-color:transparent}.btns p>span{color:var(--secondary-color)}.about{max-width:700px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:24px}.highlight{margin-bottom:8px;color:var(--secondary-color)}.features{margin-left:20px;list-style:square}mark{margin:0 -.4em;padding:0 .4em;border-radius:.8em .3em;background:transparent;background-image:linear-gradient(to right,#e401381a,#e40138b3 4%,#e401384d);-webkit-box-decoration-break:clone;box-decoration-break:clone;font-weight:700}.comic-details{padding:20px;display:flex;justify-content:center;align-items:center;width:100%;gap:20px}.comic-info{display:flex;flex-direction:column;gap:20px}.comic-info_title{text-transform:uppercase}.comic-info h3{text-transform:uppercase;font-size:16px;letter-spacing:-.5px;margin-bottom:4px;text-decoration:underline}.comic-info_creators{display:flex;gap:50px}.comic-details p{font-family:Roboto,sans-serif}.comic-description{font-size:14px}.see-more-details{text-align:center;max-width:250px;text-decoration:none;padding:8px 16px;border:2px solid var(--tertiary-color);background-color:var(--secondary-color);color:var(--tertiary-color);text-transform:uppercase;letter-spacing:1px;transition:all .2s linear;font-weight:700}.see-more-details:hover{background-color:var(--tertiary-color);color:var(--secondary-color)}.visualizations{display:flex;justify-content:center;align-items:center;gap:20px}.visualization{border:2px dotted var(--tertiary-color);padding:10px;height:100%}@media (max-width: 1100px){.statistic{flex-direction:column-reverse;align-items:flex-start}.visualizations{flex-direction:column}}@media (max-width: 400px){.filters{grid-template-columns:1fr}}