/*CSS reset*/
 /* Base HTML Styles */
 @import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=IndieFlower&display=swap');

 :root {
   --brand: #d6b9e6;
   --action: #d6b9e6;
   --white: #ffffff;
   --base-light: #0a9396;
   --base-dark: #005f73;
   --black: #0d0711;
   --text: var(--white);
  --heading-font: "Indie Flower", cursive;
  --body-font: "Exo", sans-serif;
 }
 html, body {
    font-family: var(--body-font);
    font-optical-sizing: auto;
    font-weight:<weight>;
    font-style: normal;
    font-size: larger;
    
  }
  
  /* Add Heading styles here  */
  
  h1 {
    font-family: var(--heading-font);
    font-weight: 600;
    font-style: normal;
  }
  .h1{border: 10px solid var(--base-light);

  }
  h2 {
    font-family: var(--heading-font);
    font-weight: 400;
    font-style: normal;
  }
  h3 {
  font-family: var(--heading-font)
  }
  h4 {
  font-family: var(--heading-font)
  }
  h5{
  font-family: var(--heading-font)
  }
  h6{
  font-family: var(--heading-font)
  }


  
  /*.header & checkbox*/
  .checkbox{
    display: flex;
    align-items:center;
  }
  header{
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--base-light);
    margin: 0%;
    padding: 0%;
    /* padding-top: 60px; */
    /* border:#d6b9e6 solid 5px; */
    box-sizing: border-box;
    /* z-index: 1000; */
    /* position: fixed; */
    /* unicode-bidi: isolate; */
  }


  /*.headerphoto*/
  .headerphoto{
    border-radius: 50%;
    border:var(--action) 8px solid;
    width: 150px;
    height: 150px;
    transition:transform 0.3s ease;
  }

  .headerphoto:hover{
    transform:scale(1.2)
  }

  .logo{
    display: inline-block;
    width: 50%;
    border-radius: 50%;
    display:flex;
    justify-content: flex-end;
  }

  /*.nav-menu*/

  .nav-menu {
    display: flex;
    justify-content: flex-end;
    gap:20px;
  }

  .nav-menu a{
    color:var(--white);
    text-decoration: none;
    padding: 5px 10px;
    transition: background 0.3s ease;
  }

  .nav-menu a:hover{
    background:var(--base-light);
    border-radius: 5px;
  }

  .hamburger-menu{
    display: none;
    position: relative;
  }

  .hamburger-icon {
    font-size: 24px;
    cursor:pointer;
  }

  .hamburger-content {
    display: none;
    position:relative;
    top:30%;
    right:0;
    background: var(--base-light);
    border:1px solid var(--action)

  }

  .hamburger-content a {
    display: block;
    padding: 10px;
    color:var(--white);
    text-decoration: none;
  }

  @media (max-width:768px) {
    .hamburger-content a {
      font-size: small;
    }

    .headerphoto {
      width: 80px;
      height: 80px;
      border: var(--action) 3px solid;
    }
  }

  .hamburger-content a:hover {
    background: var(--base-light);
  }

  /* header::after {
    content: '';
    display: block;
    width: calc(100%-0px);
    height: 2px;
    background: var(--brand);
    position:absolute;
    bottom: 0;
    left: 150px;
    z-index: 0;

  } */



  /* .hamburger-icon  */
 .hamburger-icon {
    height: 50px;
  }
  
  @media (max-width:768px) {
    .nav-menu{
      display: none;
    }
    .hamburger-menu {
      display: block;
    }
    .hamburger-content{
      display: block;
    }
    .hamburger-icon {
      display: none;
    }
    
  }
  
  body{
    background-color: var(--base-light);
} 
  /*.hero*/
  .hero {
    display: flex;
    flex-wrap: warp;
    justify-content: space-around;
    align-items: center;
    height: 80vh;
    gap: 1rem;
    padding: 1rem;

  }
  

  /*.herophoto*/
  .herophoto {
    position:relative;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    background-position:center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: var(--brand) 10px solid;
  }

  #myphoto {
    background-image: url(img/my\ photo.jpg);
  }

  #myproject {
    background-image: url(img/Shecodes.png);
  }

  #contactme {
    background-image: url(img/contact\ me.PNG);
  }

  .overlay-text {
     display: none;
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     background: var(--action);
     color: var(--base-dark);
     width:400%;
     text-align: center;
     padding: 0.5rem;
     text-decoration: none;
     text-size-adjust: larger;
     font-weight: bolder;
     
  }

  .herophoto:hover .overlay-text {
    display: block;
  }

  .herophoto:hover {
    transform: scale(1.05);
  }

  @media (max-width:768px) {
    .herophoto {
      width: 220px;
      height: 220px;
    }

    #myphoto {
      order: 1;
    }

    #myproject {
      order: 2;
    }

    #contactme {
      order: 3;
      position: relative;
      /* bottom: 1rem;
      right: 1rem;
      width: 120px;
      height: 120px; */
    }

    .overlay-text {

      width:200%;
      text-align: center;
      padding: 0.5rem;
      text-decoration: none;
      /* text-size-adjust: larger; */
      font-weight: bolder;
      overflow-wrap: break-word;
      
   }

    .hero {
      flex-direction: column;
    }

  }

  @media (min-width:769px) {
    .herophoto {
      width: 450px;
      height: 450px;
    }

    .hero {
      flex-direction: row;
    }
  }



  /*.aboutme*/
  .aboutme {
    background-color: var(--base-dark);
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 80px;
    margin-right: 80px;
    border: var(--action) 20px solid;
    padding:20px var(--action) solid;
    align-items: center;
    color:var(--white);
    border-radius: 50px;
    
  }

  .abouttitle{
    display:felx;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    font-weight: bold;
    unicode-bidi: isolate;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
  }

  .abouttitle h2{
    display: flex;
    justify-content: center;
    font-style: bold;
    text-size-adjust: larger;
  }

  .abouttext{
    align-items: center;
    overflow-wrap: anywhere; 
    padding: 0.6rem;
    margin-top: 0px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    border: 20px;
    gap: 350px;
    line-height: 2;
    display:block;
    unicode-bidi: isolate;
  }

  @media (max-width:768px) {
    .aboutme {margin: 5px 5px;
      border: var(--action) 3px solid;
     }

     .abouttitle h2{
      font-size: x-large;
      padding: 0;
      margin:0;
     }

     .abouttext{
      font-size: medium;
      padding: 0%;
      margin-right: 10px;
      
     }
    
   }


  /*.articles-container*/

  .articles-container{
    background-color: var(--base-light);
    margin-top: 150px;
    margin-bottom: 150px;
    margin-left: 80px;
    margin-right: 80px;
    /* border: 20px var(--brand) solid; */
    /* padding: 20px; */
    /* color: var(--white); */
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 100%;
    /* border: 1px solid red; */
  }

 

  @media (min-width:768px){
    .articles-container{
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

    /*.article*/
    .articles-container article{
      /* padding:16px 16px; */
      background-color: var(--base-dark);
      border: var(--action) 20px solid;
      border-radius: 50px;
      /* margin:0px 10px; */
      transition:all 0.3s ease;
      color: var(--white);
      flex: 1;
    }


    .articles-container article:hover{
      filter: contrast(150%);

    }

   h3 {
      display: flex;
      justify-content: center;
    }

   .articles-container .project-btn {
      
      text-decoration: none;
      color: var(--base-dark);
      background-color: var(--action);
      display: flex;
      justify-content: center;
    }

    article .project-photo {
      width: 250px;
      /* border: var(--action) solid 10px; */
    }


    @media (max-width:768px) {
    .articles-container{
      margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 10px;
      margin-right: 10px;
     }

     .articles-container article{
      border: var(--action) 3px solid;
      font-size: medium;
     }

     
    }
  
  /*.contact-form */
  .contact-form{
    padding:48px 16px;
    border: var(--action) 20px solid;
    border-radius: 50px;
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 50px;
    margin-bottom: 30px;
    background-color: var(--base-dark);
    /* display: flex;
    justify-content: center; */
  }

  /* .form {
    display: flex;
    justify-content: center;
  } */

  .contact-form input{
    display: block;
    width:100%;
    padding: 8px;
    margin-bottom: 20px;
    margin-top: 8px;
    border-radius: 50px;
    /* margin-right: 5px; */
    box-sizing: border-box
  }
  


  .contact-form textarea {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    margin-bottom: 20px;
    border-radius: 50px;
    border-style: dotted;
    padding-right: -200px;
    box-sizing: border-box;
  }

  .contact-form label {
    display: block;
    width: 100%;
    color: var(--white);
  }

  .contact-form h2 {
    color:var(--white);
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    text-size-adjust: larger;
    text-shadow: var(--action);
    /* background-color: var(--base-dark); */
  
  }

  .contact-form input[type="button"]{
    background-color: var(--action);
    margin-top: 12px; 
    cursor:pointer;
    display:flex;
    justify-content: center;
    height: 150px;
    transition: 0.3 ease;

  }

  .submitbtn :hover{
    filter: contrast(150%);
  }
  
  .submit {
    border: solid 5px var(--base-dark);
    background-color: var(--brand);
    width: 350px;
    /* height: 250px; */
    /* size-adjust: larger; */
    /* height: 250px; */
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 22px;

  }

  .contact-form .submit{
    display: flex;
    justify-content: center;
    color: var(--base-dark);
    /* height: 200px; */
  }

  .submitbtn{
    display: flex;
    justify-content: center;
    color: var(--white);
  }


  @media (max-width:768px){
    .contact-form{
      margin-top: 20px;
      margin-bottom: 20px;
      margin-left: 20px;
      margin-right: 20px;
      padding: 5% 10%;
      border: var(--action) 3px solid;
    }

    .contact-form h2 {
      font-size: larger;
    }

    .contact-form label {
      font-style: italic;
      font-size: medium;
    }

    .contact-form .submit{
      width: 50%;
    }

    .submit {
      font-size: 15px;
    }


  }


  /*footer*/
  footer{
    padding: 16px;
    text-align: center;
      display: flex;
      justify-content: space-around;
  }

  .social-icon {
    width: 40px;
    height: 40px;
  }
   @media (min-width: 768px) {
       footer {
           justify-content: center;
       }
     
       footer .social-icon {
           margin-left: 20px;
           margin-right: 20px;
       }
     }

     @media (max-width:768px){
      footer {
        justify-content: space-evenly;
      }
    }

     
  /*projects.html setting*/

  .project-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 80px;
    z-index: 1000;;
    margin:0 auto;
    padding-top: 15px;

    
  }
 

  .project-logo {
    width: 50px;
    border-radius: 50%;
    
  }

  .project-hero h2{
    display:flex;
    background-color: var(--base-light);
    margin:20px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    color: var(--white);
    
  }

  .projectspg{
    display: flex;
    flex-direction: column;
  }

  .projectspg-photo{
    width: 100%;
  }

  .projectarticle{
    background-color: var(--base-dark);
    border:var(--action) 5px solid;
    border-radius: 25%;
    margin: 10px;
  }

  .projectarticle h3{
    color:var(--white);
  }

  .projectcontact{
    color: var(--white);
    display: flex;
    justify-content: center;
    margin-top: 100px;
    font-size: larger;
  }

  @media (min-width:600px){
    .projectspg{
      flex-direction: row;
      flex-wrap: wrap;
      gap:20px;
      margin-top: 20px;
    }

    .projectarticle{
      width:calc(50% - 40px);
      flex-grow: 1;

    }
  }

  @media (min-width:1024px){
    .projectspg{
    flex-wrap: nowrap;
    }
   }








      
    







  /* style to make style guide */
  body {
    padding: 20px;
  }
  .colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .colors div {
    width: 100px;
    height: 100px;
  }
  
  .brand {
    background-color: var(--brand);
  }
  /* .brand-alt {
    background-color: var(--brand-alt);
  } */
  .action {
    background-color: var(--action);
  }
  /* .action-alt {
    background-color: var(--action-alt);
  } */
  /* .base-darkest {
    background-color: var(--base-darkest);
  }
  .base-darker {
    background-color: var(--base-darker);
  } */
  .base-dark {
    background-color: var(--base-dark);
  }
  /* .base-mid {
    background-color: var(--base-mid);
  } */
  .base-light {
    background-color: var(--base-light);
  }
  /* .base-lighter {
    background-color: var(--base-lighter);
  }
  .base-lightest {
    background-color: var(--base-lightest);
  } */