css.css

body{
   background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%);
    font-family: 'Crimson Pro', serif;
    font-size: 48px;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
    font-size: 2rem;
    color: #E6E6FA;
}



.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #878f96 /* red 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 */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #662d91; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #662d91; /* dark blue background */
  cursor: pointer; /* Cursor on hover */
}



h1{
   
	color: #0062b7;
	font-family: 'Courier New', monospace;
}

.container { 
  height: 90px;
  width: 500px;
  position: relative;
  border: none; 

}



.input[type=submit], input[type=submit], input[type=submit] :hover {
  background-color: white; 
  color: #662d91;
  font-size: 30px;
  cursor: pointer; 
  transition-duration: 0.4s;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}



.top{
  margin: 0;
  position: absolute;
  top: 0%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);


}

.bottom{
  margin: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}