/* Variables */
@import url('./variables.css');

/* Colores */
@import url('./colors/colors.css');

/* Fuentes */
@import url('./fonts/fonts.css');

body, html{
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  width: 100%;

}

body{
  position: relative;
  min-height: 100dvh;
  background-color: #12171c;
  color: #FFF;
  background-image: 
    linear-gradient(125deg, rgba(0, 0, 0, 0.152) 30%, transparent 30%),
    linear-gradient(30deg, rgba(0, 0, 0, 0.239) 20%, transparent 10%),
    linear-gradient(-25deg, rgba(0, 0, 0, 0.566) 30%, transparent 10%),
    linear-gradient(-115deg, rgba(0, 0, 0, 0.025) 25%, transparent 10%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;

}

@supports (-webkit-touch-callout: none){
  body{
    background-image: none !important; 
    background-color: #12171c !important;
    background-attachment: scroll !important;
  
  }

}

body.modal-open{
  overflow-y: scroll !important;
  padding-right: 0 !important;

}

main{
  flex: 1;

}

.logo-img {
  display: block;
  margin: 0;
  padding: 0;
  max-height: 100%;
  width: 50%;
  transition: transform 0.3s ease;

}

.logo-img:hover{
  transform: scale(1.03);

}

.navbar-brand {
  max-height: 3rem;
  height: auto;
  width: auto;
  object-fit: contain;
  cursor: pointer;

}

.navbar-links{
  color: #000000;
  margin-bottom: 25px;
  font-family: var(--subtitles-font);
  font-size: 15px;
  cursor: pointer !important;

}

.navbar-toggler{
  outline: none;      
  box-shadow: none;
  border: none;

}

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

}

#navbarContent{
  transition: all 0.3s ease;
}

#navbarContent.scrolled-navbar{
  background: rgba(0, 0, 0, 0.345) !important;
  backdrop-filter: blur(5px);

}

.side-bar-text{
  display: flex;
  align-items: stretch;
  gap: 12px;

}

.side-bar-content{
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.side-bar-line{
  width: 5px;
  background-color: var(--sections-color);
  border-radius: 4px;

}

.accordion{
  max-width: 1100px;

}

.accordion .accordion-header{
  font-family: var(--subtitles-font);
  
}

.accordion .accordion-body{
  font-family: var(--texts-font);
  padding: 20px;

}

.accordion-text{
  line-height: 2.0 !important;

}

.availability{
  transition: transform 0.5s ease;
  background-color: rgba(1, 49, 27, 0.414);
  cursor: pointer;
  max-width: 225px;

}

.fa-circle{
  animation: flicker 1s infinite;

}

.availability:hover{
  transform: scale(1.03);
  background-color: rgba(1, 49, 27, 0.207);
  
}

@keyframes flicker{
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }

}

.gallery .col-6:nth-child(1) { transform: translateY(80px); }
.gallery .col-6:nth-child(2) { transform: translateY(60px); }
.gallery .col-6:nth-child(3) { transform: translateY(40px); }
.gallery .col-6:nth-child(4) { transform: translateY(20px); }
.gallery .col-6:nth-child(5) { transform: translateY(0); }

.gallery img{
  filter: invert(1);
  width: 180px;
  height: 150px;
  object-fit: contain;

}

.buttons-style-white{
  color: #FFF;
  box-shadow: 12px 8px 0px 2px rgb(240, 248, 255);
  position: relative;
  border: 2px solid #FFF;

}

.buttons-style-dark{
  color: #000;
  box-shadow: 12px 8px 0px 2px rgb(0, 0, 0);
  position: relative;
  border: 2px solid #000;

}

.aptitude-icon{
  filter: invert(1);
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto 10px auto;

}

.card{
  color: #FFF;
  background: rgba(255, 254, 254, 0.095);
  backdrop-filter: blur(5px);
  box-shadow: 3px 3px 3px #000000;
  max-width: 150px;

}

.card-aptitude-title{
  text-align: center;
  font-family: var(--texts-font);
  font-size: 17px;

}

.tag{
  cursor: pointer;
  border-radius: 5px;
  padding: 10px;
  font-weight: bold;
  font-family: var(--cta-font);
  transition: transform 0.5s ease;

}

.tag:hover{
  transform: scale(1.05);

}

.tag.bg-icons{
  background-color: #b1d3ec;
  color: #0D47A1;

}

.tag.bg-inspiration{
  background-color: #e7c3ec;
  color: #4A148C;

}

.tag.bg-utils{
  background-color: #b5e7b9;
  color: #1B5E20;

}

.tag.bg-design{
  background-color: #e9d3b1;
  color: #E65100;

}

.tag.bg-productivity{
  background-color: #b4c1eb;
  color: #1E3A8A;

}

.tag.bg-deployment{
  background-color: #5d5e5e;
  color: #00ffa2;

}

.project-technologies{
  padding: 7px;
  height: 40px;
  width: 40px;
  color: black;
  border-radius: 50%;
  margin: 10px 0 3px;
  border: 2px solid black;
  background: none;
  cursor: pointer;
  transition: 0.4s ease;

}

.project-technologies:hover{
  color: #FFF;
  background-color: #5372F0;

}

.card-tool-effect{
  transition: transform 0.3s ease;
  cursor: pointer;

}

.card-tool-effect:hover{
  transform: scale(1.02);

}

a.effect{
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: transform 0.3s ease;

}

.link::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: currentColor;
  transition: width 0.4s ease;

}

.shadow-effect-dark{
  text-shadow: 1px 1px black;

}

.shadow-effect-white{
  text-shadow: 1px 1px rgb(255, 255, 255);

}

a.effect:hover{
  transform: translateX(5px) scale(1.01);

}

.link:hover::after{
  width: 100%;

}

footer{
  margin: 0;
  height: auto;

}

.social-icons-offcanvas{
  width: 20px;
  height: auto;

}

.social-icons{
  width: 25px;
  height: auto;
  transition: transform 0.5s ease;

}

.social-icons:hover{
  transform: scale(1.3);

}