.backgroundImg{
	background: url("../_images/leaf2.png") top left no-repeat;
	width: 700px;
	height: 1000px;
}

.home-img{
    
	background-image: url("../_images/leaf2.png");
	background-repeat:no-repeat;
background-size:contain;
background-position:center;
    min-height: 90vh;
}
.home-img img{
	
    width: 60vw;
    animation: floatImage 3s ease-in-out infinite;
}

.keyframes{
    width: 100px;
    height: 100px;
    background-color: red;
    /*animation-name: move;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: 3;
    animation-fill-mode: forwards;*/
    /*animation: move 3s ease-in-out alternative 3 forwards;*/
    animation: move 8s ease-in-out;
}   

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

.textani{
  color: transparent;
  background-image: linear-gradient(90deg, yellow 50%, green 50%);
  background-position:100%;
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  
  transition: background-position 1s ease;
}
.textani:hover{
  background-position:0;
}

.earthwrap{
	width: 80rem;
	aspect-ratio:1;
	background-color:#000000;
	border-radius: 50%;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

.earth{
	width:100%;
	aspect-ratio:1;
	position: absolute;
	border-radius: 50%;
	background-image: url("../_images/world.png");
	animation: earthAnim 25s infinite linear;
}

@keyframes earthAnim{
	0%{
		background-position: 0 center;
	}
	100%{
		background-position: 192rem center;
	}
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}


@keyframes move{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(200px);
        background-color: blue;
    }
    50%{
        transform: translate(200px, 200px);
        background-color: bisque;
        /*transform: scale(1.5);*/
    }
    75%{
        transform: translate(0, 200px);
        background-color: aliceblue;
    }
    100%{
        transform: translateY(0);
    }
}

@keyframes floatImage{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-1.5rem);
    }
    100%{
        transform: translateY(0);
    }
}