details summary {
            display: block;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            border-bottom: 1px dashed;
            outline-style: none;
            cursor: pointer;
            text-align: center;
            list-style-type: none;
        }
        details summary::-webkit-details-marker {
            display: none;
        }
        .for-ul {
      list-style-type: none;
      padding-left: 0px;
      max-height: 300px;
      overflow-y: scroll
    }
    li {
      padding-left:15px;
      padding-right:15px;
      line-height: 30px;
    }
@media (min-width: 741px) {
.caption-link {position: relative;}
.tit, .descr {border-radius: 20px 20px 0 0;}
.for-ul {border-radius: 20px 0 0 20px;margin: 0;}
.for-ul::-webkit-scrollbar {width: 10px;}
.for-ul::-webkit-scrollbar-track {-webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;background-color: #F0F0F0;}
.for-ul::-webkit-scrollbar-thumb {height:45px;background-color: #6B6B6B;}
}
@media screen and (max-width: 740px), screen and (max-height:470px) {
li {
    padding-left:20px;
    padding-right:20px;
}
section {position: relative !important;}
section {width: 100% !important;}
.tit {width: 100% !important;}
.descr {width: 100% !important;}
}
section {
position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
 margin: 0 auto;
 width: 300px;
}
.palettes2 {
position: absolute;
    top: 20px;
    right: 4px;
    transform: rotate(45deg);
}
.tit {
 height: 32px;
 width: 300px;
 box-sizing: border-box;
 background: linear-gradient(to right, #aa96da 20%, #ffb6b9 20%, #ffb6b9 40%, #fae3d9 40%, #fae3d9 60%, #bbded6 60%, #bbded6 80%, #61c0bf 80%);
}
.descr {
  height: 32px;
  width: 300px;
  text-align: center;
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
  background-color: #303030;
  display: flex;
  align-items: center;
  justify-content: center;
 }
.caption-link {
display: block;
overflow: hidden;
}
.tit {
transition: all .4s ease;
}
.descr {
position: absolute;
top: 0;
left: 0;
transform: translateY(100%);
transition: all .4s ease;
}
body a:hover {border-bottom:1px dashed;}
body span:hover {border-bottom:1px dashed;cursor:pointer;}
.colorpicker span:hover {border-bottom:1px solid;cursor:pointer;}
.select {
    display: block;
    color: inherit;
    text-decoration: none;
}
.select:hover {
    border-bottom: none;
}
.for-ul li {cursor: text;}
#hhh {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (min-width: 741px) {
.caption-link:hover .descr {
transform: translateY(0);
transition: all .4s ease;
}
.caption-link:hover .tit {
transform: translateY(100%);
transition: all .4s ease;
}
.home {
    position: absolute;
    top: 19px;
    left: 31px;
}
}
@media screen and (max-width: 740px), screen and (max-height:470px) {
.home {
    position: absolute;
    top: 28px;
    left: 20px;
}
}
.canva, .donate {
    cursor:pointer;
    width: 28px;
    position: absolute;
    top: 19px;
    right: 31px;
    opacity: 0.8;
}
.main-adapt {display:none;}
@media (min-width: 1055px) {.main-adapt {display:block;position:absolute;right:0;width: 150px;height: 300px;top: 50%;margin: -150px 0 0 -150px;}}
@media (min-width: 1219px) {.main-adapt {width: 230px;}}
@media (min-width: 1299px) {.main-adapt {width: 260px;}}
@media (min-width: 1310px) {.main-adapt {width: 260px;right:15px;}}
@media (min-width: 1439px) {.main-adapt {width: 300px;right:15px;}}
@media screen and (max-width: 740px), screen and (max-height:470px) {
    .descr {margin-top: -39px;text-decoration: underline;text-decoration: underline dashed;}
    .tit {margin-top: 35px;}
    .tit, .descr {height: 40px;}
    .main-adapt {display:block;width: 100%;max-height: 300px;margin-top: -30px;}
    .canva {width: 26px !important;top: 28px !important;right: 20px !important;}
    .donate {width: 41px !important;top: 20px !important;right: 25px !important;}
}
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus:-moz-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:focus:-ms-input-placeholder {color:transparent;}
@media screen and (min-width:740px){.menu {padding-right:100px;padding-left:100px;}}
#main-colorpicker .mainColor .colorInput_cmyk:active {width: 8.3em;transition: all .2s ease;}
#main-colorpicker .mainColor .colorInput_cmyk:hover {width: 8.3em;transition: all .2s ease;}
#main-colorpicker .mainColor .colorInput_cmyk:focus {width: 8.3em;transition: all .2s ease;}
.bott:hover {font-weight: bold;border-bottom:none !important;}
body.inverted #canva {
    filter: invert(1);
    opacity: 0.8;
}

.menu, #colors, #colorize h1, .note h2, .descr {
    font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
}
#colorize h1, #colors {font-size: 13px;}
.menu {transform: translateY(-2px);}