
body { 
      background-image:url(macbook-.jpg);
	  background-repeat: no-repeat;
	  background-position: center top;
	    background-size: 1500px 750px;
		background-color:#b4b4b4;
		font-family: Monacospace	;
  font-size:20px;
  line-height: 1.8;
  color:hsl(0, 0%, 24%);
	  
}

h1 {
	  text-align:left;
	  margin-left:8%;
	  font-size: 50px;
	
	  	  
}

h3 {
	 text-align:left;
	  margin-left:15%;
	  font-size:30px;
}

h5  {
	text-align:left;
	margin-left:8%;  
  text-indent: -50px;
  color:#F8F8FF;
  font-size:20px;
  font-family: Copperplate, Papyrus, fantasy;
}


* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  padding:20px;
}

.flex-container .box1 {
  background-color:hsl(313, 12%, 80%);
  width: 50%;
  margin: 30px;
  text-align: center;
  line-height: 45px;
  font-size: 20px;
  padding-top:8%;
  padding-left:2%;
  padding-right:2%;
  
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


html {
  font-family: Monacospace	;
  font-size:20px;
  line-height: 1.8;
  color:hsl(0, 0%, 24%);

}




.header  {
  background-color: hsl(313, 12%, 80%);
 padding: 15px;

}

.footer  {
	     background-color:hsl(0, 0%, 24%);
		  padding: 15px;
		  
}
		 


.column {
  float: left;
  padding: 15px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}






[class*="col-"] {
  float: left;
  padding: 15px;
 
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}




  
  .aside {
	  
  background-color: green;
  padding: 15px;
  color: white;
  text-align: center;
  font-size: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}



.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}


.contactstyle  {
            font-size:30px;
			font-weight:bold;
			text-align:left;
			        
}		 


.contactimage  {
	
	        background-image:url(puzzle-g9ed498c3f_1920.jpg);
			
}


