/* HALF N HALF SCROLL https://stackoverflow.com/questions/15453410/independent-column-scroll-in-html-page */

@font-face {
	font-family: GT Super Text;
	src: url("../fonts/GTSuperText-Book.otf");
	font-style: normal;
}
@font-face {
	font-family: GT Super Text;
	src: url("../fonts/GTSuperText-BookItalic.otf");
	font-style: italic;
}

@font-face {
	font-family: GT Super Display Light;
	src: url("../fonts/GTSuperDisplay-Light.otf");
	font-style: normal;
}
@font-face {
	font-family: GT Super Display Light;
	src: url("../fonts/GTSuperDisplay-LightItalic.otf");
	font-style: italic;
}
/*@font-face {
	font-family: GT Super Display Reg;
	src: url("../fonts/GTSuperDisplay-Regular.otf");
	font-style: normal;
}
@font-face {
	font-family: GT Super Display Reg;
	src: url("../fonts/GTSuperDisplay-RegularItalic.otf");
	font-style: italic;
}*/

@font-face {
	font-family: Neue Plak;
	src: url("../fonts/NeuePlak-SemiBold.otf");
}

* {
	font-family: GT Super Text;
	font-style: normal;
	font-size: 16px;
	line-height: 32px;

	cursor: crosshair;
}

::-webkit-scrollbar { /* WIDTH */
	width: 5px;
}

::-webkit-scrollbar-track { /* BACKGROUND */
	/*background: rgb(230,190,180);*/
}

::-webkit-scrollbar-thumb { /* HANDLE */
	background: black; 
}

::-webkit-scrollbar-corner {
	/*background: rgb(230,190,180);*/
}

body {
	/*background: rgb(200,220,200);*/
}

.wrapper {
	position: fixed;
	display: grid;
	grid-template: auto / 1fr 3fr; /* ROWS / COLUMNS */
	top: 0px;
	left: 0px;
	width: calc(100%);
    height: calc(100%);
}


.left {

}

.right {
    height: calc(100% - 16rem);
	margin: 4rem 4rem 4rem 4rem;
	padding: 4rem;
    overflow: auto;

	border: solid 1px black; 
	background: white;
}



::selection {
	color: white;
	background: rgba(0,0,0,0.99); /* WebKit/Blink Browsers */
}
::-moz-selection {
	color: white;
	background: rgba(0,0,0,0.99); /* Gecko Browsers */
}




.cursor-arrow {
	position: fixed;
	width: 0.25rem;
	height: 0.25rem;

	border-top: 1px solid black;
	border-left: 1px solid black;
}

.cursor-text {
	position: fixed;
	height: 10px;
	padding: 3px 7px 8px 7px;

	font-size: 1rem;
	line-height: 1rem;
	text-align: center;
	white-space: nowrap;

	border: solid 1px black; 
	color: black;
	mix-blend-mode: multiply;
}




img {
	width: 100%;
	mix-blend-mode: multiply;
}





p {
	margin-top: 0;
}

.italic {
	font-style: italic;
	line-height: 1.5rem;
}

.main-title {
	position: fixed;
	top: 0;
	left: 0;
	margin: 3.2rem;

	font-family: GT Super Display Light;
	font-style: normal;
	font-size: 5rem;
	line-height: 5rem;
}

.main-title:hover {
	font-style: italic;
	cursor: help;
}

.desc {
	margin-top: 16rem;
	margin-left: 3.6rem;
	line-height: 1.5rem;

	opacity: 0;
}

.desc:hover {
	opacity: 1;
}

.records {
	position: fixed;
	bottom: 0;
	left: 0;
	margin-left: 4rem;
	margin-bottom: 3.2rem;

	font-family: GT Super Text;
	font-size: 1rem;

	z-index: 100;
}

.title {
	font-family: GT Super Display Light;
	font-style: normal;
	font-size: 1.5rem;
	margin: 1rem 0rem 1rem 0rem;

	font-variant-numeric: lining-nums;
}

.title:hover {
	font-style: italic;
}

.normal {
	font-style: normal;
}

.italic {
	font-style: italic;
}

.italic:hover {
	font-style: normal;
}

.folder-title {
	margin-left: 2rem;

	font-variant-numeric: lining-nums;
}

.hanger-title {
	margin-top: 1rem;
}

.item {
	margin-left: 4rem;

	font-variant-numeric: oldstyle-nums;
}

.archive-item {
	background: black;

	font-variant-numeric: oldstyle-nums;
}

.archive-item:hover {
	font-style: normal;
	cursor: crosshair;
}






a {
	margin-top: 0px;
	color: black;
	text-decoration: none;
}

a.italic {
	text-decoration: underline;
}

a:hover {
	font-style: italic;

	cursor: alias;
}