99/* CSS reset Code */
*{
margin:0;
padding:0;
box-sizing:border-box;

}

 /* Body CSS Code */

body{
background-color:   #F6FB8A;
}

/* Header CSS Code */


header{
margin: 0 30px;
height: 500px;
border: 10px solid #439c53;
border-radius: 30px;
text-align:center;
font-size: 1.5em;
font-family: times new roman;
color: #daffb3;
background-image: url(moulay-Driss-Zerhoun.jpg);
background-size: 100% 100%;
background-repeat: no-repeat:
}



/* Top header h2 id CSS */
#topheader{
 padding:20px;
 margin: 20px
 color: blue;
 font-size: 3em
 font-family: italic
}

/* CSS for header text */
.header-text {
font-size: 2em;
color: white;
text-shadow: 5px 3px  darkred;
font-family:"maghribi assile";
position:relative;
margin-top: 1px;
margin-bottom: 1px;
}


.header-text2 {
font-size: 1.7em;
color: white;
text-shadow: 3px 3px #082D04;
font-family:"times new roman";
position:relative;
margin-bottom: 1px;
margin-top: 1px;
}


/* navigation  CSS Code  */

nav{
background-color: #b3ffb3;
padding: 20px;
margin-top:0;
margin-bottom:20px;
font-size: 0.7em;
font-family: arial;
/*border-radius:50px;*/
text-align:center;
}

nav ul li {
display: inline-block;
padding:10px;
border-radius: 10px;
list-style-type:none;
}

nav ul li a {
background-color:  /* #e5e8e8 */ green;
text-decoration:none;
padding:14px 16px;
margin-bottom:10px;
border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
font-size: 1.4em
}

nav ul li a:hover {
background-color:  #044014;
color: white;
}

/* Drop Down Code For Navigation */

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color:  green;
}

li.dropdown {
  display: inline-block;
}

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

.dropdown-content a {
  color:  /*#044014*/ ;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: /*#7ac290*/ #92e366;color:black;}

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

/* Main block CSS Code */


main{
	background-color: #90ff33 ;
	margin-left:30px;
	margin-right:40px;
	margin-top:40px;
	border-radius: 30px;
	font-size: 1em;
	font-family:arial;
	padding:20px;
	height: auto;

}


.img-block-1 {
display:block;
	margin: 20px auto;
	width :95%;
	height:500px;
	border: 1px solid black;
}

.img-block {
display:block;
	margin: 20px auto;
	width :95%;
	height:200px;
	border: 1px solid black;
}






/* Footer Block CSS Code */

footer{
background-color: #59ba97;
/*color: white;*/
margin-top:20px;
text-align:center;
font-size: 1.2em;
font-family:arial;
padding:20px;
height: auto;
border: 10px solid green;

}

footer p {
		text-align: center;
  font-family: arial;
  font-size: 1em;
  
}


/* Footer Column CSS Code */

.footer-colums{
width:23%;
height:40px;
display:inline-block;
text-align:center;
/*border: 1px solid black;*/
}

/* Copy right Class in footer */
.copyright{
background-color: #062d96;
border-radius: 40px;
text-align:center;
font-size: 0.8em;
font-family:arial;
color:white;
padding:10px;
}

/*Paragraph CSS */

p{
/*background-color: #0E9D44;*/
font-size: 1.2em;
font-family: times new roman;
color: black;
text-align:left;

}

/* Indent CSS Code */

.indent1 {
margin-left: 1.5em
}

.indent2 {
margin-left: 1.5em
}

.indent1 {
margin-right: 1.0em
}

.center{
text-align:center;
}


/* heading CSS Code like h1, h2,h3,h4,h5,h6 */

h1{
text-align: center;
color: darkblue;
font-size: 1.5em
font-family: arabswell;
}

h2{
text-align: center;
font-size: 1.5em;
color: black
font-family: "Times New Roman", Times, serif;

}

h3 {font-family:"maghribi assile";
font-size: 2em;
color: black;
font-family:"maghribi assile";
text-align: center;
top: 30px;
bottom:20px:
}



/* Markup CSS Code */

.markup-h2 {
background-color:  #044b05;
color: white;
padding: 1em;
margin-left:1em;
margin-right:1em;
margin-top:0.50em;
margin-bottom:1em;
font-size: 1em;
font-family: arial;
border-radius:43px;
text-align:left;

}

.markup-h3 {
background-color:  #044b05;
color: white;
padding: 1em;
margin-left:1em;
margin-right:1em;
margin-top:1.5em;
margin-bottom:1em;
font-size: 1em;
font-family: arial;
border-radius:30px;
text-align:left;
}

.figure img {
display:block;
margin-left: auto;
margin-right: auto;
width :85%;
border: 1px solid black;
}

.markup-p {
/*background-color:   #33ff3f;*/
color: black;
/*padding: 1em;*/
margin-left:20.7m;
margin-right:0.7m;
margin-top:0.7em;
margin-bottom:0.7em;
font-size: 1em;
font-family: arial;
border-radius:20px;
text-align:left;
}

h3{
text-align: left;
font-size: 1em
}




.align-center{
class: center;

}



.form-container{
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
border-radius:2em;
}

/* DIV Column layouts */

.container{
 /*border: 5px solid black;*/
text-align:center;
width: 100%;

}
.one-colum{
width: 95%;
height:auto;
padding: 0.2em;
border: 1px solid darkgreen;
border-radius:2em;
display: inline-block;
text-align: center;
margin: 1em;
background-color:  #5fe629;
color: black;
overflow: hidden;
}


.two-colums{
width: 45%;
height:auto;
padding: 1em;
border: 1px solid darkgreen;
border-radius:3em;
text-align:center;
display: inline-block;
margin: 1em;
background-color:  #5fe629;
color: black;
overflow: hidden;
}


.three-colums{
width: 25%;
height:auto;
padding: 1em;
border: 1px solid darkgreen;
border-radius:3em;
text-align: center;
display: inline-block;
margin: 1em;
background-color:  #5fe629;
color: black;
overflow: hidden;
}


.four-colums{
width: 20%;
height:auto;
padding: 0.50em;
border: 1px solid darkgreen;
border-radius:1em;
text-align:center ;
display: inline-block;
margin: 0.50em;
background-color: #5fe629;
color: black;
overflow: hidden;
}

.five-colums{
width: 17%;
height:auto;
padding: 0.50em;
border: 1px solid darkgreen;
border-radius:1em;
text-align:center;
display: inline-block;
margin: 0.50em;
background-color: #5fe629;
color: black;
overflow: hidden;
}

/* Table Design- 01 */

#tblid-green-blue{
  font-family: /* Arial, Helvetica, sans-serif*/;
  font-size:1em;
  border-collapse: collapse;
  margin-left:auto;
  margin-right:auto;
  width: 90%;
}
#tblid-green-blue td, #tblid-green-blue th{
  border: 1px solid #ddd;
  padding: 8px;
}
#tblid-green-blue  tr:nth-child(even){background-color: /*#f2f2f2;*/ #c1dce3;}
#tblid-green-blue  tr:nth-child(odd){background-color: /*#f2f2f2;*/ #dfeef2;}
#tblid-green-blue  tr:hover {background-color: /*#ddd* #a4deb8;*/ #83daf7}
#tblid-green-blue th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: /*#04AA6D*/ #04858a;;
  color: white;
}


/* form-css-code */
input[type=text], select, textarea {
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}





input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}



/* Media Query */

@media only screen and (max-width: 600px) {

.one-colum,.two-colums, .three-colums, .four-colums, .five-colums{
margin: 5px auto;
width: 100%;
}

.footer-colums{
margin: 5px auto;
width: 100%;
}
}