:root {
  --goldi: goldenrod;
  --white: #ffffff;
}

html {
  height: 100%;
}

body {
    font-family: 'Cardo', serif;
padding: 0;
margin: 0;


}

  /*scrollbar style */
  ::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5; /* Color de fondo  */
  }
  
  ::-webkit-scrollbar
  {
    width: 6px;
    background-color: #F5F5F5;
  }
  
  ::-webkit-scrollbar-thumb
  {
    background-color: goldenrod; /*Color de barra*/
  }
  

/* .cover-img {
    padding-left: 0px !important;
    padding-right: 0px !important;
    background-image: url(/img/_NKN6564.jpg);
    background-size: cover;
    height: 900px%;
} */


@media (max-width: 768px) {
.imga {
  width: 250px;
}
}

.grayscale {
  transition: filter 3s ease-in-out; /* Transición suave */
    animation: grayscaleLoop 4s infinite alternate; /* Animación en bucle */
  }
  
  @keyframes grayscaleLoop {
    0% {
      filter: hue-rotate(0deg); /* Sin rotación de tono al inicio */
    }
    100% {
      filter: hue-rotate(360deg); /* Escala de grises completa al final */
    }
  }
}




header .brand {
    font-size: 2em;
    
}



.nav .nav-item .nav-link {
    color:#333;
        font-style: italic;
}
/*
.nav .nav-item .nav-link:hover {
    border-bottom: 1px solid #333;
    font-weight: 700;
    
}
*/


.release .title {
    letter-spacing: 0.2em;
    font-size: 3em;
    font-weight: 800;
  
}

.release .title:after {
        content: " ";
        display: block;
        width: 100px;
        height: 1px;
        margin: 20px 0 20px;
        background: #555;
         
    }

.header-brand a img:hover{
    filter: drop-shadow(3px 5px 4px rgb(180, 145, 57));
    transition: ease-in-out, 0.5s 0.5s ;
}



/*overlaying*/
/*span.overlaying {
    color: transparent;
}

span.overlaying:hover {
    color: white;
    position:absolute;
    z-index: 1;
    left: 17em;
    top:28em;

}

*/
/*navbar toggler*/

.navbar-toggler {
    padding:0;
    background-color: transparent;
    border:transparent;
    transition:ease-in-out 0,5s;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: none!important;
    background-color: var(--bs-gray-800);
    height: 3px;
    width: 25px;
    margin: 10px 0;
    position: relative;
    transition: all 0.35s ease-out;
    transform-origin: center;
  }
  
  .navbar-toggler-icon::before {
    display: block;
    background-color: var(--bs-gray-800);
    height: 3px;
    content: "";
    position: relative;
    top: -7px;
    transition: all 0.15s ease-out;/*taken down to hide quicker*/
    transform-origin: center;
  }
  
  .navbar-toggler-icon::after {
    display: block;
    background-color: var(--bs-gray-800);
    height: 3px;
    content: "";
    position: relative;
    top: 4px;
    transition: all 0.35s ease-out;
    transform-origin: center;
  }
  
  .navbar-dark .navbar-toggler-icon,
  .navbar-dark .navbar-toggler-icon::before,
  .navbar-dark .navbar-toggler-icon::after {
    background-color: var(--bs-gray-100);
  }
  
  .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    transform: rotate(45deg);
  }
  
  .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
    opacity: 0;
  }
  
  .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
    transform: rotate(-90deg) translateX(7px);
  }
  
  /*wiggle border*/
    
  a.nav-link {
   
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 3px;
    color: #000;
    text-decoration: none;
  }
  
  a.nav-link:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='goldenrod' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: 0 100%;
    background-size: auto 4px;
    background-repeat: repeat-x;
    text-decoration: none;
  }

  .rrss-link {
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 3px 3px;
    color: goldenrod ;
    text-decoration: none;
  }
  
  .rrss-link:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='goldenrod' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
    background-position: 0 100%;
    background-size: auto 4px;
    background-repeat: repeat-x;
    text-decoration: none;
  }



  /* Glyph, by Harry Roberts */

hr.style-eight {
  overflow: visible; /* For IE */
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}
hr.style-eight:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}


/*portfolio*/

#portfolio img.img-fluid {
  border-radius: 5px !important;
}