body {
    background-color: #e9e2e4;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

nav {
    background-color: gray;
} 

#mainNav .nav-link {
    font-weight: bolder;
    color: white;
    
}

#mainNav .navbar-brand {
    font-weight: bolder;
    color: white;
}


#mainNav .nav-link:hover {
    color: #af6c86;
    
}

.hero {
   min-height: 70svh; 
    background-image: no-repeat;
    background-position: center;
  background-size: 100% 100%;
  background-size: cover;

}

.hero-title {
    font-size: 35px;
    color: rgb(35, 34, 34);
    font-family: "Google Sans", sans-serif;
    padding-top: 19%;
    margin-left: 5%;
    font-weight: 700;
}

.hero-title span {
color: #af6c86;
}

.contact-me {
  background-color: #af6c86;  
  height: 33px;
  width: 120px;
  font-weight: bolder;
  color: white;
  border-radius: 5px;
  margin-left: 5%;
  margin-top: 5%;
  border: none;
}

.contact-me:hover {
    background-color: white;
    color: #af6c86;
 
}

.portfolio-img {
    margin-top: 19%;
    background-color: #af6c86;
    border-radius: 35%;
    height: 200px;
    margin-left: 45%;
}

.about {
    font-family: "Roboto", sans-serif;
    font-size: 25px;
    font-weight: 700;
    margin-top: 1%;
    text-align: center;
    color: #af6c86;
   
}

.about-body span {
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
}

.divider {
    display: flex;
    border-bottom: dotted gray;
    width: 50px;
 display: inline-block;
    color: aqua;
  margin-left: 45%;
}

.triangle {
   display: inline-block;
   margin-left: 0.8%;
   color: gray;
 
}

.divider-right {
    display: flex;
    border-bottom: dotted grey;
    width: 50px;
    margin-left: 0.8%;
    display: inline-block;
    
}

.about-body {
    margin-top: 2%;
    line-break: 20px;
    
}

p span {
    display: block;
}

.about-header {
    font-size: 28px;
    font-weight: bolder;
    margin-top: 18%;
    margin-bottom: 1%;
}

.img-portfoio {
    background-color: #af6c86;
    margin-top: 14%;
    height: 300px;
    
}

.language {
    font-family: "Roboto", sans-serif;
    font-size: 26px;
    font-weight: bolder;
    margin-left: 5%;

}
.body-card {
   height: 90%;
    border-radius: 12px;
    width: 80%;
    margin-left: 6%;
}
.body-img {
   height: 92%;
    width: 100%;
    border-radius: 12px;
}

ul {
    margin-left: 5%;
}

.Skills {
    margin-top: 5%;
    align-items: center;
    justify-content: center;
}

#skill-body {
 margin-top: 10%;
}

#project-grid {
  height: 100%;
   width: 100%;
    border-radius: 8px;
    background-color: whitesmoke;
   box-shadow: 0 0 15px black;
   margin-top: 5%;
    margin-bottom: 5%;
}

.project-1 {
    height: 100%;
    width: 100%;
   padding-top: 4%;
}

.work-img {
    height: 97%;
    width: 100%;
    border-radius: 10px;
    border: 1px solid orange;
}
.my-work-card {
    min-height: 100%;
    min-width: 100%;
   padding-top: 4%;
}

.work-title {
    font-family: "anton", sans-serif;
    font-size: 55px;
}

.my-work-card span {
    display: inline-block;
  text-align: center;
  margin-top: 3%;
  border-radius: 20px;
  border: none;
  height: 35px;
  font-weight: bold;
  text-transform: uppercase;
}

.my-work-card .orange {
    background-color: orangered;
    color: white;
    font-weight: bold;
    width: 70px;
   
}

.my-work-card .blue {
    background-color: rgb(10, 107, 187);
    color: white;
    font-weight: bold;
    width: 65px;
}

.my-work-card .purple {
    background-color: rgb(180, 2, 180);
    color: white;
    width: 120px;
}

.my-work-card .grey {
    background-color: rgb(206, 205, 205);
    color: rgb(0, 0, 0);
    width: 200px;
}

.my-work-body {
    font-family: 'Times New Roman', Times, serif;
}
.my-work-card button {
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 20px;
    text-align: center;
    height: 35px;
    width: 150px;
    margin-top: 5%;
    margin-bottom: 5%;
}

.live-demo {
    background-color: orange;
    color: white;
    border: none;
}

.view-code {
border: 1px solid orange;
color:  orange;
background-color: white;

}

.live-demo:hover {
    border: 1px solid orange;
  color:  orange;
   background-color: white;
}

.view-code:hover {
    background-color: orange;
    color: white;
    border: none;
}

.portfolio-body {
    height: 100%;
    width: 100%;
   padding-top: 4%;
}


.portfolio-imgg {
   height: 98%;
   width: 98%;
    border: 20px solid #058030;
    border-radius: 12px;
    
}

.strong {
    font-size: 20PX;
    font-family: "Roboto", sans-serif;
}

.portfolio-body h3 {
    font-size: 21PX;
    font-family: "Roboto", sans-serif;
    text-transform: capitalize;
}


.challenge-body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px;
    
}

ul {
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px;
}

ul span {
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px;
    font-weight: bold;

}

.portfolio-body button {
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 20px;
    text-align: center;
    height: 35px;
    width: 150px;
    margin-top: 5%;
    margin-left: 2%;
}

.live {
    background-color: #058030;
    color: white;
    border: none;
    
}

.view {
border: 1px solid #058030;
color:  #058030;
background-color: white;

}

.live:hover {
  border: 1px solid #058030;
color:  #058030;
background-color: white;  
}

.view:hover {
  background-color: #058030;
    color: white;
    border: none;  
}


.contact-body {
    background-color: #af6c86;
    min-height: 200px;
}

.contact-body {
    padding-top: 3%;
    padding-left: 3%;
}

.contact-body .body {
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px;
}

.contact-body h4 {
    font-family: "Roboto", sans-serif;
    font-size: 25px;
}

.contact-body button {
 background-color: white;  
  height: 35px;
  width: 250px;
  font-weight: bolder;
  color: #af6c86;
  border-radius: 5px;
  margin-left: 35%;
  border: none;
  margin-bottom: 1%;
}

.contact-body button:hover {
    background-color: white; 
    color: black;
}

  
.fa-brands {
    min-height: 30px;
    min-width: 30px;
    border-radius: 50%;
    color: #000000;
    padding-top: 6px;
  

}

.fa-brands:hover {
    color: #e2c3cf;
}

.git {
  margin-left: 32%; 
}
.icon-name a {
   color: black;
   text-decoration: underline black;
}

.icon-name a:hover {
   color: #e2c3cf;
   text-decoration: underline #e2c3cf;
}

.urgent {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    text-align: center;

}

footer {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-left: 3%;
}

footer p {
    margin-top: 2%;
    font-weight: bold;
}

.footer-img {
    min-height: 20px;
    margin-top: 2%;
}

 @media (max-width: 768px)  {
.hero-title {
    font-size: 25px;
    margin-top: 4%;
}

    .menu-toggle.active .hamburger {
        display: none; 
    }
    .menu-toggle.active .cancel {
        display: block; 
    }
  
    .divider {
        margin-left: 5%;
    }
    .triangle {
        margin-left: 5%;
    }
    
    .divider-right {
     margin-left: 5%;
    }

    .about {
       text-align: start;
       margin-left: 5%;
    }

    .language {
    font-size: 15px;
    font-weight: bold;
    margin-left: 5%;
}

ul {
    font-family: 'Times New Roman', Times, serif;
    font-size: 15px;
}

.about-body span {
    font-size: 15px;
}

.work-title {
    font-size: 30px;
}

#project-grid {
   margin-top: 5%;
    margin-bottom: 15%;
}

.portfolio-body {
    max-height: 100%;
    max-width: 100%;
   padding-top: 4%;
}


.portfolio-imgg {
   max-height: 98%;
   max-width: 98%;
    border: 20px solid #058030;
    border-radius: 12px;
    
}


.challenge-body {
    font-size: 14px;
    margin-left: 2.5%;
    
}
.contact-body {
    background-color: #af6c86;
   min-height: 350px; 
    width: auto;
   padding-top: 3%;
    padding-left: 3%;
}

.contact-body .body {
    font-size: 14px;
    margin-left: 2%;
}

.contact-body h1 {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
}

.contact-body button {
    margin-top: 10%;
    margin-bottom: 5%;
    margin-left: 0%;
}

.portfolio-img {
    margin-left: 2%;
}

.footer p {
    margin-top: 3%;
    font-weight: bold;
    font-size: 10px;
    font-weight: 100;
}
.git {
    margin-left: 0%;
}
}