/* CUSTOM FONTFACE */

@font-face {
    font-family: HK Grotesk;
    src: url(../fonts/FKRasterGroteskCompact-Blended.woff2) format("woff2"),
         url(../fonts/FKRasterGroteskCompact-Blended.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
} 

:root {
  --dark: black;
  --green: #00FF57;
  --font-family: 'IBM Plex Mono', monospace;
  --titles: 'HK Grotesk', monospace;
	--font-thesis: 'IBM Plex Sans', sans-serif;
  --font-size: 90%;
  --font-height: 18px;
  --font-weight: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-spacing: 0em;
  --font-scale-xs: 0.75em;
  --font-scale-s: 0.88em;
  --font-scale-m: 1.1em;
  --font-scale-l: 2.50em;
  --font-scale-xl: 4.50em;
  --font-scale-xxl: 10.5em;
  --mob-padding: 15px;
  --spacing-xs: 1rem;
  --spacing-s: 1.5rem;
  --spacing-m: 40px;
  --spacing-l: 60px;
  --cursor: url(../images/cross.svg), crosshair;
  font-size: var(--font-size);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  letter-spacing: var(--font-spacing);
  color: var(--dark);
  cursor: var(--cursor);
}
  
  @media screen and (max-width: 1200px) {
  :root {
  --font-scale-xxl: 6em;
  }
 }

  @media screen and (max-width: 700px) {
  :root {
  --font-scale-xs: 0.62em;
  --font-scale-s: 0.75em;
  --font-scale-m: 1.1em;
  --font-scale-l: 1.2em;
  --font-scale-xl: 2.0em;
  --font-scale-xxl: 3.0em;
  --spacing-xs: 10px;
  --spacing-s: 14px;
  --spacing-m: 20px;
  --spacing-l: 40px;
  --spacing-xl: 60px;
  --spacing-xxl: 90px;
  }
}

/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* WEBSITE SPECIFIC (GLOBAL) */

/**
 * Smooth scrolling on the whole document
 */
 html {
	scroll-behavior: smooth;
}

a {
	text-decoration: none;
	color: var(--dark);
	cursor: var(--cursor)
}

h1, h2, h3, .back {
	font-family: var(--titles);
}

h1 {
	font-size: var(--font-scale-xxl);
	max-width: calc(100vw - 200px);
	hyphens: auto;
	margin: -6px 0 2rem -3px;
}

nav, h1, h2, h3, h4 {
	text-transform: uppercase;
}

h2 {
	font-size: var(--font-scale-xl)
}

h3 {
	font-size: var(--font-scale-l)
}

.flipped {
	filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
	ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
	-moz-transform: rotate(-180deg); 
	-o-transform: rotate(-180deg);  
	-webkit-transform: rotate(-180deg); 
	position: fixed; 
	right: -2px;
	top: -2px;
	font-size: var(--font-scale-m);
	z-index: 3;
}

.flipped a {
	padding: 10px 10px 0 0;
}

.flipped a:hover {
	color: var(--green);
}

/* HOME */

.fade-out-siblings {
  pointer-events: none;
}

.fade-out-siblings > * {
  pointer-events: auto;
}

.fade-out-siblings:hover > * {
  filter: blur(15px);
}

.fade-out-siblings:hover > *:hover {
  filter: blur(0px);
}

.fade-out-siblings h2 {
	position: absolute;
	max-width: 600px;
}

.fade-out-siblings a {
	color: var(--dark);
}

/* CURRENTLY READING */

.currently-reading {
	border: 2px solid var(--green);
	position: fixed;
	display: flex;
	right: 0;
	bottom: 0;
	background: linear-gradient(270deg, #00E64E 0%, rgba(196, 196, 196, 0) 131.85%);
	padding: 1.5rem;
	transform: translateX(224px);
	transition: .5s;
}

.currently-reading:hover {
	transform: translateX(0px);
}

.currently-reading .side {
	display: inline-block;
}

.side {
	writing-mode: vertical-rl;
	-webkit-text-orientation: mixed;
	text-orientation: mixed;
	/*inline-size: 180px;*/
	margin-left: 1rem;
	height: 184px;
	font-size: 16px;
}

.side h4 {
	font-size: var(--font-scale-m);
}

.currently-reading img {
	height: 184px;
	width: auto;
	display: inline-block;
	padding-right: .4rem
}

.book-title {
	max-width: 200px;
	margin-left: 1.4rem;
	font-family: var(--titles);
	font-size: 22px;
	text-transform: uppercase;
}

/* INFO & WORKS */

main {
	background: white;
	position: relative;
	z-index: 1;
	margin-bottom: 200px;
}

.container {
	max-width: 1500px;
	margin-right: 200px;
}

.block-type-cv {
	width: 60%;
	line-height: 1.35;
	margin: var(--spacing-s) 0;
}

.block-type-cv details {
	margin: var(--spacing-xs) 0;
	padding: 0 var(--spacing-s);
}

.block-type-cv summary:hover, .block-type-text a:hover {
	color: var(--green);
}
.block-type-cv summary:focus { 
	outline: thin dotted;
}
.cv-category {
	text-decoration: underline;
	margin-top: var(--spacing-xs);
}
.achievement-year {
	padding-right: var(--spacing-s);
}

.block-type-text {
	width: 60%;
	line-height: 1.35;
	margin: var(--spacing-s) 0;
}

.block-type-text a {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--green);
	-webkit-text-decoration-line: underline;
	-webkit-text-decoration-style: dotted;
	-webkit-text-decoration-color: var(--green);
}

.block-type-text p {
	margin: var(--spacing-xs) 0;
	padding-left: var(--spacing-s);
}

.block-type-image {
	margin-top: 1px;
}

.block-type-image figure img {
	margin-top:-1px;
	width: 100%;
	border-bottom: 1px solid var(--dark);
}

.block-type-image figure, .block-type-video figure {
	display: flex;
	align-items: flex-end;
}

.video-container {
	width: 60%;
	border-bottom: 1px solid var(--dark);
}

.video-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.block-type-video figure figcaption, .block-type-image figure figcaption {
	text-align: right;
	width: 40%;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--dark);
}

.img-container {
	width: 60%
}
.img-wrapper {
  width: 100%;
  height: 0;
  position: relative;
  background-color: var(--dark);
}
.wrapped-img {
  width: 100%;
  height: auto;
  position: absolute;
}

figcaption::before {
	content:'';
	width: var(--spacing-xs);
	display: inline-block;
}

.block-type-heading {
	margin: 1.8rem 0 1.2rem var(--spacing-xs);
}

.back {
	position: fixed;
	right: -3px;
	bottom: 31px;
	height: 100px;
}

.back a {
	font-size: var(--font-scale-xxl);
}

.back:hover a {
	color: var(--green);
}

.back img {
	margin: 0 -3px 1px 0;
	display:inline
}

@media screen and (max-width: 1200px) {
	main {
	margin-bottom: 150px;
	}
	.fade-out-siblings h2 {
	font-size: var(--font-scale-l)
	}
	h1 {
	margin: -3px 0 2rem -1px;
	}
	.container {
	max-width: 100%;
	margin-right: var(--spacing-xs);
	}
	.back {
	right: -1px;
	bottom: 75px;
	height: 0px;
	}
	.back img {
	margin: 0 -3px 0px 0;
	height: 72px;
	}
}

@media screen and (max-width: 700px) {
	main {
	margin-bottom: 90px;
	}
	.info-container {
	margin-top: var(--spacing-l)
	}
	.container {
	margin-right: 0;
	}
	h1 {
	margin: var(--spacing-l) 0 var(--spacing-m) -1px;
	max-width: 100vw;
	}
	.fade-out-siblings h2 {
	position: static;
	padding: var(--spacing-xs);
	font-size: var(--font-scale-xl)
	}
	.fade-out-siblings {
	margin-top: var(--spacing-l);
	}
	.img-container, .block-type-cv, .video-container, .block-type-image figure img, .block-type-text {
	width: 100%;
	}
	.block-type-text p {
	padding: 0 var(--spacing-s);
	}
	.block-type-image figure, .block-type-video figure {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--dark);
	}
	.block-type-video figure figcaption, .block-type-image figure figcaption {
	text-align: left;
	width: initial;
	padding: 2px var(--spacing-s) 4px var(--spacing-s);
	border-bottom: none;
	}
	figcaption::before {
	content: none
	}
	.back {
	right: -1px;
	bottom: 37px;
	height: 0px;
	}
	.back img {
	margin: 0 -3px 0px 0;
	height: 36px;
	}
	.fade-out-siblings:hover > * {
	filter: initial;
	}

	.fade-out-siblings:hover > *:hover {
	filter: initial;
	}
}

/* THESIS PAGE */

/* Video work */
.video-work {
	position: relative;
}
.video-work .block-type-video {
margin: 0!important;
}
.video-work .video-container {
	border-bottom: none
}
.video-work .block-type-video {
	width: 100% !important;
}
.video-text {
	display: flex;
	justify-content: space-between;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.video-text * {
	padding: 25px;
	text-transform: uppercase;
	color: white !important
}

.thesis h1 {
	font-size: 24px;
	padding: 20px 25px;
	margin: 0 !important
}
.thesis .title-wrapper {
	width: calc(100% - 8rem);
	border-bottom: 1px solid var(--dark);
}
.thesis .page {
  /* display: grid;
  grid-template-columns: 325px auto; */
}
.thesis .sidebar {
  position: sticky;
	top: 0;
	z-index: 2;
}
.thesis .thesis-menu nav {
  padding-left: 25px;
}

.thesis main {
  /* grid-column-start: 2; */
	background-color: transparent;
}
.thesis .sidenote, .thesis figcaption, .thesis cite, form.login div, .alert, .thesis footer {
  font-size: 12px;
  line-height: 1;
	font-family: var(--font-family);
}
.thesis .index {
  margin: 1rem 0;
}

/* THESIS INTRO */

#thesis {
	letter-spacing: .08em;
}

.thesis .intro-container {
  /* max-width: calc(var(--center-width) + 100px); */
	margin-left: 20vw
}

.thesis .intro-container .block-type-markdown, .intro-container .block-type-image figure, .intro-container .block-type-text p, .intro-container .block-type-heading {
  width: 100%;
}

.thesis .intro-container h2 {
  font-family: var(--titles);
  font-size: 22px;
  text-transform: initial
}

.thesis .intro .block-type-text p {
	font-size: 19px;
}

.thesis .intro {
  /* width: 100%; */
  background-color: var(--green);
  padding: 4rem 4rem 4rem 4rem;
	margin-right: 8rem
}

.thesis .intro .block-type-image figure {
	max-width: 100%;
}

.thesis .intro .img-container {
	width: 30%;
	margin: 0 auto;
}

.thesis .intro .block-type-image figure img {
	width: 100%;
	border-bottom: none
}

.thesis .intro .block-type-text {
	width: 100%;
}

.thesis .intro .block-type-text p {
	max-width: 100%;
	padding-left: 0;
}

/* THESIS BLOCKS */
.thesis-blocks {
	
}
.thesis .block-type-image figure,
.thesis .block-type-video figure {
display: block
}

.thesis .block-type-image figure figcaption,
.thesis .block-type-video figure figcaption {
display: inline;
border: none
}

.thesis .thesis-blocks .block-type-heading,
.thesis .thesis-blocks .block-type-markdown,
.thesis .thesis-blocks .block-type-text p,
.thesis .thesis-blocks .block-type-list {
  margin-left: calc(20vw + 10rem);
	padding-left: 0;
}

.thesis .thesis-blocks .block-type-quote p {
  max-width: 800px;
	margin-left: calc(20vw + 10rem);
	font-family: var(--font-thesis);
	font-size: 16px;
	line-height: 22px;
	font-style: italic;
	padding-left: 1.5rem;
}

.thesis .thesis-blocks .block-type-quote footer {
	max-width: 800px;
	margin-left: calc(20vw + 10rem);
	padding-left: 1.5rem
}

.thesis .thesis-blocks .block-type-quote footer::before {
	content: "-";
}

.thesis .thesis-blocks .block-type-text p {
	max-width: 800px;
	font-family: var(--font-thesis);
	font-size: 16px;
	line-height: 22px;
}

.thesis .thesis-blocks .block-type-text, .thesis .thesis-blocks .block-type-quote {
	width: 70%
}

.thesis .block-type-text, .thesis .block-type-quote, .thesis .block-type-image, .thesis .block-type-heading, .thesis .block-type-video, .thesis .block-type-list {
	/* width: 100%; */
	line-height: 1.35;
	margin: 1.5rem 0;
}

.thesis .thesis-blocks .img-container {
	width: 70%
}

.thesis .img-wrapper {
	background: transparent;
}

.thesis .block-type-image figure img {
	width: 100%;
	border-bottom: none
}

.thesis .video-container {
	width: 100%;
}
.thesis .video-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}
.thesis .video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.thesis figcaption, cite {
  text-align: center;
  margin: .5rem 0;
  display: block;
}

.thesis footer {
  margin: .5rem 0;
}

@media screen and (max-width: 1200px) {

	.video-work .block-type-video {
		max-width: 100% !important;
	}

	.thesis .intro .block-type-image figure {
		width: 100%;
	}
	.thesis .sidebar {
  position: relative;
  width: initial;
}
	.thesis .intro {
  width: initial;
	margin-right: initial
}
	.thesis .page {
  display: block;
  padding: 20px;
}
	.thesis .thesis-blocks .block-type-text p, .thesis .thesis-blocks .block-type-markdown, .thesis .thesis-blocks .block-type-image figure, .thesis .thesis-blocks .block-type-heading, .thesis .thesis-blocks .block-type-video, .thesis .thesis-blocks .block-type-list {
  max-width: 100%;
	margin-left: 0px;
	padding-left: 20px;
}
	.thesis .block-type-quote p {
  max-width: calc(65% - 1.75rem);
}
	.thesis .delete-on-mobile {
  display: none
}
	.thesis .delete-on-desktop {
  display: block
}
}

@media screen and (max-width: 800px) {
  .thesis  nav {
    font-size: var(--font-scale-s);
  }
  .thesis  .intro-container {
  margin: 1.5rem 0;
  max-width: initial;
  }
  .thesis .block-type-text p, .thesis .block-type-markdown, .thesis .block-type-image figure, .thesis .block-type-heading, .thesis .block-type-video, .thesis .block-type-list {
    max-width: 100%;
  }
  .block-type-quote p {
    max-width: calc(100% - 2rem);
  }
}

@media screen and (max-width: 500px) {
  .thesis h1 {
  font-size: 9vw;
  }
	.thesis .title-wrapper {
		width: 100%
	}
}