/* GENERAL */

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

*{
		font-family: "Inter", sans-serif;
		color: #eee;
		font-kerning: auto;
		font-feature-settings: "liga" 0;
		letter-spacing: 0.012em;
		font-optical-sizing: auto;
  		font-weight: 400;
  		font-style: normal;
				}

body {
			
		height: 100%;
		margin: 0;
		padding: 0;
		position: relative;
}


a:link, a:active, a:visited{
		text-decoration: none;
		color: #ffffff;
		font-family: "Inter", sans-serif;
		font-style: normal;
		font-size: inherit;	
		letter-spacing: 0.012em;
		}
		
a:hover{	
			color: #ffff00;
			text-decoration: underline;
		}
	
.monogram{
	width: 2em;
	margin-bottom: 5em;
}

.gray{
	color: #666!important; 
	}
	
.gray a:link, a:active, a:visited a:hover {
	color: #666!important; }

.smaller, .contact, .talks, li talks{
	 	font-style: normal;
	 	font-weight: 300;
		max-width:700px;
		color: #ccc;
		font-size: 0.9em;
		line-height: 1.4em;
		letter-spacing: 0.01em;		
	}
	
.redacted{
background-color:#FFFFFF;
}
							
#theBeef{
	text-align:left;
	height: 100%;
	padding: 1em;
 	padding-bottom: 0; 
   	min-width:350px;
	max-width:850px;
	margin: auto;
	z-index: 2;
}

#section, #section-gap{
	margin-top: 5em;
	min-width:350px;
	max-width:850px;	
}

#blackOverlay{
	background-color:#000;
	opacity:0.0;
	position:fixed;
	top:0;
	width:100%;
	height:100%;
	z-index: -1;
	/*padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
*/
	
}
/* MOBILE */

@media (max-width:640px) 
		 { 
			
html {
	display: inherit;
	background: url('/img/samin portrait 001.jpg') no-repeat;
	background-attachment:scroll;
    background position:left top;
    background-size:cover; 
	background-color: #000000;
	width: 100%;
  	height: 100vh;
}

.unfix-ios-bg {
    @supports (-webkit-touch-callout: none) {
        background-attachment: initial !important;}
        }

p{
	font-weight: 300;
	font-style: normal;
	font-size: 0.9em;
	line-height: 1.4em;
	display:inherit;
	margin-bottom: 2em;
	margin-top: 2em;
	margin-left, margin-right: 2em
}

#theBeef{
	margin-top: -6em;
}

.preface{
	font-size: 0.9em;
	line-height: 1.4em;
	}

#section, #section-gap{
	margin-top: 0em;
}


h1{
	font-size: 14em;
	line-height: 0.4em;
	font-family: "Playfair Display", serif;
	display:inherit;
	margin-bottom: 180px;
	margin-top: 2em;
	font-weight: 300;
}
#mobilebg{
	display: inherit;
	background: url('/img/samin portrait 001.jpg') no-repeat;
	background-attachment:scroll;
    background position:left top;
    background-size:cover; 
  	box-sizing: border-box; /*Not necessary in this situation*/
  	display: block; /*Not necessary, but we do want it this way*/
  	width: 100vw;  /*Not necessary, but we do want it this way*/
  	height: 100vh; /*Necessary.  100vh = 100% of the viewport height*/
  	padding: 0; /* No padding */
  	margin: 0; /* No margins */ 
  	z-index: 1;}

a:link, a:active, a:hover, a:visited{
letter-spacing: 0.01em;		
	}
}	
	
/* DESKTOP */

@media (min-width:641px) {
html {
		
		height: 100%;
				overflow: auto;
				background-color: #000000; 
				background: url('/img/samin frame 001.jpg') no-repeat center center fixed; 
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-o-background-size: cover;
            background-size: cover;
            width: 100%;
            height: 100vh;
}
p{
	font-weight: 300;
	font-style: normal;
	font-size: 1.1em;
	line-height: 1.5em;
	display:inherit;
	margin-bottom: 0em;
	margin-top: 1em;
}

h1{
	font-size: 20em;
	line-height: 0.4em;
	font-family: "Playfair Display", serif;
	display:inherit;
	margin-bottom: 1.1em;
	margin-top: 1em;
	font-weight: 300;
}

#mobilebg{
	display: none; }


.preface{
	font-size: 1.5em;
	line-height: 1.4em;
	font-weight: 600;
	color: #fff;
	width: 95%;
	margin: 0 0 1.8em 0;
	letter-spacing: -0.012em;
	}
}