body { background-image : url("newback.png") ; padding: 0 ; margin: 0 ;}
	body {  background-color: white;}
	#one {position: absolute; top: 230px; left: 24%; }
	#three {position: absolute; top: 230px; left: 67%}
	b { color:blue }
        bl { color:black }
        rd { color : red }
	w { font-style : italic ; }
	p1 { font-family : serif ; font-size : 15pt ; font-weight : 500 ; color : #cc6633 ;  }
	un {  text-decoration: underline;}

* {box-sizing: border-box;}

.click {
  position: relative;
  max-width: 180px;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 12px;
  padding: 5px;
  text-align: center;
}

.click:hover .overlay {
  opacity: 1;
}

   
.button {
  background-color: #6699FF; /* Blue */
  border: none;
  color: yellow;
  padding: 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family:comic sans ms : font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button:hover {background-color: #99CCFF}

.button:active {
  background-color: #99CCFF;
  box-shadow: 0 3px #666;
  transform: translateY(4px);
}

.dropbtn {
  background-color: #6699FF;
  color: yellow;
  text-align: center;
  padding: 3px;
  font-size: 13px;
  border-radius: 15px:
  cursor: pointer;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #99CCFF;
  width: 130px;
  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: #FFFFFF}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #99CCFF;
}

.button1 {border-radius: 15px; width: 130px; border: 2px solid #0000CC;}
.dropbtn1 {border-radius: 15px; width: 130px; border: 2px solid #0000CC;}
.button3 {border-radius: 15px; width: 130px; border: 2px solid #0000CC;}
.button4 {border-radius: 15px; width: 130px; border: 2px solid #0000CC;}


					/* The Modal */
/* animate zoom */
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}

/* The modal's background */
.modal {
  display: none;
  position: fixed;
  padding-top:50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Display the modal when targeted */
.modal:target {
  display: table;
  position: absolute;
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 812px;
padding-top:10px;
}

/* The modal's content */
.modal-dialog .modal-content {
  margin: auto;
  background-color: #f3f3f3;
  position: relative;
  padding: 0;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


  /* Add animation */
  -webkit-animation-name: example; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 0.5s;
}

.container {padding: 2px 16px;}

header {
  background-color: #ffffff;
  font-size: 25px;
  color: white;
  text-align: center;
  width: 780px;
}