body{
    background-image: radial-gradient(#f8f8f8 2px, transparent 2px);
    background-size: calc(10 * 2px) calc(10 * 2px);
}
input{display:none}
input + label{
    border: 4px solid #ccc;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

input:checked:checked + label{
    border: 5px solid #00c09e;
}

input:checked:checked + label::before {
    content: url('./images/check_2_fill.svg');
    display: block;
    position: absolute;
    margin: auto;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: end;
    background: 
#00c09e;
border-radius: 50px;
color: #fff;
    text-align: center;
    font-size: 16px;
    z-index: 10;
    transition: 0.3s linear;
    -o-transition: 0.3s linear;
    -ms-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -webkit-transition: 0.3s linear;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.bg {
    background-image: url(./images/bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
         
.btn-grad {
   background-image: linear-gradient(to right, #4B79A1 0%, #283E51  51%, #4B79A1  100%);
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
 }

.bg-stripes-fuchsia {
    background-color: #e879f91a;
    background-image: linear-gradient(135deg,#d946ef80 10%,#0000 0,#0000 50%,#d946ef80 0,#d946ef80 60%,#0000 0,#0000);
    background-size: 7.07px 7.07px;
}


.hue{
    color: oklch(.7 .14 var(--hue));
    background: oklch(.95 .025 var(--hue));
}
#setcolor input{
    cursor: pointer;
    border-radius: 8px;
    height: 2rem;
    appearance: none;
    background-image: linear-gradient(to right, oklch(.8 .1 0), oklch(.8 .1 30), oklch(.8 .1 60), oklch(.8 .1 90), oklch(.8 .1 120), oklch(.8 .1 150), oklch(.8 .1 180), oklch(.8 .1 210), oklch(.8 .1 240), oklch(.8 .1 270), oklch(.8 .1 300), oklch(.8 .1 330), oklch(.8 .1 360));
}
#setcolor input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1rem;
  width: .5rem;
  border-radius: .125rem;
  background: #ffffffb3;
  box-shadow: none
}

#setcolor input[type=range]::-webkit-slider-thumb:hover {
  background: #fffc
}

#setcolor input[type=range]::-webkit-slider-thumb:active {
  background: #fff9
}

#setcolor input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 1rem;
  width: .5rem;
  border-radius: .125rem;
  border-width: 0;
  background: #ffffffb3;
  box-shadow: none
}

#setcolor input[type=range]::-moz-range-thumb:hover {
  background: #fffc
}

#setcolor input[type=range]::-moz-range-thumb:active {
  background: #fff9
}

#setcolor input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: 1rem;
  width: .5rem;
  border-radius: .125rem;
  background: #ffffffb3;
  box-shadow: none
}

#setcolor input[type=range]::-ms-thumb:hover {
  background: #fffc
}

#setcolor input[type=range]::-ms-thumb:active {
  background: #fff9
}