*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  list-style: none;	  
}


.africabar{
	max-width: 100%;
	height: 40px;
	background-image: url(../images/afbar.jpg);
	display: flex;
	justify-content: space-around;
	align-items: center;
	opacity: 1;
}


.body{
	width: 100%;
	height: 100vh;
	display: flex;
	background-image: url(../images/main.jpg);
	background-position: center;
	background-repeat:no-repeat;
	background-size: cover;
	justify-content: center;
	align-items: center;
}



.blink{
	animation: blink 3s infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
	}	
	100% {
		opacity:	.3;
	}
}



			
.explore a{
	text-decoration: none;
	color: #fff;
	font-size: 35px;
}

.explore a:hover{
	color: #fff;
	text-shadow: -1px 1px 20px #ffc, 1px -1px 8px #fff;
}




.heading{
	width:100%;
	text-align: center;
	inline-size: 400px;
	overflow-wrap: break-word;
	margin-top: 220px; 
	color: #fff;
	font-size: 25px;
}


h1{
	position: relative;
}




@media (max-width: 700px) {

	.body{
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: space-around;
		background-image: url(../images/phone.jpg);
		background-position: center;
		background-size: cover;
	}

	.topnav{
		display: none;
	}

	.heading{
		display: none;
	}

}
	
/* Add a black background color to the top navigation */
.topnav {
  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: 19px;
}

/* 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;
}