*	{ 
	color: #FFFFFF;
}


h1	{ 
	font-family: 'Clash Display', sans-serif;
	font-size: 3rem; 
	font-weight: 500; 
	letter-spacing: 0.05em;  
	line-height: 1.2em; 
	margin-top: 0.5em; 
	margin-bottom: 1em;
}



h2	{ 
	font-family: 'Clash Display', sans-serif;
	font-size: 1.5em;
	letter-spacing: 0.3em; 
	font-weight: 500;  
	max-width: 70%; 
	}


body {
	padding-left: 80px;
	padding-top: 60px;
	max-width: 82%;
	background-color: #000000;
	}



.copytext {
	font-family: 'Clash Grotesk', sans-serif;
	font-weight: 300;
	font-size: 1rem; 
	letter-spacing: 0.06em;  
	line-height: 1.8em; 
	max-width: 70%; 
}	

.content {
	padding-bottom: 2.5rem;

}

.footnote {
	font-size: 0.75rem; 
	font-family: 'Clash Grotesk', sans-serif;
	font-weight: 300;
	letter-spacing: 0.06em;  
	position: fixed;
	transform: rotate(-90deg) translateX(100%);
	transform-origin: bottom right;
	right: 0;
	bottom: 0;
	padding: 15px;

}


a 	{
	text-decoration: none; 
	font-family: 'Clash Grotesk', sans-serif;
	font-weight: 500;
	letter-spacing: 0.1em; 
}

a:hover	{ 
	color: #ffc2c2;
}			



/* C U R S O R*/


#cursor {
  /*necessary:*/
  position: fixed;
  pointer-events: none;
  top: -100px; /*outside at page-load*/
  left: -100px; /*outside at page-load*/
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: #ffc2c2;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-family: 'Clash Grotesk', sans-serif;
  color: transparent;
  transition: 
    .3s height,
    .3s width,
    .3s border-radius,
    1s color;
  overflow: hidden;
}

#cursor.active {
  color: #000;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50px;
}



/* B U T T O N S */

.effect-btn {
  position: relative;
  overflow: hidden;
  font-family: 'Clash Display', sans-serif;
	font-size: 1em;
	letter-spacing: 0.03em; 
	font-weight: 500;  
  padding: .5rem 1.5rem;
  border: 1px solid #ffc2c2;
  border-radius: 5px;
  background-color: transparent;
  transition: .5s color;
  color: #ffc2c2;
  margin-right: 5px;
  margin-bottom: 10px;
}

.effect-btn span, 
.effect-btn a {
  position: relative;
  color:inherit;
}

.effect-btn__ripple {
  position: absolute;
  height: 0%;
  width: 0%;
  background-color: #ffc2c2;
  border-radius: 50%;
  transform: translate( -50%, -50%);
  transition: .5s width, .5s height;
}

.effect-btn:hover {
  color: #000;
}

.effect-btn:hover .effect-btn__ripple {
  width: 400px;
  height: 400px;
}




footer	{ 
	font-size: 35px; 
	/* position: fixed; */
	bottom: 30px; 
	left: 30px; 
	z-index: 1; 
	} 




@media only screen and (max-width: 750px) {
h1 { font-size: 30px !important;
	max-width: 100%;
	line-height: 1.3em !important;
}


body {
	padding-left: 30px !important;
	padding-top: 30px !important;
	max-width: 80% !important;
 }

 .copytext {
 	max-width: 90%;
 }
}