*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  color: white;
}
:root{
  --bg-color:black;
  --text-color:white;
  --hover-color: hsl(225, 73%, 57%);
}
body{
  background-color: black;
}
.myheader{
  display:block;
  text-align: center;
  align-items: center;
  position: fixed;
  width: 100%;
  padding: 15px;
  height:80px;
  background-color: hsl(0, 0%, 5%);
  cursor: pointer;
  z-index: 100;
}
.logocontainer{
  display: flex;
  justify-content:space-between;
}
.logo{
  display: flex;
  justify-content: center;
  font-size:30px;
  font-weight: bold;
}
.logo img{
  height: 63px;
  width: 50px;
  margin-right: -8px;
  margin-top: -4px;
}
.myheader a{
  font-size: 20px;
}
nav a{
  display: block;
  margin-right: 10px;
  padding-bottom: 3%;
}
.headercon a{
  display: block;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid white;
  border-radius: 50px;
  margin-bottom:5%;
}
nav{
  display: none;
  background-color: hsl(0, 0%, 5%);
}
.headercon{
  display: none;
  background-color: hsl(0, 0%, 5%);
  border-radius: 0 0 10px 10px;
}
:target{
  display:block;
}
:target ~ .headercon{
  display:block;
}
.menubar{
  color: white;
  font-size:3rem !important;
}
#close{
  display:flex;
  justify-content: center;
  margin: 10px 40%;
  border-radius: 50%;
  font-size: 3rem;
  color: white;
  font-weight: bolder;
}
#close:hover{
  color: hsl(0, 0%, 45%);
  background-color: hsl(0, 0%, 15%);
}
.myheader a:hover{
  color: hsl(0, 0%, 45%);
}
.myheader a:active{
  color: hsl(0, 0%, 77%);
}
@media (min-width:750px){
  .myheader{
    display: flex;
    justify-content: space-between;
    text-align: center;
    height:80px;
  }
  nav, .headercon{
    display: flex;
    justify-content: space-between;
    margin: 0;
    background-color: hsl(0, 0%, 5%);
    overflow:hidden;
  }
  #home{
    padding-top: 100px;
  }
  .menubar,.close{
    display:none !important;
    margin: 0;
  }
  #close{
    display: none;
  }
  :target{
    display: flex;
  }
  :target ~ .headercon{
    display: flex;
  }
  .homepageimg{
    margin-bottom: -10%;
  }
}
@media (max-width:400px){
  .myheader{
    flex-direction: column;
    align-items: center;
  }
  .home{
    padding-top: 80px;
  }
}
.home{
  display: block;
  padding-top:100px;
  padding-bottom:5%;
}
.homepageimg{
  display: flex;
  justify-content:center;
  text-align: center;
}
.chikezieimg{
  height: 200px;
  width: 200px;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 0 10px 10px white;
}
.myname{
  white-space: nowrap;
  overflow: hidden;
  font-size: 18px;
  font-family: monospace;
  margin-top:5%;
  margin-left: 5%;
  z-index: 5;
  animation: typing 4s steps(20) 1s infinite alternate,
    blink 0.7s step-end infinite;
}
@keyframes typing {
  0% { width: 0ch; }
  50% { width: 25ch; }
  100% { width: 0ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}
.homepagecontainer{
  margin: 5%;
  display: block;
}
.homepageintro{
  font-size: 2.5rem;
}
.homepageexplane{
  margin-top: 5%;
}
.homepageexplane p{
  margin-bottom: 8%;
}
.homepageletdiscuss{
  margin-left: 3%;
  padding: 10px;
  border: 1px solid white;
  border-radius: 50px;
}
.homepageletdiscuss:hover{
  color: hsl(0, 0%, 45%);
}
@media (min-width:750px){
  .homepagecontainer{
    display:flex;
    justify-content:space-between;
    margin: 5%;
  }
  .homepageexplane{
    margin-top: 3%;
    margin-left: 8%;
  }
  .myname{
    padding-top:-5;
  }
  .home{
    margin-bottom: -7%;
  }
} 
.aboutme{
  display: none;
  margin: 5%;
}
.aboutmecontainer h1{
  padding-top: 10px;
  font-size: 70px;
  font-weight: bold;
}
.aboutmebox1{
  padding: 5%;
  margin-bottom: 5%;
  background-color: hsl(0, 0%, 10%);
  border-radius: 10px;
}
.aboutmebox1 h1{
  font-size: 25px;
  margin-bottom: 5%;
}
.aboutmebox2{
  background-color: hsl(0, 0%, 10%);
}
.aboutmebox2 h1{
  font-size: 40px;
  padding: 10%;
}
.aboutmebox3{
  border: 1px solid hsl(0, 0%, 45%);
  margin: 5%;
  border-radius: 20px;
  padding: 10% 5px;
}
.aboutmebox3 h3{
  font-size:30px;
  font-family: Georgia, 'Times New Roman', ;
  padding: 5%;
}
.aboutmebox3 span{
  font-size: 16px;
}
.extention{
  display: block;
  margin: 5%;
}
.extentionletsdiscuss{
  padding:10px ;
  border: 1px solid white;
  border-radius: 50px;
}
.extentionletsdiscuss:hover{
  color: hsl(0, 0%, 45%);
}
.extentionimg{
  width: 380px;
  height: 300px;
  margin-bottom: 5%;
}
@media(min-width:750px){
  .homepageextention{
    display: flex;
    justify-content: space-between;
  }
  .extentionimg{
    margin-bottom: -5%;
    width: 450px;
  }
  .extentionbox1 p{
    font-size: 25px;
  }
}
.extention11{
  width: 100%;
  margin-bottom: 5%;
}
.extentionspan1 a:hover{
  color: hsl(0, 0%, 45%);
}
.extentionbox2{
  width: 100%;
}

.extentionbox4{
  display: flex;
  justify-content: space-between;
}

#extentionbox3{
  padding-top: 5%;
  padding-bottom: 5%;
  border-bottom: 1px solid white ;
}
.extentionspan2{
  display:none;
}
:target ~ .extentionspan2 {
  display: block;
  margin-top: 20%;
}
.featurework{
  margin: 2%;
  padding-top: 5%;
}
.featurework h1{
  font-size: 3rem;
}
.featureworkbox1{
  display: block;
  align-items: center;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 5%;
  border-bottom: 1px solid white;
}
.featureworkbox1 a{
  align-items: center;
  text-align: center;
  border: 1px solid white;
  border-radius: 50px;
  padding: 5px;
}
.featureworkbox1 a:hover{
  color: hsl(0, 0%, 45%);
}
@media (min-width:750px){
  .featureworkcontainer{
    flex: 1;
  }
  .featureworkbox1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding-top: 5%;
    padding-bottom: 5%;
    border-bottom: 1px solid white;
  }
}
.featureworkbox1 img{
  width: 250px;
  height: 200px;
}
.webdesign, .webdev, .branding{
  padding-bottom: 5%;
}
.service{
  padding: 5%;
}
.service h2{
  font-size: 32px;
  padding-bottom: 5%;
}
.service h1{
  padding-top: 5%;
  align-items: center;
  text-align: center;
  margin-bottom: 5%;
  border-bottom: 1px solid white;
}

@media(min-width:750px){
  .servicecontainer{
    display: flex;
    justify-content: space-between;

  }
  .servicebox1{
    width: 32%;
  }
  .servicebox1 h1{
    padding-bottom: 3%;
  }
}
.ourruningproject h2 {
  padding-top: 10%;
}
iframe{
  width: 100%;
  height: 50vh;
  margin-bottom: 5%;
}
@media(min-width:750px){
  .ourruningproject{
    padding: 10% 10% 0% 10%;
    display: flex;
    justify-content: center;
  }
  iframe{
    height: 100vh;
    width:100%;
  }
}
.whychooseus span{
  border: 1px solid black;
  border-radius: 10px;
  padding: 0 3px;
}
.whychooseus h2{
  margin-bottom: 5%;
}
.whychooseus{
  padding: 5%;
  color: black;
  align-items: center;
  text-align: center;
  margin: 0;
  background-color:black;
}
.whychooseusbox1{
  display: flex;
  justify-content: space-between;
}
.whychooseusbox2 h1{
  font-size: 40px;
  padding-bottom: 5%;
  border-bottom: 1px solid white;
} 
.whychooseusbox2 h4{
  font-size: 40px;
}
.whychooseusbox2 p{
  font-size: 16px;
  font-weight: bolder;
  padding-bottom: 15%;
}
.whychooseus p{
  font-size: 10px;
  padding-bottom: 5%;
}
.whychooseuslink{
  padding: 10px 25px;
  background:hsl(22, 73%, 47%);
  border-radius: 5px;
  box-shadow:  0 3px 8px hsl(22, 73%, 37%);
}
.whychooseuslink:hover{
  background-color: hsl(22, 73%, 67%);
  color: hsl(0, 0%, 15%);
}
@media(min-width:750px){
  .whychooseusbox2 h1 {
    padding-bottom: 5%;
    font-size:70px;
    border-bottom: 2px solid white;
  }
  .whychooseusbox2 h4{
    font-size: 60px;
  }
  .whychooseusbox2 p{
    font-size: 20px;
  }
}
#contactme{
  padding: 5%;
  display: none;
}
#contact:target ~ #contactme{
  display: block;
}
.contact h1{
  font-size:25px;
  margin-bottom: 5%;
}
.contact p{
  margin-bottom: 10%;
}
.contactfont span i{
  margin-top: 5%;
  margin-right: 5%;
}
.contactformcontainer{
  align-items: center;
  text-align: center;
  padding-top: 10%;
}
label{
  font-size: 20px;
}
input{
  color: black;
  font-size: 20px;
  padding: 10px 25px;
}
textarea{
  color: black;
  font-size: 20px;
}
#formcontainer{
  display: block;
}
#btn{
  padding: 5px 10px;
  color: black;
  border: hidden;
  border-radius: 50px;
  font-size: 25px;
}
#btn:hover{
  background-color: hsl(0, 0%, 45%);
}
.errormessage{
  font-size: 25px;
}
.thefooter{
  background: hsl(0, 0%, 10%);
}
.thefooter a i{
  color: hsl(210, 100%, 57%);
}
.thefooter a i:hover{
  color:black;
}
.footernavbar a:hover{
  color: black;
}
.footernavbar{
  display: flex;
  justify-content:space-evenly;
  margin-left: 5%;
  padding-top: 5%;
}
.social-icons{
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid white;
  padding:10px 1px;
  font-size: 1.5rem;
  color: hsl(210, 100%, 57%);
}
.copyright{
  text-align: center;
  align-items: center;
  padding: 5px 0;
  overflow: hidden;
  background-color: hsl(0, 0%, 10%);
}
.copyright p{
  font-size: 10px;
  padding-top: 1%;
  margin-bottom: 1%;
}