/**
 css for csslearn blog
*/

.slidinglink  {
    box-shadow: inset 0 0 0 0 #54b3d6;
    color: #54b3d6;
    margin: 0 .25rem;
    padding: 0 -.25rem;
    transition: color 0.3s ease-in-out, box-shadow .3s ease-in-out;
}

.slidinglink:hover  {
    box-shadow: inset 100px 0 0 0 #54b3d6;
    color: white;
}

.swappinlink {
    overflow: hidden;
    position: relative;
    display: inline-block;
}
  
.swappinlink::before,
.swappinlink::after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
}
.swappinlink::before {
    background-color: #54b3d6;
    height: 2px;
    bottom: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
.swappinlink::after {
    content: attr(data-replace);
    height: 100%;
    top: 0;
    transform-origin: 100% 50%;
    transform: translate3d(200%, 0, 0);
    transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
    color: #54b3d6;
}

.swappinlink:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
}
.swappinlink:hover::after {
    transform: translate3d(0, 0, 0);
}

.swappinlink span {
    display: inline-block;
    transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.swappinlink:hover span {
    transform: translate3d(-200%, 0, 0);
}

/* growing background effect */
.growinglink {
    text-decoration: none;
    position: relative;
}

.growinglink::before {
    content: '';
    background-color: hsla(196, 61%, 58%, .75);
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 4px;
    z-index: -1;
    transition: all .3s ease-in-out;
}

.growinglink:hover::before {
    bottom: 0;
    height: 100%;
}

/*swapping color*/

.swappingcolor {
    background-image: linear-gradient(
        to right, 
        #54b3d6 50%,
        #000 50%
    );
    background-size: 200% 100%;
    background-position: -100%;
    background-clip: text;
    display: inline-block;
    padding: 5px 0;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

.swappingcolor:hover {
    background-position: 0;
}

/*rainbow link*/
.rainbowlink {
    text-decoration: none;
    background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
    );
    background-size: 100% 3px, 0 3px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}

.rainbowlink:hover {
    background-size: 0 3px, 100% 3px;
}

/* passing underline link */
.passinglink {
    position: relative;
}

.passinglink::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: aquamarine;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.passinglink:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

/* git logo */

.git-logo {
    height: 150px;
    width: 150px;
    background-color: #f06033;
    border-radius: 15px;
    position: relative;
    transform: rotate(45deg);
}

.line1 {
    width: 110px;
    background-color: white;
    height: 10px;
    top: 40px;
    position: absolute;
}

.line1::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    top: -8px;
    left: 30px;
}

.line1::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    top: -8px;
    left: 90px;
}

.line2 {
    width: 90px;
    background-color: white;
    height: 12px;
    top: 70px;
    left: 30px;
    position: absolute;
    transform: rotate(45deg);
}

.line2::after {
    content: "";
    width: 30px;
    background-color: white;
    height: 30px;
    border-radius: 50%;
    top: -8px;
    left: 70px;
    position: absolute;
}