/* Used fonts in this page */
@import url("http://fonts.googleapis.com/css?family=Carrois+Gothic");
@import url('https://fonts.googleapis.com/css?family=Bungee+Shade');
@import url('https://fonts.googleapis.com/css?family=Kumar+One');

/* base page CSS */
html, body {
    font: normal 14px "Carrois Gothic", sans-serif;
    
    margin: 0;
    overflow: hidden;
    color: #fff;
}

/* Container that holds the content of the page */
.container {
    overflow: scroll;
    overflow-x: hidden;
    position: fixed;
    width: 80%;
    height: 98%;
    margin: 20px;
    top: 0px;
    left: 10%;
  
    background: #010101;
    border: 2px solid #9ecaed;
    border-radius: 2px;
    box-shadow: 0 0 50px hsla(145, 100%, 40%, 1);
}

/* Container Scrollbar Track */
.container::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #000000;
	border-radius: 10px;
}
/* Container Scrollbar */
.container::-webkit-scrollbar
{
	width: 10px;
	background-color: #000000;
}
/* Container Scrollbar Thumb */
.container::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#4D9C41),
									   to(#19911D),
									   color-stop(.6,#54DE5D))
}

/* Navigation Menu */
nav {
   position:relative;
    top:20px;
    left:5%;
    text-align: center;
    width:90%;
    height:100px;
    font-size:1.5vw;
    line-height:2em;
    font-family: 'Source Code Pro';

  
}

nav ul li {
  display:inline-block;
  list-style:none;
}

nav ul li a {
  display:block;
  margin:0;
  padding:7px 20px;
  text-shadow: -12px 22px 10px hsla(145, 100%, 40%, 1);
  color:#ffffff;
  font-family: 'Kumar One', cursive;
  
  font-size:1.7em;
  text-decoration:none;
  
  border-bottom:2px solid transparent;
  box-shadow:0px 2px 0px transparent
  
 

}
/* Navigation Menu On Hover */
nav ul li a:hover {
    text-shadow: -12px 22px 10px hsla(53, 100%, 50%, 0.73);
}
/* Navigation Menu On Click */
nav ul li a:active {
    text-shadow: -12px 22px 10px hsla(53, 100%, 50%, 0.73);
    color: hsla(112, 100%, 50%, 0.87); 
}


/* The headline of each page*/
#headline {
     position:relative;
    top:20px;
    left:5%;
    text-align: center;
    width:90%;
    height:100px;
    font-size:4vw;
    line-height:2em;
}

/* base page CSS ends here */



h2, h3{
    text-align: center;
    color: #F26D21;
}

#center {
    text-align: center;
}
#par{
    margin-left: 5%;
    line-height: 170%;
}
.students{
    color: #F26D21;
    font-size: 2vw;
    margin-left: 5%;
}
#names{
    color: #fff;
    font-size: 1.7vw;
    margin-left: 5%;
    line-height: 130%;
}
#titleBB{
    font-weight: 600;
    letter-spacing: 2px;
    
}
.bb{
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.61);
    background-color: darkgreen;
    font-weight: 700;
}

.js{
    color:#F26D21;
    font-weight: 700
}
.page{
    color:hsla(145, 100%, 40%, 0.8);
}

iframe{
    margin-left: 5%;
    margin-bottom: 5%;
    
}
#aside{
    margin-top: 50%;
    margin-left: 1%;
    color: red;
    font-size: 15px;
    line-height: 25px;
}
#aside a:visited {
    color: darkorange;
}
#aside a:hover  {
    color: green;
}

footer {
    position: fixed;
	bottom: 0;
	width: 79%;
	background-color: rgba(0, 0, 0, 0.7);
    font-family: cursive;
    font-size: 22px;
	color: hsla(53, 100%, 50%, 0.73);
    text-shadow: 2px 2px 10px hsla(53, 100%, 50%, 0.5);
	text-align: center;
    
}
footer:hover{cursor: pointer;}