:root {
	--main-color-site:#ff85ff;
	--bg-color: #1a1a1a;
	--text-color: white;
	--nf-text-color: #a8a8a8;
	--panel-bg: #2b2b2b;
	--but-text:var(--text-color);
	--but-text-hower:#ff85ff;
	--accent-color: #007bff;
}
@media (prefers-color-scheme:light) {
	:root {
		--bg-color:white;
		--text-color:#353535;
		--nf-text-color:#585858;
		--panel-bg:#e9e9e9;
		--but-text:var(--text-color);
		--accent-color: #58a6ff;
	}
}

html,body {
	background-color:var(--bg-color);
	scroll-behavior: smooth;
	scroll-padding-top:65px;
}

/* topBar */
.tb {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: fixed;
	top: 0%;left:0%;right:0%;height:55px;
	border-bottom:3px solid;
	border-color:var(--main-color-site);
	z-index:1002;
	background-color:var(--panel-bg);
	padding:5px 5px 5px 5px;
}
.anim-img {transform-origin:center center;position:relative;cursor:pointer;}
.anim-img.zmd {z-index:9000;}
.scr {
  display: block;
  position: relative;
  flex-direction: column; /* Элементы встают друг под друга */
  gap: 8px;             /* Удобный отступ между элементами */
  padding: 15px;
  border: 1px solid rebeccapurple;
  border-radius:14px;
  background-color:var(--panel-bg);
  overflow-y: auto;
}
.scr p {
	color:var(--text-color);
	font-size:20px;
}
/* Кнопка */
.close-btn {
	position:relative;
	padding:5px;
	background-color:#007bff;
	color:var(--but-text);
	border:none;
	border-radius:5px;
	cursor:pointer;
	transition:background-color 0.2s;
}
.close-btn:hover{background-color:#0056b3}

.backGr {
	position: fixed;
	left: -10%;top: -10%;bottom: -10%;right: -10%;
	background-color:rgba(0,0,0,0.5);
	z-index: 999;
	opacity:0;
	visibility:hidden;
	transition:opacity 0.4s ease,visibility 0.4s;
}
.backGr.active {
	opacity: 1;
	visibility: visible;
}

/* панель */
.SB {
	height: 100%;
	min-width: 220px;
	width: 40%;
	max-width: 300px;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	background-color:var(--panel-bg);
	padding:0px 7px 0px 7px;
	border-right:7px solid;
	border-color:var(--but-text-hower);
	box-sizing:border-box;
	overflow-x: hidden;overflow-y: auto;
	transform: translateX(-100%);
	transition: 0.3s;
	padding-top: 10px;
}
.SB.active {
	transform: translateX(0);
}

.SB a{
	text-align: center;
	padding:5px 20px;
	border-top:6px solid;
	text-decoration: none;
	font-size:35px;
	color:var(--but-text);
	border-color:#818181;
	display:block;
	cursor:pointer;
	transition:color 0.2s;
}
.SB a:hover {color:var(--but-text-hower);}