html,
body {
	min-height: 100vh;
	height: auto;
	-webkit-overflow-scrolling: touch;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: 'Arial';
	background: #2A5C8F;
	background: linear-gradient(
		to right,
		#2A5C8F 0%,
		#10335D 10%,
		#2A5C8F 100%
	);	
	background-size: 100% 100%;
	background-position: 100% 100%;
	background-repeat: no-repeat;
}

.tag {
	display: inline-block;      
	width: 24vw;
	height: 60px;
	margin-left: 1vw;
	margin-bottom: 15px;
	float:left;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tagline {
	display: inline-block;      
	width: 19vw;
	height: 20px;	
	display: flex;
	align-items: center;
	color: #e4e4eb;
	float:left;
	text-align:center;
	font-family: ui-monospace, Consolas, monospace;	
	font-size: clamp(11px, .80vw, 14px);	
	margin-left:10px;
}

.alien {
	display: inline-block;
	width: 28px;
	height: 28px;
	float: left;

	background-image: url("alien.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	border-radius: 50%;
	overflow: hidden;
	animation: spin360 1500ms ease-out forwards;
}

@keyframes spin360 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


.title {	
	background:#e4e9f5;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#10335D;
	font-size:14px;
	letter-spacing:3px;
	margin-top:0px;
	width:100%;	
}


.yourDiv {
	animation: spin360 1s linear 1;
	transform-origin: 50% 50%;
}

.heading {
	width: 71vw;
	height: 10vh;
	padding-top: 13px;
	margin: 0 auto;
	background: transparent;		
}

.logo svg {
	display: block;
	color: #fff;
}

.header {
	width: 71vw;
	height: 6vh;
	text-align:center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e4e4eb;
	background-color: transparent;	
	font-family: ui-monospace, Consolas, monospace;		
}

.header-aud {
	font-weight: 800;
	letter-spacing: 0.15em;
	font-size: 6vh !important;
	letter-spacing: 30px;
	text-shadow:
		0 1px 0 rgba(0,0,0,0.4),
		0 0 12px rgba(255,255,255,0.08);
}

.header-symbol {
	font-weight: 300;
	font-size:  6vh !important;
	letter-spacing: 2px;
	margin-right:30px;
}

.header-nue {
	font-weight: 300;
	opacity: 0.85;
	font-size:  6vh !important;
	letter-spacing: 2px;
}

.header-small {
	width: 71vw;
	height:  4vh;
	text-align:center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e4e4eb;
	font-weight: 300;
	opacity: 0.85;
	font-size:  1.5vh !important;
	letter-spacing: 2px;
}


.header-mobile {
	display:none;
	margin:0 auto;
	width: 325px;
	height: 100px;
	line-height:100px;	
	color: #e4e4eb;
	background: transparent;
	text-align:center;
	font-size: 12px;
}

.main-container {
	width: 71vw;
	height: 83vh;
	max-height: 83vh !important;
	margin: 0 auto;
	margin-top:10px;
	animation: crtStart 1.2s ease-out forwards;
	transform-origin: center center;
	overflow: hidden;
}

.main-container::after {
	content: "";
	display: block;
	clear: both;
}

.options-container {
	width: 70vw;
	height: 5vh;
	display: flex;
	float: left;
}

.options-container::after {
	content: "";
	display: block;
	clear: both;
}

.options-text-container {
	width: 70vw;
	height: 5vh;
	background: transparent;
}

.page-label{
	font-size: 0px;
	font-weight: 500;
	letter-spacing: .04em;
	color: transparent;
	font-family: ui-monospace, Consolas, monospace;
}


.primary-container,
.general-container,
.effects-container {
	min-height: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.primary-container {
	width: 73vw;
	height: 75vh;
	margin: 0 auto;
	background: transparent;
	overflow: hidden;
}

.primary-container::after {
	content: "";
	display: block;
	clear: both;
}

.button-container {
	width: 25vw;
	height: 75vh;
	background: transparent;
	float: left;
	overflow: hidden;	
}

.button-container::after {
	content: "";
	display: block;
	clear: both;
}

.top-button-container {
	width: 25vw;
	height: 17vh;
	display: block;
}

.general-button-container {
	width: 25vw;
	height: 35vh;
	display: block;
}

.bottom-button-container {
	width: 25vw;
	height: 17vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	overflow: hidden;
}

.control {
	width: 12vw;
	height: 16vh;
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	background: #f5f6f7;
	gap: 6px;
	border: 1px solid transparent;
	font-size: clamp(9px, 1vw, 12px);
	
	margin-left: 1%;
	margin-right: 1%;
	padding: 0 10px;
	overflow: hidden;
	clip-path: polygon(
		5% 0%,
		85% 0%,
		100% 12px,
		100% 100%,
		0% 100%,
		0% calc(100% - 12px)
	);
}

.control-rev {
	clip-path: polygon(
		35% 0%,
		98% 0%,
		100% calc(100% - 12px),
		50% 100%,
		0% 100%,
		0% 12px
	);
}

.labels{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	margin-top:6px;
	font-size:12px;
	text-align:center;
	pointer-events:none;
}

.control > div {
	white-space: nowrap;
}

.control > .slider {
	width: 5vw;
}

.special{
	position:relative;
	float:left;
	font-size:11px;
	display:inline;
}


.upload-button {	
	width: 25vw;
	height: 13vh;
	text-align: center;
	font-size: clamp(9px, 1vw, 18px);
	line-height: normal;
	border: 3px solid transparent;
	background: #245A96;
	color: #e4e4eb;
	float:left;
	clip-path: polygon(
	4% 0%,
	100% 2%,
	97% 100%,
	0% 100%
);
	
}


#sample-original-button {
	width: 12vw;
	height: 9.5vh;
	float:left;
	margin-right: 1%;	
	margin-left: 1%;
	font-size: clamp(9px, 1vw, 18px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid transparent;
	background: #969e2f;
	color: #e4e4eb;	
	clip-path: polygon(
		0% 6px,
		100% 0%,
		100% 100%,
		0% calc(100% - 6px)
	);
}

#sample-mastered-button {
	width: 12vw;
	height: 9.5vh;
	float:left;
	margin-left: 1%;
	margin-bottom: .5vh;
	font-size: clamp(9px, 1vw, 18px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid transparent;
	background: #2e8258;
	color: #e4e4eb;	
	clip-path: polygon(
		0% 6px,
		100% 0%,
		100% 100%,
		0% calc(100% - 6px)
	);
}


#master-button {	
	width: 25vw;
	height: 20vh;
	font-size: clamp(9px, 1vw, 18px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid transparent;
	background: #515fb5;
	color: #e4e4eb;	
	clip-path: polygon(
		0% 6px,
		100% 0%,
		100% 100%,
		0% calc(100% - 6px)
	);
}


.right-container {
	width: 45vw;
	margin-left: 1vw;
	height: 78vh;
	float: left;
	overflow: hidden;	
}


.right-container::after {
	content: "";
	display: block;
	clear: both;
}

.language-container {
	width: 25vw;
	height: 3vh;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom:10px;
	background:#245A96;
}

.lang {
	display: inline-block;
	width: 5vw;
	height: 2.5vh;
	text-align:center;
	font-size: clamp(10px, 1.5vw, 12px);
	padding-top:5px;
}

.lang:hover {
	opacity: .7;
	cursor:pointer;
}
.instructions-container {
	width: 27vw;
	height: 65vh;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid #e4e4eb;	
	font-size: clamp(12px, 1.5vw, 15px);
	float: left;
	background: #0A2647;	
}

h3,
p {
	font-size: clamp(13px, 1vw, 14px);
	padding-left: 15px;
	padding-right: 15px;
	color: #e4e4eb;
}


p {
	line-height: 1.6;
}

h3 { color: #C9CCD4; }

.processing-container {
	width: 15vw;
	height: 40vh;
	overflow-y: hidden;
	overflow-x: hidden;
	background: transparent;
	border: 0px solid #000;
	padding: 10px;
	line-height: 2;
	font-family: ui-monospace, Consolas, monospace;
	float: left;
}


.results-container {
	width: 16.2vw;
	height: 68vh;
	margin-left: 2vh;
	background: transparent;
	float: left;
	overflow: hidden;
}

.results-left-container {
	width: 8vw;
	height: 67vh;
	float: left;
	overflow: hidden;
}

.results-right-container {
	width: 8vw;
	height: 67vh;
	float: left;
	overflow: hidden;
}

.results-container::after {
	content: "";
	display: block;
	clear: both;
}

.head {
	width: 45vw;
	height: 2vh;
	margin-top: 1.5vh;
	color: #e4e4eb;
	font-size: clamp(11px, .70vw, 13px);
	border-bottom:1px solid #e4e4eb;
	padding-bottom:5px;
	display: flex;
	align-items: center;
	justify-content: left;
	padding-left: 10px;
	float: left;
	background: transparent;
	overflow: hidden;
}


.raw-container,
.mastered-container {
	width: 45vw;
	height: 10vh;
	margin-top: 1vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: clamp(9px, .75vw, 15px);
	background: transparent;
	float: left;
	overflow: hidden;
}


.spec-wrapper {
	width: 7.5vw;
	height: 7.5vh;
	display: flex;
	flex-direction: column;	
	align-items: center;
	margin-bottom: 3vh;
	overflow: hidden;
}


.spec {
	width: 7vw;
	height: 6vh;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: white;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;	
	font-family: ui-monospace, Consolas, monospace;
	text-shadow: 0 0 3px rgba(0,0,0,.08);
	letter-spacing: 0.08em;
	overflow: hidden;
}


.spec-label {
	width: 7vw;
	height: 1.6vh;
	font-size: clamp(9px, .65vw, 13px);
	color: #e4e4eb;
	text-align: center;
	margin-top: 10px;
}

.spec-title {
	width: 7vw;
	height: 1.6vh;
	font-size: clamp(7px, .65vw, 13px);
	color: #e4e4eb;
	margin-bottom: 15px;
	margin-top: 2vh;
	text-align: center;
	
}

.footer {
	width: 71vw;
	height: 3vh;
	color: #e4e4eb;
	margin: 0 auto;
	margin-top: 3vh;
	font-size: clamp(9px, .60vw, 12px);
	text-align: center;
	background: transparent;
	clear: both;
}



.slider {
	width: 80%;
	display: block;
	margin: 0 auto;
}


input[type="range"] {
	accent-color: #000;
}

a,
a:visited,
a:hover,
a:active {
	text-decoration: none !important;
	color: inherit;
}


.instructions-container::-webkit-scrollbar {
	width: 15px;
}

.instructions-container::-webkit-scrollbar-track {
	background: #fff;
	border-radius: 0px;
}

.instructions-container::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #1E2A3A, #4A505A);
	border-radius: 0px;
	border: 2px solid #f8f6ed;
}


#file {
	display: none;
}


:disabled:hover {
	pointer-events: none;	
}


button:hover,
.action:hover {
	cursor: pointer;
	opacity: .9;
}


button {
	border-radius: 3px;
	animation:
		settleShape 2000ms cubic-bezier(.22,.61,.36,1) forwards,
		revealBorder 500ms ease-out 900ms forwards;
}


.control, .control-rev  {
	animation: settleShape 2000ms ease-out forwards,
		flashBg 1s ease;
}


@keyframes flashBg {
	0%   { background-color: #f5f6f7; }
	50%  { background-color: #f5eeed; }
	100% { background-color: #f5f6f7; }
}


@keyframes settleShape {
	from {
		clip-path: polygon(
			0% 18px,
			78% 0%,
			100% 0%,
			100% 100%,
			22% calc(100% - 18px),
			0% 100%
		);
	}

	to {
		/* visually a rectangle, but still 6 points */
		clip-path: polygon(
			0% 0%,
			100% 0%,
			100% 0%,
			100% 100%,
			0% 100%,
			0% 100%
		);
	}
}


@keyframes revealBorder {
	from {
		box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
	}
	to {
		box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18);
	}
}



@media (max-width: 767px), (max-height: 500px) {
	
	body {background: #0A2647;}
	.heading {border: 0px;}
	.header-mobile {display:block;}	
	.main-container, .header {display:none;}
	
}


@media (min-width: 768px) and (max-width: 1360px) {	

	.main-container {min-height: 100vh !important; margin-top:1vh; margin: 0 auto;padding-left:2vw;}
	.heading, .header {width: 70vw !important;}
	.primary-container {width: 73vw !important; overflow-y: auto; overflow-x: hidden;}
	.options-container {width: 73vw !important;}
	.button-container {width: 73vw !important;}
	.right-container {width: 73vw !important; margin-left:0vw !important; margin-top: -3vh; }	
	.tag, .tagline,.alien  {display:none;}	
	.head {width: 70vw !important;}	
	.top-button-container {min-width: 73vw !important;}
	.upload-button {width: 69vw; font-size: clamp(14px, 5vw, 18px);}
	.general-button-container {width: 73vw !important;}
	#analyze-button {width: 69vw; font-size: clamp(14px, 5vw, 18px);}
	#master-button {width: 69vw; font-size: clamp(14px, 5vw, 18px);}
	#sample-original-button {width: 32.5vw; font-size: clamp(14px, 5vw, 18px);}
	#sample-mastered-button {width: 32.5vw; font-size: clamp(14px, 5vw, 18px); margin-left: 1.5vw;}	
	.bottom-button-container {width: 70vw !important;}
	.control {width: 33vw; margin-right: 2vw; }	
	.control > .slider {width: 18vw !important;}
	
	.language-container {width: 69vw !important;}	
	.lang {width: 15vw;}
	.instructions-container {width: 52vw !important;}	
	.raw-container,.mastered-container  {width: 70vw !important;}		
	.footer {margin-top: 1vh;}
	
	.primary-container::-webkit-scrollbar-track {
		background: #fff;
		border-radius: 8px;
	}

	.primary-container::-webkit-scrollbar-thumb {
		background: linear-gradient(180deg, #768fab, #c5ccd4);		
		border: 2px solid #f8f6ed;
	}
	
}