*{
	margin:0;
	padding:0;
}


body, html{
	height:100vh;
	background-color: #c0c0c0;
}

body{
	display:grid;
	grid-template-rows:7% 8% 8% auto;
	grid-template-columns: 30% 35% auto;
	grid-template-areas: 
		"head head head"
		"sortings sortings sortings"
		"start0 sliders newarray"
		"main main main"

}

#head{
	grid-area:head;
}


#head h1{
	font-size: 25px;
	text-align: center;
	position: relative;
	top:10%;
	opacity: 0.5; 
}

#sortings{
	grid-area:sortings;

}

#menu ul{
	list-style: none;
	position: relative;
	left:27%;
	width:60%;
}

#menu li{
	display:inline-block;

	
}

#menu li a{
	text-decoration: none;
	color:#232323;
	border:1px solid transparent;
	padding:5px 20px;
	transition:0.5s ease;
	font-size: 25px;

	border-radius: 20px;
background: #c0c0c0;
box-shadow:  12px 12px 24px #a3a3a3, 
             -12px -12px 24px #dddddd;

	
}

#menu li a:hover{
	color:#c0c0c0;
	background-color: #00818a;
	box-shadow: 0 0 0;

}

#menu #ss{
	color:#c0c0c0;
	background-color: #00818a;
	box-shadow: 0 0 0;
}


#start1{
	grid-area:start0;


}

#start1 a{
	color:#232323;
}


#st{
	
	float: right;
	width:20%;
	height:60%;
	text-align: center;


	border-radius: 20px;
background: linear-gradient(145deg, #adadad, #cdcdcd);
box-shadow:  8px 8px 16px #a3a3a3, 
             -8px -8px 16px #dddddd;
}

#st:hover{
	transform: translateY(5%);
}


#st i{
	position: relative;
	top:20%;
}


#sliders{
	grid-area:sliders;
}

#sliders0{
	position: relative;
	left:30%;
}



#newarray{
	grid-area:newarray;
}

#newarray a{
	color:#232323;
}

#st2{
	float:left;

	width:30%;
	height:60%;
	text-align: center;
	position: relative;
	bottom:10%;


	border-radius: 20px;
background: linear-gradient(145deg, #adadad, #cdcdcd);
box-shadow:  8px 8px 16px #a3a3a3, 
             -8px -8px 16px #dddddd;
}

#st2 i{
	position: relative;
	top:20%;
}

#st2:hover{
	transform: translateY(5%);
}


#main{
	grid-area:main;
}





#framerate{
	width:50%;
	position:relative;
	left:0%;
	padding-top: 2px;
}

#arraysize{
	width:50%;
	position:relative;
	left:0.3%;
	
}



#slider0 {

	grid-area:a1;

  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
 	width:50%;
  /* Full-width */
  height: 15px;
  /* Specified height */
  background: #33313b;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;

   }

/* Mouse-over effects */
#slider0:hover {
  opacity: 1;
  /* Fully shown on mouse-over */ }

#slider1 {
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 50%;
  /* Full-width */
  height: 15px;
  /* Specified height */
  background: #33313b;
  /* Grey background */
  outline: none;
  /* Remove outline */
  opacity: 0.7;
  /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
   }

/* Mouse-over effects */
#slider1:hover {
  opacity: 1;
  /* Fully shown on mouse-over */ }

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 20px;
  /* Set a specific slider handle width */
  height: 18px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */ }

.slider::-moz-range-thumb {
  width: 20px;
  /* Set a specific slider handle width */
  height: 18px;
  /* Slider handle height */
  background: #4CAF50;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */ }

/*# sourceMappingURL=main.css.map */