/*
	Kathryn Thomas Hastings
	Designer, developer, and strategist
	Living in Seattle, Washington USA
	kathrynthomashastings.co

	landing.css
*/



/* Imports */

@import 'reset.css';
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/* Animations */

@keyframes redrumredrum { 
	0% { background-position: right; }
	50% { background-position: left; }
	100% { background-position: right; }
}

@keyframes shine {
	0% { opacity: 1; mask-position: 0% 0%; }
	100% { opacity: 1; mask-position: 100% 100%; }
}



/* Elements */

html { 
	font-size: 10px;
}

body { 
	width: 100vw;
	height: 100vh;
	background: #ebecee url('../images/snow.jpg') no-repeat fixed;
	background-size: cover;		
	font: normal 200 01.5rem/01 roc-grotesk-compressed, sans-serif;
	color: #ebecee;
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1 { 
	font: normal 200 25.2rem/00.9 roc-grotesk-compressed, sans-serif;
	mask-image: linear-gradient( 60deg, transparent 36% , #ebecee, transparent 64%);
	mask-size: 234%;
	animation: 9s linear 3s infinite running shine;
}

h1 span { 
	display: inline-block;
	background: linear-gradient(148.59deg, #ebecee 2.66%, rgba(0, 34, 90, 0.6) 53.2%, #bd162d 68.87%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}

a, a:visited { 
	background: linear-gradient(90deg, #bd162d,#ebecee,#bd162d);
	background-size: 200% 200%;
	-webkit-background-clip:text;
	background-clip: text;
	font: normal 200 06rem/01 roc-grotesk-compressed, sans-serif;
	color: rgba(235, 236, 238, 1);
	text-decoration: none;
	animation: redrumredrum .2s ease-in-out;
	transition: color .2s ease-in-out;
	&:hover { 
		color:rgba(0,0,0,0);
	}
}

.gradient .fa-brands { 
	background: linear-gradient(90deg, #bd162d,#ebecee,#bd162d);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: redrumredrum .2s ease-in-out;
	transition: color .2s ease-in-out;
	&:hover {
		color:rgba(0,0,0,0);
	}
}



/* Classes */

.fa-imdb { display: inline-block; margin-right: -00.2rem; padding-right: 00.2rem; font-size: 04.8rem; }
.separator { position: relative; padding-right: 01.2rem; }
.separator:after { content: "|"; position: absolute; top: 01.2rem; right: -00.4rem; font-size: 50%; }



/* IDs */

#main { width: 60%; position: fixed; bottom: 06rem; margin-left: 20%; text-align: center; }
#main > div { margin: 00 auto; display: inline-block; text-align: left; }
#main > div h2 { font: normal 300 01.5rem/01 "Barlow Semi Condensed", sans-serif; }
#main > div ul { font-size: 06rem; }
#main > div ul li { display: inline-block; }
#main > div ul li:not(:last-child) { margin-right: 01.2rem; }
#main > div#written-directed h2 span.title { margin: 00.3rem 00.6rem 00 00; float: left; text-align: right; }
#main > div#written-directed h2 span.credit { font: normal 200 06rem/01 roc-grotesk-compressed, sans-serif; }
#main > footer { font: normal 300 01.5rem/02.4 "Barlow Semi Condensed", sans-serif; text-transform: none; }



/* Media queries - (375), 980, 1700, max */

@media screen and (max-width: 920px) { 
	h1 { font-size: 20.2rem; mask-size: 300%; }
	a, a:visited { font-size: 04.8rem; }
	.fa-imdb { font-size: 03.8rem; }
	.separator:after { top: 00.9rem; }
	#main { width: 90%; margin-left: 05%; }
	#main > div h2 { font-size: 01.2rem; }
	#main > div ul { font-size: 04.8rem; }
	#main > div#written-directed h2 span.credit { font-size: 04.8rem; }
	#main > footer { font-size: 01.2rem; }
}

@media screen and (max-width: 820px) { 
	#main { width: 90%; margin-left: 05%; }
}

@media screen and (max-width: 620px) { 
	h1 { font-size: 16.2rem; }
	a, a:visited { font-size: 03.8rem; }
	.fa-imdb { font-size: 03rem; }
	.separator:after { top: 00.76rem; }
	#main > div h2 { font-size: 01rem; }
	#main > div ul { font-size: 03.8rem; }
	#main > div#written-directed h2 span.credit { font-size: 03.8rem; }
	#main > footer { font-size: 01rem; }
}

@media screen and (max-width: 480px) { 
	h1 { font-size: 13rem; }
	a, a:visited { font-size: 03.4rem; }
	.fa-imdb { font-size: 02.7rem; }
	.separator:after { top: 00.7rem; }
	#main > div h2 { font-size: 00.9rem; }
	#main > div ul { font-size: 03.4rem; }
	#main > div#written-directed h2 span.credit { font-size: 03.4rem; }
	#main > footer { font-size: 00.9rem; }
}



/* */



/* Extra */
/* 
@keyframes shine1 { to { background-position: 200% top; } }
h1#shine1 { 
	background: linear-gradient(45deg, transparent 36%, color(display-p3 0.925 0.925 0.933), transparent 64%);
	background-size: 200% auto;
	-webkit-background-clip: text;
		background-clip: text;
	-webkit-text-fill-color: transparent;
		text-fill-color: transparent;
	animation: shine1 11s linear infinite; }
@keyframes shine2 { 
	0% { opacity: 1; mask-position: 0% 100%; }
	25% { opacity: 1; mask-position: 100% 0%; }
	75% { opacity: 1; mask-position: 0% 100%; } }
h1#shine2 { 
	mask-image: linear-gradient(45deg, #ebecee, transparent, #ebecee);
	mask-size: 300%;
	animation-name: shine2;
	animation-duration: 9s;
	animation-iteration-count: infinite;
	animation-timing-function: linear; }
@keyframes vortext {
	0% { opacity: 1; mask-position: 0% 0%; }
	100% { opacity: 1; mask-position: 100% 100%; } }
h1#polar-vortext {
	font-size: clamp( 5rem, 20vw, 20rem );
	mask-image: linear-gradient( 45deg, #ebecee 0% , #ebecee 15%, transparent 20%, rgba(255,255,255,.15) 25%,  transparent 33%, rgba(255,255,255,.25) 35%, transparent 40%, #ebecee 50%, #ebecee 100% );
	mask-size: 2000%;
	animation: 30s linear 2s infinite running vortext; }
button {
	position: relative;
	display: inline;
	margin: 00;
	margin-right: -06px;
	margin-left: -06px;
	padding: 01px 00 00 00;
	font: normal 300 01.8rem/01 "Barlow Semi Condensed", sans-serif;
	font-size: 01.8rem;
	color: #ebecee;
	text-transform: uppercase;
	background: transparent;	
	border: 00;
	border-bottom-width: 00.1rem;
	border-style: solid;
	justify-content: left;
	align-items: left;
	border-image: linear-gradient(to right, #ebecee, #bd162d) 1; }
button:hover { 
	background: linear-gradient(to right, #ebecee 12.25%, #bd162d 68.87%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	border-image: linear-gradient(to right, #ebecee, #bd162d) 1;	
	animation: redrumredrum 3s ease alternate infinite; }
 */



/* Das Ende */