/*
Little effects and styles that I can utilize, mostly for text

.rainbow: Moving rainbow effect
.upDown, .forwardBackward, .leftRight: Moves the text around in those ways
.stretch: Text slowly expands and contracts
.grow: Big rotated text
.warning: Big warning text
.float-left: Left floating image with border
.float-right: Right floating image with border
*/

@keyframes rainbowMove {
  from { background-position: 0%; }
  to { background-position: 100%; }
}

@keyframes moveUpDown {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

@keyframes moveForwardBackward {
  from { scale: 95%; }
  to { scale: 105%; }
}

@keyframes moveLeftRight {
  from { transform: translateX(-2px); }
  to { transform: translateX(2px); }
}

@keyframes moveStretch {
  from { letter-spacing: -3px }
  to { letter-spacing: 3px }
}

.rainbow, h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, var(--pink), yellow, aqua, magenta);
  background-size: 300% 100%;
  animation: rainbowMove 5s linear infinite alternate;
}

.upDown { animation: moveUpDown .25s infinite alternate; display: inline-block; }
.forwardBackward { animation: moveForwardBackward .5s infinite alternate; display: inline-block; }
.leftRight { animation: moveLeftRight .25s infinite alternate; display: inline-block; }

.stretch { animation: moveStretch 2s infinite alternate; display: inline-block; }
.grow { scale: 170%; rotate: 10deg; text-align: center; display: inline-block; width: 60px; }

.warning {
  text-align: center;
  text-shadow: 0px 0px 20px var(--pink);
  color: var(--pink);
  border-radius: 25px;
  border: 4px dotted white;
  font-size: 60px;
  padding: 10px;
}

.float-right { float: right; margin: 15px 0px 15px 15px; }
.float-left { float: left; margin: 15px 15px 15px 0px }
.float-right, .float-left { border: 3px solid white; }