/* General */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
    padding:0;
    margin:0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth ;
}

body {
	background: linear-gradient(-45deg, #2219aa, #765cb5, #7f2f50, #ffa500);
	background-size: 300% 800%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}

@media (max-width:750px) {

    body {
        background-size: 300% 800%;

    }

}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


/* Nav */
.cusSticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}

.navbar-bar .nav-item .nav-link {
    color: #1c1b1b !important
}


.navbar-brand img {
    max-height: 30px;
}

/* Presentación */

.remark {
    color: #7f2f50;
    font-weight: 600;
}

#bio .card{
    border-radius:10px;
    background-color:#fff;
    position:relative;
    box-shadow:0 15px 30px rgba(0,0,0,0.1);
    font-family: 'Poppins', sans-serif;
    overflow:hidden;
    cursor:pointer;
    max-height: 600px;

   
}
#bio .card .form{
    width:100%;
    height:100%;
    display:flex;
    
}
#bio .card .left-side{
    width:60%;
    background-color:#fff;
    height:100%;
   
}
.form .left-side .top-div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
}
.form .left-side .top-div h2{
    font-size:30px;
    font-weight:8000;
}
.form .left-side .top-div span{
    height:7px;
    width:7px;
    border-radius:50%;
    background-color:#7f2f50;
    position:absolute;
    left:50px;
    top:23px;
}
.form .left-side .top-div p{
    font-size:15px;
}

.form .left-side .medium-div{
    display:flex;
    justify-content:center;
    align-items:start;
    flex-direction:column;
    position:relative;
}



.form .left-side .medium-div h1:nth-child(1){
   font-size:40px;
   
}
.form .left-side .medium-div h1:nth-child(2){
    font-weight:100;
   font-size:30px;

}
/*.form .left-side .medium-div p{
    font-size:18px;
}*/
.form .left-side .icons{
    font-size:20px;
    position:relative;
}
.form .left-side .icons .bxl-linkedin-square{
    position:absolute;
    right:-150px;
    transition:all 0.5s;
}
.form .left-side .icons .bxl-github{
    position:absolute;
    right:-150px;
    transition:all 0.5s;
    transition-delay:0.2s;
}
#bio .card:hover .icons .bxl-linkedin-square{
    right:80px ;
}
#bio .card:hover .icons .bxl-github{
    right:20px;
}

#bio .card .icons a .bxl-linkedin-square, #bio .card .icons a .bxl-github{
    color: #2219aa ;
}

#bio .card:hover .icons .bxl-linkedin-square:hover, #bio .card:hover .icons .bxl-github:hover{
    color: #7f2f50 !important;
}


.form .left-side .icons button{
    background-color:#7f2f50;
    border-radius:60px;
    border:none;
    color:white;
    transition:all 0.5s;
}
.form .left-side .icons button:hover{
    background-color:#2219aa;
}


#bio .card .right-side{
    width:40%;
    height:100% !important;
    overflow: hidden;
    
}

#bio .card .right-side .pic{
     position: relative;
}



#bio .card .right-side .pic img{
    height: 100% !important;
    object-fit: cover;
}

@media (max-width:960px) {
    #bio .card{
        max-height: 750px; 
       
    }

    #bio .card .right-side .pic img{
        height: 800px !important;
        object-fit: cover;
        max-width: 350px;
    }


}

@media (max-width:750px) {
    #bio .card {
        max-width: 350px;
        border: none !important;        
    }

    .backgroundimage-fill  {
        background-image: url(../images/fondo.jpg) !important;
        object-fit: cover;

    }
    
    .backgroundcolor-fill .left-side {
        background-color: 	rgb(246,203,149, 0.8) !important;
    }

    #bio .card .right-side, #bio .card .right-side .pic ,#bio .card .right-side .pic img {
        display: none;
    }

    #bio .card .right-side{
        width:0;
        
    }
    #bio .card .left-side {
        width:100% !important;
    }

    #bio .card:hover .icons .bxl-linkedin-square{
        right:70px ;
    }
    #bio .card:hover .icons .bxl-github{
        right:20px;
    }
}


/* Proyectos */

#projects .card {
    max-width:350px ;
    height: 520px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: #fff;
    transition: all 0.5s ease;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    overflow: hidden;
    margin: auto;

}

#projects .card .backgroundEffect {
    bottom: 0;
    height: 0px;
    width: 100%
}

#projects .card:hover {
    color: #fff;
    transform: scale(1.025);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 10px
}

#projects .card:hover .backgroundEffect {
    bottom: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    background: #765cb5;
    animation: popBackground 0.3s ease-in
}

@keyframes popBackground {
    0% {
        height: 20px;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%
    }

    50% {
        height: 80px;
        border-top-left-radius: 75%;
        border-top-right-radius: 75%
    }

    75% {
        height: 160px;
        border-top-left-radius: 85%;
        border-top-right-radius: 85%
    }

    100% {
        height: 320px;
        border-top-left-radius: 100%;
        border-top-right-radius: 100%
    }
}

#projects .card:hover .gray-image-hover {
    filter: grayscale(0);
}

#projects .card .gray-image-hover {
  filter: grayscale(1);
  transition: filter .6s ease !important;
}

#projects .card .text-muted {
    font-size: 15px !important
}

#projects .card:hover .text-muted {
    color: #fff !important
}

#projects .card .content {
    padding: 0 20px
}

#btn-module{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7f2f50 !important;
    border-radius: 25px !important;
    font-size: 12px !important;
    border: none !important
}

#projects .card:hover #btn-module{
    background: #fff !important;
    color: #7f2f50 !important;
    box-shadow: #0000001a 0px 3px 5px !important
}

/* canvas chart */
canvas + .row + .mx-auto{
    vertical-align: baseline !important;
}

/* footer  */
.footer{
    background-color: #7f2f50;
    color: white;
}

.list-group-item:hover {
    color: #cd7d2f;

}