/*
Theme Name: sofiaponte v2
Author: Mariana Rosa
Author URI: marianarosa.com
Description: 
Version: 2.0.01
License: marianarosa.com
*/


html {
	font-size: 16px;
}

body {
	word-wrap: break-word;
	font-size: 0.75rem;
	font-weight: normal;
	font-family: 'IBM Plex Mono', monospace;
	line-height: 1.4;
	color: #000000;
	margin: 0;
    padding: 0;
}

header {
	padding-bottom: 3rem;
}

h1, 
h2 {
	display: block;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: normal;
	font-size: 1.8rem;
	line-height: 1.2;
	margin: 0;
	padding: 0;
	padding-bottom: 0.25rem;
}

h3 {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	line-height: 1.3;
	font-weight: normal;
	font-family: 'IBM Plex Mono', monospace;
	padding: 0 0.2rem;
    text-transform: uppercase;
    display: inline-block;
    color: white;
}

.upper {
	text-transform: uppercase;
}

.mn {
	font-size: 0.75rem;
	font-weight: normal;
	font-family: 'IBM Plex Mono', monospace;
}

p a,
.hlink {
	text-decoration: none;
	border-bottom: 1px dashed !important;
	/*text-transform: capitalize;*/
	/*opacity: 0.4;*/
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

p a:hover,
.hlink:hover {
	border-bottom: 1px solid !important;
	/*opacity: 1;*/
}

span.mn {
	display: block;
}

sup {
    line-height: 0;
    font-size: 0.4rem;
}

p {
	margin: 0;
}

footer {
	position: absolute;
    bottom: 0;
    z-index: 100;
    padding: 1rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.6rem;
}

body a { color: #000000; }
#projects, #projects a { color: #FF0000; }
#teaching, #teaching a  { color: #005000; }
#writings, #books, #writings a, #books a { color: #0000A8; }

#about { z-index: 1; }
#news { z-index: 2; }
#projects { z-index: 3; }
#teaching { z-index: 4; }
#writings { z-index: 5; }
#books { z-index: 6; }

#about .copyright {
	position: absolute;
    bottom: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.6rem;
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}


/* Images and wp-captions should always fit and be responsive */
img {
	display: block;
	height: auto;
	max-width: 100%;
}
img[class*="wp-image-"] {
	margin-bottom: 0.25rem;
}
.wp-caption {
    border: none;
    margin: 0;
    max-width: 100%;
    padding: 0;
}
.wp-caption.aligncenter {
	margin-bottom: 10px;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
}

.caption,
.wp-caption .wp-caption-text {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.6rem;
	display: block;
}



/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}


/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/* Content */
.main-content-inner {
	padding-bottom: 1.5em;
}
.hentry {
	margin: 0 0 2.5rem;
}
.sticky {
	display: block;
}
.bypostauthor {
	display: block;
}


/* Clearing */
.clear {
	clear: both;
}


/**
* Some WP Theme Repository requirements
*/

.entry-meta {
	clear: both;
}

/* styles for _sp_pagination und _sp_link_pages */
nav form.tk-page-nav,
nav .input-group,
nav .input-group-btn,
nav .form-control {
    display: inline;
}

/* MR */

.container {
    display: flex;
    width: 100%;
    height: 100vh;
}

.stack {
    width: 50vw;
    overflow: hidden;
    box-shadow: -4px 0px 10px 0px rgb(0 0 0 / 25%);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.stack:hover {
	width: 60vw;
}

.stack.open:hover {
	width: auto;
}


/*@media (hover: none) {
	.stack:hover {
		width: 50vw;
	}
}*/

.stack.open {
	flex-shrink: 0;
}


.stack-inner {
    width: 50vw;
}

.page-title {
	cursor: pointer;
}



.page-contents {
	position: relative;
	display: flex;
	/*padding-bottom: 6rem;*/
	overflow-x: hidden;
    overflow-y: scroll;
	height: 100vh;
}

/*.page-contents:hover {
	overflow-y: scroll;
}*/

.page-contents ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}


.left-col,
.right-col {
	margin: 1rem;
}

.left-col { 
	flex: 1;
	height: fit-content;
    padding-bottom: 4rem;
}

.right-col { 
	flex: 2.16;
}



.left-col a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: all 0.2s ease;
}

.left-col a:hover,
.left-col a.current {
    /*padding-bottom: 0.1em;*/
    border-bottom: 1px solid;
}

.right-col p {
	padding-bottom: 0.75rem;
}

.entry-content-thumbnail {
	/*margin-top: 0.5rem;*/
    padding-bottom: 1rem;
}


#news .entry-content-thumbnail img {
	max-height: 100px;
    width: auto;
}

#books .entry-content-thumbnail img {
    max-height: 25rem;
    width: auto;
}


/*.list {
	line-height: 1.1;
}*/

.list li {
    padding-bottom: 0.75rem; /* should be 0.5 for projects */
}

.sub-projects.list li {
	padding-bottom: 0;
}

.list a {
	font-size: 0.75rem;
    font-family: 'IBM Plex Mono', monospace;
}

ul.sub-projects {
	display: none;
    margin-left: 1rem;
}

span.tag {
    display: inline-block;
    margin-right: 1rem;
}

.gallery {
	padding-bottom: 1rem;
}

.gallery li {
    padding-bottom: 0.5rem;
}

.gallery li .caption {
    padding-bottom: 1.5rem;
}

#teaching h3 {
	background-color: #005000;
}

#news h3 {
    background-color: #000000;	
}

#writings h3 {
    background-color: #0000A8;	
}


section {
	padding-bottom: 3rem;
}

#teaching section p {
	font-size: 0.75rem;
	font-family: 'IBM Plex Mono', monospace;
}


#teaching section strong {
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: normal;
}


article {
	display: block;
	padding-bottom: 3rem;
}

/*#projects article:not(:first-of-type)*/ 
#projects article {
	display: none;
}

#projects article.active {
	display: block;
}

article header,
.specifications {
	padding-bottom: 1rem;
}

#projects article header {
    padding-bottom: 2rem;
}

/* MEDIA QUERIES */

@media (min-width: 1600px) {
	html {
		font-size: 18px;
	}
}

@media (max-width: 1200px) {
	.stack,
  	.stack.open,
  	.stack-inner {
	    width: 60vw;
	}

	.stack:hover {
		width: 80vw;
	}

	.left-col { 
		flex: 0.8;
	}

	.right-col { 
		flex: 2;
	}

}

@media (max-width: 1024px) {
	.stack,
  	.stack.open,
  	.stack-inner {
	    width: 70vw;
	}
}

@media (max-width: 768px) { 

	.stack,
  	.stack.open,
  	.stack-inner {
	    width: 80vw;
	}

  	.page-contents {
	    flex-direction: column;
	}

	.left-col,
	.right-col {
	    width: calc(100% - 2rem);
	}

	.left-col {
		min-height: 16rem;
	}

	ul.projects.list {
	    display: none;
	}

	#projects article {
	    display: block;
	}

	#about .copyright {
		position: relative;
	    margin-top: 2rem;
	}

}