@charset "utf-8";
/* CSS Document */

body {
  font-family:Arial;
  color:black;
  font-size:medium;
} 

#home {  
  background-image:url('../images/potfarm-hero.jpg');
  background-repeat:no-repeat;
  background-size:cover;
}


<p> {
  font-size:medium;
}

<h1> {
    font-size:80%;	
}
<h1> {
    font-size:60%;	
}
.slidecontainer {
  margin-top:50px;
  width: 100%; /* Width of the outside container */
}

.input{
	background-color:#00FF00;
	  font-family:Arial;

}

.FormSpacer {
	margin-top:20px;
	color:black;
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  width: 100%; /* Full-width */
  height: 15%; /* Specified height */
  outline: none; /* Remove outline */
}
#slide_top {
  height: 15%;
  width:62%;
  background-image: none;
}

<slide_top> {
  width:62%;
}

#ColorGrad {
  height: 15%;
  width:62%;
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,violet,red); /* Standard syntax (must be last) */
}
#SpeedGrad {
  height: 15%;
  width:62%;
  background-image: linear-gradient(to right, red,green); /* Standard syntax (must be last) */
}

#BrightGrad {
  height: 15%;
  width:62%;
  background-image: linear-gradient(to right, black,white); /* Standard syntax (must be last) */
  background-repeat:no-repeat;
  background-position:100%;
}

#mode {
  background-image:url('../images/Mode_bar.png');
}

#GoButton {
display:inline-block;
  width: 20%;
  height: 30px;
  padding: 5px;
  top:-100px;
  
}
#RB {
display:inline-block;
  width: 50%;
  height: 100px;
  padding: 5px;
}


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

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

/*********************************  Begin Responsive CSS         **********************************/  

@media only screen and (max-width: 1921 px) {
	body {
	  color:white;
	}
}

@media only screen and (max-width: 500px) {

	body {
	  color:green;
	}
}