@font-face {
	font-family: "Lisping Wisps";
	src: url(../fonts/LispingWispsVF.ttf);
}

@font-face {
	font-family: "Outward Gum";
	src: url(../fonts/OutwardGumVF.ttf);
}

@font-face {
	font-family: "Authentic";
	src: url(../fonts/inAUTHENTICSansVF.ttf);
}

@font-face {
	font-family: "Necto";
	src: url(../fonts/NectoMonoSLIDEVF.ttf);
}

@font-face {
	font-family: "GeoPlat";
	src:url(../fonts/GeoPlatDisplayVF.ttf)
}


/* Default styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;


}

a {
  color: inherit;         
  text-decoration: none;       
}

body {
	font-family: "Lisping Wisps";
	font-variation-settings: "THIK" 10;
	letter-spacing: 10px;
	font-size: 20px;
	background-color: black;
}

.heading {
	display: flex;
	width: 100vw;
	flex-wrap: wrap;
	font-family: "Lisping Wisps";
	transition: 2s;
	letter-spacing: 10px;
	font-size: 2.8vw;
	background-color: Black;
	color: azure
}

.heading:hover {
	font-variation-settings: "THIK" 100;
	color: greenyellow
}

.inline-heading-logo{
	width: 6.5vw;
	height: auto;
	transition: 2s;
}

.still {
	display: flex;
	width: 100vw;
	padding: 10px;
	padding-left: 28px;
	overflow: hidden;
	background-color: greenyellow;
	font-family: "Authentic";
	font-variation-settings: "VARI" 0;
	transition: .4s;
	font-size: 15px;
}

.still:hover {
	font-variation-settings: "VARI" 80;
}



.sliding {

	font-size: 30px;
	color: azure;
	font-family: "Lisping Wisps";
	transition: 1s;
	animation-name: idle-animation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.sliding:hover {
	letter-spacing: 18px;
	font-weight: 50;
	font-variation-settings: "THIK" 100;
	animation-play-state: paused;
}

@keyframes idle-animation {
	0% {
		font-size: 30px;
		font-variation-settings: "DISP" 0;

	}

	50% {
		font-size: 30px;
		font-variation-settings: "DISP" 100;
	}

	100% {
		font-size: 30px;
		font-variation-settings: "DISP" 0;
	}
}

.testparagraph1 {
	overflow: hidden;
	display: flex;
	align-items: left;
	white-space: nowrap;
	flex-direction: column;
	width: 100vw;
	height: 34vw;
	letter-spacing: 5px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	color: greenyellow;
	transform: skewY(-35deg);
	position: absolute;
	top: 200px;
	line-height: 1.2em;
	font-size: 3.5vw;
	transition: .5s;
	font-family: "Lisping Wisps";
	font-variation-settings: "DISP" 0;
	z-index: 1;
}


.testparagraph1:hover {
	transform: translateY(10px);
	animation-name: wisp-scatter;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	z-index: 5;
	transform: skewY(-25deg);
	color: black;
	background-color: greenyellow;
	
}

.testparagraph1:active {
	transform: skewY(0deg);

}

@keyframes wisp-scatter {
	0% {
		font-variation-settings: "THIK" 0, "DISP" 0;
	}

	25% {
		font-variation-settings: "THIK" 100, "DISP" 0;
	}

	50% {
		font-variation-settings: "THIK" 0, "DISP" 80;
	}

	75% {
		font-variation-settings: "THIK" 100, "DISP" 80;
	}

	100% {
		font-variation-settings: "THIK" 0, "DISP" 0;
	}
}

.testparagraph2 {
	overflow: hidden;
	display: flex;
	align-items: left;
	white-space: nowrap;
	flex-direction: column;
	width: 100vw;
	height: 34vw;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	color: greenyellow;
	transform: skewY(-35deg);
	position: absolute;
	top: calc(200px + 20vw);
	font-family: "Outward Gum";
	letter-spacing: 0px;
	line-height: 1.2em;
	font-size: 5.7vw;
	font-variation-settings: "HGHT" 0;
	transition: .5s;
	z-index: 2;
}

.testparagraph2:hover {

	transform: translateY(-20px);
	animation-name: gum-stretch;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	z-index: 5;
	transform: skewY(-25deg);
	color: black;
	background-color: greenyellow;

}

.testparagraph2:active {
	transform: skewY(0deg);

}

@keyframes gum-stretch {
	0% {
		font-variation-settings: "HGHT" -100;
	}

	50% {
		font-variation-settings: "HGHT" 100;
	}

	100% {
		font-variation-settings: "HGHT" -100;
	}
}

.testparagraph3 {
	overflow: hidden;
	display: flex;
	align-items: left;
	white-space: nowrap;
	flex-direction: column;
	width: 100vw;
	height: 32vw;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	color: greenyellow;
	transform: skewY(-35deg);
	position: absolute;
	top: calc(200px + 40vw);
	font-family: "Necto";
	letter-spacing: 0px;
	line-height: 1.2em;
	font-size: 3.33vw;
	transition: .5s;
	z-index: 3;
}

.testparagraph3:hover {
	transition: .5s;
	transform: translateY(-20px);
	letter-spacing: 10px;
	animation-name: necto-stretch;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	z-index: 5;
	transform: skewY(-25deg);
	color: black;
	background-color: greenyellow;
}


.testparagraph3:active {
	transform: skewY(0deg);
	
}

@keyframes necto-stretch {
	0% {
		font-variation-settings: "VARI" 0;
	}

	50% {
		font-variation-settings: "VARI" 100;
	}

	100% {
		font-variation-settings: "VARI" 0;
	}
}


.testparagraph4 {
	overflow: hidden;
	display: flex;
	width: 100vw;
	height: 27.77vw;
	padding-top: 15px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	color: greenyellow;
	transform: skewY(-35deg);
	position: absolute;
	top: calc(200px + 60vw);
	font-family: "GeoPlat";
	letter-spacing: 0px;
	line-height: 1.9em;
	font-size: 3vw;
	text-align: center;
	transition: .5s;
	z-index: 4;
}

.testparagraph4:hover {
	transition: .5s;
	transform: translateY(-20px);
	animation-name: geoplatAnimate;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	z-index: 5;
	transform: skewY(-25deg);
	color: black;
	background-color: greenyellow;
}

.testparagraph4:active {
	transform: skewY(0deg);
	
}

@keyframes geoplatAnimate{

	0% {
		font-variation-settings: "SHPE" 0;
	}

	50% {
		font-variation-settings: "SHPE" 100;
	}

	100% {
		font-variation-settings: "SHPE" 0;
	}

}

/*
.testparagraph5 {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	flex-direction: column;
	width: 100vw;
	height: 400px;
	padding-top: 15px;
	background-color: black;
	color: greenyellow;
	transform: skewY(-35deg);
	position: absolute;
	top: 1885px;
	font-family: "GeoPlat";
	letter-spacing: 0px;
	line-height: 80px;
	font-size: 43px;
	text-align: center;
	transition: .5s;
	z-index: 4;
}

.testparagraph5:hover {
	transition: .5s;
	transform: translateY(-20px);
	animation-name: geoplatAnimate;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	z-index: 5;
	transform: skewY(-25deg);
	color: black;
	background-color: greenyellow;
}

.testparagraph5:active {
	transform: skewY(0deg);
}

.testparagraph6 {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	flex-direction: column;
	width: 100vw;
	height: 400px;
	padding-top: 15px;
	background-color: black;
	color: greenyellow;
	transform: skewY(-35deg);
	position: absolute;
	top: 1485px;
	font-family: "Lisping Wisps";
	font-variation-settings: "DISP" 0;
	letter-spacing: 0px;
	line-height: 1em;
	font-size: 5vw;
	text-align: center;
	transition: .5s;
	z-index: 4;
}

.testparagraph6:hover {
	transition: .5s;
	transform: translateY(-20px);
	animation-name: geoplatAnimate;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	z-index: 5;
	transform: skewY(-25deg);
	color: black;
	background-color: greenyellow;
}

.testparagraph6:active {
	transform: skewY(0deg);
}
*/

/* menu bar */
.menu {
	font-family: "Authentic";
	display: flex;
	margin: 10px;
	gap: 0px;
	font-size: 20pt;
	width: 80vw;
	text-align: center;
	transition: .5s;
	flex-wrap: wrap;
}


.menu p {
	background-color: black;
	color: greenyellow;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 25px;
	padding-right: 25px;
	transition: .5s;
	border-radius: 0px;
	font-size: 15pt;
	letter-spacing: 4px;

}

.menu p:hover {
	flex-grow: .15;
	font-variation-settings: "VARI" 100;
	border-radius: 20px;
	background-color: greenyellow;
	color: black;
}

.menu a{
	transition: 0.5s;
}
.menu a:hover {
	flex-grow: .15;
	font-variation-settings: "VARI" 100;
	border-radius: 20px;
	background-color: greenyellow;
	color: black;
}

.contact-info{
 display: none;
 transition: 0.5s;
}

.contact {
	transition: 0.5s;
}
.contact:hover {
	flex-grow: .15;
}

.contact:hover + .contact-info {
display: block;
color: azure;
font-family: "Authentic";
}


/* menu bar */

.bottomtext {
	display: flex;
	margin: 10px;
	padding: 15px;
	width: 540px;
	font-family: "Authentic";
	font-size: 49px;
	letter-spacing: 1px;
	color: greenyellow;
	background-color: black;
	position: absolute;
	top: 105vw;
	left: calc(100vw - 550px);
	text-align: right;
	z-index: 4;
}


.specimen-header {
	display: flex;
	margin: 10px;
	padding: 15px;
	width: 100vw;
	background-color:black;
	color: greenyellow;
	
}

.font-bio {
	display: flex;
	margin: 10px;
	padding: 15px;
	width: 100vw;
	background-color:black;
	color: azure;
	font-size: 1vw;
	top: 100px; 
	left: 60vw;
	letter-spacing: normal;
}


input[type=text], select {
width: 100vw;
border: 3px solid black;
background-color: black;
color: greenyellow;
}

.specimen-1 {
width: 100vw;
border: 3px solid black;
background-color: black;
color: greenyellow;

	display: flex;
	margin: 10px;
	padding: 15px;
	width: 100vw;
	background-color:black;
	color: greenyellow;
	--tester-thickness: 0;
	--tester-dispersal: 0;
	--tester-letter-spacing: 1;
	--tester-font-size: 6;
	font-variation-settings: "THIK" var(--tester-thickness), "DISP" var(--tester-dispersal);
	font-size: calc(var(--tester-font-size) * 1vw);
	letter-spacing: calc(var(--tester-letter-spacing) * var(--tester-font-size) / 3);
}


.specimen-2 {
	display: block;
	margin: 0;
	padding: 20px;
	padding-bottom: 40px;
	width: 100vw;
	top: 1000px;
	background-color:greenyellow;
	color: black;
	font-size: 2vw;
	letter-spacing: 3px;
	transition: .5s;
	text-align: center;

}

.specimen-2:hover {
background-color:black;
	color: greenyellow;
}



.flowing-rows {
  width: 100vw;
  overflow: hidden; 
  white-space: nowrap;
  box-sizing: border-box;
  padding: 1.5vw 0;
  background-color: black;
  color: greenyellow;
  text-align: left;
  transition: .5s;
}

.flowing-rows:hover {
	background-color: rgb(42, 63, 11);
}

.flowing-rows-1 {
font-size: 2.5vw; 
font-family:'Lisping Wisps';
display: inline-block;
opacity: 0%;
  animation: textFlowing1 linear infinite;
  animation-duration: 60s;
}

@keyframes textFlowing1 {
  0% {
	opacity: 100%;
    transform: translateX(100vw);
  }
  50% {
	opacity: 100%;
    transform: translateX(-105vw);
  }

  100% {
	opacity: 100%;
    transform: translateX(100vw);
  }
}


.flowing-rows-2 {
font-size: 2.5vw; 
font-family:'Lisping Wisps';
display: inline-block;
opacity: 0%;
  animation: textFlowing2 linear infinite;
  animation-duration: 90s;
}

@keyframes textFlowing2 {
  0% {
	opacity: 100%;
    transform: translateX(100vw);
  }
  50% {
	opacity: 100%;
    transform: translateX(-155vw);
  }

  100% {
	opacity: 100%;
    transform: translateX(150vw);
  }
}

.flowing-rows-3 {
font-size: 1.5vw; 
font-family:'Lisping Wisps';
letter-spacing: 1px;
display: inline-block;
opacity: 0%;
  animation: textFlowing3 linear infinite;
  animation-duration: 120s;
}

@keyframes textFlowing3 {
  0% {
	opacity: 100%;
    transform: translateX(99vw);
  }

  100% {
	opacity: 100%;
    transform: translateX(-805vw);
  }

}