@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Allura&family=Chivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Gloria+Hallelujah&family=Gwendolyn:wght@400;700&family=Handlee&family=Neucha&family=Nixie+One&family=Open+Sans&family=Pacifico&family=Parisienne&display=swap');

html {font-size: 100%;} /*16px*/

body {
    margin-left: 2%;
    margin-right: 2%;
  background: white;
  font-family: 'Nixie One', sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color:  rgba(10, 2, 21, 0.578);

}

p {margin-bottom: 1rem;
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.5rem;
}

h1, h2, h3, h4, h5 {
    margin: 2rem 0 1.38rem;
    font-family: 'Nixie One', sans-serif;
    font-weight: 400;
    line-height: 1.3;
  }
  
  h1 {
    margin-top: 0;
    font-size: 3.8rem;
    display: inline-block;
    margin: auto;
    text-shadow:  rgb(144, 138, 153,0.25) 48px 11px 19px;
    
    

  }
  
  h2 {font-size: 3.157rem;
    color: #fda901;
    text-shadow:rgba(250, 214, 152, 0.25) 10px 5px 12px;
    font-family: "Abril Fatface";
}
  
  h3 {font-size: 2.369rem;
    color: #fda901;
    text-shadow:rgba(250, 214, 152, 0.25) 10px 5px 12px;
    font-family: "Abril Fatface";
}
  
  h4 {font-size: 1.777rem;}
  
  h5 {font-size: 1.333rem;}
  
  small, .text_small {font-size: 0.75rem;}

  
/*nav*/

nav{
    position:sticky;
    top:0px;
}

.contact{
    list-style: none;
    
}

.listContact{
    background-color: white;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    gap: 10%;
    list-style: none;
    margin-top: 2%;
    -webkit-box-shadow: 20px 17px 19px 0px rgb(144, 138, 153,0.35);
    -moz-box-shadow: 20px 17px 19px 0px rgb(144, 138, 153,0.35);
    box-shadow: 20px 17px 19px 0px  rgb(144, 138, 153,0.35);
    border-radius: 30px;
    

    
    
    
}

.github, .instagram, .email, .linkedin, .darkMode, .darkModeToggle{
    font-size:25px; 
    text-align: center;
    color:  rgba(10, 2, 21, 0.578);
    
}

.github:hover{
    color: #b3adbb ;
}

.instagram:hover{
   
        color: #b3adbb ;
    }
.email:hover{
    
        color: #b3adbb ;
    }
.linkedin:hover{
    color: #b3adbb;
}

.darkMode:hover{
    color: #b3adbb;
}





/*header*/

img{ 
    order: 2;
   
    border-radius: 30px;
    width: 25% ;
    height: 25%;
    align-self:center;  
    margin-right: 10%;
    border: 2px solid orange;
    
    
}



.headerContainer, .imgContainer{
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    
}

.nameHeader{
    text-align: center;
}

.name{
    font-family: "Handlee";
}
.role{
    text-align: center;
}

.imgContainer{
    border: 20px, solid, black ;
    display: flex;
    flex-direction: row;
    
    gap: 5% ;
    

   
}



.frontandback {
    color: #fda901;
    font-weight:900;
    font-size: 2rem;
    font-family: "Abril Fatface";
   
    line-height:normal;
}

.paragraph1{
    
    text-align: center;
    justify-content: center;
    align-self: center;
    font-weight: 400 ;
    width: 30%;
    margin-left: 25%;
    text-align: justify;
    text-justify: inter-word;
    
}

/* About me section */
    section{
        display: flex;
        flex-direction: column;
        gap:5%
    }
.aboutMe{
    margin: 10% auto;
    margin-bottom: 2%
   
}

.paragraph2 {

    text-align: center;
    font-weight: 400 ;
    
    width: 60%;
    margin-left: 25%;
    text-align: justify;
  text-justify: inter-word;
  margin-top: 0;
  
   
}

.extrainfo{
    font-family:'Gloria Hallelujah';
    font-size: smaller;
    color:#d3a12c ;
}

.aboutMeContainer{
    
    
    background:#F5F5F5;
    border-radius: 30px;
    
}

.getInTouch{
    text-decoration: none;
    color: inherit;
}

.getInTouch:hover{
    color: #b3adbb;
}

.getInTouchIcon{
    margin-right: 1%;
    text-align: center;
    font-size:25px;
}
/*My Projects*/

.myProjects{
    text-align: center;
}
.container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;

   flex-wrap: wrap;
   margin: 5% auto;
    margin-bottom: 2%
}

.ProjectImg{
    object-fit: cover;
    object-position: 100% 0%;
    width: 100%;
    height: 100%;
    border: none;

}

.certificates{
    display: flex;
    flex-direction: row;
    justify-content: space-around;

   flex-wrap: wrap;
   margin: 5% auto;
    margin-bottom: 2%
}


article {
    --img-scale: 1.001;
    --title-color: black;
    --link-icon-translate: -20px;
    --link-icon-opacity: 0;
    position: relative;
    border-radius: 30px;
    box-shadow:  none;
    background: #fff;
   transform-origin: center;
    transition: 0.4s ;
    overflow: hidden;
  }
  
 article a::after {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    cursor: pointer;
    content: "";
  }
  
  /* basic article elements styling */
  article h2 {
    margin: 0 0 18px 0;
    font-family: "Abril Fatface";
    color: #fda901;
    font-size: 1.9rem;
    letter-spacing: 0.06em;
    transition: color 0.3s ease-in;
  }
  
  figure {
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  
  article img {
    max-width: 100%;
    transform-origin: center;
    transform: scale(var(--img-scale));
    transition: transform 0.4s ease-in-out;
  }
  
  .article-body {
    padding: 24px;
  }
  
  article a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #28666e;
  }
  
  article a:focus {
    outline: 1px dotted #28666e;
  }
  
  article a .icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    transform: translateX(var(--link-icon-translate));
    opacity: var(--link-icon-opacity);
    transition: all 0.3s;
  }
  
  /* using the has() relational pseudo selector to update our custom properties */
  article:has(:hover, :focus) {
    --img-scale: 1.1;
    --title-color: #28666e;
    --link-icon-translate: 0;
    --link-icon-opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  }
  
  
  /************************ 
  Generic layout 
  **************************/
  
  *,
  *::before,
  *::after {
   box-sizing: border-box;
  }
  
  .badges {
    display: grid;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
  }
 
  
  .articles {
    display: grid;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
  }
  
/*Footer*/

footer{
    border-radius: 30px;
    -webkit-box-shadow: 20px 17px 19px 0px rgb(144, 138, 153,0.35);
      -moz-box-shadow: 20px 17px 19px 0px rgb(144, 138, 153,0.35);
      box-shadow: 20px 30px 19px 0px  rgb(144, 138, 153,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family:'Gloria Hallelujah';
      font-size: smaller;
      color:#d3a12c ;
       
  }

/*responsiveness*/

@media (min-width:654px) and (max-width: 1200px){
    body{
        margin:auto; 
    }
    h1{
        margin-right:10px;
        margin-left:10px;
    }
    .imgContainer{ 
        flex-direction: column-reverse;
        align-content: space-between;
        justify-content: center;
        margin-top: 5%;
        
    }
    img{
        margin: auto; 
        width:35%
        
    }
   
    .paragraph1, .paragraph2{
        margin: 8% auto;
        font-size: 1.3rem;
        width: 60%;
        margin-bottom:5%
        
    }
    .aboutMe{
        margin: 3% auto 
    }

    .paragraph2{
        margin-top:3%
    }

}
 
     
@media (min-width:1200px) and (max-width:3000px){
    .imgContainer{
        margin-top: 6%;
        gap:0%
       
    }

    img{
        
        width:15%;
        margin-bottom: 5%;
        
    }
    .paragraph1{
        margin: 1% 20% ;
        font-size: 1.3rem;
        width: 60%;
        margin-bottom:5%
        
        
    }
    .aboutMe{
        margin: 3% auto 
    }

    .paragraph2{
        margin-top:2%;
        font-size: 1.3rem;
        width: 70%;
        margin-bottom:5%;
        margin-left:20%;
       
    }
}
    

@media screen and (max-width: 653px){
    body{
        margin:auto; 
    }
    h1{
        margin-right:10px;
        margin-left:10px;
    }
    .imgContainer{ 
        flex-direction: column-reverse;
        align-content: space-between;
        justify-content: center;
        margin-top: 5%;
        
    }
    img{
        margin: auto; 
        width:40%;
        
        
        
    }
    
    .paragraph1, .paragraph2{
        margin: 8% auto;
        font-size: 1.3rem;
        width: 60%;
        margin-bottom:5%
        
    }
    .aboutMe{
        margin: 1% auto 
    }

    .paragraph2{
        margin-top:5%
    }
    paragraph{
        font-size: 13px; 
}
}
@media screen and (max-width: 960px) {
    article {
      display: card/inline-size;
    }
    .article-body p {
      /*display: none;*/
      font-size: 1.3rem ;
    }

    footer{
        text-align: center;
    }
    img{
        margin: auto; 
        width:60%;
        
        
        
  }
  
 
  
  .sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
  }