@import url('./reset.css'); /* Tektur */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300..700;1,300..700&family=Tektur:wght@900&display=swap');

:root {
	--headerHeight: 56px;
	--headerHeight__mobile: 56px;

	--dark-bg-color: hsl(0 0 5%);
	--dark-main-color: hsl(0 0 8%);
	--dark-siteBar-color: hsl(0 0 7%);

	--light-bg-color: hsl(0 0 98);
	--light-main-color: hsl(0 0 94);
	--light-siteBar-color: hsl(0 0 91);
}

@media (prefers-color-scheme: dark)
{
	*, a{ color: white; }
	body{ background: var(--dark-bg-color); }
	#mainHeader{ border-bottom: 1px solid hsl(0 0 17%); }
	#mainHeader, #siteFooter, #navigation{ background: var(--dark-main-color); }
	#siteBar{ background: var(--dark-siteBar-color); }
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme */
@media (prefers-color-scheme: light)
{
	*, a{ color: hsl(0 0 25%); }
	body{ background: var(--light-bg-color); }
	#mainHeader{ border-bottom: 1px solid hsl(0 0 80%); }
	#mainHeader, #siteFooter, #navigation{ background: var(--light-main-color); }
	#siteBar{ background: var(--light-siteBar-color);}
	#siteBar button{ color: #888; }
	#logo{color: white; text-shadow: 0 0 5px #909090;}
}

body{
	display: grid;
	grid-template-rows: min-content auto;
	height: 100vh;
	overflow: hidden;
	font: 11pt "Noto Sans", sans-serif;
}

.container{
	max-width: 1280px;
	margin: 0 auto;
}
#mainHeader{
	grid-row: 1;
	.container{
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		height: var(--headerHeight);
	}
}

#logo{
	font: bold 20pt sans-serif;
	display: inline-flex;
	align-items: center;
	&:after{
		content: "<Harut />";
		font-family: "Tektur";
	}
}

.openNav, .closeNav{ display: none; }
.openCloseBTN{ display: none; }
#navigation {
	display: flex;
	justify-content: space-between;
}

#navigation__container{
	display: flex;
	gap: 2px;
}
.navItem{
	position: relative;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	text-transform: uppercase;
	overflow: hidden;
	&:after{
	transition: .22s width linear;
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 4px;
		background: white;
		bottom: 0;
		left: 0;
	}
	&:hover::after{ width: 100%; }
	&:nth-child(1){
		&:before{ content: "portfolio"; }
	}
	&:nth-child(2){
		&:before{ content: "html"; }
	}
	&:nth-child(3){
		&:before{ content: "css"; }
	}
	&:nth-child(4){
		&:before{ content: "javascript"; }
	}
}


#activePage:after{
	content: '';
	display: block;
	width: 100%;
	height: 4px;
	position: absolute;
	background: white;
	bottom: 0;
	left: 0;
}

#wrapper{
	display: grid;
	grid-template-columns: minmax(120px, max-content) auto;
	min-height: calc(100dvh - var(--headerHeight));
}
#siteBar{
	grid-column: 1;
	overflow: auto;
	padding: 16px 0 0 8px;
}
.sitebarGroups{
	.siteBarHeader{
		font: bold 12pt 'Noto Sans';
		background: transparent;
		cursor: pointer;
		&:before{
			font-family: icons;
			content: '\AB66';
			padding-right: 8px;
		}
	}
}
.siteBarHeader__open{
	&:before{
		font-family: icons;
		content: '\AB67';
	}
}
.group{
	overflow: hidden;
	height: 0;
	div{
		&:before{
			font-family: icons;
			content: '\AB68';
			padding-right: 8px;
			font-size: 24px;
		}
	}
}
.groupOpen{
	height: 100%;
}

#main{
	grid-column: 2px;
	overflow: auto;
	display: grid;
	grid-template-rows: auto min-content;
}

article{
	padding: 15px;
	p{
		padding: 7px 0;
	}
}
#siteFooter{
	text-align: center;
	padding: 12px 0;
}


@media screen and (max-width: 400px)
{
	body{ height: 100dvh; }
	.openNav, .openCloseBTN{
		background: transparent;
		transform: scale(0.8);
	}
	.openNav:before, .openCloseBTN:before{
	content: '\AB69';
	font: 24px 'icons';
	display: block;
	width: 26px;
	height: 21px;
	}
	.closeNav{
		display: flex;
		justify-content: center;
		align-items: center;
		background: transparent;
		overflow: hidden;
		position: relative;
		width: 32px;
		height: 32px;
		&:before{
			font: 24px 'icons';
			content: '\AB6A';
		}
	}
	.openNav, .closeNav, .openCloseBTN{
		display: block;
	}
	#mainHeader{
		padding: 0 12px;
		.container{
			height: var(--headerHeight__mobile);
			align-items: center;
		}
	}
	#navigation{
		transition: .2s width linear;
		display: block;
		position: absolute;
		overflow: hidden;
		width: 0vw;
		height: 100dvh;
		top: 0;
		right: 0;
		z-index: 9;
		box-sizing: border-box;
		button{
			margin: 6px 0 8px 8px;
		}
		.navItem{
			display: block;
			text-align: right;
			padding: 3px 12px 3px 0;
			font-size: 13pt;
			&:hover{
				background: linear-gradient(90deg, transparent 10%, #fff4 100%);
				&:after{
					position: static;
					height: 0;
					width: 0;
				}
			}
		}
	}
	#activePage{
		background: linear-gradient(90deg, transparent 10%, #fff4 100%);
	}
	#activePage:after{
		content: '';
		display: block;
		width: 100%;
		height: 0;
		position: static;
		background: transparent;
	}
	#navigation__container{
		flex-direction: column;
	}
	#wrapper{
		position: relative;
		min-height: calc(100dvh - var(--headerHeight__mobile));
		grid-template-columns: max-content auto;
		width: 100vw;
	}
	#siteBar{
		position: absolute;
		top: 0;
		z-index: 1;
		transition: .2s width linear;
		overflow: hidden;
		width: 0;
		padding: 0;
		button{
			display: block;
			font-size: 15pt;
			padding: 3px 0;
			min-width: fit-content;  /*https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content*/
			text-align: left;
		}
	}
	#siteBar__container{
		height: calc(100dvh - var(--headerHeight__mobile));
		padding: 16px 16px 0 16px;
		overflow: auto;
	}
}
#main{
	max-width: 100vw;
}