/* start: hover over an image and have it scroll hidden content */

.slip:hover {
	background-position: bottom center!important;
	transition: background-position 5s linear 0s;
}

/* end: hover over an image and have it scroll hidden content */


/* start: animated 1px stroke underline on hover */

.underline {
display: inline-block;
position: relative;
color: hsl(0, 0%, 0%);
}

.underline::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0;
left: 0;
background-color: hsl(0, 0%, 0%);
transform-origin: bottom right;
transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.underline:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}

/* start: animated 1px stroke underline on hover */


.focus
{
  outline:none;
} 

.slow_ease {
transition: all 1s ease-in-out;
}

 .slip:hover {
background-position: bottom center!important;
transition: background-position 5s linear 0s;
}

grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.03);
box-shadow: 0px 22px 59px -35px rgba(0,0,0,0.67)
}

.multiply {
  color: white;
  mix-blend-mode: multiply;
}

.spinme {
position: fixed; /* make sure it stays put so we can see it! */

animation: rotate 1s linear infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
}

.dotty {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
} 


 .rotate {
animation: rotation 20s infinite linear;
}