.bg-cc-yellow {
    background-color: #f8e035;
}

.bg-cc-yellow-100 {
    --tw-bg-opacity: 0.5;
    background-color: rgb(245 234 160/var(--tw-bg-opacity))
}

.cc-yellow {
    color: #F8E035;
}

.bg-khaki {
    background-color: #F0E68C;
}

.border-yellow {
    --tw-border-opacity: 1;
    border-color: rgb(248 224 53/var(--tw-border-opacity))
}

.bg-cc-black {
    background-color: #303030;
}

.cc-black {
    color: #303030;
}

.from-yellow {
    --tw-gradient-from: #F8E035;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0))
}

.from-yellow-100 {
    --tw-gradient-from: #fce85c;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 105, 255, 0))
}

.to-pink-100 {
    --tw-gradient-to: #f079fa;
}

.to-red-100 {
    --tw-gradient-to: #e27575;
}

.to-cyan-100 {
    --tw-gradient-to: #75e2de;
}

.to-green-100 {
    --tw-gradient-to: #3de295;
}

.pattern-blue-500 {
    --pattern-color: #3b82f6;
    --pattern-color-55: rgba(59,130,246,0.3333333333333333);
    --pattern-color-77: rgba(59,130,246,0.4666666666666667);
}

.pattern-bg-white {
    --pattern-bg-color: #fff;
}

.pattern-wavy {
    background-color: var(--pattern-bg-color,transparent);
    background-image: repeating-radial-gradient(circle at 0 0,transparent 0,var(--pattern-bg-color,transparent) var(--pattern-size,40px)),repeating-linear-gradient(var(--pattern-color-55),var(--pattern-color));
}

.theme-bg {
    background-color: #000000;
    background: radial-gradient(circle, transparent 20%, #000000 20%, #000000 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #000000 20%, #000000 80%, transparent 80%, transparent) 12.5px 12.5px, linear-gradient(#F8E035 1px, transparent 1px) 0 -0.5px, linear-gradient(90deg, #F8E035 1px, #000000 1px) -0.5px 0;
    background-size: 25px 25px, 25px 25px, 12.5px 12.5px, 12.5px 12.5px;
}


html {
    font-family: 'Ubuntu', sans-serif;
}

.rombus-bg {
    background-color: #000000;
    opacity: 0.1;
    background-image:  linear-gradient(135deg, #F8E035 25%, transparent 25%), linear-gradient(225deg, #F8E035 25%, transparent 25%), linear-gradient(45deg, #F8E035 25%, transparent 25%), linear-gradient(315deg, #F8E035 25%, #000000 25%);
    background-position:  40px 0, 40px 0, 0 0, 0 0;
    background-size: 40px 40px;
    background-repeat: repeat;
}

.zigzag-bg {
    background-color: #ffffff;
    opacity: 1;
    background-image:  linear-gradient(135deg, #fffad7 25%, transparent 25%), linear-gradient(225deg, #fffad7 25%, transparent 25%), linear-gradient(45deg, #fffad7 25%, transparent 25%), linear-gradient(315deg, #fffad7 25%, #ffffff 25%);
    background-position:  40px 0, 40px 0, 0 0, 0 0;
    background-size: 80px 80px;
    background-repeat: repeat;
}

.bg-cc-gray {
background-color: #fafafa;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

input[type=range] {
    height: 34px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000031;
    border: 1px solid #00001E;
    height: 26px;
    width: 26px;
    border-radius: 15px;
    background: #ffffff;
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000031;
    border: 1px solid #00001E;
    height: 26px;
    width: 26px;
    border-radius: 15px;
    background: #FFFFFF;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
}

input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 11px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000;
    background: #f8e035;
    border-radius: 1px;
    border: 0px solid #010101;
}

.stroke-cc-black {
    stroke: #303030;
}

.gap-1 {
    gap: 0.5rem
}

.hover\:cc-yellow:hover {
    --tw-text-opacity: 1;
    color: rgb(248 224 53/var(--tw-text-opacity))
}

.hover\:bg-cc-yellow:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(248 224 53/var(--tw-bg-opacity))
}

.hover\:text-green-light:hover {
    color: #51d88a;
}

.hover\:bg-green-light:hover {
    color: #51d88a;
}

.hover\:border-green-light:hover {
    border-color: #51d88a;
}

.bg-green-light {
    background-color: #51d88a;
}

.height-fit-content {
    height: fit-content;
}

.scale-10 {
    -webkit-transform:scale(0.1);
    -moz-transform:scale(0.1);
    -ms-transform:scale(0.1);
    transform:scale(0.1);
}

.scale-50 {
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -ms-transform:scale(0.5);
    transform:scale(0.5);
}

.scale-80 {
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
}

.scale-70 {
    -webkit-transform:scale(0.7);
    -moz-transform:scale(0.7);
    -ms-transform:scale(0.7);
    transform:scale(0.7);
}

.bg-purple-darker {
    background-color: #382b5f;
}

.bg-purple-dark {
    background-color: #794acf;
}

.bg-orange {
    background-color: #f6993f;
}

.bg-orange-light {
    background-color: #faad63;
}