:root{
	--timeChange: 0.1s;
	--fontSize: 12pt;
	--smallFontSize: 10pt;
	--urlSize: 16pt;
	--pageMargins: 12pt;
	--pageBorders: 4pt;
}
#head{
	transition: font-size var(--timeChange);
}
html{
	background-color: #030303;
	color: #fff;
	min-height: 100%;
}
body{
	margin:0;
/*	padding: var(--pageMargins); */
	padding: calc( var(--pageMargins) / 2 ) var(--pageMargins);
	box-sizing: border-box;
}
main{
	width: calc( 100% - var(--pageCrop) );
	font-family: sans-serif;
}
.directory{
	background-color: white;
	color: initial;
	padding-left: 4pt;
	border-radius: var(--pageBorders);
	box-sizing: border-box;
	padding: 0 0 2pt 0;
	margin-top: 12pt;
}
#headZone{
#	position: sticky;
#	top: 20px;
#	z-index: 100;
	
	display: flex;
	flex-direction: row;
#	width: calc( 100% - var(--pageCrop) );
#	max-width: 100%;
	
	transition: padding-right var(--timeChange),
				font-size var(--timeChange),
				letter-spacing var(--timeChange);
	padding-right: 0;
	box-sizing: border-box;
	
	letter-spacing: initial;
	
	margin-bottom: 6pt;
}
#headZone .smalltext{
	font-size: 8pt;
	color: #999;
}
#headZone .left{
	flex-grow: 1;
#	overflow-x: hidden;
}
#options{
	display: flex;
	flex-direction: column;
	align-items: end;
}
#headZone form{
	width: calc( 80% - var(--i) * 20px );
}
#title p{
	margin-top: -12pt;
}
.directoryTitle{
	font-size: 28pt;
}
.directoryTitle,
#headZone p{
	margin: 0;
	padding: 0 4pt;
}
#headZone,
footer{
/*#prompt button*/
	font-size: var(--smallFontSize);
/*	font-family: monospace;	*/
}
fieldset{
	border-radius: calc( var(--pageBorders) * 1.5 );
	margin: 0;
	margin-top: -4pt;
	padding: 4pt 10pt;
}
#headZone a{
	text-decoration: none;
}
#headZone a .name{
	text-decoration: underline;
}
.storage{
	color: #aaa;
	font-size: 8pt;
}
a:hover .storage{
	color: inherit;
}
.ascii{
	white-space: pre;
}
.directory{
	
}
ul.directory{
	font-family: monospace;
	font-size: var(--fontSize);
	padding: 0;
	margin: 0;
	line-height: var(--fontSize);
	list-style: none;
}
.directory li{
	display: flex;
	flex-direction: row;
}
#bulletZone{
	height: 	calc( var(--fontSize) + 4pt );
	min-width:	calc( var(--fontSize) + 4pt );
	transition: height var(--timeChange);
}
#bulletZone>*{
	width:100%;
	height:100%;
	position: relative;
	top: 2pt;
}
footer{
	height: var(--smallFontSize);
}
footer ul{
	margin-left: -18pt;
}
footer ul li{
	float: left;
	padding-right:20px;
}
footer ul li:hover{
	text-decoration: underline;
}
#prompt{
	position: relative;
	display: flex;
	flex-direction: column;
}
.spacer{
	flex-grow: 1;
}
#urlBar input,
#prompt button{
	font-size: var(--urlSize);
	border-radius: 2px;
}
#prompt button{
	border: 4px outset;
/*	font-weight: bold;*/
color: #555;
border-color: #777;
}
#urlBar{
	display: none;
	padding-right: 8px;
}
#urlBar input{
	width: 100%;
	padding: 4px;
	border-radius: 4px;
	border: 1px inset;
	background-color: #333;
	color: #666;
}

#parentDirectory .fileIcon{
	margin-top: -2pt;
}
.fileContainer{
	width: calc( 100% - 24pt );
	padding-top: 2pt;
}
.filecontent.text{
	overflow-x: scroll;
	overflow-y: initial;
}
.filecontent.text p{
	font-size:		10pt;
	line-height:	10pt;
	white-space:	pre;
	letter-spacing:	initial;
	font-family:		monospace;
	padding:	2pt 0 2pt 2pt;
}

/*html:has(#header.hiding) #headZone{
		padding-right: 20px;
		letter-spacing: calc(var(--smallFontSize) / 1.3	);
		font-size: 0pt;
		margin-top: 0;
}*/
html:has(#header.hiding) #uriDisplay{
	padding: 0 3pt;
	top: 2pt;
	
}
html:has(#header.hiding) #uriDisplay input{
	background-color: #333;
	color: white;
	font-size: var(--smallFontSize);
	font-family: monospace;
	padding: 4pt 8pt;
}

a:visited{
	color: inherit;
}
a:visited:hover{
	color: #f33;
}

#uriDisplay{
	position: sticky;
	z-index: 100;
	top: var(--pageMargins);
	bax-sizing: border-box;
	transition: top var(--timeChange),
				padding var(--timeChange);
}
#uriDisplay input{
	width:100%;
	font-size: var(--fontSize);
	border-radius: var(--pageBorders);
	transition: background-color var(--timeChange),
				color var(--timeChange),
				font-size var(--timeChange),
				padding var(--timeChange);
}

.inputContainer,
.inputContainer input{
	font-size: var(--fontSize);
	border-radius: 0;
	color: #030303;
}

.inputContainer{
	background: white;
	border-radius: var(--pageBorders);
	flex-grow: 1;
	display: flex;
	box-sizing: border-box;
	
	flex-direction: row;
	white-space: pre;
	color: #999;
}
.inputContainer:has( input:focus ){
#	outline: red 1px solid;
#	border: inset 2pt #333;
}

.inputContainer input{
	width:100%;
	border: none;
	background: none;
}
.inputContainer input:focus{
	outline: none;
#	padding: initial;
}	
#createForm{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0; /*Why does this need to be here?*/
	gap: 8pt;
}

.row{
	display: flex;
	flex-direction: row;
	dominant-baseline: text-bottom;
}

#headInterior{
width: 100%;
}
#headInterior form *{
	font-family: sans-serif;
	font-size: var(--fontSize);
}
#headInterior form legend{
	font-size: 10pt;
	border: 2px groove;
	border-radius: 4pt;
	background: black;
	z-index: 20;
	position: relative;
}
	
#privacySettings{
	list-style: none;
	background-color: #030303;
	border-radius: var(--pageBorders);
	margin:0;
	padding: 4pt;
	border: inset 2pt #333;
}
	
@media only screen and (max-width: 600px) {
	:root{
		--fontSize: 12pt;
		--smallFontSize: 8pt;
		--urlSize: 8pt;
	}
	body {
	#	background-color: lightblue;
	}
	#headZone{
		padding-right: 20px;
	#	letter-spacing: calc(var(--smallFontSize) / 1.3	);
	#	font-size: 0pt;
	#	margin-top: 0;
	}
	#headZone left,
	#headZone p{
	#	display: none;
	margin: 0;
	}
	#urlBar{
	#	display: block;
	}
	.ascii{
		letter-spacing: -0.1em;
	}
}