button{
	font-family:"Segoe ui"!important;
}
h1{margin:0 0 1rem 0;font-family:"segoe ui";font-size:calc(22pt * var(--page-scale));}

body{
	--page-scale:1;
	--taskbar-height:32px;
	--abt-profile-img:200px;
	font-family:"Segoe ui";
}
#the-window{
	margin:4rem 8rem;
	box-sizing:unset;
	height:calc(100vh - var(--taskbar-height) - 8rem);
	font-size:calc(16pt * var(--page-scale));
	
}
nav > div{	
	display:flex;
	flex-wrap: wrap;	
	grid-gap:6px;
	justify-content:center;
}
nav .nav-button{
	min-width:calc(120px * var(--page-scale));
	max-width:calc(240px * var(--page-scale));
	min-height:calc(40px * var(--page-scale));
	max-height:calc(60px * var(--page-scale));
	overflow-y:hidden;
	padding:4px 12px;
	font-size:calc(14pt * var(--page-scale));
	border:calc(1px * var(--page-scale)) solid #003c74;
}

#the-window #about-panel-quick-details > span:nth-child(2n+1){
	
	font-size:calc(11pt * var(--page-scale));
}



.image-nav{
}

.image-nav-button{
	width:calc(36px * var(--page-scale));
}
.image-nav-button:hover{
	filter:brightness(.9) contrast(1.06);
}
.image-nav-button:active{
	filter:brightness(.8) contrast(1.06);
}
.image-nav-button.next{
	float:right;
}
html[data-page="picture"]{
	#the-window{
		background-color:black;
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
	}
}

html[data-page="about-me"]{
	#page_target {
		padding-top: var(--abt-profile-img);
		position: relative;
	}
	
	#about-panel-profile{
		width:var(--abt-profile-img);
		max-height:var(--abt-profile-img);
		mask-size:var(--abt-profile-img);
	}
}

.window-body{
	margin:1rem;
	padding-bottom:8px;
}

#about-panel-quick-details{
	width:100%;
	max-width:100%;
}

.about-panel-quick-wrapper:nth-child(3)> div:last-child{
	position:absolute;
	top:0;
}

.window-body{
	height:calc(100vh - var(--taskbar-height) - 2rem - 8rem - 12px);
	overflow:auto;
	box-sizing:border-box;
}

#about-panel-quick-details{
	font-size:calc(10pt * var(--page-scale))!important;
}
#about-panel-quick-edu > span:nth-child(2n+1){
	font-size:calc(10pt * var(--page-scale))!important;
	color:red;
}

.explorer-icon{
	background:none;
	box-shadow:none;
	border:none;
}
.title-bar-text{
	font-size:calc(13pt * var(--page-scale));
}
.title-bar{
	height:calc(21px * var(--page-scale));

}
.title-bar-controls button{
	min-width:calc(21px * var(--page-scale));
	min-height:calc(21px * var(--page-scale));
}
	
.explorer-icon:not(.selected):hover{
	background:none;
	border:none;
}

#about-panel-root .buttons {
	grid-template-columns:repeat(auto-fill,calc(88px * var(--page-scale)));
}
#about-panel-root .buttons img{
	max-width:calc(88px * var(--page-scale));
	width:100%;
}
.explorer-icon.folder::before {
	background-image: url('/imgs/xp/icons/Folder Closed.png')!important;
}
.explorer-icon.pdf::before {
	background-image: url('/imgs/xp/icons/Generic Text Document.png')!important;
}
.explorer-icon.document::before {
	background-image: url('/imgs/xp/icons/TXT.png')!important;
}
.explorer-icon.mp3::before {
	background-image: url('/imgs/xp/icons/Audio CD.png')!important;
}

html[data-page="about camera.txt"],
html[data-page="about cats.txt"]
{
	#the-window{
		background:white;
	}
	#the-window .window-body {
	padding: 0;
	margin: 3px 6px 3px 6px;
	background: white;
}
	#the-window .window-body textarea{
		font-size:calc(11pt * var(--page-scale))!important;
	}
}
@media (orientation:portrait){
	nav > div{	
		justify-content:unset;
	}
	#the-window{
		margin:2rem 1rem;
		height:calc(100vh - var(--taskbar-height) - 4rem);
	}
	.window-body{
		height:calc(100vh - var(--taskbar-height) - 8rem - 12px);
	}
}
/* if device has a touch screen */
@media (any-pointer: coarse) {
	
	.windowsxp.taskbar {
		height:100px;
		width:100vw;
		display:flex;
	}

	.windowsxp .open-tab img{
		height:70%;
		margin-top:8px;
	}
	.windowsxp .opened-tabs{
		display:flex;
	}
	.windowsxp .open-tab{
		height:90%;
		font-size:40pt;
		min-width:10%;
		flex-grow:1;
		display:flex;
		align-items:center;
		background-size:cover!important;
		grid-gap:1rem;
		padding:0 1rem;
	}
	.windowsxp #open_tab_text{
		line-height:90%;
		text-overflow:ellipsis;
		overflow:hidden;
	}
	
	#clock_time {
		font-size: 42pt;
		width: fit-content;
		min-width: 28%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align:center;

	}
	body{--page-scale:2.5;--taskbar-height:100px;}
	#about-panel-bio{
		max-width: calc(90vw)!important;
		width:calc(90% + 200px)!important;
	}
	#about-panel-quick-details{
		max-width:95vw!important;
		grid-template-columns:minmax(25vw,max-content) auto!important;
	}
	#about-panel-quick-edu{
		grid-template-columns:minmax(22vw,max-content) auto!important;
		
	}
	#about-panel-quick-edu span img{
		--page-adjust:var(--page-scale);
		width:calc(10pt * var(--page-scale) + (5px * var(--page-adjust))) !important;
	}
	#about-panel-quick-edu span:nth-child(11) img{
		--page-adjust:calc(var(--page-scale) + 1)
		
	}
	#about-panel-quick-edu span:nth-child(17) img{
		--page-adjust:calc(var(--page-scale) - 2)
		
	}
	body{
		--abt-profile-img:400px;
	}
	.explorer-content.tiles{
		grid-template-columns:repeat(auto-fit,calc(242px * var(--page-scale)))
	}
	.explorer-content.tiles > .explorer-icon {
	max-width: calc(230px * var(--page-scale));
	width: calc(230px * var(--page-scale));
	display: flex;
	padding: calc(4px * var(--page-scale)) calc(6px * var(--page-scale));
}.explorer-content.tiles > .explorer-icon::before {
	width: calc(48px * var(--page-scale));
	height: calc(48px * var(--page-scale));
	margin-right: 8px;
	background-size: 100% auto;
}
.explorer-icon-inner {
	font-size: calc(8pt * var(--page-scale));
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.explorer-content.tiles > .explorer-icon > .explorer-icon-inner > div {
	max-width: calc(160px * var(--page-scale));
}.explorer-content.tiles > .explorer-icon > .explorer-icon-inner > div {
	max-width: calc(100% - 48px * var(--page-scale));
}
}
 
 @media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 768px) and (any-pointer:coarse),
  only screen and (min--moz-device-pixel-ratio: 3) and (max-width: 768px) and (any-pointer:coarse),
  only screen and (-o-min-device-pixel-ratio: 3/1) and (max-width: 768px) and (any-pointer:coarse),
  only screen and (min-device-pixel-ratio: 3) and (max-width: 768px) and (any-pointer:coarse),
  only screen and (min-resolution: 3dppx) and (any-pointer:coarse){ 
	body{--page-scale:3}
  }
  
  
  
.hidden{display:none;visibility:hidden;height:0;width:0;overflow:hidden;}