/* CSS Document */
/*!
 * dsignPOETRY labs.
 * CSS: 7999-forever-motion.css
 * File In Use: https://www.dsignpoetry.com
 * Version: 16.02.20
 * Theme Author: DoggieStudio dsignPOETRY labs - Another DoggieStudio Production Since 1984 ★ (adps1984 foundation) ★
 * Orign Fit: Bootstrap 5.3.x & Unify 3.2.2
 * 
 * Copyright © 1984-2023 dsignPOETRY (DP) and DoggieStudio (DS) licensed by adps1984 foundation. All rights reserved.
 *
 * Date: 2022.12.30 (BS update)
 *
 * Included: Bootstrap 5.3.x
*/
/* -------------------------------------------------------------------------------------------------------------------------
   Lets Begin The Experimental Item 7999
** ------------------------------------------------------------------------------------------------------------------------- */
* {box-sizing: border-box; }

body {
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	background: #1e1e24;
	overflow: hidden;
    min-height: 100vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center; }

#bg-color-change {
	background: #1e1e24;
	animation: bg-color-change1 10s 1; }

@keyframes bg-color-change1 {
	from {
		background-color: #fc3500;
	}
	
	to {
		background-color: #1e1e24;
	}
}

.container {
    height: 60vmin;
    position: relative;
    width: 60vmin; }

.char {
    --delay: calc(((var(--char-total) - var(--char-index))) - var(--word-index));
    offset-path: path(var(--path));
    -webkit-animation: travel 6.3s calc((var(--delay) * (0.15)) * -1s) infinite linear both;
    animation: travel 6.3s calc((var(--delay) * (0.15)) * -1s) infinite linear both;
    offset-rotate: auto 180deg;
    position: absolute !important;
    font-size: 6vmin;
    font-weight: bold;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(0, -0.5vmin);
    transform: translate(0, -0.5vmin);
    color: #fc3500; }

svg {
    height: 100%;
    width: 100%; }

path {
    stroke: rgba(250, 250, 250, 0.25);
    stroke-width: 0.25px; }

.gradient {
    height: 0;
    width: 0; }

@-webkit-keyframes travel {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

@keyframes travel {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

/**
------------------------------------
   Styles for Splitting
------------------------------------ */
.splitting .word,
.splitting .char {display: inline-block; }

/* Psuedo-element chars */
.splitting .char {position: relative; }

/**
 * Populate the psuedo elements with the character to allow for expanded effects
 * Set to `display: none` by default; just add `display: block` when you want
 * to use the psuedo elements
 */
.splitting .char::before,
.splitting .char::after {
	content: attr(data-char);
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	transition: inherit;
	user-select: none; }

/* Expanded CSS Variables */
.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);

  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);

  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2); }

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));

  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total)); }

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));

  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));

  /* Absolute distance from center, only positive */
  --distance: calc(
     (var(--char-offset) * var(--char-offset)) / var(--char-center)
  );

  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));

  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center))); }