@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

body {
	font-family: 'Inter var', 'Inter';  
	font-size: 20px;  
	line-height: 1;
}   

body.homepage {
	background-color: #000000;
	background-image: url("home-page-bg.jpg"); 
  background-size: cover;   
	background-position: center; 
}  

body.preview-page {
	background-color: #000000;
	background-image: url("sos_cover2.jpg"); 
  background-size: cover;   
	background-position: center; 
}      

body.contributors-page {
	background-color: #000000; 
	background-image: url("editors_intro_bw_final.jpg"); 
  background-size: cover;    
	background-position: center; 
}      
  
body.purchase-page {
	background-color: #000000;
	background-image: url("purchase.png"); 
  background-size: cover;     
	background-position: center; 
}        
   
header {
	position: absolute;
	right: 64px;
	top: 40px;
	background-color: #ffffff;
	height: 400px;
	width: 400px;  
	padding: 26px 24px;
}  

h1 {
	font-size: 36px;
	font-weight: 800;
  letter-spacing: -1px;
  line-height: 0.9; 
}
   
h2 {
	font-size: 36px;
	font-weight: 375;
	letter-spacing: -1px;
	line-height: 1.1;
	margin-top: 4px;
} 
h3 {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -1px;
	margin-bottom: 20px;
} 
  
h4 {
	font-size: 32px;
	letter-spacing: -1px;
	font-weight: 400;
	text-decoration: underline solid transparent;
}    

p {
	margin-bottom: 20px;
} 

p.back {
	margin-bottom: 8px;
} 

a {
	color: #000000;
	font-weight: 400;
	text-decoration: underline solid transparent;
} 

a:hover {
	text-decoration: underline solid #000000 2px;
	transition: all 0.4s;     
}

a.header-link {
	text-decoration: none;
}

a.header-link:hover {
	text-decoration: none;
}   
    
h4:hover {
	text-decoration: underline solid #000000 2px;
  font-weight: 600;  
	letter-spacing: -1px;    
	transition: all 0.4s;             
}        
  
.underline {
	border-bottom: solid 2px;
	line-height: 1;
	display: inline-block;
}          
  
.homepage-section {
	margin-left: 84px;
	margin-top: 640px;
	background-color: #ffffff;
	height: 320px; 
	width: 350px;
	padding: 26px; 
	margin-bottom: 600px;
}       
  
.preview-section {  
	margin-left: 84px;
	margin-top: 640px;
	background-color: #ffffff;
	height: auto;  
	width: 350px;
	padding: 26px 16px 16px 26px; 
	margin-bottom: 200px;  
}  

.contributors-section {  
	margin-left: 84px;
	margin-top: 640px;
	background-color: #ffffff;
	height: auto;  
	width: 350px;
	padding: 26px 16px 16px 26px; 
	margin-bottom: 200px;  
}  
  
 
.right-align {
	text-align: right;
} 

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
	z-index: -1;
}   

.mobile-only {
	display: none;
}  

.no-mobile {
	display: inline;
}

input, textarea, select {
  font: inherit;
  margin: 6px;  
  padding: 12px;
  color: #5F5A5A;
  border: 1px solid #000;
  background-color: #fff;
  width: 289px;
	resize: none;
	border-radius: 0;
	webkit-border-radius: 0;
}     
  

input[type="submit"] {
  transition: color 0.4s;
	margin-bottom: 28px;
	border-radius: 0;
}     
  
input[type="submit"]:hover {
  color: #000;
  transition: color 0.4s;
}  
 

@media (max-width: 666px) {
	h1, h2 {
		font-size: 30px;
	}

	h4 {
		font-size: 28px;
	}

	header {
		position: relative;
		width: 300px;
		height: 300px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 32px auto; 
	}  

	.homepage-section {
		position: relative;
		width: 300px;
		height: 282px;
		top: 0;
		left: 0;
		right: 0;   
		bottom: 0;
		margin: 86px auto 240px auto;
	}    

	.preview-section {
		position: relative;
		width: 300px;
		height: auto;
		top: 0;   
		left: 0;
		right: 0;   
		bottom: 0;
		margin: 86px auto 240px auto;
	}    

	.contributors-section {
		position: relative;
		width: 300px;
		height: auto;
		top: 0;   
		left: 0;
		right: 0;   
		bottom: 0;
		margin: 86px auto 240px auto;
	}      

	video {
		display: none; 
	}

	.mobile-only {
		display: inline;
	}

	.no-mobile {
		display: none;
	} 

	input, textarea, select {
  font: inherit;
  margin: 6px;  
  padding: 12px;
  color: #5F5A5A;
  border: 1px solid #000;
  background-color: #fff;
  width: 242px;
	resize: none;
	}        

input[type="submit"] {
  transition: color 0.4s;
	margin-bottom: 28px;
	border-radius: 0;
	padding: 8px;
	font-size: 18px;
	}     
}