:root{
	--background: #030303;
	--dirBackground: white;
	--dirColour: black;
	--dirColourDim: #333;
	--conBackground: white;
	--dirHighlight: gray;
	
	--timeChange: 0.1s;
	--fontSize: 12pt;
	--smallFontSize: 10pt;
	--urlSize: 16pt;
	--pageMargins: 12pt;
	--pageBorders: 4pt;
}

[data-theme="dark"] {
	--background: #030303;
	--dirBackground: #191919;
	--dirColour: #ccc;
	--dirColourDim: #999;
	--conBackground: #222222;
}

[data-theme="smoke"] {
	--background: #1e1916;
	--dirBackground: #2c231c;
	--dirColour: #ff4694;
	--dirColourDim: #633540;
	--conBackground: #323020;
	--dirHighlight: #7e8063;
}

[data-theme="tower"] {
	--background: #030303;
	--dirBackground: white;
	--dirColour: initial;
}
/*	Base Layout */
#head{
	transition: font-size var(--timeChange);
}
html{
	background-color: var(--background);
	color: #fff;
	min-height: 100%;
}
body{
	margin:0;
/*	padding: var(--pageMargins); */
/*	padding: calc( var(--pageMargins) / 2 ) var(--pageMargins);*/
	box-sizing: border-box;
}
main{
	box-sizing: border-box;
	padding: 8px;
	width: calc( 100% - var(--pageCrop) );
	font-family: sans-serif;
}
/*	This shouldn't be called directory really, but it's a useful class. */
.directory{
	background: var(--dirBackground);
	color: var(--dirColour);
	padding-left: 4pt;
	border-radius: var(--pageBorders);
	box-sizing: border-box;
	padding: 0 0 2pt 0;
	margin-top: 12pt;
}
#headInterior .directory .name{
	flex-grow: 1;
}
#headInterior .directory .storage{
	white-space: pre;
}
#headInterior .directory .fileContainer a,
#headInterior .directory .fileContainer p{
		display: flex;
		flex-direction: row;
}

/*	Directory Head Zone ------------------------------------------------- */
#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;
}
#headZone form{
	width: calc( 80% - var(--i) * 20px );
}

/*	Directory Title/Rename Form */
#title{
	display: inline-block;
	background: var(--dirBackground);
	border-radius: var(--pageBorders);
	padding: 0 1em 0.6em;
}
/*#title p{
	margin-top: -12pt;
}*/

.introtext{
	white-space: pre;
}

#renameDirectoryForm{
	display: flex;
	flex-direction: column;
	gap: 4pt;
	
	position: relative;
	z-index: 10;
}
p.utility.hidden{
	position: absolute;
	height: 0;
	overflow: hidden;
	opacity: 0;
}
.directoryTitle,
.directoryTitle input,
p.utility.hidden{
	font-family: sans-serif;
	font-size: 28pt;
	align-items: baseline;
	font-weight: bold;
	color: var(--dirColour);
	padding: 0;
}
.directoryTitle{
	line-height: 1em;
	margin: 0;
	padding: 0 4pt;
}
.directoryTitle p{
	padding: 0;
	color: var(--dirColourDim);
}
.directoryTitle input{
/*	transition: width 0.1s ease-out;*/
/*	max-width: 200px;
	min-width: 160px;*/
}
.directoryTitle div{
	display: flex;
	align-items: baseline;
}

.inputContainer{
	background: var(--conBackground);
	color: var(--dirColour);
	border-radius: var(--pageBorders);
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	
	flex-direction: row;
	white-space: pre;
}
.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;
}	
#headZone p{
	padding: 0;
}
/*	Directory Storage Indicator */
#spaceBar{
	color: var(--dirBackground);
	font-family: monospace;
	font-size: 8pt;
	margin-top: calc( ( var(--pageBorders) * 2 ) * -1 );
	z-index: -4;
	position: relative;
	padding-top: 2pt;
	border-radius: 0 0 4pt 4pt;
}
#spaceBar>*{
	height: 100%;
	padding: 0 2pt;
}

/*	Directory Options/Control Panel ------------------------------------- */
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 Listing/Files --------------------------------------------- */
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;
}
/*.directory*/ li:has(input):hover{
	background: var(--conBackground);
}
#bulletZone{
	height: 	calc( var(--fontSize) + 4pt );
	min-width:	calc( var(--fontSize) + 4pt );
	transition: height var(--timeChange);
	display: flex;
	flex-direction: row;
}
#bulletZone>*{
	max-width:24px;
	max-height:24px;
	position: relative;
	top: 2pt;
}

.filecontent.image img{
	max-width: 100%;
}

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;
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;
	border-radius: 2pt;
	border: 1px solid;
	border-color: var(--background);
	background: var(--conBackground);
	
	padding: 0 4pt;
	margin: 2pt 0 0 0;
}
.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;
}*/

#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 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;
}


/*	BIG Upload button. -------------------------------------------------- */
.tapesBigButton{
	font-size: 28pt;
	font-family: sans-serif;
	font-weight: bold;
	background: var(--dirColour);
	border-radius: var(--pageBorders);
	color: var(--dirBackground);
	border: 2pt var(--dirColourDim) solid;
	padding:0;
}
#tapesUpload{
	position: fixed;
	bottom: 180px;
	right: calc( 20px + var(--pageCrop) );
	
	transition: bottom 0.2s cubic-bezier(.23,.79,.67,1.21);
}
#tapesUpload:hover label::after{
	content:'.';
}
#tapesUpload:hover{
	border-color: var(--dirColour);
	color: var(--dirColour);
	background: var(--dirColourDim);
}
#tapesUpload label::after{
	content:'?';
}
#tapesUpload label{
	padding: 4pt;
	letter-spacing: -0.05em;
}
body:has(.fileList li) #tapesUpload,
body:has(input[type=file]:disabled) #tapesUpload{
/*	display: none;*/
	bottom: -100px;
}
.tapesContainer .controls{
	display: flex;
	gap: 4px;
}
.tapesContainer .controls:first-child{
	padding: 4px 4px 0;
}
.tapesContainer .controls:last-child{
	padding: 0 4px 4px;
	justify-content: end;
}
/*#tapesUploadViewer .controls*/ button{
	background: var(--conBackground);
	border: var(--background) solid 1px;
	color: var(--dirColour);
	border-radius: var(--pageBorders);
	padding: 4pt;
}
/*#tapesUploadViewer .controls*/ button:hover{
	background: var(--dirBackground);
}
.fileList:not(:has(li)){
	display: none;
}
.fileList{
	max-height: 100%;
	list-style: none;
	color: var(--dirColour);
	padding: 0;
	padding-left: 24px;
	margin: 0;
	overflow-x: hidden;
}

.tapesContainer{
	display: inline-block;
	background: var(--dirBackground);
	border-radius: var(--pageBorders);
	width:100%;
}

button,
button label{
	display: inline-block;
	padding: 4pt;
}
button:has(label){
	padding: 0;
}

#tapesMoveDeleteViewer li:hover{
	background: var(--conBackground);
}

/*	.filename input{
		font-size: var(--fontSize);
		font-family: inherit;
		background: var(--conBackground);
		color: var(--dirColour);
		border: none;
		border-radius: 2pt;
	}*/
	
	input[type=text]{
		font-size: inherit;
		font-family: inherit;
		background: var(--conBackground);
		color: var(--dirColour);
		border: none;
		border-radius: 2pt;
	}
	
	
	
#postform,
#movedeleteform{
	display: none;
}
#tapesOptions{
	margin-top: -4pt;
	position: relative;
	font-size: var(--fontSize);
}
html:has(#tapesOptionsPanel.open) #tapesOptions{
	display: none;
}
#tapesOptionsPanel.open{
	display: flex;
}
#tapesOptionsPanel{
	display: none;
	flex-direction: column;
	color: var(--dirColour);
	margin-top: calc(-4pt - 4px);
/*	padding: 4pt;*/
}
#tapesOptionsPanel>div:not(div:first-child){
	display: flex;
	flex-direction: row;
	column-rule: 2px solid pink;
	padding: 4pt;
}
#tapesOptionsPanel .side{
	flex-basis: 50%;
}

#tapesDirectoryMap{
	display: flex;
	flex-direction: column;
	
}
#tapesDirectoryMap .map{
	flex-grow: 1;
	display: flex;
	align-self: center;
	align-items: center;
	font-family: monospace;
	white-space: pre;
	/*line-height: 0.9em;*/
	color: var(--dirHighlight);
	/*font-size: var(--fontSize);*/
	font-size: 10pt;
}

a{
	color: var(--dirColour);
}
a:visited{
	color:  #b469e8;;
}

a:hover,
a:visited:hover{
	color: #9f9;
}
#tapesDirectoryMap .here{
	font-family: sans-serif;
	color: var(--dirColourDim);
}

#tapesPrivacy{
	padding-left: 2pt;
	border-left: 1px var(--conBackground) solid;
}
#tapesPrivacy ul{
	display: flex;
	flex-direction: column;
	/*gap: 2pt;*/
	padding: 0;
	margin: 0;
}
#tapesPrivacy h3{
	font-weight: normal;
	font-size: var(--fontSize);
	margin: 0;
}
#tapesPrivacy li{
	padding: 2pt;
	border-radius: 1pt;
	display: flex;
	flex-direction: column;
}
#tapesPrivacy li div{
	display: flex;
	flex-direction: row;
	align-items: center;
}
#tapesPrivacy li input{
	margin: 0pt 4pt 0pt 1pt;
}
#tapesOptionsPanel .note{
	font-family: monospace;
	font-size: 8pt;
	color: var(--dirHighlight);
}

#tapesEmptyIndicator{
	font-size: 42pt;
	font-family: sans-serif;
	line-height: initial;
	text-align: center;
	color: var(--dirColourDim);
	font-weight: bold;
	letter-spacing: -0.05em;
	padding-bottom: 2pt;
}
	
	.filename{
		margin-left: 2px;
	}
	
@media only screen and (max-width: 1080px) {
	:root{
		--fontSize: 10pt;
		--smallFontSize: 8pt;
		--urlSize: 8pt;
	}
	body {
	#	background-color: lightblue;
	}
	#headZone{
	#	letter-spacing: calc(var(--smallFontSize) / 1.3	);
	#	font-size: 0pt;
	#	margin-top: 0;
	}
	#headZone left,
	#headZone p{
	#	display: none;
	margin: 0;
	}
	#renameDirectoryForm{
		padding-right: 74px;
	}
	#urlBar{
	#	display: block;
	}
	.ascii{
		letter-spacing: -0.1em;
	}
}