:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{
	margin: 0;
	padding: 0;
	font-family: comic sans ms;
}







	
	

#banner{
	background : linear-gradient(rgba(0,0,0,0.5),#009688) ,url("myself.jpg");
	background-size: cover;
	background-position:left;
	height:200vh;
	
}
.banner-text{
	text-align: center;
	color: white;
	padding-top: 180px;


}
.banner-text h2{
	font-size: 40px;
	font-family: 'kaushan script' , cursive;
	text-shadow: 2px 3px cyan;


}



}
.banner-text p {
	font-size: 30px;
	font-style:monospace; 
	text-shadow: 3px 3px 0000;


}


.logo{
	width: 100px;
	position: absolute;
	top: 3%;
	left: 1%;
	height: 200px;

}
.banner-btn{
	margin: 70px auto 0;
}
.banner-btn a{
width: 150px;
text-decoration: none;
display: inline-block;
margin: 0 12px;
padding: 12px 0;


color: #fff;

position: relative;
box-shadow: 2px 3px 14px #fff;
z-index: 1;
}
.banner-btn a span{
width: 0;
height:100%;
position: absolute;
top: 0;
left: 0;
background:#fff;
z-index: -1;
transition: 0.5s;
}
 .banner-btn a:hover span{
width:100%;
 transition: 0.5s;

}
.banner-btn a:hover{
	color:cyan;
	border: .10px solid #fff;
}
.banner-text h2:hover {
width:100%;
background-image:url(pics/work.jpg);

transition: 0.5s;

}


.tex-container p nth-child(2){
	
	font-family: sans-serif;
	font-weight: bold;
	letter-spacing: 1px

}
.tex-container p{ 
	margin top:10%;
	margin-left: 5%;
}
.tex-container button {
	width: 100px;
	height:42px ;
	border-radius:10px;
	font-family:comic sans ms ;
	font-weight:bold;
	font-size:10px;
	margin: 0px 10px;
	outline: none;

}
.about-container{
	margin-top: 30%;
	width:100%;
	height: 330px;
	background-color:darken;
	border-radius: 20px;
	box-shadow: 2px 3px 14px cyan;
	display: flex;
	align-content: center;


}

.about-container img{
	width:250px;
	height: 300px;
}
#aboutMe{
	width:400px;

}
 


#qual{
	background-image:url(pics/dev.jpg);
	background-color: blue;
}
#metric{
	padding-top: 30px;
	padding-left: 20px;
	width: 400px;
	height: 500px;
	border: 3px 3px solid;
}

#collage {
	padding-top: 30px;
	padding-left: 20px;
	width: 400px;
	height: 500px;
	border: 3px 3px solid;
}
#metric img {
	color: white;
	box-shadow: 3px 3px 6px cyan;

}
#text{
	padding top: 50px;
	color:white;
	box-shadow: 3px 3px 6px cyan;
	border: 5px 5px 14px cyan;
	border-radius: 20px;
	background-color: black;
}
#text :hover{
	color: blue;
	transition: 0.5s;
}
#isihloko{
	color:red;

}




#contactMe{
	background-color: cyan;
	background-image:url(pics/dev.jpg);

	}
#call {
		
		width: 60px;
		height: 90px;
		

	}
	#contactMe a{

		font font-style:cursive;
		color: red;
	}
	#mail{
		margin-top: 2px;
		width: 50px;
		height: 70px;
	}
	#face,#linkdin,#watap{
		margin-top: 2px;
		width: 50px;
		height: 70px;

	}
#soc{
	margin-top: 15px;
	font-family: monospace;
	font-size: 40px;
}

@media screen and (max-width: 540px max-height: 960px){
	.banner-text h1{
	font-size: 30px;
	text-align: center;
	font-family:cursive;
	

}
@media screen and (max-width: 500px max-height: 900px){

.logo{
	display :none;


}
@media screen and (max-width: 540px max-height: 960){

#snap{
	width: 50px;
	
	height: 70px;

}

@media screen and (max-width: 540px max-height: 960px){

.aboutMe p{
	font-size: 10px;
	text-align: center;
	

}

@media screen and (max-width: 540px max-height: 960px){

.about-container{

	width:50%;
	height: 90px;
	background-color:blue;
	border-radius: 20px;
	box-shadow: 2px 3px 14px cyan;
	display: grid;
	align-content: center;
	margin-top: 4px;
	

}
.title h2{
	color:blue;
	font-size: 10px;
}


.top-container{
	display: grid;
	grid-gap: 20px;
	grid-template-areas: 
	"showcase showcase ";
	
}
.showcase{
	grid-area: showcase;
	min-height: 400px;
	background-color: cyan;s
	background-size: cover;
	background-color:black;
	padding: 3rem;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	box-shadow:cyan;

}