.titleclass{
		font-family: roboto, Arial, Helvetica, sans-serif;
		font-size: 40px;
		color: White;
		font-weight: bold;
		}
.logoclass{
		font-family: roboto, Arial, Helvetica, sans-serif;
		font-size: 40px;
		color: White;
		font-weight: bold;
		}
.titleformclass{
		font-family: roboto, Arial, Helvetica, sans-serif;
		font-size: 30px;
		color: WHite;

		}
.maintext{
		font-size: 30px;
		color: black;
		font-family: robto,  Arial, Helvetica, sans-serif;
		}
		.Wtext{
		font-size: 27px;
		color: White;
		font-family: robto,  Arial, Helvetica, sans-serif;
		}
body{ 
	background-color: Black;
	background-position: center;
	background-size: 600px 600px;
	}


	
.maintable{
	
	background-color:white;
	
	border: 5px solid white;
}

.formtable{
	
	background-color: black;
	width: 800px;
	height: 600px;
	border: 5px solid #FF0000;
}
.navcell{
	border: 5px solid #236969;
    height: 50px;
	width: 225px;
}


a:link{
	color:White
}

a:visited{
	color:White
}

.scroll-left {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}



a:hover{
	color:Geen
}

a:active{
	color:White
}
.mainnav{
font-size: 30px;
color: #21780E;
font-family: Arial, Helvetica, sans-serif;
width: 700px; 
}

.MC{
	background-image: linear-gradient(to left, #FF00DC, #00FFF0, #35EA0E, #0EEAE7, #FFFF00, #FFAE00, #FF0000);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
		font-family: roboto, Arial, Helvetica, sans-serif;
		font-size: 50px;
		font-weight: bold;
      }
	
	
	.Prog{
		font-family: roboto, Arial, Helvetica, sans-serif;
		font-size: 40px;
		color: white;
		font-weight: bold;
	}
	
	
	
		
.schoolgif{
	position: relative;

	}


	
.busgif{
	top: -250px;
	position: relative;
	animation-name: bus;
	animation-duration: 5s;
	width:200px;
animation-fill-mode: forwards;
animation-delay: 1s;
	}
	
	
	.grid{
	position: relative;
	}
	
	
.monk{
	top: -320px;
	left:375px;
	position: relative;
	animation-name: monk;
	animation-duration: 3s;
	width:45px;
	height:45px;
animation-fill-mode: forwards;

	}
	.monk1{
top: -250px;
	position: relative;
	animation-name: mt;
	animation-duration: 5s;
	width:200px;
animation-fill-mode: forwards;
animation-delay: 1s;
	}
	body {margin:0;}

.navbar {
  overflow: hidden;
  background-color: #f2f2f2;
  position: fixed;
  top: 0;
  width: 100%;
  text-decoration: underline;     
    text-decoration-color: blue; 
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  text-decoration: underline;     
    text-decoration-color: white; 
}

.navbar a:hover {
  background: #ddd;
  color: black;
  text-decoration: underline;     
    text-decoration-color: blue; 
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}

.topnav {
  position: relative;
  background-color: #0448cc;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Centered section inside the top navigation */
.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }

  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}






/* Add a black background color to the top navigation */
.topnav {
  position: relative;
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Centered section inside the top navigation */
.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }

  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
}


 .T {
border: 1.5px solid #A9A9A9	;
Background-color: #007d00;
vertical-align: center;
width: 60px;
height: 60px;
}
 .W {
border: 1.5px solid #A9A9A9	;
Background-color: #696969;
vertical-align: center;
width: 60px;
height: 60px;

}
 .WP {
border: 1.5px solid #A9A9A9;
Background-color: #8B8000;'
vertical-align: center;
width: 60px;
height: 60px;

}

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}