@media only screen and (max-width: 550px) {
  header {
    padding-top: 0.1ex;
  }

  .big-only {
  	display: none;
  }

  .portrait.small-only img {
  		max-width: min(250px, 85%);
  		display: block;
  		margin-left: auto;
  		margin-right: auto;
  }
}

@media only screen and (min-width: 551px) {
	.small-only {
		display: none;
	}

	header {
		padding-top: 5ex;
  	}
}

.portrait {
	margin-top: 1em; 
	margin-left: 5%;
	margin-right:5%;
	flex: 35%;
}

body {
	font-family: 'Cormorant';
	background-color: rgb(60, 64, 61);
	color: hsl(0,0%,10%);
	margin: 0;
}

h1, h2 {
 font-family: 'Crimson Text', serif;
}

a {
	color: rgb(0, 122, 110);
}


.abstract {
	display: inline;
	position: relative;
}

.abstract:not(.expanded) .abstract-text {
	display: none; 
}

.abstract:not(.expanded):before {
	font-family: 'Cormorant';
	content: "Abstract";
	position: absolute;
	display: inline;

	border-left: 1px solid black;
	padding-left: 0.5em;
	margin-left: 0.5em;
}

.abstract:not(.expanded):after {
	content: "\f078";
    margin-right: .5em;
    top: 0.7ex;
    left: 6.3em;
    font-family: "Font Awesome 5 Free";
    font-size: 9pt;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
    font-style:normal;
    font-variant:normal;
    text-rendering:auto;
    line-height:1;
    font-weight: 700;
    position: absolute;
}

.abstract.expanded:before {
	font-family: 'Cormorant';
	content: "Abstract";
	position: absolute;
	display: inline;

	border-left: 1px solid black;
	padding-left: 0.5em;
	margin-left: 0.5em;
}

.abstract.expanded:after {
	content: "\f077";
    margin-right: .5em;
    top: 0.7ex;
    left: 6.3em;
    font-family: "Font Awesome 5 Free";
    font-size: 9pt;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
    font-style:normal;
    font-variant:normal;
    text-rendering:auto;
    line-height:1;
    font-weight: 700;
    position: absolute;
}

.abstract .abstract-text {
	font-style: italic;
}

header {
	width: 100%;
	padding-bottom: 1ex;
	text-align: center;
	color: hsl(84, 13%, 95%); 
	background: rgb(183, 50, 37);
}

header a {
	color: white;
}

header a:visited {
	color: white;
}


header h1 {
	font-variant: "bold";
	font-size: 42pt;
	line-height: 0.95ex;
}

header h4 {
	margin-left: 2em; 
	margin-right:2em;
}

h2 {
	color: rgb(183, 50, 37);
	font-size: 18pt;
	margin-bottom: 1.25ex;
}

footer {
	width: 100%;
	position: absolute;
 	bottom: 0;
  	height: 2.5rem
	padding-top: 1ex;
	padding-bottom: 5ex;
	text-align: center;
}

.outer {
	max-width: 800px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-color: hsl(84, 13%, 95%);
	min-height: 100vh;
	margin-top: 0;
	margin-bottom: 0;
	box-shadow: 0px 0px 28px 0px hsl(0, 0%, 10%);
}

.main {
	padding-top: 3.5ex;
	padding-bottom: 3.5ex;
	margin-left: 3.5em;
	margin-right: 3.5em;
	display: flex;
}

.content {
	flex: 65%;
	padding-bottom: 2.5rem;
}

.portrait img {
	width: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0px 0px 3px 1px hsl(0, 0%, 60%);
}

.paper-title {
	font-weight: 700;
}

.paper {
	padding-bottom: 2ex;
	margin-bottom: 2ex;
	border-bottom: 2px solid hsl(0,0%, 75%);
}

.document-link {
	display: inline-block;
}

.arXiv::after {
	content: "arXiv";
}

.info {
	display: inline-block;
	margin-left: max(2ex,5%);
	margin-right: max(2ex, 5%);
}

.email:before {
            content: attr(data-website) "\0040" attr(data-user);
            unicode-bidi: bidi-override;
            direction: rtl;
        }