html {scroll-behavior: smooth;}
body              {background-size:cover; background-repeat:no-repeat; background-attachment:fixed; background-position:center}
h1                {color:#F00; font-size:70; width:100%; text-align:center; padding:20px 0; background-color:rgba(0, 0, 0, 0.4)}
h2                {color:yellow;}
.main             {width:80%; padding:30px; margin:10px auto; background-color:rgba(0, 0, 0, 0.7);}
.test             {clear:both; margin:5px 0; width:100%; height:2px; background-color: #1F6;}
.subtitle {
  font-size: 30px;
  font-family: Lucida, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, monospace;
  color: white;
  text-align: center;
}
p                 {font-family: Verdana, sans-serif; color:white; font-size: 16px;}
li                 {font-family: Verdana, sans-serif; color:white; font-size: 16px;}
ul                 {font-family: Verdana, sans-serif; color:white; font-size: 16px;}
a                 {color:#0DF; text-decoration: none;}
#Head             {list-style-type:none; margin:0; padding:6px; overflow:hidden; background-color:#0AB; position:fixed; top:0; width:100%; z-index:2}
#Head li          {float:left;}
#Head li a        {display:block; color:black; text-align:center; padding:10px 10px; text-decoration:none;}
#Head li a:hover  {background-color:#0CD}
#Foot             {color:white; list-style-type:none; margin:0; padding:6px; overflow:hidden; background-color:#111; position:fixed; bottom:0; width:100%; z-index:2}
#Foot li          {display:block; color:#EEE; text-align:center; text-decoration:none;}

.right {float:right; margin:5px;}

#box {
  background-color: #282828;
  border: 0px solid #56a016;
  border-radius: 12px;
  border-style: solid;
  margin: 25px;
  padding: 30px;
  font-size: 22px;
  -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  text-align: center;
  width: 500px;
  text-decoration: none;
  color: white;
  }

#box:hover {
  background-color: #6CF;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

#title {
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	font-size: 50px;
	font-weight: 500;
	text-align: center;
	color: #F9F9F9;
}

.background-substitute {
    width: 97.5vw;
    height: 650px; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 5px;
    opacity: 0.6;
    transition: 2s;
}

.background-substitute:hover {
	opacity: 1;
	transition: 1s;
}

.image1 {
  background-image: url("Img/Earth.jpg");
  }

.image2 {
  background-image: url("http://4.bp.blogspot.com/-At1jNOKUwN0/T5ZiYZh4t-I/AAAAAAAADDA/SVVwKXJ9xEQ/s1600/DSC_0120.JPG");
  }

.image3 {
  background-image: url("Img/SpaceMap.PNG");
  }
  
.image4 {
  background-image: url("https://www.indiacelebrating.com/wp-content/uploads/consequences-of-climate-change.jpg");
  }
  
  


/*
Absolute position makes it aligned to its first non-static element.
*/
.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

/*
Border around text
Letter spacing creates space between letters. 
*/
.border {
  background-color: #2E2B2A;
  padding: 18px;
  font-size: 45px;
  letter-spacing: 10px;
  opacity: 0.8;
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	font-weight: 500;
	text-align: center;
	color: #F9F9F9;
  
}