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

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

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


<p> {
  font-size:medium;
}

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

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

<slide_top> {
  width:90%;
}

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

#BrightGrad {
  height: 15%;
  width:90%;
  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 */
}

/*  For TV Door */

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


.Door {
  height: 15%;
  width:10%;
/*  background-image: linear-gradient(to right, green,red);  Standard syntax (must be last) */
}
.titleRight {
  height: 15%;
  float: right;
  width:10%;

}
.titleLeft {
color:fuchsia;

  height: 15%;
float: left;
  width:10%;

}



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

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

	body {
	  color:blue;
	}
}
@media only screen and (min-width: 1910 px) {
	body {
	  color:blue;
	}
}