html {
	scroll-behavior: smooth;
}

:root {
	--black: #000;
	--light-black: #444;
	--white: #FFF;
}

.dark {
	--black: #FFF;
	--white: #000;
}

.dark h1, h2, h3, h4, h5, p, ul, li {color: var(--black) !important;}
.dark .text-white {color: var(--white) !important;}
.dark .srv-img img {filter: invert(1);}
.color-green {color: #31CA11 !important;}
.green-line {width: 46px; height: 2px; margin-right: 20px; background-color: #31CA11;}

/* Navigation */

.container-nav {position: relative; width: 100%;}

.navigation {
	position: fixed;
	width: 300px;
	height: 100vh;
	border-right: 1px solid rgba(0, 0, 0, .05);
	background-color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: width 0.5s, left 0.5s;
}

.dark .navigation {border-right: 1px solid rgba(255, 255, 255, .05);}
.navigation.active {width: 0;}
.navigation ul {position: relative; top: 0; left: 0; width: 100%; padding: 20px 40px;}
.navigation ul li {position: relative; width: 100%; list-style: none;}

.navigation ul li a {
	position: relative;
	display: block;
	width: 100%;
	margin: 10px 0;
	white-space: normal;
	display: flex;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--black);
	font-weight: 500;
	letter-spacing: 2px;
	opacity: 0.5;
}

.navigation ul li a:hover {opacity: 1;}

/* end Navigation */

.main {
	position: absolute;
	width: calc(100% - 300px);
	left: 300px;
	background-color: var(--white);
	min-height: 100vh;
	transition: width 0.5s, left 0.5s;
}

.main.active {width: calc(100% - 0px); left: 0px;}

.main .topbar {
	position: fixed;
	top: 0;
	width: calc(100% - 300px);
	left: 300px;
	background-color: var(--white);
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	height: 60px;
	padding: 0 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10000;
	transition: width 0.5s, left 0.5s;
}

.dark .main .topbar {border-bottom: 1px solid rgba(255, 255, 255, .05);}
.main .topbar.active {width: calc(100% - 0px); left: 0px;}

.main .topbar .logo {
	color: var(--black);
	font-weight: 600;
	text-decoration: none;
	font-size: 1.4em;
	letter-spacing: 1px;
}

.main .topbar .toggle {
	position: relative;
	width: 60px;
	height: 60px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	color: var(--black);
}

.bg-dark {background-color: var(--black) !important;}

.bg-img-about {
	background: url('../img/bg.png');
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
	z-index: 1;
}

.ml11 .text-wrapper {
	position: relative;
	display: inline-block;
	padding-top: 0.1em;
	padding-right: 0.05em;
	padding-bottom: 0.15em;
}

.ml11 .line {
	opacity: 0;
	position: absolute;
	left: 0;
	height: 100%;
	width: 3px;
	background-color: #31CA11;
	transform-origin: 0 50%;
}

.ml11 .line1 {top: 0; left: 0;}
.ml11 .letter {display: inline-block; line-height: 1em;}

.themeSwich {
	position: absolute;
	bottom: 20px;
	left: 40px;
	width: 30px;
	height: 30px;
	background-color: var(--black);
	color: var(--white);
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.themeSwich::before {content: '\f186'; font-family: fontAwesome;}
.dark .themeSwich::before {content: '\f185'; font-family: fontAwesome;}

.themeSwich::after {
	content: 'Dark Mode';
	position: absolute;
	left: 40px;
	font-size: .7em;
	color: var(--black);
	white-space: nowrap;
	font-weight: 300;
	letter-spacing: 1px;
	pointer-events: none;
}

.dark .themeSwich::after {content: 'Light Mode';}

.hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-100%);
	transition: all 1s;
}

.show {
	opacity: 1;
	filter: blur(0);
	transform: translateX(0);
}

.tech {
	display:  flex;
}

.logo:nth-child(2) {
	transition-delay: 200ms;
}

.logo:nth-child(3) {
	transition-delay: 400ms;
}

.logo:nth-child(4) {
	transition-delay: 600ms;
}

.logo {
	padding: 1rem;
	margin: 0 .5rem;
}

footer a {
	text-decoration: none;
	color: var(--black);
	font-weight: 500;
	letter-spacing: 2px;
	opacity: 0.5;
}
footer a:hover {color: var(--black); opacity: 1;}

/*@media (prefers-reduced-motion) {
	.hidden {
		transition: none;
	}
}*/

@media (max-width: 992px) {
	.navigation {left: -100%;}
	.navigation {padding: 20px 20px;}
	.navigation.active {left: 0; width: 100%;}
	.main {width: 100%; left: 0;}
	.main.active {left: 100%;}
	.main .topbar {width: 100%;	left: 0; padding: 0 20px;}
}

@media (max-width: 480px) {
	.mb-res {display: none !important;}
	.tech {display: block;}
}