html, body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.primary-container,
.general-container,
.effects-container {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
		
body {
	font-family:'Arial';
	background:#C5D3E8;
	background-image: linear-gradient(to right, #C5D3E8, #ffffff 400px, #C5D3E8 800px);
	background-size:  100% 100%;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	overflow-x: hidden;	
}		
		
.heading {
	width: 70vw;
	height: 12vh;
	margin: 0 auto;
	background: transparent;  
}

.header {
	width: 100%;
	height: 5vh;
	font-size: clamp(16px, 3vh, 20px);
	line-height: 5vh;
	background: #cbd5e1;
	color: #000;
	text-align: left;		
	padding-left:15px;
	box-sizing: border-box;
	background-image:
    linear-gradient(rgba(0, 120, 120, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 120, 120, 0.15) 1px, transparent 1px);
  background-size: 6px 6px;
}

.email {
	width: 100%;
	height: 5vh;
	font-size: clamp(12px, 1vh, 13px);
	line-height: 5vh;
	text-align: right;
	background: transparent;
	letter-spacing: 0.5px;
	color: #000;	
	cursor:pointer;
	padding-right:15px;
	box-sizing: border-box;
}

.footer {
	width: 70vw;
	height: 2vh;        
	max-height: 2vh !important;
	margin: 0 auto;
	background: transparent;
	text-align:center;
	font-size:11px;
	margin-top:2vh;
}

.primary-container {
	width: 70vw;
	height: 75vh;        
	max-height: 75vh !important;
	margin: 0 auto;
	background: transparent;
	display: flex;
	flex-direction: column;
	animation: crtStart 1.2s ease-out forwards;
	transform-origin: center center;
}

.options-container {
	width: 100%;
	height: 10%;
	display: flex;
	background: transparent; 
	margin-bottom:5px;
}

.options-text-container {
	width: 30%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
	background: transparent;
	letter-spacing: 7px;
}

.options-select-container {
	width: 70%;
	height: 100%;
	text-align:center;
	background: transparent; 
}

.options-select {
	width: 100%;
	height: 100%;
	font-size: 20px;
	background: #fff; 
}

.general-container {
	width: 100%;
	height: 100%;
	display: flex;
	background: transparent; 
}

.button-container {
	width: 30%;
	height: 100%;
	font-size: 20px;
	background: transparent; 
}

.top-button-container {
	width: 100%;
	height: 30%;	
	background: transparent; 
	display: block;
}

#fileinfo {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#upload-button {
	width: 100%;
	height: 100%;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	border:3px solid #e9ecf0;
	box-sizing: border-box;
	line-height: normal;
	background:#FFE689;
}

.middle-button-container {
	width: 100%;
	height: 50%;	
	background: gold; 
	display: flex;
	justify-content: center;
	align-items: center;
}

#play-button {
	width: 50%;
	height: 100%;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	border:3px solid #e9ecf0;
	box-sizing: border-box;
	line-height: normal;
	background:#659287;
}

#stop-button {
	width: 50%;
	height: 100%;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	border:3px solid #e9ecf0;
	box-sizing: border-box;
	line-height: normal;
	background:#DEAA79;
}

.bottom-button-container {
	width: 100%;
	height: 20%;	
	background: pink; 
	display: flex;
	justify-content: center;
	align-items: center;
}

#arm-button {
	width: 50%;
	height: 100%;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	border:3px solid #e9ecf0;
	box-sizing: border-box;
	line-height: normal;
	background:#B1C29E;
}

#download-button {
	width: 50%;
	height: 100%;	
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 18px;
	border:3px solid #e9ecf0;
	box-sizing: border-box;
	line-height: normal;
	text-decoration:none;
	background:#bac5d6;	
}

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

.effects-container {
	width: 70%;
	height: 100%;
	max-height: 100% !important;
	min-height: 0; 
	font-size: 20px;
	background: transparent; 	
}

.instructions-container {
	width: 100%;
	height: 71%;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	font-size: 20px;
	background: #faf8f1;  
	margin-bottom:5px;
	border:3px solid #e9ecf0;
	box-sizing: border-box;
	overflow-x: hidden;   
}

.instructions-text {
	width:99%;
	line-height: 150%;
	display: inline-block;
	color:#000;		
	padding-left:10px; 		
}

h3, p {
	font-size:13.5px;
	padding-left:15px;
	padding-right:15px;
}


 p {
	line-height: 1.6;
}

.instructions-container::-webkit-scrollbar {
  width: 15px;
}
.instructions-container::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 8px;
}
.instructions-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #768fab, #c5ccd4);
  border-radius: 8px;
  border: 2px solid #f8f6ed;
}

 
.progress-div {
  flex: 0 0 20%;
  height: 17%;
  max-height: 17%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  word-wrap: break-word;
  box-sizing: border-box;
  border:1px solid #000;
  background:#fff; 
  margin-bottom:5px;
}
  
.vol-container {
	width: 100%;
	height: 9%;
	max-height:  9.6% !important;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;	
	margin: 0 auto; 
	box-sizing: border-box;
}

.spec {
	width: 10%;
	height: 60%;
	display: flex;
	align-items: center; 
	justify-content: center;
	text-align: center;
	background: white;
	border:1px solid #000;
	margin-right:5px;
}

#file {
  display: none;
}

button:hover {	
	box-shadow: 0 0 1px #0ff, 0 0 2px #0ff;	
	transform: scale(1.01);
	transition: 0.2s;
	letter-spacing:3px;
	cursor:pointer;
}

.action:hover {
	box-shadow: 0 0 1px #0ff, 0 0 2px #0ff;	
	transform: scale(1.01);
	transition: 0.2s;
	letter-spacing:3px;
	cursor:pointer;
}

#banner {
	opacity:.5;
	position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  width: 100vw;           
  height: 100px;         
	background-color:#e9ecf0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0ff;
  z-index: 9999;
}
	
#banner.diss {
	display:none;
}

.small-banner {
	height:90px;
	line-height:90px;
	font-size:50px;		 
	font-family: 'Courier New', monospace;
	letter-spacing:30px;
	text-align:center;	
	background-color:#e9ecf0;
	opacity:1;
}

@media (min-width: 401px) and (max-width: 1100px) {
    body {
      background: #c5d3e8;
    }
	
    .spec, .progress-div, .upload-button, button, select, input {
     font-size: 11px !important;
    }
	
	.instructions-text {
     font-size: 10px !important;
    }
	
	.options-text-container {
     font-size: 12px !important;
	 letter-spacing:3px;
    }
	
	h3,p {
		margin-top:18px;
	}
}
  
@media (min-width: 0px) and (max-width: 400px) {
    body {
      background: #c5d3e8;
    }
	
    .instructions-text, .spec, .progress-div, .upload-button, button, select, input {
     font-size: 8px !important;
    }
	
	.options-text-container {
     font-size: 8px !important;
	 letter-spacing:1px;
    }
 }