@import url(https://fonts.googleapis.com/css2?family=Bangers&family=Indie+Flower&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;background-image:radial-gradient(circle,#f5f5f5 20%,transparent 0),radial-gradient(circle,#f5f5f5 20%,transparent 0);background-position:0 0,0 0;background-size:10px 10px;margin:0}body,code{font-family:Bangers,cursive}.comic-header,.header{align-items:center;background-color:#dedede;box-shadow:0 6px 6px -6px #dedede;display:flex;justify-content:center;padding:5px 0;position:fixed;width:100%;z-index:199}.comic-header input,.header input{background:transparent;border:1px solid #3a3939;color:#fff;outline:none;padding:10px;position:relative;width:250px}.col-3{display:flex;flex-direction:row;float:left;margin:40px 3%;position:absolute;right:-20px;width:250px}.col-3 button{background-color:#3a3939;border:1px solid #3a3939;color:#fff;cursor:pointer;outline:none}.header input~.focus-bg:after,.header input~.focus-bg:before{background-color:#3a3939;content:"";height:0;left:50%;position:absolute;top:50%;transition:.3s;width:0;z-index:-1}.header input:focus~.focus-bg:before{height:100%;left:0;top:0;transition:.3s;width:242px}.header input~.focus-bg:after{bottom:50%;left:auto;right:50%;top:auto}.header input:focus~.focus-bg:after{bottom:0;height:100%;right:0;transition:.3s;width:250px}.comic-header input~.focus-bg:after,.comic-header input~.focus-bg:before{background-color:#3a3939;content:"";height:0;left:50%;position:absolute;top:50%;transition:.3s;width:0;z-index:-1}.comic-header input:focus~.focus-bg:before{height:100%;left:0;top:0;transition:.3s;width:242px}.comic-header input~.focus-bg:after{bottom:50%;left:auto;right:50%;top:auto}.comic-header input:focus~.focus-bg:after{bottom:0;height:100%;right:0;transition:.3s;width:250px}.content{align-items:center;display:flex;flex-flow:row wrap;height:auto;justify-content:center;overflow:auto;padding-top:100px}.character{background-color:#fff;border:2px solid #3a3939;box-shadow:0 6px 6px -6px #000;cursor:pointer;display:inline-block;height:300px;margin:1vmin;overflow:hidden;position:relative;width:300px}.character-img{flex-shrink:0;max-height:100%;min-height:100%;min-width:100%;-webkit-transform-origin:100 100;transform-origin:100 100;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.character-img:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.character-img img{border-style:none;vertical-align:middle}.character-name{background-color:#fff;border:2px solid #3a3939;bottom:-2px;font-size:18px;font-weight:700;margin:0;padding:0 9px;position:absolute;right:-6px;-webkit-transform:skew(-15deg);transform:skew(-15deg)}.detailContainer{align-items:center;background-color:#a6a6a6;display:flex;flex-direction:column;justify-content:center;padding-top:100px;width:100%}.characterDetail-img,.detailContainer{border:2px solid #3a3939;box-shadow:0 6px 6px -6px #000}.characterDetail-img{max-width:300px}.characterDetail-name{color:#fff;font-size:54px;text-align:center}.detail-content{align-items:flex-start;border:2px solid #3a3939;box-shadow:0 6px 6px -6px #000;font-size:20px;justify-content:flex-start;letter-spacing:2px;margin:20px 50px;max-width:1200px;padding:20px;width:100%}.column,.detail-content{display:flex;flex-direction:column}.column{align-items:center;justify-content:center}.comics,.detail-desc{display:flex;flex-direction:column}.comics{align-items:center;width:100%}.comic{border-bottom:1px solid #d3d3d3;display:flex;flex-direction:row;height:400px;margin:1vmin;padding-bottom:20px;position:relative;width:100%}.comic-content{flex:1 1;padding-left:10px}.comic-title{flex-direction:column;padding-bottom:19px}.comic-title,.comic-title-row{display:flex;justify-content:flex-start}.comic-title-row{flex-direction:row;padding:9px 0}.comic-title-row span{color:#626262;font-size:18px;letter-spacing:2px}.comic-img{border:2px solid #3a3939;box-shadow:0 6px 6px -6px #000;flex-shrink:0;max-height:100%;min-height:100%;-webkit-transform-origin:100 100;transform-origin:100 100;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.notfound{align-items:center;display:flex;flex-direction:column;justify-content:center}.notfound span{font-size:31px;margin-top:20px}@media only screen and (min-width:681px) and (max-width:1280px){.detail-content{align-items:flex-start!important;border:2px solid #3a3939!important;box-shadow:0 6px 6px -6px #000!important;display:flex!important;flex-direction:column!important;font-size:20px!important;justify-content:flex-start!important;letter-spacing:2px!important;margin:20px 50px!important;max-width:600px!important;width:100%!important}}@media only screen and (max-width:680px){.comic-header,.header{display:flex;flex-direction:row;justify-content:space-between;padding:5px}.header input{width:80px!important}.comic-header input{width:130px!important}.col-3{display:flex!important;flex-direction:row!important;margin:0 135px!important;position:absolute!important;right:-120px!important;width:155px!important}.header input~.focus-bg:after,.header input~.focus-bg:before{background-color:#3a3939;content:"";height:0;left:50%;position:absolute;top:50%;transition:.3s;width:0;z-index:-1}.header input:focus~.focus-bg:before{height:100%;left:0;top:0;transition:.3s;width:120px!important}.header input~.focus-bg:after{bottom:50%;left:auto;right:50%;top:auto}.header input:focus~.focus-bg:after{bottom:0;height:100%;right:0;transition:.3s;width:80px!important}.comic-header input:focus~.focus-bg:before{height:100%;left:0;top:0;transition:.3s;width:120px!important}.comic-header input~.focus-bg:after{bottom:50%;left:auto;right:50%;top:auto}.comic-header input:focus~.focus-bg:after{bottom:0;height:100%;right:0;transition:.3s;width:80px!important}.detail-content{align-items:flex-start!important;border:2px solid #3a3939!important;box-shadow:0 6px 6px -6px #000!important;display:flex!important;flex-direction:column!important;font-size:20px!important;justify-content:flex-start!important;letter-spacing:2px!important;margin:20px 50px!important;max-width:300px!important;width:100%!important}.comics{justify-content:center!important}.comic,.comics{align-items:center!important;display:flex!important;flex-direction:column!important;width:100%!important}.comic{border-bottom:1px solid #d3d3d3;height:600px!important;margin:1vmin;padding-bottom:20px!important;position:relative!important}.comic-content{align-items:center!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding-left:10px}.comic-img{border:2px solid #3a3939!important;box-shadow:0 6px 6px -6px #000!important;flex-shrink:0!important;max-height:30%!important;min-height:30%!important;-webkit-transform-origin:100 100!important;transform-origin:100 100!important;transition:-webkit-transform .5s ease!important;transition:transform .5s ease!important;transition:transform .5s ease,-webkit-transform .5s ease!important}.comic-title{justify-content:flex-start}.comic-title,.detail-desc{display:flex;flex-direction:column}.detail-desc{font-size:16px!important}.desc{color:#3a3939;font-size:12px!important;line-height:17px;margin-top:9px}}.lazy-load-image-background.blur{-webkit-filter:blur(15px);filter:blur(15px)}.lazy-load-image-background.blur.lazy-load-image-loaded{-webkit-filter:blur(0);filter:blur(0);transition:-webkit-filter .3s;transition:filter .3s;transition:filter .3s,-webkit-filter .3s}.lazy-load-image-background.blur>img{opacity:0}.lazy-load-image-background.blur.lazy-load-image-loaded>img{opacity:1;transition:opacity .3s}
/*# sourceMappingURL=main.911b8e9d.css.map*/