@font-face {
	font-family: "San-Francisco-Display-Regular";
	src: url("./fonts/SanFranciscoDisplayRegular.woff") format("truetype");
	font-style: normal;
	font-weight: normal;
	font-display: swap;
}

:root {
	--dark-body: #4d4c5a;
	--dark-main: #0f1427;
	--dark-bg-social: #0f1427;
	/* --dark-second: #79788c; */
	--dark-second: rgba(255, 255, 255, 0.6);
	--dark-hover: #323048;
	--dark-text: #f8fbff;
	--dark-text-2: #f3f8fe;
	--dark-bg-div: #21223f69;
	--dark-day-off: #44535e;
	--dark-curr-day: #d1d0cc;
	--dark-curr-day-text-color: #0e1821;
	--dark-desc: #5b7db1;
	--dark-focus: rgba(255, 255, 255, 0.096);
	--dark-focus-in-template: #5b7db1;
	--dark-selected: rgb(231 212 212 / 46%);

	--dark-2-body: #4d4c5a;
	--dark-2-main: #000000;
	--dark-2-bg-social: #000000;
	/* --dark-2-second: #798f8c; */
	--dark-2-second: rgba(255, 255, 255, 0.6);
	--dark-2-hover: #323048;
	--dark-2-text: #d9ebe9;
	--dark-2-text-2: #f3f8fe;
	--dark-2-bg-div: #0e1821;
	--dark-2-day-off: #44535e;
	--dark-2-curr-day: #d9ebe9;
	--dark-2-curr-day-text-color: #0e1821;
	--dark-2-desc: #527e6b;
	--dark-2-focus: rgba(255, 255, 255, 0.096);
	/* --dark-2-focus-in-template: #395b64; */
	--dark-2-focus-in-template: #527e6b;
	--dark-2-selected: rgb(231 212 212 / 46%);

	--light-body: #f3f8fe;
	--light-main: #fdfdfd;
	--light-bg-social: #fdfdfd;
	--light-second: rgba(0, 0, 0, 0.7);
	--light-hover: #374258;
	--light-text: #151426;
	--light-text-2: #f3f8fe;
	--light-bg-div: #f3f7fa;
	--light-day-off: #85f4ff;
	--light-curr-day: #42c2ff;
	--light-curr-day-text-color: #fff;
	--light-desc: #4d96ff;
	--light-focus: #42c2ff;
	--light-focus-in-template: #4d96ff;
	--light-selected: #38c6c7;

	--light-2-body: #f3f8fe;
	--light-2-main: #f2f5c8;
	--light-2-bg-social: #f2f5c8;
	--light-2-second: rgba(0, 0, 0, 0.7);
	--light-2-hover: #4d4c5ab2;
	--light-2-text: #151426;
	--light-2-bg-div: #e8e8a6;
	--light-2-day-off: #c1deae;
	--light-2-curr-day: #219f94;
	--light-2-curr-day-text-color: #fff;
	--light-2-desc: #65c18c;
	--light-2-focus: #c1deae;
	--light-2-focus-in-template: #b6ffce;
	--light-2-selected: #54bab9;

	--blue-body: #f3f8fe;
	--blue-main: #0093ab;
	--blue-bg-social: #fff;
	--blue-second: #fff;
	--blue-hover: #d0d6e2;
	--blue-text: #fff;
	--blue-text-2: #f3f8fe;
	--blue-bg-div: #00afc1;
	--blue-day-off: #9fb4ff;
	--blue-curr-day: #3256ce;
	--blue-curr-day-text-color: #fff;
	--blue-desc: #035397;
	--blue-focus: #4d96ff;
	--blue-focus-in-template: #035397;
	--blue-selected: #4d96ff;

	--font-family: "San-Francisco-Display-Regular";
}

.theme-dark {
	--bg-body: var(--dark-body);
	--bg-div: var(--dark-bg-div);
	--bg-main: var(--dark-main);
	--bg-social: var(--dark-bg-social);
	--bg-second: var(--dark-second);
	--color-hover: var(--dark-hover);
	--color-txt: var(--dark-text);
	--color-txt-2: var(--dark-text);
	--day-off: var(--dark-day-off);
	--curr-day: var(--dark-curr-day);
	--curr-day-text-color: var(--dark-curr-day-text-color);
	--desc: var(--dark-desc);
	--focus: var(--dark-focus);
	--selected: var(--dark-selected);
	--focus-in-template: var(--dark-focus-in-template);
	--bgc-social: var(--dark-text);
}
.theme-dark-2 {
	--bg-body: var(--dark-2-body);
	--bg-div: var(--dark-2-bg-div);
	--bg-main: var(--dark-2-main);
	--bg-social: var(--dark-2-bg-social);
	--bg-second: var(--dark-2-second);
	--color-hover: var(--dark-2-hover);
	--color-txt: var(--dark-2-text);
	--color-txt-2: var(--dark-2-text);
	--day-off: var(--dark-2-day-off);
	--curr-day: var(--dark-2-curr-day);
	--curr-day-text-color: var(--dark-2-curr-day-text-color);
	--desc: var(--dark-2-desc);
	--focus: var(--dark-2-focus);
	--selected: var(--dark-2-selected);
	--focus-in-template: var(--dark-2-focus-in-template);
	--bgc-social: var(--dark-2-text);
}

.theme-light {
	--bg-body: var(--light-body);
	--bg-div: var(--light-bg-div);
	--bg-main: var(--light-main);
	--bg-social: var(--light-bg-social);
	--bg-second: var(--light-second);
	--color-hover: var(--light-hover);
	--color-txt: var(--light-text);
	--color-txt-2: var(--light-text-2);
	--day-off: var(--light-day-off);
	--curr-day: var(--light-curr-day);
	--curr-day-text-color: var(--light-curr-day-text-color);
	--desc: var(--light-desc);
	--focus: var(--light-focus);
	--selected: var(--light-selected);
	--focus-in-template: var(--light-focus-in-template);
	--bgc-social: var(--light-main);
}

.theme-light-2 {
	--bg-body: var(--light-2-body);
	--bg-div: var(--light-2-bg-div);
	--bg-main: var(--light-2-main);
	--bg-social: var(--light-2-bg-social);
	--bg-second: var(--light-2-second);
	--color-hover: var(--light-2-hover);
	--color-txt: var(--light-2-text);
	--color-txt-2: var(--light-2-text);
	--day-off: var(--light-2-day-off);
	--curr-day: var(--light-2-curr-day);
	--curr-day-text-color: var(--light-2-curr-day-text-color);
	--desc: var(--light-2-desc);
	--focus: var(--light-2-focus);
	--selected: var(--light-2-selected);
	--focus-in-template: var(--light-2-focus-in-template);
	--bgc-social: var(--light-2-main);
}

.theme-blue {
	--bg-body: var(--blue-body);
	--bg-div: var(--blue-bg-div);
	--bg-main: var(--blue-main);
	--bg-social: var(--blue-bg-social);
	--bg-second: var(--blue-second);
	--color-hover: var(--blue-hover);
	--color-txt: var(--blue-text);
	--color-txt-2: var(--blue-text);
	--day-off: var(--blue-day-off);
	--curr-day: var(--blue-curr-day);
	--curr-day-text-color: var(--blue-curr-day-text-color);
	--desc: var(--blue-desc);
	--focus: var(--blue-focus);
	--selected: var(--blue-selected);
	--focus-in-template: var(--blue-focus-in-template);
	--bgc-social: var(--blue-text);
}

.burger__menu-color {
	display: flex;
}
.focus {
	/* box-shadow: inset 0 0 8px var(--color-txt); */
	/* border-top: 2px solid var(--color-txt);
	border-bottom: 2px solid var(--color-txt); */
	background-color: var(--focus);
}
.color {
	width: 10%;
	height: 25px;
}
#theme-dark .color-1 {
	background-color: var(--dark-body);
}
#theme-dark .color-2 {
	background-color: var(--dark-main);
}
#theme-dark .color-3 {
	background-color: var(--dark-second);
}
#theme-dark .color-4 {
	background-color: var(--dark-hover);
}
#theme-dark .color-5 {
	background-color: var(--dark-text);
}
#theme-dark .color-6 {
	background-color: var(--dark-bg-div);
}
#theme-dark .color-7 {
	background-color: var(--dark-day-off);
}
#theme-dark .color-8 {
	background-color: var(--dark-curr-day);
}
#theme-dark .color-9 {
	background-color: var(--dark-curr-day-text-color);
}
#theme-dark .color-10 {
	background-color: var(--dark-desc);
}

#theme-light .color-1 {
	background-color: var(--light-body);
}
#theme-light .color-2 {
	background-color: var(--light-main);
}
#theme-light .color-3 {
	background-color: var(--light-second);
}
#theme-light .color-4 {
	background-color: var(--light-hover);
}
#theme-light .color-5 {
	background-color: var(--light-text);
}
#theme-light .color-6 {
	background-color: var(--light-bg-div);
}
#theme-light .color-7 {
	background-color: var(--light-day-off);
}
#theme-light .color-8 {
	background-color: var(--light-curr-day);
}
#theme-light .color-9 {
	background-color: var(--light-curr-day-text-color);
}
#theme-light .color-10 {
	background-color: var(--light-desc);
}

#theme-dark-2 .color-1 {
	background-color: var(--dark-2-body);
}
#theme-dark-2 .color-2 {
	background-color: var(--dark-2-main);
}
#theme-dark-2 .color-3 {
	background-color: var(--dark-2-second);
}
#theme-dark-2 .color-4 {
	background-color: var(--dark-2-hover);
}
#theme-dark-2 .color-5 {
	background-color: var(--dark-2-text);
}
#theme-dark-2 .color-6 {
	background-color: var(--dark-2-bg-div);
}
#theme-dark-2 .color-7 {
	background-color: var(--dark-2-day-off);
}
#theme-dark-2 .color-8 {
	background-color: var(--dark-2-curr-day);
}
#theme-dark-2 .color-9 {
	background-color: var(--dark-2-curr-day-text-color);
}
#theme-dark-2 .color-10 {
	background-color: var(--dark-2-desc);
}

#theme-light-2 .color-1 {
	background-color: var(--light-2-body);
}
#theme-light-2 .color-2 {
	background-color: var(--light-2-main);
}
#theme-light-2 .color-3 {
	background-color: var(--light-2-second);
}
#theme-light-2 .color-4 {
	background-color: var(--light-2-hover);
}
#theme-light-2 .color-5 {
	background-color: var(--light-2-text);
}
#theme-light-2 .color-6 {
	background-color: var(--light-2-bg-div);
}
#theme-light-2 .color-7 {
	background-color: var(--light-2-day-off);
}
#theme-light-2 .color-8 {
	background-color: var(--light-2-curr-day);
}
#theme-light-2 .color-9 {
	background-color: var(--light-2-curr-day-text-color);
}
#theme-light-2 .color-10 {
	background-color: var(--light-2-desc);
}

#theme-blue .color-1 {
	background-color: var(--blue-body);
}
#theme-blue .color-2 {
	background-color: var(--blue-main);
}
#theme-blue .color-3 {
	background-color: var(--blue-second);
}
#theme-blue .color-4 {
	background-color: var(--blue-hover);
}
#theme-blue .color-5 {
	background-color: var(--blue-text);
}
#theme-blue .color-6 {
	background-color: var(--blue-bg-div);
}
#theme-blue .color-7 {
	background-color: var(--blue-day-off);
}
#theme-blue .color-8 {
	background-color: var(--blue-curr-day);
}
#theme-blue .color-9 {
	background-color: var(--blue-curr-day-text-color);
}
#theme-blue .color-10 {
	background-color: var(--blue-desc);
}