@import url(https://fonts.frankindev.com/css2?family=Crimson+Text:ital@0;1&family=Noto+Serif+SC:wght@300&display=swap);body{font-family:'Crimson Text','Noto Serif SC',serif;background-image:url(/style/texture.png);transition:background-color 3s ease;-webkit-transition:background-color 3s ease}.container{width:100%!important}#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#222;z-index:1000}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#9370db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#ba55d3;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f0f;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}.card{background-color:transparent}.main{padding-top:2vh;padding-bottom:2vh}#colors{height:96vh;overflow-y:scroll;-webkit-overflow-scrolling:touch}::-webkit-scrollbar{width:2px;background-color:#eee}::-webkit-scrollbar-thumb{background-color:#1c1c1c}@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :portrait){#colors .row{margin-left:2rem}}#colors .col-2{padding:0 1rem 1rem 1rem;margin-bottom:1rem;min-width:110.5px}#colors .col-2 .col-12{padding:0}#colors .col-12:nth-child(2){margin-top:.5rem}#colors .card{border-width:0;border-radius:0;border-top-width:5px}#colors .card-body{padding:.5rem .2rem 0 .2rem;margin-bottom:1rem;cursor:pointer}#colors .card-title{position:absolute;writing-mode:vertical-rl;margin:0 .2rem 0 0;bottom:.5rem;right:0;text-align:right}#colors .hex-value{writing-mode:vertical-rl;margin:0 .4rem 0 0;float:left}#colors .rgb-line{margin:0}#colors .bg-r{background-color:#dc3545}#colors .bg-g{background-color:#28a745}#colors .bg-b{background-color:#17a2b8}#colors .vertical{width:1px;height:10rem;margin:0 1px;float:left}#colors .vertical .progress-bar{width:100%}#colors .en-name{writing-mode:vertical-rl;float:right;margin:0}#details .card{border:0;text-align:center;min-width:160px}#details .card-body{padding:0 2rem 1rem 3rem}#details .card-text span{display:block}#details .card-text span.cmyk-v{border-top:.1rem solid #555;text-align:left}#details .bg-r{background-color:#dc3545}#details .bg-g{background-color:#28a745}#details .bg-b{background-color:#17a2b8}#details .vertical{width:.5rem;height:20rem;margin:0 .55rem;float:left;border-radius:0}@media screen and (max-height:800px){#details .vertical{width:.5rem;height:11rem}}@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :portrait){#details{margin-left:-2rem}}#details .vertical .progress-bar{width:100%}#details .rgb-line .progress-bar{writing-mode:vertical-lr;font-size:smaller}#infors .card{border:0;margin-top:3rem;text-align:center}#infors h4.card-title{margin:0;text-align:center;font-size:4rem;margin-bottom:1rem;padding:0 3.5rem;font-weight:700}#infors .card-text{font-size:1.25rem;text-align:center}@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :portrait){#infors{margin-left:1.2rem}#infors h4.card-title{font-size:3rem;padding:1rem 1rem}}@media (max-width:768px){#details{display:none}#infors h4.card-title{padding:0}}@media (max-width:540px){#colors{flex:1;max-width:100%}#infors{display:none}footer{display:none}}#infors .card-footer .card-text{font-size:1.1rem;margin:0;cursor:pointer}.change-color{background-color:rgba(8,8,8,.2);color:#eee}footer{position:fixed;bottom:2vh;left:60%}footer p{margin:0;font-size:.7rem}#shareModal{text-align:center}@media only screen and (max-device-width:414px) and (orientation:portrait){#details,footer{display:none}#colors .col-2{margin-left:3.5rem}#infors .card-footer,#infors .card-text{display:none}#infors h4.card-title{padding:0 1rem 0 1rem}}@media only screen and (max-device-width:736px) and (orientation:landscape){#details,footer{display:none}#colors .col-2{margin-left:1rem}#infors .card-footer,#infors .card-text{display:none}#infors h4.card-title{margin-bottom:0;margin-top:-1rem;font-size:3rem}}ul.c-sns__list{padding:0;display:block;margin-top:1rem;margin-bottom:2rem}.c-sns__list li{display:inline-block;padding:0 .5rem}.share-toolbox img{max-width:350px}