/*------------------------------------------------ESTRUCTURA ------------------------------------*/

* {
    box-sizing: border-box;
}
body {
    background-color: floralwhite;
}


/*--------------------------imagen de fondo---------------------------*/

#imgfondo {
  
    width: 100%;
    
  }


/*--------------------------clases e IDs ---------------------------*/
.permanent {
    font-family: 'Permanent Marker', cursive;
    text-align: center;
}




.imgproyecto {
    width: 100%;

    /*Sombra interna de las imágenes de los proyectos*/
}

/*para el header*/
.derecha {
    text-align: right;
    background-color: rgb(34, 116, 240);
    color: white;
    font-size: 85%;
    margin-bottom: 0;
    padding-right: 1em;
}

/*----imagen circular   ----*/
.andres {
    width: 20%;
    height: 40%;
  /*  margin-left: 40%; */
}
/*---para el título   --*/
.tituloandres {
    margin-left: 2em;
    color: rgb(34, 116, 240);
    text-align: unset;
    padding-left: 5em;
    margin-top: 1em;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.tituloprof {
    margin-left: 2em;
    color: rgb(34, 116, 240);
    text-align: unset; 
    padding-left: 15em; 
    font-family: cursive;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    
}
/*-----------div del título---------------*/

/*section.col-md {
    position: absolute;
    margin-top: 2em;
}

 /*---imagen andres --*/

 img.rounded-circle.shadow-lg.p-3.mb-5.bg-white.rounded.center-block.andres {
    padding: 0rem!important;
}

#imgfondo { 
    aspect-ratio: 2.5/ 1;
   
}

/*----------------parte de abajo------------------------*/

footer  {

    background-color: rgb(34, 116, 240);
}

.whoami {
    width: 95%;
    margin-top: 2em;
}


.foot { 
    text-align: center;

}

#github {
    width: 15%;
}

#linkedin {
    width: 15%;
}

/*-------------------------Elementos -------------------------------*/
p {
    font-family: 'Roboto';
    text-align: center;
    
    
}



h1 {
    text-align: center;
}

.estrella  {
    width: 1.5em;
    margin-left: 5px;
}

.skills {
    text-align: left;
    padding-left: 15px;
    float: left;
}

.coffee {
    width: 20%;
}

/* Ordenadores pequeños 
   ------------------------------------------------------------------------- */
   @media  (min-width: 767px) and (max-width: 1115px) {

    .estrella {
        width: 0.5em;
    }

   }


/* Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- */
@media  (max-width: 767px) { 

    .skills {
        text-align: center;
        padding-left: 15px;
        float: none;
    }

    #skillsect {
        text-align: center;
    }
 }
 
/* Móviles en vertical
   ------------------------------------------------------------------------- */
@media (max-width: 515px) { 

    .tituloandres {
        color: rgb(34, 116, 240);
        text-align: unset;
        margin-left: 1em;
        font-size: 1.2rem;
        padding-left: 1em; 
        margin-top: 0em;
    }
    
    .cabecera {
        position: absolute;
        margin-top: 0.5em!important;
    }
    .tituloprof {
        margin-left: 2em;
        color: rgb(34, 116, 240);
        text-align: unset;  
        padding-left: 0em; 
    }

    #skillsect {
        text-align: center;
    }
   

 }

/*----------móviles extra pequeños   ---*/

@media (min-width: 100px) and (max-width: 515px) { 

    #imgfondo {
        aspect-ratio: 1.7/ 1!important;
       
    }

    .estrella  {
        width: 0.7em;
        margin-left: 5px;
        
    }


    .skills {
        text-align: center;
        padding-left: 15px;
        float: none;
    }

    #skillsect {
        text-align: center;
    }

    #github.coffee {
        width: 50%;
    }

    #github{
        width: 40%;
    }
    #linkedin {
        width: 40%;
        
    }
 
}


@media (min-width: 1px) and (max-width: 194px) { 

    #imgfondo {
        aspect-ratio: 1.2/ 1!important;
       
    }

    #skillsect {
        text-align: center;
    }

    #github.coffee {
        width: 50%;
    }

   
    #github{
        width: 60%;
    }
    #linkedin {
        width: 60%;
        
    }
}

/*------animation------------------------------------------------------- */

.bubbles-container {
    position: relative;
    /*width: 100%;
    height:100vh; */
    overflow: hidden;
}

.bubbles {
    position: relative;
    display: flex;
}

.bubbles span {
    position: relative;
    width: 5px;
    height: 5px;  
  
    background: red;
    margin-left: 60px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgb(red),
        0 0 10px red,
        0 0 10px red;
    animation: animate 15s alternate-reverse infinite;
    animation-duration: calc(125s / var(--i));

}

.bubbles span:nth-child(even){
    background: lightseagreen;
    box-shadow: 0 0 0 5px blue,
    0 0 10px lightblue,
    0 0 10px lightblue;
}





@keyframes animate {
    0% {
        transform: translateY(100vh) scale(0);
        
    }
    100% {
        transform: translateY(-10vh) scale(1);
    }
}