Better HNTP Style

:root {
  --page-bg-image: url('https://images.pexels.com/photos/2417863/pexels-photo-2417863.jpeg');
  --page-bg-tint: hsla(248, 10%, 16%, 0.5);
  --folder-header-bg: hsla(248, 10%, 16%, 0.7);
  --folder-header-text: #FFFFFF;
  --folder-body-bg: hsla(248, 10%, 16%, 0.5);
  --folder-body-text: #FFFFFF;
  --folder-icon-hover-bg: hsla(1, 100%, 100%, 0.5);
  --folder-item-hover-bg: #2c292d;
  --folder-child-hover-bg: #918c8e;
  --folder-icon-hover-text: hsl(20, 100%, 66%);
  --folder-item-hover-text: hsl(20, 100%, 66%);
  --folder-child-hover-text: hsl(20, 100%, 66%);

}


.wrap { -webkit-transition-duration: 0.2s; }
body { background-image: var(--page-bg-image); background-size: cover; background-position: center center }
	#main { padding: calc(2.5vw - 1em) 2.5vw 0 2.5vw !important; display: flex; left: 0%; width: auto !important; margin: 0 !important; background-color: var(--page-bg-tint); height: calc(100vh - (2.5vw - 1em)); overflow-y: auto; }
	#main .column { margin: 1em; padding: 0 !important; }
		#main .column > ul > li { margin-top: 1em; }
		#main .column > ul > li > .folder { display: inline-flex; background: var(--folder-header-bg); width: 100%; font-weight: bold; border-radius: 0.2em; }
			#main .column > ul > li > .folder .icon { display: none; }
		#main .column > ul > li > .folder + div { background-color: var(--folder-body-bg); padding-top: 1em; }
			#main .column > ul > li > .folder + div .icon {  }

	#main .column:first-child { margin-right: auto !important; width: calc(14.285% - 2em) !important; }
		#main .column:first-child  > ul > li:first-child { margin-top: 0; }
			#main .column:first-child > ul > li > div { padding: 1em 1em 0 1em !important; }
				#main .column:first-child > ul > li > div > ul  { display: flex; flex-wrap: wrap; justify-content: space-around; }
					#main .column:first-child > ul > li > div > ul > li { display: inline-block; margin: 0 0.8em 0.4em 0; }
						#main .column:first-child > ul > li > div > ul > li > a { height: 36px; width: 36px; padding: 2px !important; position: relative; color: transparent; }
						#main .column:first-child > ul > li > div > ul > li > a:hover { background: var(--folder-icon-hover-bg); }
							#main .column:first-child > ul > li > div > ul > li > a .icon { width: 32px; height: 32px; margin: 0; position: absolute; top: 2px; left: 2px; }
	#main .column:last-child { margin-left: auto !important; width: calc(14.285% - 20px) !important;  }
		#main .column:last-child  > ul > li:first-child { margin-top: 0em; }

	#main .column:not(:first-child):not(:last-child) {  flex: 0 1 calc(65.715% - 6em); }
		#main .column:not(:first-child):not(:last-child) > ul { display: flex; flex-wrap: wrap; }
			#main .column:not(:first-child):not(:last-child) > ul > li { flex: 1 1 calc(30% - 2em) !important; margin: 0 1em 1em 1em;  }
				#main .column:not(:first-child):not(:last-child) > ul > li > div { max-width: 100%; over-flow-x: hidden; }
			#main .column:not(:first-child):not(:last-child) > ul > li:first-child { flex: 1 1 100% !important; margin: 0 1em 1em 1em;  }
				#main .column:not(:first-child):not(:last-child) > ul > li:first-child > div > ul > li { display: inline-block; margin: 0 0.8em 0.4em 0; }
					#main .column:not(:first-child):not(:last-child) > ul > li:first-child > div > ul > li > a { height: 36px; width: 36px; padding: 0 0.2em !important; position: relative; }
					#main .column:not(:first-child):not(:last-child) > ul > li:first-child > div > ul > li > a:hover { background: var(--folder-icon-hover-bg); }
						#main .column:not(:first-child):not(:last-child) > ul > li:first-child > div > ul > li > a .icon { width: 32px; height: 32px; margin: 0; position: absolute; top: 2px; left: 2px; }


	#main a { font-size: 12px; color: #FFFFFF;  -webkit-transition-duration: 0.2s; line-height: 2; padding-left: 0.8em; padding-right: 0.8em; }
	#main a:not(.folder):hover { background-color: var(--folder-item-hover-bg); color: var(--folder-item-hover-text); box-shadow: none; box-shadow: none; }
	#main a.folder:hover { background-color: var(--folder-child-hover-bg); color: var(--folder-child-hover-text); box-shadow: none; box-shadow: none; }
	#main a + div { padding-left: 1em; }
	
	#options_button { opacity: 1; right: 30px !important; }
	.hide-focus #main { position: absolute; left: 0; right: 0; top: 0; bottom: 300px; overflow-y: auto; }
	#options { height: 300px !important; overflow-y: auto; bottom: 0; top: initial; right: 0; left: 0; background: #EEE; }
	#options .section:last-child fieldset:first-child { display: none; }
	#options .section:last-child textarea { width: 100%; height: 233px }