/* Import fonts */
@font-face {
	font-family: "AUTHENTICSansdot";
	src:url("../fonts/AUTHENTICSansdotVF.ttf")
}
@font-face {
	font-family: "AUTHENTICSansAmorphous";
	src:url("../fonts/AUTHENTICSansAmorphousVF.ttf")
}
@font-face {
	font-family: "Magneti";
	src: url("../fonts/MagnetiVF.ttf");
}
@font-face {
	font-family: "MagnetiEXTREME";
	src: url("../fonts/MagnetiEXTREMEVF.ttf");
}
@font-face {
	font-family: "Opti";
	src: url("../fonts/OptiVF.ttf");
}
@font-face {
	font-family: "Logo";
	src: url("../fonts/mutatelogoVF.ttf");
}
@font-face {
	font-family: "Mold";
	src: url("..//fonts/MoldVF.ttf");
}
/* Default styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "AUTHENTICSansdot";
	font-variation-settings: "VARI" 50;
	font-size: 16px;
	color: white;
	background: black;
	max-width: 100vw;
}
.body-vari {
	font-family: "AUTHENTICSansdot";
	font-variation-settings: "VARI" 0;
	font-size: 16px;
	animation-name: body-vari-animation;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}
	@keyframes body-vari-animation {
	0% {
		font-variation-settings: "VARI" 0;
	}
	50% {
		font-variation-settings: "VARI" 80;
	}
	100% {
		font-variation-settings: "VARI" 0;
	}
}
.body-vari:hover {
	color: rgb(0, 0, 0) ;
	background-color: #ccc;
	transition: 0.3s;
}

.logo {
	font-family: "Logo";
	font-variation-settings: "MUTA" 0;
	font-size: 240px;
	display: flex;
	justify-content: center;
	animation-name: logo-animation;
	animation-duration: 8s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
	@keyframes logo-animation {
	0% {
		font-variation-settings: "MUTA" 0;
	}
	50% {
		font-variation-settings: "MUTA" 50;
	}
	100% {
		font-variation-settings: "MUTA" 0;
	}
}
.logo:hover {
	color: rgb(0, 0, 0) ;
	background-color: #ccc;
	transition: 0.3s;
}

.splashlogo {
	font-family: "Logo";
	font-variation-settings: "MUTA" 0;
	font-size: 400px;
	animation-name: logo-animation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	padding: 20px;
}
	@keyframes logo-animation {
	0% {
		font-variation-settings: "MUTA" 0;
	}
	100% {
		font-variation-settings: "MUTA" 100;
	}

}

.amorphous {
	font-family: "AUTHENTICSansAmorphous";
	font-variation-settings: "MORP" 100, "MOLD" 100;
	font-size: 10vw;
	display: flex;
	align-items: center;
	justify-content: left;
	text-indent: 5vw;
	animation-name: amorphous-animation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes amorphous-animation {
	0% {
		font-variation-settings: "MORP" 0, "MOLD" 0;
	}
	25% {
		font-variation-settings: "MORP" 100, "MOLD" 0;
	}
	50% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	75% {
		font-variation-settings: "MORP" 0, "MOLD" 100
	}
	100% {
		font-variation-settings: "MORP" 0, "MOLD" 0;
	}
}
.amorphous:hover {
	color: rgb(0, 0, 0) ;
	background-color: #ccc;
	transition: 0.3s;
	letter-spacing: 20px;
}

.amorphous-morp {
	font-family: "AUTHENTICSansAmorphous";
	font-variation-settings: "MORP" 100, "MOLD" 0;
	font-size: 10vw;
	display: flex;
	align-items: center;
	justify-content: left;
	text-indent: 5vw;
	gap: 180px;
	animation-name: amorphous-morp-animation;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
}
	@keyframes amorphous-morp-animation {
	0% {
		font-variation-settings: "MORP" 0, "MOLD" 0;
	}
	50% {
		font-variation-settings: "MORP" 100, "MOLD" 0;
	}
	100% {
		font-variation-settings: "MORP" 0, "MOLD" 0;
	}
	
}

.amorphous-mold {
	font-family: "AUTHENTICSansAmorphous";
	font-variation-settings: "MORP" 0, "MOLD" 100;
	font-size: 10vw;
	display: inline;
	animation-name: amorphous-mold-animation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
	@keyframes amorphous-mold-animation {
	0% {
		font-variation-settings: "MORP" 0, "MOLD" 0;
	}
	50% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	100% {
		font-variation-settings: "MORP" 0, "MOLD" 0;
	}
}

.amorphous-morpmold {
	font-family: "AUTHENTICSansAmorphous";
	font-variation-settings: "MORP" 100, "MOLD" 100;
	font-size: 10vw;
	display: inline;
	animation-name: amorphous-morpmold-animation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
	@keyframes amorphous-morpmold-animation {
	0% {
		font-variation-settings: "MORP" 0, "MOLD" 0;
	}
	50% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	100% {
		font-variation-settings: "MORP" 0, "MOLD" 0;
	}
}

.magneti {
font-family: "Magneti";
	font-size: 15vw;
	display: flex;
	align-items: center;
	justify-content: left;
	text-indent: 5vw;
	animation-name: magneti-animation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes magneti-animation {
	0% {
		font-variation-settings: "POOF" 0;
	}
	
	50% {
		font-variation-settings: "POOF" 100;
	}
	
	100% {
		font-variation-settings: "POOF" 0;
	}
}
.magneti:hover {
	color: rgb(0, 0, 0) ;
	background-color:#ccc;
	transition: 0.3s;
	letter-spacing: 20px;
}
.magneti-extreme {
	font-family: "MagnetiEXTREME";
	font-variation-settings: "POOF" 100;
	font-size: 15vw;
	display: flex;
	align-items: center;
	justify-content: left;
	text-indent: 5vw;
	animation-name: magneti-extreme-animation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes magneti-extreme-animation {
	0% {
		font-variation-settings: "POOF" 0;
	}
	
	50% {
		font-variation-settings: "POOF" 100;
	}
	
	100% {
		font-variation-settings: "POOF" 0;
	}
}
.opti {
font-family: "Opti";
	font-variation-settings: "POSI" 100;
	font-size: 180px;
	display: flex;
	justify-content: left;
	text-indent: 5vw;
	animation-name: opti-animation;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
}

@keyframes opti-animation {
	0% {
		font-variation-settings: "POSI" 0;
	}
	
	50% {
		font-variation-settings: "POSI" 100;
	}
	
	100% {
		font-variation-settings: "POSI" 0;
	}
}
.opti:hover {
	color: rgb(0, 0, 0) ;
	background-color:#ccc;
	transition: 0.3s;
	letter-spacing: 20px;
}

.split {
  height: 100%;
  position: fixed;
  z-index: 2;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.left {
  left: 0;
  width: 400px;
  border-right: 1px solid white;
  background: transparent;
}

.right {
  right: 0;
  width: calc(100vw - 400px);
  background: transparent;
}

.container {
  display: grid;
  grid-template-rows: auto;
  padding: 0px;
  gap: 1px;
 }
 .container-left {
	grid-template-rows: 1fr 10fr 14.6fr 1fr;
 }
 .container-right {
	grid-template-rows: auto;
 }
  .container div {
  background: transparent;
  padding: 10px;
  outline: 1px solid white;
  text-align: left;
  }


  @media only screen and (max-width: 800px) {
	.split {
		position: static;
	}
	.left {
		width: 100%;
	}
	.right {
		width: 100%;
	}
  }

  ::-webkit-scrollbar {
  display: none;
}

	.splashscreen {
		/* ———— POSITION ON TOP OF EVERYTHING ———— */
		position: fixed;
		z-index: 9;

		/* ———— FILL UP SCREEN ———— */
		top: 0px;
		left: 0px;
		width: 100vw;
		height: 100vh;

		/* ———— CENTER CONTENT ———— */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		/* ———— BASIC STYLING ———— */
		background-color: rgb(212, 212, 212);
		color: rgb(0, 0, 0);

		/* ———— ANIMATION ———— */
		animation-name: move-out;
		animation-duration: 3s;
		animation-delay: 2s;
		transform: translateX(0%);
		animation-fill-mode: both;
	}
	@keyframes move-out {
		0% {
			transform: translateX(0%);
		}
		100% {
			transform: translateX(100%);
		}
	}

	.container-page1 {
	display: grid;
	grid-template-rows: auto;
	background-color: black;
	}
	
	.page1-header {
	width: 100vw;
	height: 20vh;
	padding-top: 4vh;
	padding-bottom: 1vh;
	background-color: #000000;
	}
	
.amorphous-page1 {
	font-family: "AUTHENTICSansAmorphous";
	font-variation-settings: "MORP" 100, "MOLD" 100;
	font-size: 10vw;
	display: flex;
	align-items: center;
	justify-content: center;
	animation-name: amorphous-animation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
.amorphous-page1:hover {
	color: rgb(0, 0, 0) ;
	background-color: #ccc;
	transition: 0.3s;
	letter-spacing: 20px;
}

	.container-petri {
		position: relative;
		width: 100vw;
		display: grid;
		grid-auto-columns: 700px;
		grid-auto-flow: column;
		justify-content: center;
		overflow-x: scroll;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth; 
		background-color: transparent;
		gap: 50px;
		z-index: 100;
	}
	.column-petri {
		position: relative;
		display: grid;
		scroll-snap-align: center;
		z-index: 100;
	}
	.label {
		display: grid;
		grid-template-columns: 10fr 2fr;
		padding: 5px;
		margin: 10px
	}
		.label-items {
			color: white;
			background-color: black;
			border: 1px solid white;
			padding: 5px;
		}
		
		.label-items:hover {
			color: black;
			background-color: #ccc;
			border: 1px solid black;
			padding: 5px;
		}

	.circle {
		width: 700px;
		height: 700px;
		background-color: rgb(205, 204, 204);
		border-radius: 500px;
		padding: 50px;
		margin: 20px;
		box-shadow: 
			inset 5px 5px 5px rgb(255, 255, 255),
			inset 1px 1px 10px rgb(0, 0, 0);
	}
	.circle-letters {
		font-family: "AUTHENTICSansAmorphous";
		font-variation-settings: "MOLD" 100;
		font-size: 120px;
		color: rgb(212, 212, 212);
		justify-content: center;
		align-items: center;
		text-align: left;
		line-height: 120px;
		text-shadow:
			-1px -1px 0px rgba(255, 255, 255, 0.7),
			1px 1px 0px rgba(0, 0, 0, 0.7), 
			0px 0px 5px rgba(0, 0, 0, 0.3); 

		transition: font-size 0.3s ease-out;
		animation-name: circle-animation;
		animation-duration: 3s;
		animation-iteration-count: infinite;
	}

@keyframes circle-animation {
	0% {
		font-variation-settings: "MORP" 0, "MOLD" 50;
	}
	50% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	100% {
		font-variation-settings: "MORP" 0, "MOLD" 50;
	}
	}

	.circle-letters:hover {
		font-size: 150px;
		animation-name: amorphous-circle-animation;
		animation-duration: 3s;
		animation-iteration-count: infinite;
}

@keyframes amorphous-circle-animation {
	0% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	50% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	100% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	}

		.circle-letters-black3 {
		font-family: "AUTHENTICSansAmorphous";
		font-variation-settings: "MOLD" 100;
		font-size: 80px;
		color: #000000;
		justify-content: center;
		align-items: center;
		text-align: left;
		line-height: 60px;
		transform: translateX(0px);
		text-shadow:
			-2px -2px 2px rgb(255, 255, 255),
			-2px -2px 4px rgb(182, 182, 182),
		    -2px -2px 0 black,
     		2px -2px 0 black,
    		-2px  2px 0 black,
    		2px  2px 2px black,
    		0px  0px 4px black;

		transition: font-size 0.3s ease-out;
		animation-name: circle-letters-black3-animation;
		animation-duration: 3s;
		animation-iteration-count: infinite;
	}

@keyframes circle-letters-black3-animation {
	0% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	50% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	100% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	}

	.circle-letters-black3:hover {
		font-size: 120px;
		transform: translateX(200px);
		animation-name: circle-letters-black3-animation-hover;
		animation-duration: 3s;
		animation-iteration-count: infinite;
}

@keyframes circle-letters-black3-animation-hover {
	0% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	50% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	100% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	}

	

	.circle-letters-black2 {
		font-family: "AUTHENTICSansAmorphous";
		font-variation-settings: "MOLD" 100;
		font-size: 180px;
		color: rgb(0, 0, 0);
		justify-content: center;
		align-items: center;
		text-align: left;
		line-height: 120px;
		text-shadow:
			-2px -2px 0px rgb(226, 225, 225),
		    -2px -2px 0 black,
     		2px -2px 0 black,
    		-2px  2px 0 black,
    		2px  2px 2px black,
    		0px  0px 4px black;

		transition: font-size opacity 0.3s ease-out;
		animation-name: circle-letters-black2-animation;
		animation-duration: 3s;
		animation-iteration-count: infinite;
	}

@keyframes circle-letters-black2-animation {
	0% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	50% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	100% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	}

	.circle-letters-black2:hover {
		font-size: 200px;
		animation-name: circle-letters-black2-animation-hover;
		animation-duration: 3s;
		animation-iteration-count: infinite;
}

@keyframes circle-letters-black2-animation-hover {
	0% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	50% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
	}
	100% {
		font-variation-settings: "MORP" 0, "MOLD" 100;
	}
	}

	.circle-black {
		position: relative;
		width: 700px;
		height: 700px;
		background-color: rgb(0, 0, 0);
		border-radius: 500px;
		padding: 50px;
		margin: 20px;
		box-shadow: 
			inset 5px 2px 5px rgb(255, 255, 255),
			inset 1px 1px 10px rgb(68, 68, 68);
		z-index: 200;
	}

	.circle-black-letters {
	font-family: "Logo";
	font-variation-settings: "MUTA" 0;
	color: black;
	font-size: 800px;
	align-content: center;
	justify-content: center;
	text-shadow:
		-2px -2px 2px rgb(255, 255, 255),
		0px 0px 5px rgba(0, 0, 0, 0.446); 
	margin-top: -120px;
	margin-left: 60px;
	
	animation-name: logo-circle-animation;
	animation-duration: 8s;
	animation-direction: alternate;
	animation-iteration-count: infinite;

	animation-play-state: paused;
}
	@keyframes logo-circle-animation {
	0% {
		font-variation-settings: "MUTA" 0;
	}
	50% {
		font-variation-settings: "MUTA" 100;
	}
	100% {
		font-variation-settings: "MUTA" 0;
	}
}

	.circle-black-letters:hover {
  	animation-play-state: running;
	}
	
	.circle-white {
		width: 700px;
		height: 700px;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 500px;
		padding: 50px;
		margin: 20px;
		box-shadow: 
			inset 5px 2px 5px rgb(0, 0, 0),
			inset 1px 1px 10px rgb(68, 68, 68);
	}

.circle-white-letters {
	font-family: "Logo";
	font-variation-settings: "MUTA" 0;
	color: black;
	font-size: 800px;
	align-content: center;
	justify-content: center;
	text-shadow:
		-2px -2px 5px rgb(255, 255, 255),
		0px 0px 5px rgba(0, 0, 0, 0.446); 
	margin-top: -120px;
	margin-left: 60px;
	animation-name: logo-circle-animation;
	animation-duration: 8s;
	animation-direction: alternate;
	animation-iteration-count: infinite;

	animation-play-state: paused;
}
	@keyframes logo-circle-animation {
	0% {
		font-variation-settings: "MUTA" 0;
	}
	50% {
		font-variation-settings: "MUTA" 100;
	}
	100% {
		font-variation-settings: "MUTA" 0;
	}
}

	.circle-white-letters:hover {
  	animation-play-state: running;
	}	

	span.a {
    display: inline;
	}
	
	.label-bar-black {
		border: 1px solid rgb(212, 212, 212);
		padding: 10px;
		text-align: center;
		color: rgb(212, 212, 212);
		background-color: black;
	}
		
	.container-alphabets {
		position: relative;
		width: 100vw;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
		background-color: black;
		justify-content: center;
		padding: 15vw;
		padding-top: 2.5vw;
		padding-bottom: 2.5vw;
		position: relative;
		}

		.container-alphabets-div {
		position: relative;
		width: 8vw;
		height: 10vw;
		border: 1px solid white;
		background-color:#000000;
		margin: 0px;
		padding: 1vw;
		}

		.container-alphabets-blank {
		width: 8vw;
		height: 10vw;
		background-color:#000000;
		margin: 0px;
		}

		.table-letters {
			position: relative;
			color: rgb(255, 255, 255);
			justify-content: center;
			text-align: center;
			font-family: "AUTHENTICSansAmorphous";
			font-variation-settings: "MORP" 100, "MOLD" 100;
			font-size: 4vw;	
			z-index: 200;

			animation-name: table-letters-animation;
			animation-duration: 3s;
			animation-direction: alternate;
			animation-iteration-count: infinite;

			animation-play-state: paused;
		}
		@keyframes table-letters-animation {
		0% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
		}
		50% {
			font-variation-settings: "MORP" 0, "MOLD" 100;
		}
		100% {
			font-variation-settings: "MORP" 100, "MOLD" 100;
		}

		}

		.table-letters:hover {
			animation-play-state: running;		
		}

		.table-captions {
			font-family: "AUTHENTICSansdot";
			font-variation-settings: "VARI" 50;
			font-size: 0.5vw;
			color: white;
			text-align: center;
			line-height: 1vw;
		}

		.table-header {
			font-family: "AUTHENTICSansAmorphous";
			font-variation-settings: "MORP" 100, "MOLD" 100;
			font-size: 4vw;	
			text-align: center;
			color: white;
			z-index: 10;
    		position: relative; 
			width: 50vw; 
    		margin-top: 6vh;
			margin-bottom: -11vh;
			margin-left: auto;
			margin-right: auto;

			animation-name: table-header-animation;
			animation-duration: 5s;
			animation-iteration-count: infinite;

		}
		@keyframes table-header-animation {
		0% {
		font-variation-settings: "MORP" 100, "MOLD" 100;
		}
		50% {
			font-variation-settings: "MORP" 0, "MOLD" 100;
		}
		100% {
			font-variation-settings: "MORP" 100, "MOLD" 100;
		}
		}

	.container-preview {
		padding: 5vw;
	}

	.label-bar-preview {
		position: relative;
		border: 1px solid rgb(212, 212, 212);
		padding: 1vh;
		text-align: center;
		color: rgb(212, 212, 212);
		background-color: black;
	}

	.preview {
		text-align: center;
		font-family: "AUTHENTICSansAmorphous";
		font-variation-settings: "MORP" 100, "MOLD" 100;
		color: #ccc;
		--tester-morp: 100;
		--tester-mold: 100;
    	--tester-size: 8;
    	font-size: calc(var(--tester-size) * 1vw);
		font-variation-settings: "MORP" var(--tester-morp), "MOLD" var(--tester-mold);
		padding: 5vw;
	}

	/* Slider controls */
	.controls {
		position: relative;
		text-align: center;
		font-family: "AUTHENTICSansdot";
		font-variation-settings: "VARI" 50;
		font-size: 16px;
		color: #ccc;
		z-index: 200;
	}

	.controls input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 150px;
    height: 2px;
    background: #fff;
    outline: none;
    margin: 0 15px;
	}
	.preview:focus {
		outline: none;
	}

	.mold-background-left {
		position: absolute;
		margin: 0px;
		z-index: 1;
		font-family: "Mold";
		font-size: 150px;
		color:rgb(249, 255, 232);
		filter: blur(1px);
		overflow-y: hidden;
		overflow-x: hidden;
	
		animation-name: mold-animation;
		animation-duration: 10s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
}
	@keyframes mold-animation {
	0% {
		font-variation-settings: "MUTA" 0;
	}
	50% {
		font-variation-settings: "MUTA" 100;
	}
	100% {
		font-variation-settings: "MUTA" 0;
	}
}
	.mold-B {
    font-size: 350px;
	color: rgb(82, 88, 66);
	text-shadow:
			-3px -3px 3px rgba(255, 255, 255, 0.7),
			3px 3px 3px rgba(255, 255, 255, 0.7), 
			-3px 3px 3px rgba(255, 255, 255, 0.7), 
			3px -3px 3px rgba(255, 255, 255, 0.7), 
			0px 0px 5px rgba(0, 0, 0, 0.3); 	
}
	.mold-C {
    font-size: 500px;
	padding-left: 10vw;  
	}

	.mold-background-right {
		position: absolute;
		margin-top: -8vh;
		margin-left: 80vw;
		z-index: 2;
		font-family: "Mold";
		font-size: 400px;
		color: #6d796c; 
		text-shadow:
			-3px -3px 3px rgba(255, 255, 255, 0.7),
			3px 3px 3px rgba(255, 255, 255, 0.7), 
			-3px 3px 3px rgba(255, 255, 255, 0.7), 
			3px -3px 3px rgba(255, 255, 255, 0.7), 
			0px 0px 5px rgba(0, 0, 0, 0.3); 
		overflow-y: hidden;
		overflow-x: hidden;
	
		animation-name: mold-animation;
		animation-duration: 10s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}

		.mold-background-bottom-left {
		position: absolute;
		margin-top: 90vh;
		z-index: 2;
		font-family: "Mold";
		font-size: 400px;
		color: rgb(255, 255, 255);
		filter: blur(1px);
		overflow-y: hidden;
		overflow-x: hidden;
	
		animation-name: mold-animation;
		animation-duration: 10s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}

		.mold-background-bottom-right {
		position: absolute;
		margin-top: 150vh;
		margin-left: 80vw;
		z-index: 200;
		font-family: "Mold";
		font-size: 200px;
		color: rgb(255, 255, 255);
		filter: blur(1px);
		overflow-y: hidden;
		overflow-x: hidden;
	
		animation-name: mold-animation;
		animation-duration: 10s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}

		.container-paragraph {
		display: flex;
		padding-top: 10vh;
		padding-bottom: 2vh;
		padding-left: 20vw;
		padding-right: 20vw;
	}

	.microscope-slide {
		display: flex;
		border: 1px solid white;
		align-items: center;
		padding-left: 30px;
		gap: 200px;
		margin-top: 5vh;
		margin-bottom: 10vh;
		margin-left: 20vw;
		margin-right: 20vw;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	.microscope-slide-circle {
		display: flex;
		width: 250px;
		height: 250px;
		background-color:black;
		font-family: "Mold";
		font-size: 200px;
		align-items: center;
		justify-content: center;
		border-radius: 200px;
		margin: 20px;
		border: 1px solid white;
	}

	.microscope-slide-label {
		display: flex;
		width: 150px;
		height: 250px;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-family: "AUTHENTICSansDot";
		font-size: 16px;
		color: black;
		background-color:#ccc;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	.microscope-slide-specimen {
		font-family: "Mold";
		font-size: 150px;
		color: rgb(255, 255, 255);
	
		animation-name: mold-specimen-animation;
		animation-duration: 8s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
}
	@keyframes mold-specimen-animation {
	0% {
		font-variation-settings: "MUTA" 0;
	}
	50% {
		font-variation-settings: "MUTA" 100;
	}
	100% {
		font-variation-settings: "MUTA" 0;
	}
	}

	html::-webkit-scrollbar {
	display: none; 
	scrollbar-width: none; 
}

	.caption {
		display: flex;
		font-family: "AUTHENTICSansdot";
		font-variation-settings: "VARI" 0;
		font-size: 16px;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 10px;
		margin-bottom: 10px;
	}

	.microscope-specimen {
		font-family: "Mold";
		font-size: 700px;
		align-content: center;
		justify-content: center;
		color: #000000;
		opacity: 0.1;
		mix-blend-mode: multiply;
		text-shadow:
			0px 0px 5px rgba(0, 0, 0, 0.446); 
		margin-top: -20px;
		margin-left: 60px;
		animation-name: mold-specimen-animation;
		animation-duration: 5s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
		
}

.specimen-o {
	font-size: 700px;
	margin-left: 100px;
	margin-top: -100px;
}

.specimen-q {
	font-size: 800px;
	margin-left: 100px;
	margin-top: -100px;
}

.circle-mold-black {
		position: relative;
		width: 700px;
		height: 700px;
		background-color: rgb(0, 0, 0);
		border-radius: 500px;
		padding: 50px;
		margin: 20px;
		box-shadow: 
			inset 5px 2px 5px rgb(255, 255, 255),
			inset 1px 1px 10px rgb(68, 68, 68);
		z-index: 1;
	}


.circle-mold {
		position: absolute;
		width: 650px;
		height: 650px;
		background-color: #B7B696;
		border-radius: 500px;
		padding: 50px;
		margin-left: -20px;
		margin-top: -20px;
		box-shadow: 
			inset 5px 5px 5px rgba(40, 40, 40, 0.529),
			inset 1px 1px 10px rgb(0, 0, 0);
		z-index: 2;
	}

.circle-mold-2 {
		position: absolute;
		width: 650px;
		height: 650px;
		background-color: #B39B72;
		border-radius: 500px;
		padding: 50px;
		margin-left: -20px;
		margin-top: -20px;
		box-shadow: 
			inset 5px 5px 5px rgba(40, 40, 40, 0.529),
			inset 1px 1px 10px rgb(0, 0, 0);
		z-index: 2;
	}

.circle-mold-3 {
		position: absolute;
		width: 650px;
		height: 650px;
		background-color: #9AA2AA;
		border-radius: 500px;
		padding: 50px;
		margin-left: -20px;
		margin-top: -20px;
		box-shadow: 
			inset 5px 5px 5px rgba(40, 40, 40, 0.529),
			inset 1px 1px 10px rgb(0, 0, 0);
		z-index: 2;
	}


.circle-black-letters-4 {
	position: absolute;
	font-family: "Logo";
	font-variation-settings: "MUTA" 0;
	color: #363530;
	font-size: 800px;
	align-content: center;
	justify-content: center;
	text-shadow:
			-3px -3px 3px #e2e2e2,
			3px 3px 3px #e2e2e2, 
			-3px 3px 3px #e2e2e2, 
			3px -3px 3px #e2e2e2, 
		0px 0px 5px rgba(0, 0, 0, 0.446); 
	margin-top: -120px;
	margin-left: 60px;
	
	animation-name: logo-circle-animation;
	animation-duration: 8s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	z-index: 4;
}

.mold-letters {
		position: absolute;
		margin-top: -100px;
		margin-left: 50px;
		z-index: 3;
		font-family: "Mold";
		font-size: 700px;
		color: #A6BBB8; 
		text-shadow:
			-3px -3px 3px #e2e2e2,
			3px 3px 3px #e2e2e2, 
			-3px 3px 3px #e2e2e2, 
			3px -3px 3px #e2e2e2, 
			0px 0px 5px rgba(0, 0, 0, 0.3);
		animation-name: mold-specimen-animation;
		animation-duration: 8s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
}

.mold-letters-2 {
		position: absolute;
		margin-top: -150px;
		margin-left: 50px;
		z-index: 5;
		font-family: "Mold";
		font-size: 1000px;
		color: #f4ffca; 
		text-shadow:
			-3px -3px 3px #e2e2e2,
			3px 3px 3px #e2e2e2, 
			-3px 3px 3px #e2e2e2, 
			3px -3px 3px #e2e2e2, 
			0px 0px 8px rgb(245, 248, 241);
		animation-name: mold-specimen-animation;
		animation-duration: 8s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
}

.mold-letters-3 {
		position: absolute;
		margin-top: -150px;
		margin-left: 50px;
		z-index: 6;
		font-family: "Mold";
		font-size: 800px;
		color: #f2fdff; 
		text-shadow:
			-3px -3px 3px #e2e2e2,
			3px 3px 3px #e2e2e2, 
			-3px 3px 3px #e2e2e2, 
			3px -3px 3px #e2e2e2, 
			0px 0px 5px rgba(0, 0, 0, 0.3);
		animation-name: mold-specimen-animation;
		animation-duration: 8s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
}