/* light mode / intial stage  */
:root {
	--back-color: white;
	--nav-item-color: rgba(40, 40, 40, 0.6);
	--nav-item-mobile-color: rgba(255, 255, 255, 0.769);
	--nav-item-active-color: rgb(65, 71, 250);
	--nav-item-hover-color: rgb(116, 121, 252);
	--btn-background-color: rgba(255, 255, 255, 0);
	--btn-color: rgb(55, 147, 239);
	--icon-color: rgb(254, 185, 57);
	--heading-color: rgb(42, 48, 93);
	--paragraph-color: rgba(0, 0, 0, 0.637);
	--shadow-color: rgba(75, 75, 75, 0.395);
	--togle-icon-color: black;
	--nav-silde-bg-color: rgba(255, 255, 255, 0.466);
}

/* dark mode  */
.dark-theme {
	--back-color: rgb(37, 37, 37);
	--nav-item-color: rgba(237, 237, 237, 0.797);
	--nav-item-active-color: rgb(201, 15, 201);
	--nav-item-hover-color: rgb(253, 99, 238);
	--icon-color: rgb(147, 86, 246);
	--heading-color: rgb(255, 255, 255);
	--paragraph-color: rgba(255, 255, 255, 0.667);
	--shadow-color: rgba(242, 242, 242, 0.395);
	--togle-icon-color: white;
	--nav-silde-bg-color: rgba(0, 0, 0, 0.466);
}

.bg {
	background-color: var(--back-color);
	transition: all 500ms ease;
}

.nav-i {
	text-decoration: none;
	color: var(--nav-item-color);
}
.nav-i:hover {
	text-decoration: none;
	color: var(--nav-item-hover-color);
}

.active-color {
	color: var(--nav-item-active-color);
}

.btn-1 {
	color: var(--btn-color);
	background-color: var(--btn-background-color);
	border: 2px solid var(--btn-color);
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	border-radius: 5px;
	transition: all 300ms ease-in;
}
.btn-1:hover {
	color: white;
	background-color: rgb(0, 116, 232);
	padding: 10px;
	padding-left: 18px;
	padding-right: 18px;
	border-radius: 5px;
	transition: all 300ms ease-in;
}

.bi-list {
	color: var(--togle-icon-color);
	font-size: 32px;
}

.bi-moon-stars-fill {
	color: var(--icon-color);
	font-size: 24px;
}
.bi-brightness-high-fill {
	color: var(--icon-color);
	font-size: 24px;
}

.h-text {
	color: var(--heading-color);
}

.p-text {
	color: var(--paragraph-color);
}

.btn-2 {
	background-color: rgb(55, 147, 239);
	color: white;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	border: none;
	border-radius: 8px;
	transition: all 300ms ease-out;
}
.btn-2:hover {
	background-color: rgb(0, 116, 232);
	color: white;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	border: none;
	border-radius: 8px;
	transition: all 300ms ease-in;
}

.btn-3 {
	color: rgb(55, 147, 239);
	background-color: transparent;
	border: 2px solid rgb(55, 147, 239);
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 8px;
	transition: all 300ms ease-out;
}
.btn-3:hover {
	color: rgb(255, 255, 255);
	background-color: rgb(55, 147, 239);
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 8px;
	transition: all 300ms ease-in;
}

.h {
	height: 80dvh;
}

.c {
	color: white;
	background-color: rgba(255, 248, 248, 0);
	margin-left: auto;
	margin-bottom: 12px;
}

.shadow-m {
	box-shadow: 0px 2px 5px var(--shadow-color);
}

.nav-slide {
	background-color: var(--nav-silde-bg-color);
	backdrop-filter: blur(12px);
}

/* mobile  */
@media (max-width: 767px) {
	.w {
		width: 100%;
	}
	.nav-i {
		text-decoration: none;
		color: var(--nav-item-mobile-color);
	}
	.nav-i:hover {
		text-decoration: none;
		color: var(--nav-item-hover-color);
	}
	.btn-1 {
		background-color: rgb(55, 147, 239);
		color: white;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 8px;
		padding-bottom: 8px;
		border: none;
		border-radius: 8px;
		transition: all 300ms ease-out;
	}
	.btn-1:hover {
		background-color: rgb(0, 116, 232);
		color: white;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 8px;
		padding-bottom: 8px;
		border: none;
		border-radius: 8px;
		transition: all 300ms ease-in;
	}
}

/* tab */
@media (min-width: 768px) {
	.w {
		width: 100%;
	}
	.hw {
		height: 100%;
		width: 100%;
	}
}

/* laptop  */
@media (min-width: 993px) {
	.w {
		width: 65%;
	}
}