@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

.show{display:block;}
.hide{display:none;}

/*------------------glow-----------------------*/

.glow {
font-size: 20px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #5A6AD2, 0 0 40px #5A6AD2, 0 0 50px #5A6AD2, 0 0 60px #5A6AD2, 0 0 70px #5A6AD2;
}

to {
text-shadow: 0 0 20px #fff, 0 0 30px #261174, 0 0 40px #261174, 0 0 50px #261174, 0 0 60px #261174, 0 0 70px #261174, 0 0 80px #261174;
}
}
/*----------------------------------------border hover----------------------------------------------------*/

.thumbnail:hover {
display:block;
z-index:999;
transform: scale(1.1);
border: 1px solid #f2f2f2;
border-radius: 5px;}


.thumbnail{
    padding: 1px !important;
}


.flip-card {
background-color: transparent;
width: 270px;
height: 170px;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
margin-bottom: 25px;

}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
/* background-color:white; */
background-color: #81356d;
color: white;
margin: auto;
}

/* Style the back side */
.flip-card-back {
background-color:white;
color: white;
transform: rotateY(180deg);
margin: auto;
height: 170px
}

/*----------------------------------for hobbies field----------------------------------------------------------------*/
.hover03 figure img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
max-height: 75%;
max-width: 75%;
margin: auto;
margin-bottom:90px; /*to have the space under the image*/

}
.hover03 figure:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}

/*--------------------------------wie------------------------------------------------------------------*/

#linkWrapRotator img {
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out; 
 -o-transition: all 1s ease-in-out; 
 -ms-transition: all 1s ease-in-out; 
}

#linkWrapRotator img:hover { 
 -webkit-transform: rotate(360deg); 
 -moz-transform: rotate(360deg); 
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg); 
}


.tilt {
-webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

.tilt:hover {
-webkit-transform: rotate(-20deg);
 -moz-transform: rotate(-20deg);
   -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
      transform: rotate(-20deg);
}


/*----------------------------------------------------------progressbar-----------------------------------------*/
.container-skills {
margin: 20px auto 0 auto;
max-width: 800px;
}

.bar {
position: relative;
background-color: #d8d8d8;
height: 10px;
margin: 0 0 20px 0;
}
.bar-fill {
position: absolute;
height: 10px;
}
.bar-title {
position: relative;
font-size: 1em;
text-align: left;
margin: 0 0 5px 0;
}
.percent {
position: absolute;
right: 0;
}

/* Animations Below - Replace ease-out with infinite for infinite loop*/
/*Edit here for html*/  
.bar-fill-html {
width: 90%;
background-color: #e44d26;
animation: bar-fill-html 2s ease-out;
-moz-animation: bar-fill-html 2s ease-out;
-webkit-animation: bar-fill-html 2s ease-out;
}
@keyframes bar-fill-html {
0% {
    width: 0px;
}

100% {
    width: 90%;
}
}
@-moz-keyframes bar-fill-html {
0% {
    width: 0px;
}

100% {
    width: 90%;
}
}
@-webkit-keyframes bar-fill-html {
0% {
    width: 0px;
}

100% {
    width: 90%;
}
}
/*Edit here for Javascript*/
.bar-fill-javascript {
width: 60%;
background-color: #f8dc3d;
animation: bar-fill-javascript 2s ease-out;
-moz-animation: bar-fill-javascript 2s ease-out;
-webkit-animation: bar-fill-javascript 2s ease-out;
}
@keyframes bar-fill-javascript {
0% {
    width: 0px;
}

100% {
    width: 60%;
}
}
@-moz-keyframes bar-fill-javascript {
0% {
    width: 0px;
}

100% {
    width: 60%;
}
}
@-webkit-keyframes bar-fill-javascript {
0% {
    width: 0px;
}

100% {
    width: 60%;
}
}
/*Edit here for java*/
.bar-fill-java{
width: 80%;
background-color: #81356d;
animation: bar-fill-java 2s ease-out;
-moz-animation: bar-fill-java 2s ease-out;
-webkit-animation: bar-fill-java 2s ease-out;
}
@keyframes bar-fill-java {
0% {
    width: 0px;
}

100% {
    width: 80%;
}
}
@-moz-keyframes bar-fill-java {
0% {
    width: 0px;
}

100% {
    width: 80%;
}
}
@-webkit-keyframes bar-fill-java {
0% {
    width: 0px;
}

100% {
    width: 0%;
}
}
/*Edit here for Responsive*/
.bar-fill-responsive{
width: 90%;
background-color: #429f46;
animation: bar-fill-responsive 2s ease-out;
-moz-animation: bar-fill-responsive 2s ease-out;
-webkit-animation: bar-fill-responsive 2s ease-out;
}
@keyframes bar-fill-responsive {
0% {
    width: 0px;
}

100% {
    width: 90%;
}
}
@-moz-keyframes bar-fill-responsive {
0% {
    width: 0px;
}

100% {
    width: 90%;
}
}
@-webkit-keyframes bar-fill-responsive {
0% {
    width: 0px;
}

100% {
    width: 90%;
}
}
/*Edit here for python*/
.bar-fill-python{
width: 70%;
background-color: #0a73dc;
animation: bar-fill-python 2s ease-out;
-moz-animation: bar-fill-python 2s ease-out;
-webkit-animation: bar-fill-python 2s ease-out;
}
@keyframes bar-fill-python {
0% {
    width: 0px;
}

100% {
    width: 70%;
}
}
@-moz-keyframes bar-fill-python {
0% {
    width: 0px;
}

100% {
    width: 70%;
}
}
@-webkit-keyframes bar-fill-python {
0% {
    width: 0px;
}

100% {
    width: 70%;
}
}


.github .img-responsive{
    height: 200px !important;
}



/*-------------------------------------I am divya text-------------------------------------------------*/
h1 {
/* border-right: solid 3px rgba(0,255,0,.75); */
margin: auto;
/* white-space: nowrap;
overflow: hidden;     */
font-family: 'Source Code Pro', monospace;  
color: rgba(255,255,255,.70);
font-size: 40px;
}

/* Animation */
/* h1 {
animation: animated-text 4s steps(29) 1s 1 normal both,
         animated-cursor 600ms steps(29) infinite;
} */

h2{
color: #fff;
}
/* text animation */

@keyframes animated-text{
from{width: 0;}
to{width: 470px;}
}

@media only screen and (max-width: 470px) {
h1 {
font-size: 25px;
}

@media only screen and (max-width: 450px) {
h4 {
font-size: 16px;
}
.flip-card {
width: 230px;
height: 150px;
display: table;
margin:auto;
margin-bottom: 25px;

}
.flip-card-back{
width: 230px;
height:150px;
}

.flip-card-front{
height: 150px;
}

p{
font-size: 14px;
}
}
@keyframes animated-text{
from{width: 0;}
to{width: 280px;}
}
/* cursor animations */
@keyframes animated-cursor{
from{border-right-color: rgba(225, 255, 0, 0.75);}
to{border-right-color: transparent;}
}
}

.fa-brands{
    font-size: 30px;
}

.fa-brands:hover{
    font-size: 35px;
}

.fa-icon{
    width: 60px !important;
}

.cdnheight{
    /* height: 75px; */
    padding: 1rem;
}

.date{
font-family: Arial, Helvetica, sans-serif;
}