@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
@import url('https://fonts.googleapis.com/css?family=Heebo');


:root {
  
    --verde:#1E5047;
    --verdin:#7ca799;
    --bianco:#F5f5f4;
    --grigin:#9eA9Ba;
    --rosino:#DACDD5;
    --violaint:#BBAEBF;
    --viola:#776a8f;
    --rosa: #EBD8F3;
    --nero:#17171A;

    
    --primary: var(--rosa);
    --secondary: var(--nero);
    --btn: var(--viola);
  }




.card-title,.nav-link{
  font-family: "Cinzel Decorative", sans-serif;
  
}

.card-text{
  font-family: "Heebo", sans-serif;
}




  body {
    background-color: var(--primary);

  }

 .card,html,.footer{
    background-color: var(--secondary);
  }
.btn-nav.active,.btn-call{
  background-color: var(--btn);
}
  .navbar{
    background-color: transparent;
    z-index: 1;

  }

  @media (min-width: 576px){
    .navbar li {
        margin-left : 0.5em;
        margin-right : 0.5em;
    }
  }

  @media (min-width: 768px){
    .navbar li {
        margin-left : 1em;
        margin-right : 1em;
    }
  }


  .btn-nav{
/* From https://css.glass */
background: rgba(235, 216, 243, 0.59);
/* border-radius: 16px;*/
backdrop-filter: blur(3.1px);
-webkit-backdrop-filter: blur(3.1px);

  border-width: 1px;
  border-style: solid;
  border-color: var(--nero);
  color: var(--nero);

  }




  .btn-nav:hover{
/* From https://css.glass */
background: rgba(187, 174, 191, 0.69);
backdrop-filter: blur(4.9px);
-webkit-backdrop-filter: blur(4.9px);
border-width: 1px;
border-style: solid;
border-color: var(--bianco) !important;
color: var(--bianco) !important;
    
  }

  .btn-nav.active{
    background: rgba(119, 106, 143, 0.6);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.5px);
    -webkit-backdrop-filter: blur(4.5px);
    color: var(--bianco) !important;
  }

  @media (max-width: 768px){
    .btn-nav{
      margin-top: 40px;
      font-size: x-large;
      padding-top: .9rem;
  padding-bottom: .9rem;
  padding-left: .5rem;
  padding-right: .5rem;
    }
  }




  .round-img{
    border-radius: 50%;
  }

  .navbar-toggler{
    background-color: var(--viola);
  }

.close-btn{
  visibility: hidden;
}
@media (max-width: 768px){
  .close-btn{
    visibility: visible;
  }
}


/*
  #banner {
    position: relative;
    background-image: url(../assets/banner.jpeg);
    height: 508px;
    top: -70px;
    min-height: 200px;
    background-size: cover;
    background-position: center;
}
*/

.responsive {
  position: relative;
  width: 100%;
  height: auto;
  top: -70px;
}

@media (max-width: 576px){

  .responsive {
    object-fit: cover;
    object-position: 90% 100%;
    /* width: 200%; */
    height: 328px;
    top: -70px;

}
}


/* @media (max-width: 768px){
  .responsive {
    position: relative;
    width: auto;
    height: 250px;
    top: -70px;
    overflow: hidden;
}
} */

.card-title, .card-text{

color: var(--primary);
}
.card-title{
  font-size: xxx-large;
}
@media (max-width: 768px){
  .card-title{
    font-size: xx-large;
  }
  .card-text{
    font-size: small;
  }
}

@media (max-width:576px){
  .card-pic{
    width: 50%;
  }
  .card-text{
    font-size: x-small;
  }

 }


  .card-tattoo{
    margin-top: 1rem;

  }


.grid-bones{
    margin-top: 1rem;
}
@media (min-width: 768px){
  .grid-bones{
    margin-top: 0%;
   }
}
.img-btn{
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;


}

.img-btn:hover{
cursor:crosshair;

filter: brightness(120%);
}

         
.btn-call {
  font-family: "Cinzel Decorative", sans-serif;
font-size: xx-large;
  background-image: linear-gradient(to right, var(--viola) 2%, var(--nero)  51%, var(--viola)  100%);
  margin-top: 45px;
  padding: 10px 20px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;            
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-call:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}



/* .btn-call{
  margin-top: 3rem;
 
  color: var(--bianco);
  border: var(--bianco) solid 2px;

  
}
.btn-call:hover{
  background-color: var(--violaint);

  border: black solid 2px;

    } */

#tentacolo {
      -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
      /* clip-path: polygon(80% 0%, 85% 12%, 84% 26%, 81% 34%, 89% 43%, 95% 52%, 93% 60%, 89% 63%, 88% 68%, 91% 70%, 89% 71%, 84% 67%, 87% 61%, 91% 53%, 87% 47%, 79% 47%, 74% 42%, 72% 33%, 76% 24%, 75% 14%, 69% 1%); */
 clip-path: polygon(85% 0%, 86% 5%, 85% 11%, 84% 13%, 84% 18%, 83% 22%, 82% 25%, 81% 29%, 82% 34%, 83% 36%, 84% 37%, 86% 38%, 87% 39%, 88% 40%, 90% 41%, 91% 42%, 93% 44%, 94% 46%, 95% 49%, 95% 51%, 95% 54%, 95% 57%, 94% 60%, 94% 62%, 93% 64%, 92% 65%, 90% 67%, 89% 68%, 88% 69%, 87% 70%, 87% 72%, 87% 75%, 89% 77%, 91% 77%, 93% 77%, 94% 77%, 95% 75%, 95% 73%, 94% 73%, 93% 74%, 93% 73%, 93% 71%, 95% 71%, 96% 72%, 96% 74%, 96% 76%, 95% 78%, 94% 79%, 93% 80%, 91% 80%, 90% 80%, 89% 80%, 87% 79%, 86% 78%, 85% 76%, 85% 74%, 84% 72%, 84% 69%, 85% 67%, 86% 66%, 87% 64%, 88% 62%, 90% 61%, 90% 58%, 91% 55%, 90% 52%, 90% 50%, 89% 48%, 88% 46%, 87% 45%, 85% 45%, 84% 44%, 82% 43%, 80% 42%, 79% 41%, 78% 39%, 77% 37%, 77% 34%, 76% 32%, 76% 29%, 76% 27%, 76% 25%, 76% 22%, 76% 20%, 76% 18%, 76% 15%, 76% 11%, 76% 9%, 75% 7%, 74% 8%, 73% 11%, 73% 14%, 72% 17%, 72% 20%, 71% 22%, 71% 25%, 71% 28%, 71% 30%, 70% 33%, 70% 36%, 70% 38%, 70% 40%, 69% 43%, 69% 45%, 68% 48%, 68% 50%, 67% 52%, 67% 54%, 66% 56%, 65% 57%, 63% 59%, 62% 60%, 61% 60%, 60% 61%, 59% 62%, 57% 62%, 56% 61%, 55% 59%, 54% 57%, 54% 54%, 54% 51%, 56% 50%, 58% 50%, 59% 52%, 59% 54%, 58% 54%, 56% 53%, 55% 55%, 56% 57%, 58% 58%, 60% 58%, 61% 55%, 63% 53%, 63% 50%, 64% 47%, 64% 43%, 64% 40%, 64% 37%, 64% 33%, 63% 30%, 63% 27%, 62% 23%, 62% 19%, 61% 16%, 61% 12%, 60% 9%, 58% 10%, 57% 11%, 56% 13%, 55% 14%, 54% 17%, 53% 19%, 54% 20%, 55% 22%, 56% 24%, 57% 26%, 58% 28%, 60% 30%, 61% 33%, 62% 36%, 61% 38%, 60% 36%, 58% 34%, 56% 31%, 55% 28%, 53% 26%, 51% 22%, 50% 19%, 48% 16%, 47% 11%, 45% 13%, 44% 16%, 43% 19%, 42% 22%, 42% 25%, 43% 29%, 45% 32%, 46% 34%, 46% 37%, 46% 40%, 46% 43%, 46% 45%, 46% 49%, 46% 51%, 47% 54%, 48% 57%, 49% 59%, 50% 61%, 52% 62%, 53% 64%, 53% 65%, 54% 67%, 55% 70%, 55% 73%, 55% 76%, 54% 79%, 54% 82%, 53% 83%, 52% 85%, 51% 87%, 50% 89%, 48% 90%, 46% 91%, 44% 90%, 42% 89%, 41% 86%, 41% 83%, 42% 80%, 44% 79%, 46% 79%, 46% 82%, 46% 83%, 45% 86%, 44% 84%, 44% 82%, 43% 82%, 42% 84%, 43% 86%, 45% 87%, 46% 87%, 48% 85%, 49% 82%, 50% 79%, 50% 76%, 51% 71%, 50% 68%, 48% 65%, 46% 62%, 45% 58%, 43% 54%, 42% 51%, 42% 47%, 42% 43%, 42% 39%, 41% 35%, 40% 32%, 39% 28%, 38% 23%, 38% 19%, 37% 16%, 36% 12%, 35% 15%, 35% 18%, 35% 21%, 34% 26%, 34% 30%, 34% 32%, 33% 34%, 33% 38%, 33% 41%, 32% 44%, 31% 46%, 30% 48%, 28% 50%, 27% 52%, 25% 53%, 23% 54%, 21% 56%, 19% 57%, 17% 59%, 15% 61%, 14% 63%, 15% 66%, 15% 68%, 17% 70%, 17% 71%, 15% 71%, 14% 69%, 12% 65%, 12% 63%, 12% 60%, 13% 57%, 15% 54%, 18% 53%, 20% 51%, 21% 50%, 23% 48%, 25% 46%, 26% 44%, 28% 41%, 28% 38%, 28% 34%, 29% 31%, 29% 27%, 29% 23%, 29% 20%, 29% 16%, 29% 14%, 29% 10%, 27% 12%, 27% 15%, 26% 19%, 25% 22%, 25% 26%, 25% 29%, 24% 32%, 24% 35%, 24% 38%, 22% 41%, 21% 42%, 18% 44%, 15% 45%, 13% 46%, 10% 45%, 8% 44%, 6% 42%, 5% 40%, 4% 37%, 4% 33%, 5% 31%, 6% 29%, 8% 28%, 11% 27%, 11% 28%, 12% 30%, 13% 32%, 13% 35%, 11% 36%, 9% 37%, 9% 34%, 10% 34%, 11% 32%, 9% 31%, 7% 33%, 6% 35%, 7% 37%, 8% 39%, 9% 40%, 11% 40%, 14% 40%, 16% 39%, 18% 37%, 20% 34%, 21% 31%, 21% 28%, 21% 23%, 21% 19%, 21% 17%, 21% 13%, 21% 9%, 21% 5%, 21% 1%, 21% 0%);
  }



.footer{
  margin-top: 1rem;
  padding-top: 5px;
  padding-bottom: 10px;
  color: var(--primary);
}

.fa-xl{
  color: var(--primary);
}
.made-by{
  margin-top: 2rem;
  font-size: x-small;
}

.made{
  color: var(--primary);
}