/* Document */
html, body {
  height: 100%;
  margin: 0;
}

body{
	font-family: "jost";
	font-size: 16px;
	font-weight: normal;
	line-height: 1em;
}

/* Main */
main{
	display: flex;

	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	max-width: 960px;
	height: 100%;
	margin: 0px auto;
	padding: 2% 4% 2% 6%;
}


/* Header */
header{
	position: relative;
}
h1{
	position: relative;
	z-index: 10;
	margin: 20px 0px 0px 0px;

	font-size: clamp(24px, 17.6vw, 88px);
	font-family:"purplehaze-bold";
	font-weight: normal;
	line-height: 1em;
	/* white-space: nowrap; */

	color: #5a28f9;
}
h1 span{
	font-family: 'purplehaze-regular';
	font-size: clamp(20px, 10vw, 49px);
	font-weight: normal;
	line-height: 1em;

	vertical-align: bottom;

	color: #ff000c;
}
h2{
	position: absolute;
	top: 0px;
	right: 4%;

	display: flex;
	align-items: center;
	justify-content: center;

	width: clamp(40px, 40vw, 160px);
	height: clamp(40px, 40vw, 160px);
	padding: 10px;
	border-radius: 50%;

	font-size: clamp(12px, 6vw, 22px);
	font-weight: 600;
	line-height: 1.2em;

	text-transform: uppercase;
	text-align: center;

	color: #ffff00;
	background-color: #fcaefa;

	rotate: 6.5deg;
}

/* Article */
article{
	margin-top: clamp(14px, 10vw, 42px);
	margin-bottom: clamp(14px, 10vw, 42px);
	padding: 0px 18% 0px 16%;

	font-family: 'purplehaze-regular';
	font-size: clamp(11px, 4vw, 16px);
	font-weight: normal;
	line-height: 1.3em;

	color: #000000;
}
article p{
	margin: 0px 0px 1em 0px;
}

/* Footer */
footer{
	width: 100%;
	padding: 0px 18% 0px 16%;
}

/* Navigation */
nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
	max-width: 420px;
}
nav a{
	flex: 0 0 32%;

	border-radius: 10px;

	font-size: clamp(18px, 4vw, 22px);
	font-weight: 600;
	line-height: 2.2em;

	text-align: center;
	text-transform: lowercase;
	text-decoration: none;

	color: #5a28f9;
	background-color: #06fe02;
}

/* MD */
@media only screen and (max-width: 1280px) {



}

/* SM */
@media only screen and (max-width: 992px) {



}

/* XS */ 
@media only screen and (max-width: 767px) {

	main{
		padding: 0px 2% 0px 2%;
	}
	article{
		margin-top: clamp(14px, 8vw, 42px);
		margin-bottom: clamp(14px, 4vw, 42px);
		padding: 0px 2% 0px 2%;
	}
	footer{
		padding: 0px 2% 0px 2%;
	}


}