﻿html{--hue: 162}html,body{background-color:hsl(calc(var(--hue) + 44), 100%, 3%);margin:0;padding:0;font-family:"Lato",sans-serif;font-weight:300;text-align:center;overflow-x:hidden;overflow-y:auto;height:100%;background-position:fixed}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--thumbBG) var(--scrollbarBG)}*::-webkit-scrollbar{width:11px}*::-webkit-scrollbar-track{background:var(--scrollbarBG)}*::-webkit-scrollbar-thumb{background-color:var(--thumbBG);border-radius:6px;border:3px solid var(--scrollbarBG)}html{--scrollbarBG:rgba(0, 0, 0, 0.2);--thumbBG:rgba(255, 255, 255, 0.1)}body{position:relative}.input{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.3);margin-bottom:10px}.hide{display:none !important}.header{text-align:center;color:#fff;padding:1rem 1.5rem;display:grid;grid-template-columns:repeat(6, 1fr);margin:0px auto;background-color:#151515}.header h1{font-weight:800;font-size:40px;line-height:80px;margin:0;grid-column:span 3;text-align:left;line-height:1}.header h2{font-weight:300;font-variant:small-caps;font-size:1.75rem;grid-column:span 3;text-align:right;margin:0;line-height:1}@media(max-width: 1024px){.header{padding-top:2rem}.header h1,.header h2{text-align:center;grid-column:span 6;margin:10px}}.formula{width:100%;font-size:4rem;padding:40px;margin-bottom:40px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}.banner{display:flex;margin:0px auto 40px auto;color:#fff;align-items:flex-start;font-family:"Lato",sans-serif;padding:40px 40px 0 40px;position:relative;z-index:100;justify-items:space-between;max-width:1200px;flex-wrap:wrap;min-height:375px;counter-reset:list}.banner li{counter-increment:list;border-radius:50px;background-color:rgba(0,0,0,.3);margin:0 -30px;padding:3rem;text-align:center;font-size:1.7rem;width:calc(33.3% + 60px);transform:rotate(-1deg);list-style:none;position:relative;line-height:1.4}.banner li::before{content:counter(list);background-color:#fff;color:#002445;padding:10px;display:block;width:2rem;height:2rem;border-radius:100%;font-size:2rem;position:absolute;top:-10px;left:-10px;line-height:1}.banner li:nth-child(2){align-self:flex-end;transform:rotate(1deg)}@media(max-width: 1024px){.banner{flex-direction:column;padding:10px 40px 20px 40px;margin:0;flex-wrap:nowrap}.banner li{width:100%;padding:1.5rem;margin:10px}.banner li:nth-child(2)::before{left:auto;right:-10px}.formula{padding:20px;font-size:2.5rem}}.search>:not(.match){display:none}.tag-filters{grid-column:span 6;margin-bottom:1rem;color:#fff;display:block}.home,.share,.share-icon{cursor:pointer}.share-prompt{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:300px;background-color:#000;border-radius:10px;z-index:1200;padding:30px 20px;box-shadow:0 0 1px #fff,0 0 400px #000}.share-prompt .button,.share-prompt button{background-color:#303;padding:.5rem 1rem;border:none;color:#fff;border-radius:5px;font-size:1rem;cursor:pointer}.share-prompt .button .material-icons,.share-prompt button .material-icons{font-size:1rem}.share-prompt .close{position:absolute;top:0;right:5px;padding:5px}#url{padding:.5rem 1rem;background-color:rgba(255,255,255,.1);border:none;color:#fff;border-radius:5px}footer{padding-bottom:100px;color:#fff}footer a{color:#fff}footer .copyright{font-size:.7rem;padding:1rem;color:rgba(255,255,255,.5);text-align:center}.logo{max-width:38px}.logo path{stroke-dasharray:1200;stroke:#fff;stroke-width:5;animation:wrap 1s ease forwards}@media(max-width: 1024px){.hide-mobile{display:none}}.bar{background-color:#151515;color:#fff;font-weight:300;padding:5px;text-align:center;font-size:1rem;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem}.bar h1{font-size:40px;font-weight:800;line-height:1;margin:0}.bar h1 a{text-decoration:none}.bar .title{font-size:1.3rem;display:inline-block;line-height:1.4;order:2}.bar .home{color:#fff;padding:.4rem 0 .2rem 10px;order:1}.bar .home .logo{width:30px}.bar .share{order:3;color:#fff;padding:.4rem .5rem .2rem .5rem}.feedback{clear:both;color:#f1f1f1;text-align:center;padding:20px 0}abbr{cursor:help}canvas{width:100%}@keyframes shiftRight{0%{opacity:0;top:-15px}100%{opacity:1;top:0}}@keyframes typing{0%{content:"•"}33%{content:"••"}66%{content:"•••"}}@keyframes wrap{0%{stroke-dashoffset:1200;fill:rgba(0,0,0,0)}70%{fill:rgba(0,0,0,0)}98%{stroke-width:5}100%{stroke-dashoffset:0;fill:#fff;stroke-width:0}}@keyframes shiftdr{0%{transform:translate(25%, 25%)}100%{transform:translateXY(0%, 0%)}}@keyframes shiftdl{0%{transform:translate(-25%, 25%)}100%{transform:translateXY(0%, 0%)}}@keyframes shiftur{0%{transform:translate(25%, -25%)}100%{transform:translateXY(0%, 0%)}}@keyframes shiftul{0%{transform:translate(-25%, -25%)}100%{transform:translateXY(0%, 0%)}}.search-form{display:block;max-width:1024px;margin:0 auto 30px auto}.form-item{width:100%;margin:0}.form-item label{position:absolute;left:-9999px}.form-item input{padding:1rem 2rem;border:none;border-bottom:1px solid rgba(0,0,0,0);width:100%;font-weight:300;background-color:rgba(0,0,0,.3);color:#fff !important;box-shadow:inset 0 0 5px #000;font-size:18px}.form-item input:focus{outline:0;border-color:#8e3900}.form-item input::placeholder{line-height:1;color:rgba(255,255,255,.8);opacity:1;transition:all .5s linear .5s}.form-item input:focus::placeholder{opacity:0;transition:all 0s linear 0s}.form-item input:-webkit-autofill{-webkit-text-fill-color:#fff;background-color:rgba(0,0,0,0) !important;transition:background-color 5000s ease-in-out 0s}.form-item input:-webkit-autofill:focus,.form-item input:-webkit-autofill:hover{-webkit-text-fill-color:#fff;background-color:rgba(0,0,0,0) !important;transition:background-color 5000s ease-in-out 0s}.form-item input:invalid{border-color:red;color:#fff;transition:all .5s linear 0s;color:#fff}.form-item input:invalid+label{border-color:red;color:#fff;transition:all .5s linear 0s}*{box-sizing:border-box}:root{--darkAqua: #004255;--darkBlue: #101526;--aqua: hsl(180, 100%, 50%);--orange: hsl(20, 100%, 70%)}html,body{padding:0;margin:0;text-align:center;background-color:var(--darkBlue);font-size:22px;font-family:"Comic Neue",sans-serif;font-weight:300}a{text-decoration:none;text-underline-offset:5px;color:#fff}a:hover,a:focus,a:hover h1{text-decoration:underline}.button,.home-title h1{display:inline-block;margin:10px 5px;line-height:1;cursor:pointer;border:none;position:relative;background-color:rgba(0,0,0,0);color:#fff;font-family:"Luckiest Guy",sans-serif;font-size:1rem;font-weight:300;padding:.5rem 1rem;filter:drop-shadow(0 0 0px black);transform:rotate(-1deg);transition:filter .25s ease-in-out}.button:hover,.button:focus{filter:drop-shadow(0 0 4px var(--aqua))}.button::before,.button::after,.home-title h1::before,.home-title h1::after{content:"";display:block;position:absolute;inset:0;z-index:-2;background-color:var(--aqua);--shiftY: 10px;--shiftX: 10px;--right: 0px;clip-path:polygon(var(--shiftX) 0, calc(100% - var(--shiftX)) 0, calc(100% - var(--right) / 2) var(--shiftY), calc(100% - var(--right) / 2) calc(100% - var(--shiftY)), calc(100% - var(--shiftX)) 100%, var(--shiftX) 100%, 0 calc(100% - var(--shiftY)), 0 var(--shiftY))}.button::before,.home-title h1::before{opacity:.8}.button::after,.home-title h1::after{background-color:var(--darkAqua);inset:1px;z-index:-1;--right: 1px}.home-title h1::after{--right: 0px;background-color:#000}.tag-filters .button.active::before,.tag-filters .button:hover::before{color:var(--darkAqua);background-color:#fff}.form-item input{font-family:"Luckiest Guy",sans-serif;font-size:1rem;box-shadow:none;padding:.5rem 1rem}.wrapper{display:flex;width:100%;flex-wrap:wrap;margin:0px auto 40px;justify-content:center;color:#fff}.description{margin:1rem;font-size:1.2rem;font-weight:300;transform:rotate(-1deg);padding-top:3rem}.comic-list{display:flex;width:84%;flex-wrap:wrap;justify-content:center;padding:30px 30px 30px 30px;max-width:1300px}.wrapper canvas,.wrapper img{width:100%;height:auto;display:block}.wrapper canvas.active{box-shadow:0 0 0 5px #fff}.wrapper .panel:nth-child(2n){transform:rotate(0.75deg)}.wrapper .panel:nth-child(3n){transform:rotate(1.5deg)}.wrapper .panel:nth-child(4n){transform:rotate(-0.75deg)}.wrapper .panel:nth-child(5n){transform:rotate(-1.5deg)}.wrapper .panel{margin:20px;width:calc(33.333% - 40px);height:auto;min-width:360px}.wrapper .panel figure{margin:0}.wrapper .panel figcaption{position:absolute;left:-9999px}.wrapper .panel.shot-environment,.wrapper .panel.shot-environment1,.wrapper .panel.shot-waist1,.wrapper .panel.shot-full1{width:45%}.wrapper .panel.shot-title{width:80%;margin:40px;transform:rotate(-1deg)}.wrapper .panel.shot-title.home-title{width:100%;margin:0;transform:rotate(0deg);position:relative;background-color:var(--darkAqua);border-bottom:4px solid var(--aqua);text-align:center;z-index:1001;background-image:url("../icons/hexagon.svg");background-position:-40px}.wrapper .panel.shot-title.home-title canvas{width:auto;max-height:100px;margin:0 auto;box-shadow:none;max-width:100%}.wrapper .panel.flowCanvas{width:80%;margin:0 auto;transform:rotate(0deg)}.home-title a.back,.home-title a.share{position:absolute;top:0;left:0;font-size:1rem;display:block;padding:10px}.home-title a.share{left:auto;right:0}.wrapper .home-title h1{position:absolute;max-width:350px;color:#fff;left:50%;top:calc(50% - 35px);text-align:center;padding:20px 1rem;font-family:"Luckiest Guy",sans-serif;font-weight:400;font-size:1.3rem;margin:0;line-height:1;z-index:1001;transform:translateX(-50%)}@media(min-width: 1001px){.wrapper .panel.shot-title.home-title{position:sticky;top:0}aside.side{width:16%;border-right:1px solid rgba(255,255,255,.2)}aside.side .form-item{margin:0;width:100%}aside.side hr{border-color:rgba(255,255,255,.2)}}.citations{max-width:1024px;text-align:left;margin:40px auto;color:#fff;padding:20px}.citations .citation{color:#fff;padding:10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.bar{max-width:1700px;margin:0 auto}.title{width:100%;font-family:"Comic Neue";font-weight:800;font-size:1.5rem;line-height:1;position:relative;padding:3rem 2rem;letter-spacing:3px}.title h1{margin:0}.title::before{border-color:rgba(0,0,0,0) #fff #fff rgba(0,0,0,0);margin-top:5px;border-width:25px;margin-right:-4px}.search-form{width:100%;max-width:none}@media(max-width: 768px){.wrapper .home-title figure{margin-top:100px}}@media(max-width: 1000px){.wrapper .panel,.title{width:100% !important}.title{margin:0;padding:2rem 1rem;font-size:16px}aside.side hr{display:none}.wrapper .panel{width:100% !important;min-width:auto}.wrapper .shot-title{margin:20px}.wrapper .shot-title h1{font-size:1rem}.wrapper .shot-title h2{font-size:1rem}.comic-list{padding:0;width:90%}}/*# sourceMappingURL=comic.css.map */
