[data-theme="blue_dark"]{
	 --background-color: #18181b;
	 --text-color: #a1a1aa;
	 --dia-background-background-color: rgba(255, 255, 255, 0.015);
	 --dia-background-border-color: rgba(255, 255, 255, 0.1);
	 --dia-background-box-shadow-1: rgba(0, 0, 0, 0.05);
	 --dia-background-box-shadow-1-y: 3px;
	 --dia-background-box-shadow-1-blur: 6px;
	 --dia-background-box-shadow-2: rgba(0, 0, 0, 0.1);
	 --dia-background-box-shadow-2-y: 8px;
	 --dia-background-box-shadow-2-blur: 15px;
	 --dia-background-label-color: #fff;
	 --dia-background-icon-color: #d4d4d8;
	 --dia-background-icon-background-color: rgba(255, 255, 255, 0.08);
	 --dia-background-icon-border-color: rgba(255, 255, 255, 0.12);
	 --dia-background-shine-opacity: 0.1;
	 --dia-background-shine-gradient: conic-gradient(from 205deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10b981 25deg, rgba(52, 211, 153, 0.18) 295deg, rgba(16, 185, 129, 0) 360deg);
	/* --dia-background-line-color: #2a2b2c; */
     --dia-background-line-color: #181d02;
	 --dia-background-tile-color: rgba(16, 185, 129, 0.05);
	 --dia-background-hover-border-color: rgba(255, 255, 255, 0.2);
	 --dia-background-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
	 --dia-background-hover-box-shadow-1-y: 5px;
	 --dia-background-hover-box-shadow-1-blur: 10px;
	 --dia-background-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
	 --dia-background-hover-box-shadow-2-y: 15px;
	 --dia-background-hover-box-shadow-2-blur: 25px;
	 --dia-background-hover-icon-color: #34d399;
	 --dia-background-hover-icon-background-color: rgba(52, 211, 153, 0.1);
	 --dia-background-hover-icon-border-color: rgba(52, 211, 153, 0.2);
	 --blur-opacity: 0.01;
}
[data-theme="blue_light"] {
	 --background-color: #fafafa;
	 --text-color: #52525b;
	 --dia-background-background-color: transparent;
	 --dia-background-border-color: rgba(24, 24, 27, 0.08);
	 --dia-background-box-shadow-1: rgba(24, 24, 27, 0.02);
	 --dia-background-box-shadow-1-y: 3px;
	 --dia-background-box-shadow-1-blur: 6px;
	 --dia-background-box-shadow-2: rgba(24, 24, 27, 0.04);
	 --dia-background-box-shadow-2-y: 2px;
	 --dia-background-box-shadow-2-blur: 7px;
	 --dia-background-label-color: #18181b;
	 --dia-background-icon-color: #18181b;
	 --dia-background-icon-background-color: rgba(24, 24, 27, 0.04);
	 --dia-background-icon-border-color: rgba(24, 24, 27, 0.1);
	 --dia-background-shine-opacity: 0.3;
	 --dia-background-shine-gradient: conic-gradient(from 225deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10b981 25deg, #edfaf6 285deg, #fff 345deg, rgba(16, 185, 129, 0) 360deg);
	 --dia-background-line-color: #e9e9e7;
	 --dia-background-tile-color: rgba(16, 185, 129, 0.08);
	 --dia-background-hover-border-color: rgba(24, 24, 27, 0.15);
	 --dia-background-hover-box-shadow-1: rgba(24, 24, 27, 0.05);
	 --dia-background-hover-box-shadow-1-y: 3px;
	 --dia-background-hover-box-shadow-1-blur: 6px;
	 --dia-background-hover-box-shadow-2: rgba(24, 24, 27, 0.1);
	 --dia-background-hover-box-shadow-2-y: 8px;
	 --dia-background-hover-box-shadow-2-blur: 15px;
	 --dia-background-hover-icon-color: #18181b;
	 --dia-background-hover-icon-background-color: rgba(24, 24, 27, 0.04);
	 --dia-background-hover-icon-border-color: rgba(24, 24, 27, 0.34);
	 --blur-opacity: 0.1;
}
 body.toggle .dia-grid * {
	 transition-duration: 0s !important;
}
 .dia-grid {
    width: 100%;
	 display: grid;
	 grid-template-columns: repeat(2, 640px);
	 grid-gap: 32px;
	 position: relative;
	 z-index: 1;
}
 .dia-background {
	
	 cursor: pointer;
	 position: relative;
	 transition: box-shadow 0.25s;
}
.dia-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.1), transparent);
    transition: left 0.5s;
}

.dia-background:hover::before {
    left: 100%;
}
 
 .dia-background .shine {
	 border-radius: inherit;
	 position: absolute;
	 inset: 0;
	 z-index: 1;
	 overflow: hidden;
	 opacity: 0;
	 transition: opacity 0.5s;
}
 .dia-background .shine:before {
	 content: "";
	 width: 150%;
	 padding-bottom: 150%;
	 border-radius: 50%;
	 position: absolute;
	 left: 50%;
	 bottom: 55%;
	 filter: blur(35px);
	 opacity: var(--dia-background-shine-opacity);
	 transform: translateX(-50%);
	 background-image: var(--dia-background-shine-gradient);
}
 .dia-background .background {
	 border-radius: inherit;
	 position: absolute;
	 inset: 0;
	 overflow: hidden;
	 -webkit-mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
	 mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
}
 .dia-background .background .tiles {
	 opacity: 0;
	 transition: opacity 0.25s;
}
 .dia-background .background .tiles .tile {
	 position: absolute;
	 background-color: var(--dia-background-tile-color);
	 animation-duration: 8s;
	 animation-iteration-count: infinite;
	 opacity: 0;
}

 @keyframes tile {
	 0%, 12.5%, 100% {
		 opacity: 1;
	}
	 25%, 82.5% {
		 opacity: 0;
	}
}
 .dia-background .background .line {
	 position: absolute;
	 inset: 0;
	 opacity: 0;
	 transition: opacity 0.35s;
}
 .dia-background .background .line:before, .dia-background .background .line:after {
	 content: "";
	 position: absolute;
	 background-color: var(--dia-background-line-color);
	 transition: transform 0.35s;
}
 .dia-background .background .line:before {
	 left: 0;
	 right: 0;
	 height: 1px;
	 transform-origin: 0 50%;
	 transform: scaleX(0);
}
 .dia-background .background .line:after {
	 top: 0;
	 bottom: 0;
	 width: 1px;
	 transform-origin: 50% 0;
	 transform: scaleY(0);
}
 

 .dia-background .shine {
	 opacity: 1;
	 transition-duration: 0.5s;
	 transition-delay: 0s;
}
 .dia-background .background .tiles {
	 opacity: 1;
	 transition-delay: 0.25s;
}
 .dia-background .background .tiles .tile {
	 animation-name: tile;
}
 .dia-background .background .line {
	 opacity: 1;
	 transition-duration: 0.15s;
}
 .dia-background .background .line:before {
	 transform: scaleX(1);
}
 .dia-background .background .line:after {
	 transform: scaleY(1);
}