@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700;800&display=swap');
:root{
    --yellow:#F7CB14;
    --purple:#6E36AD;
    --green:#0BBA6F;
    --blue:#522BE2;
}

body{
  position: relative;
    font-family: 'Poppins', sans-serif;
    background-image: linear-gradient(
        270deg
        ,#6E36AD,#611daf,#571a9c);
            background-size: 600% 100%;
            animation: bg-pan-left 8s ease-in infinite;
 overflow-x: hidden;
}
.padre-contenedor{
    height: 100vh;
    position: relative;
    width: 100vw;
  
    z-index: 3;
}
.img-rito{
    width: 68vw;
}

.name{
    font-weight: 800;
    font-size: 5rem;
}
.subra{
   
    border-bottom: 5px solid var(--yellow);
}
.hry{
    position: absolute;
    bottom: 0;
    border: 3px solid var(--yellow);
    width: 50%;
   left: 1rem;
    border-radius: 2px;
    background-color: #F7CB14;
}
.nav-link.active{
    position: relative;
}
.nav-link.active::after{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -4px;
    content: '';
    display: inline-block;
width: 10px;
height: 10px;
font-weight: 900;
cursor: auto;
border-radius: 50%;
background-color: #F7CB14;
}
.aboutme{
    text-align: justify;
    font-weight: 200;
}
.redes{
    font-size: 1.3rem;
}
.nav-item{
    cursor: pointer;
}



.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-3-17 22:34:21
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  

  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  .tab-content li:hover{
    animation: shake 2s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
  }
























  .circles{
      opacity: 0.2;
    pointer-events: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
  }
  
  .circles li{
      position: absolute;
      display: block;
      list-style: none;
     
      animation: animate 25s linear infinite;
      bottom: -150px;
      
  }
  
  .circles li:nth-child(1){
      left: 25%;
    
      animation-delay: 0s;
  }
  
  
  .circles li:nth-child(2){
      left: 10%;
 
      animation-delay: 2s;
      animation-duration: 12s;
  }
  
  .circles li:nth-child(3){
      left: 70%;
 ;
      animation-delay: 4s;
  }
  
  .circles li:nth-child(4){
      left: 40%;
   
      animation-delay: 0s;
      animation-duration: 18s;
  }
  
  .circles li:nth-child(5){
      left: 65%;
      width: 20px;
      height: 20px;
      animation-delay: 0s;
  }
  
  .circles li:nth-child(6){
      left: 75%;
     
      animation-delay: 3s;
  }
  
  .circles li:nth-child(7){
      left: 35%;
     
      animation-delay: 7s;
  }
  
  .circles li:nth-child(8){
      left: 50%;
    
      animation-delay: 15s;
      animation-duration: 45s;
  }
  
  .circles li:nth-child(9){
      left: 20%;
     
      animation-delay: 2s;
      animation-duration: 35s;
  }
  
  .circles li:nth-child(10){
      left: 85%;
    
      
    animation-delay: 0s;
      animation-duration: 35s;
  }
  
  .circles li:nth-child(11){
    left: 20%;
   
    animation-delay: 0s;
    animation-duration: 35s;
}

.circles li:nth-child(12){
    left: 85%;
     
    animation-delay: 0s;
    animation-duration: 10s;
}
  
  @keyframes animate {
  
      0%{
          transform: translateY(0) rotate(0deg);
          opacity: 1;
          border-radius: 0;
      }
  
      100%{
          transform: translateY(-1000px) rotate(720deg);
          opacity: 0;
          border-radius: 50%;
      }
    }
    @keyframes bg-pan-left {
        0% {
          background-position: 100% 50%;
        }
        50% {
          background-position: 0% 50%;
        }
        100%{
            background-position: 100% 50%;
        }
      }



      .night-light-label{
        display: block;
        margin: 20px 0;
        height: 31px;
        width: 60px;
        border: 2px solid var(--yellow);
        border-radius: 30px;
        position: relative;
        cursor: pointer;
      }
      .night-light-label #night-light-checkbox{
        position: absolute;
        visibility: hidden;
      }

      .night-light-label .night-light-ball{
        position: absolute;
        width: 25px;
        height: 25px;
        top: 1px;
        left: 1px;
        border-radius: 50%;
        background: var(--yellow);
        z-index: 99;
        transition: 300ms;
      }
      .sun-svg{
        left: 5px;
      }
      .moon-svg, .sun-svg{
      
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      .moon-svg{
          right: 5px;
      }

      .night-light-label #night-light-checkbox:checked + .night-light-ball{
          transform: translateX(28px);
      }
       #moon-svg,  #sun-svg{
          fill: var(--yellow);
      }

      body.dark{
        background-image: linear-gradient(
            270deg
            ,var(--green),var(--green),var(--green));
        background-size: 600% 100%;
        animation: bg-pan-left 8s ease-in infinite;
      }
      .dark .hry{
        background-color: var(--yellow);
        border: 3px solid var(--yellow);
      }
      
      /* .dark .logo{ */
      /*     content: url(../img/logo_1Y.svg); */
      /* } */
.dark .nav-link.active::after{

background-color: var(--yellow);
}
.dark .btn-contact{
    border-color: var(--yellow) !important;
}
.dark .btn-porta{
background-color: var(--yellow) !important;
}


.dark .night-light-label .night-light-ball{
   
    background: var(--yellow);
    
  }
  .dark  .night-light-label{
   
    border: 2px solid var(--yellow);
    
  }
  .dark #moon-svg{
    fill: var(--yellow);
}
.dark   .circles{
    opacity: 0.5;
 
}

.dark .btn-outline-warning:hover{
background-color: var(--yellow);
}


@media  (max-width:992px) {
    .img-rito{
        width: 40vw;
    }


}

.img-dsm{
    z-index: 1;
    opacity: 0.2;
    width: 70vw;

}


@media  (max-width:768px){
.name-sm{
    font-size: 4rem;
}
}

@media  (max-width:568px){
  .info{
      margin-top: 4rem !important;
      position: initial !important;
  }
.name-sm{
    margin-top: 3rem !important;
}
}
@media(min-width:992px) and (min-height:644px){
  .info{
      position: absolute;
  }
}
@media(min-height:800px){
.img-rito{
  width: 46vw!important;
}
}
@media (min-width:900px) and (min-height:1024px){
    .padre-contenedor{
  display: flex;
  flex-direction: column;
  justify-content:center;
}
    .info{
      position: relative;
      left:0;
      bottom:0;
      right:0;
  } 
}
@media(min-height:1024px){
.padre-contenedor{
  display: flex;
  flex-direction: column;
  justify-content:center;
}


.info{
 margin:0 !important;   

}

}

@media(min-width:1280px){
 .img-rito{
  width: 34vw!important;
}  

}