/*RESET*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{overflow-y:scroll;overflow-x:hidden}




/*BASE*/

html {
	color: #f1f1f1;
	background-color: #181818;
	font-size: 16px;
	line-height: 1.6;
	font-family: 'Inter', sans-serif;
}

em {
	font-style: italic;
}

*::selection { background-color: #f44336; }





/*SPLASH*/

.splash {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
	background-image: url('goat.jpg');
	background-size: 120%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #000;
}
@media screen and (min-width: 1000px) {
	.splash {
		background-size: 60%;
	}
}

.splash .veil {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	background-color: #313131;
	opacity: 0.5;
}

.splash h1 {
	position: relative;
	padding: 10%;
	font-family: 'Oswald', sans-serif;
	font-size: 35px;
	text-align: center;
	opacity: 0;
	animation-name: splashtitle;
	animation-delay: 0.7s;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}
@media screen and (min-width: 1000px) {
	.splash h1 {
		font-size: 72px;
	}
}

@keyframes splashtitle {
	from {opacity: 0; }
	to {opacity: 1;}
}

.scroller {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	display: flex;
	justify-content: center;
	width: 20px;
	height: 35px;
	border: 1px solid white;
	border-radius: 9999px;
	cursor: pointer;
	opacity: 0;
	animation-name: scrollerfadein;
	animation-delay: 4s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

@keyframes scrollerfadein {
  from {opacity: 0; }
  to {opacity: 0.4;}
}

.scroller>span {
	position: absolute;
	top: 5px;
	left: 2px;
	right: 2px;
	margin: auto;
	width: 4px;
	height: 4px;
	background: white;
	border-radius: 9999px;
	opacity: 0;
	animation-name: scrollerdot;
	animation-delay: 1s;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes scrollerdot{
	0% { opacity:0; transform: translateY(0); }
	50% { opacity:0; transform: translateY(0); }
	75% { opacity:1; transform: translateY(5px); }
	100% { opacity:0; transform: translateY(12px); }
}





/*AUTHOR*/

.author {
	padding: 10rem 0 10rem 0;
	font-family: 'Oswald', sans-serif;
	text-align: center;
}





/*CONTENT*/

.content {
	margin: 0 auto;
	padding: 0 3rem 0 3rem;
	width: 100%;
	max-width: 750px;
}

.dropcap {
	float: left;
	padding-top: 5px;
	padding-right: 8px;
	padding-left: 0px;
	font-size: 5rem;
	line-height: 4rem;
	color: #f1f1f1;
}

.content p {
	margin-top: 2rem;
}

hr {
	margin: 5rem auto 5rem 0;
	border: none;
	border-top: 1px solid #f44336;
	width: 20%;
}





/*FOOTER*/

footer {
	margin-top: 10rem;
	padding: 5rem 0;
	text-align: center;
	font-size: small;
	color: #313131;
	background-color: #fff;
}

footer img {
	width: 100%;
	max-width: 300px;
}