body{
    background-color: #1d1e22;
    font-family: 'Urbanist', sans-serif;
}

img{
    aspect-ratio: auto 16/9;
}

nav{
    background-color: #1d1e22 !important;
    
}

#navigation-bar{
    background-color: #feda6a;
     
   
}



#logo{
    color: #f5f5f5;
    margin: 0.5em;
    padding: 0.5em;
    font-family: 'Roboto Mono', monospace;
     
}

#logo a{
    text-decoration: none;
    color: #393f4d;
    font-weight: bolder;
    transition: font-size 0.2s ease-in-out;
}


#logo a:hover{
   font-size: 2.1em;
}

#nav-bar-items{
    margin: 0.5em;
    padding: 0.5em;
    
}

/* Importación de la fuente Roboto Mono */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

#h1-hero{
    font-family: 'Roboto Mono', monospace;
    font-size: 3.0em;
    color: #feda6a;    
}

#h1-first-words{
    font-family: 'Rosario', sans-serif;
    color:  #d4d4dc;
}

#h1-web-dev:hover{
    animation: highlightText 1s ease-in-out infinite alternate;
    animation: highlightAndUnderline 2s ease-in-out infinite alternate;
    
}

@keyframes highlightAndUnderline {
    0%{
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
        
        border-bottom: 1em dashed feda6a;
    }
    50%{
        text-shadow: 0 0 20px rgba(254, 218, 106, 0.9);
        
        border-bottom: 0.1em dashed transparent;        
    }
    100%{
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
        
        border-bottom: 0.1em dashed feda6a;
    }
}

#webEvolution{
    letter-spacing: 0.2em !important;
    padding-top: 168px !important;
    font-family: 'Rosario', sans-serif;
    color: #d4d4dc;
    
}

#andTogether{
    padding-top: 98px !important;
    font-family: 'Rosario', sans-serif;
    color: #feda6a;
}


.tech-stack-item{
    transition: background-color 0.2s ease-out ;
    color: #d4d4dc;
    
    
}

.tech-stack-item:hover{
    background-color:#393f4d;
    color:white;
    text-align: center;
    justify-content: center;
    border-radius: 3dvh;
}

.nav-link:hover{
    color:white;
    background-color: #393f4d;
    border-radius: 30dvw;
    text-align: center;
   
    
}

#website-logo{
    align-items: start;
}

#aboutMe{
    border: 1.1dvh groove black !important;
}

#profile-title{
    color:#feda6a;
}

#profile-title:hover {
    font-size: 2em; 
    color: rgba(29, 30, 34, 2); 
    text-align: center;
    animation: highlightText 1s ease-in-out infinite alternate;
  }
  
  @keyframes highlightText {
    0% {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    }
    100% {
      text-shadow: 0 0 20px rgba(254, 218, 106, 0.9); 
    }
  }
#profile-subtitle{
    color:#d4d4dc;
    font-style: italic;
}

#aboutMe-description{
    border: 0.1dvh groove #feda6a !important;
    color:#d4d4dc;
    box-shadow: 0 0  1rem 3rem rgba(0,0,0,0.2);
    transition: font-size 0.2s ease-in-out;
    
}

#aboutMe-description:hover{
    background-color: #393f4d;
    color: #d4d4dc;
       
}



#aboutMe-description:hover #my-name {
  color: #feda6a;
  font-size: 1.4em;
}

#whosThis{
    color:#feda6a;
}

#aboutMe-img{
    border: 2 px solid blue !important;
}

.shaking-image {

    transition: transform 0.3s ease-out;
  }
  
  .shaking-image:hover{
    animation: shakeAndSlide 0.8s ease-in-out;
  }
  
  @keyframes shakeAndSlide {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-10px);
    }
    50% {
      transform: translateX(15px);
    }
    75% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(0);
    }
  }

#profile-picture-container{
    border: 2px solid blue !important;
    margin: 2px solid orange !important;
    height: 0.1dvh !important;
}

#tech-stack-title{
    border:0.2dvh solid #feda6a !important;
    text-align: center !important;
    color:#d4d4dc;
}



#education-certifications-title{
    border:0.2dvh solid #feda6a !important;
    text-align: center !important;
    color:#d4d4dc;
}

.card-text{
    font-style: italic;
}

@media (min-width: 992px) {
    .image-card-1 {
      max-width: 60%;
      align-items: center;
    }
    .image-card-2 {
        max-width: 60%;
    }
    .image-card-3 {
        max-width: 60%;
    }
    .image-card-4 {
        max-width: 60%;
    }
    .image-card-5 {
        max-width: 60%;
    }
    .image-card-6 {
        max-width: 60%;
    }
      
  }

#projects-title{
    border: 0.2dvh solid #feda6a !important;
    text-align: center !important;
    color:#d4d4dc;
}



.rotate-card{
    transition: transform 0.3s ease-in-out;
}

.rotate-card:hover{
    transform: scale(1.02);
}



#colored-certification-card{
    background-color: #feda6a;
    color: #1d1e22 !important;
}

#colored-certification-title{
    color: #f5f5dc;
    background-color: #1d1e22;

}

#colored-certification-card > blockquote > p > span {
  color: #feda6a;
  font-style:oblique;
  background-color: #393f4d;
  border-radius: 3vw;
  padding: 0.6%;
  
}

.colored-certification-bullets{
    list-style-type: none;
    
}

@media (min-width: 426px){
    .project-card{
        width:30%;
    }
}

.project-card:hover{
    background-color: #d4d4dc;
    box-shadow: #1d1e22;
   
    border-bottom: 0.4em #393f4d solid;
    border-right: 0.5em #feda6a solid;
    border-left: 0.2em #feda6a solid;
    

    transform: scale(1.05);
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.project-card:hover .card-title {
    color: #feda6a;
    font-style:oblique;
    background-color: #393f4d;
    border-radius: 3vw;
    padding: 0.6%;
    
}

.project-card:hover .card-body {
    color: #1d1e22;
    font-style:oblique;
    text-align: center;
}

#contact{
    
    border: 1.1dvh groove #1d1e22 !important;
    background: #feda6a !important;
}


#contact-title{
    
    border: 0.1vh solid  #393f4d !important;
    box-shadow: inset 0 0 1vh #d4d4dc;
    padding: 0.5vh;
    color:#1d1e22;
    display: inline-block;
}

#contact-title:hover{
    background-color: #1d1e22;
    color: #feda6a;
    animation: shakeAndSlide 0.8s ease-in-out;
}

#btn-linkedin {
    color: #d4d4dc;
    background-color: #0077B5;
    border: 0.40vh solid #FFFFFF;
}


#btn-linkedin:hover {
    color: #feda6a;
    background-color: #1d1e22;
    border-color:   #d4d4dc;
}

#btn-github {
    color: #fafbfc;
    background-color: #24292e;
    border: 0.40vh solid #2dba4e;
}


#btn-github:hover {
    color: #feda6a;
    background-color: #1d1e22;
    border-color:   #d4d4dc;
}

#contact-me-subtitle{
    font-style:italic;
}

#btn-email{
    color: #f5f5f5;
    background-color: #3b60c4;
    border-top-color: #c71610;
    border-right-color: #f2a60c;
    border-bottom-color: #3b60c4;
    border-left-color: #08851b;
}

#btn-email:hover{
    color: #feda6a;
    background-color: #1d1e22;
    border-color:   #d4d4dc;
}

#btn-download-resume{    
    color: #feda6a;
    background-color: #1d1e22;
    border-color:   #d4d4dc;
}

#btn-download-resume:hover{
    color: #1d1e22;
    background-color: #d4d4dc;
    border-color:   #feda6a;
}

#btn-connect-with-me{
    color: #feda6a;
    background-color: #1d1e22;
    border: 0.40vh solid #d4d4dc;

}

#btn-connect-with-me:hover{
    color: #1d1e22;
    background-color: #d4d4dc;
    border-color:   #1d1e22;
}

#footer-title{
    font-style: italic;
}



#aboutMe-img{
    width: 30dvw !important;
    margin: 1em !important;

}

#profile-info{
    width: 79dvw !important;
    margin: 1em !important;
    background-image: linear-gradient(to right top, #000000, #4a2d2d, #925a47, #d19458, #feda6a)!important;
    box-shadow: 0 0  1rem 3rem rgba(0,0,0,0.2);
    border: 1.1dvh groove black !important;

}

#profile-picture{
    width: 10px !important;
}

#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #feda6a;; /* Button UP! - Background-color*/
    color: #1d1e22; /* Text color*/
    border: 2px solid #d4d4dc;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    display: none; 
  }
  
  #scrollToTopBtn img {
    width: 1.9dvw; /* Rocket icon size*/
    height: 4.2dvh;
  }
  
  #scrollToTopBtn:hover {
    background-color: #0056b3; 
    color: #afafaf;
  }

  p.card-text.m-2.dromero {
    border: 1px solid black;
    padding: 2px; 
   }

   p.card-text.m-2{
    align-items: center;
    text-align: center;
    align-self: center;
   }

  
  


#footer{
    background-color: gray !important;
}