@charset "utf-8";

@keyframes hueRotate {
    100% {
        filter: hue-rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes floatLayer {
    50% {
        transform: translateY(calc(0px - var(--padding-20)));
    }
}
@keyframes rotateLayer {
    50% {
        transform: rotate(20deg);
    }
}
@keyframes floatRotateLayer {
    50% {
        transform: translateY(calc(0px - var(--padding-20))) rotate(20deg);
    }
}
.floatRotateLayer,
.hueRotate,
.floatLayer,
.rotateLayer {
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.hueRotate {
    animation-name: hueRotate;
}
.rotate {
    animation-name: rotate;
}
.floatLayer {
    animation-name: floatLayer;
}
.rotateLayer {
    animation-name: rotateLayer;
}
.floatRotateLayer {
    animation-name: floatRotateLayer;
}

.hoverOnOff {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}
.hoverOnOff .off,
.hoverOnOff .on {
    transition: all .15s;
}
.hoverOnOffTarget:hover .hoverOnOff .off,
.hoverOnOffTarget:hover .hoverOnOff .on {
    transition: all .45s;
}
.hoverOnOff .on {
    position: absolute;
    left:50%;top:0;
    transform: translate(-50%, 100%);
}

.hoverOnOffTarget:hover .hoverOnOff .off:not(:only-child) {
    transform: translateY(-100%);
}
.hoverOnOffTarget:hover .hoverOnOff .on {
    transform: translate(-50%, 0);
}
.hoverOnOff.left .on {
    left:0;
    transform: translate(0, 100%);
}
.hoverOnOff.right .on {
    left:auto;
    right:0;
    transform: translate(0, 100%);
}
.hoverOnOffTarget:hover .hoverOnOff.right .on,
.hoverOnOffTarget:hover .hoverOnOff.left .on {
    transform: translate(0%, 0);
}


@keyframes wave {
    100% {
      transform: translateX(-100%);
    }
}
.wave {
    display: flex;
    position: relative;
    left: 0;
    top: 0;
    margin: auto;
    line-height: 1;
}
.wave span,
.wave strong {
    display:flex;
    font-weight: 900;
}
.wave > span {
    white-space: nowrap;
    padding-right: 0.2em;
    animation-timing-function: linear;
    animation-duration: 30s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    flex: none;
}
.wave > span {
    animation-name: wave;
}
.wave > span span {
    -webkit-text-stroke: var(--border-width) var(--font-color);
    color: transparent;
}
.wave > span strong {
    color: var(--font-color);
}