@import './mainPriority.css';
@import './header/header.css';
@import './header/burger/burger.css';

@import './lang/lang.css';

@import './storySection/story.css';
@import './hardSkils/hardSkils.css';
@import './softSkils/softSkils.css';
@import './worksSection/works.css';
@import './modal/modal.css';

@import './footer/footer.css';

:root {
	--main-anim-time: 2s;
	--second-anim-time: 4s;
	--third-anim-time: 6s;

	--main-color-html: rgb(196, 196, 196);

	--main-color-body: rgb(240, 240, 240);
	
	--heder-font-color: rgb(114, 114, 114);

	--li-active-color: rgb(80, 80, 80);

	--main-colorB-text: #000;
	--main-colorW-text: #fff;
	--main-colorGt-text: rgb(83, 83, 83);
	
	--footer-bg-colr: rgb(196, 196, 196);
	
    --hexagon-color: rgb(170, 170, 170);

	--burg-bg-color: rgba(240, 240, 240, 0.1);
	--burg-line-color: #616161;
	--navList-bg-color: rgba(196, 196, 196, 0.8);
	--sof-li-hover: rgba(255, 255, 255, 0.7);
	--sof-cet-shadow: rgba(0, 0, 0, 0.8);
	--story-text-color: rgb(83, 83, 83);
	--work-title-color: rgb(65, 65, 65);
	--toUP-btn-color: rgba(255, 255, 255, 0);
	--goUp-btn-shadoww: rgba(0, 200, 0, 0);
	transition: 2s;
}

html {
	display: flex;

	justify-content: center;

	background: var(--main-color-html);

	transition: 2s;
	
    color: var(--main-colorB-tex);
}

body {
	display: flex;
	flex-direction: column;

	width: 80vw;

	border-radius: 5px;
	background: var(--main-color-body);
	box-shadow: 0 0 20px var(--main-color-body);
}

main {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

h2 {
	color: var(--heder-font-color);

	text-shadow: 0px 0px 10px var(--main-color-body);

	transform: translateY(-10%);
	transition: all 2s;
}

section {
	display: flex;
	flex-direction: row;

	justify-content: flex-start;
	align-items: center;

	width: 80%;
}

li {
	list-style: none;
}

a {
	text-decoration: none;

	color: var(--main-colorB-tex);
}

.color-text {
	color: #0f0;
	font-weight: 900;
}



.go-up-btn {
	display: flex;
	position: fixed;
	justify-content: center;
	align-items: center;
	background: url(./img/up-arrow.png) no-repeat , var(--toUP-btn-color) ;
	background-size: 70%;
	background-position: center;
	top: 120vh;
	left:90%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--main-colorB-tex);
	transition: 2s;
	opacity: 0;
	z-index: 20;
	box-shadow: 0 0 5px var(--goUp-btn-shadow);
}

.__active.go-up-btn {
	top: 90vh;
	opacity: 1;
}

.go-up-btn a{
	display: flex;
	height: 100%;
	width: 100%;
}


.dark-them-toggle{
	display: none;
	position: relative;
	width: 40px;
	height: 20px;
	background: rgb(220, 220, 220);
	border-radius: 20px;
	border: 2px solid rgb(130, 130, 130);
	box-shadow: 2px 2px 3px #000;
	align-items: center;
	transition: 1s;
}


.dark-them-toggle::before{
	content: "🌙";
	display: flex;
	position: absolute;
	right: -70%;
}

.dark-them-toggle::after{
	content: "🔆";
	display: flex;
	position: absolute;
	left: -70%;
}

.dark-them-toggle span{
	display: flex;
	position: absolute;
	left: 0px;
	width: 20px;
	height: 20px;
	background: rgb(130, 130, 130);
	border-radius: 100%;
	transition: 1s;
}

#dark-them_toggle{
	display: flex;
	width: 0;
	height: 0;
	opacity: 0;
	
}

#dark-them_toggle:checked ~ .menu .dark-them .dark-them-toggle span{
	left: 20px;
}

#dark-them_toggle:checked ~ .menu .dark-them .dark-them-toggle{
	background: rgb(47, 255, 0);
}

header .menu .dark-them.active{
	background: rgba(0, 200, 0, 0);
}

header .menu .dark-them:hover{
	background: rgba(0, 200, 0, 0);
	
	box-shadow: rgba(0, 200, 0, 0);
}


@media (max-device-width: 768px) {
	html {
		width: 100%;
	}

	body {
		width: 100%;
	}

	section {
		width: 100%;
	}
	.go-up-btn{
		left: 60%;
	}
}

@media (max-width: 768px) {
	*html {
		max-width: 100%;
		margin: auto;
		min-width: 350px;
	}

	body {
		max-width: 100%;
	}

	section {
		max-width: 100%;
	}

	.go-up-btn{
		left: 60%;
	}
	
	
}