:root {
    --color-fox-orange-100: #B7B39F;
    --color-fox-orange-300: #EFB560;
    --color-fox-orange-400: #DC9852;
    --color-fox-orange-500: #E18C3D;
    --color-fox-gray-100: #D3DDDA;
    --color-fox-gray-500: #707271;
    --color-fox-gray-700: #474D4F;
    --color-fox-gray-800: #393F40;
    --color-fox-gray-900: #2E3033;
    --color-fox-gray-950: #2b2b2b;
    --color-fox-gray-1000: #272727;
}


@keyframes float {
    from { transform: translateY(0); }
    to { transform: translateY(7px); text-shadow: 0 0 transparent; }
}


* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}


html, body {
    height: 100%;
    background-color: var(--color-fox-orange-500);
    box-shadow: inset 0 0 8px 4px rgba(0, 0, 0, .5);
}


body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: normal;
    user-select: none;
}


/* #tsparticles */
/* { */
/*     width: 100%; */
/*     height: 100%; */
/*     position: absolute; */
/*     top: 0; */
/*     right: 0; */
/*     bottom: 0; */
/*     left: 0; */
/*     z-index: 99; */
/* } */


h1 {
    color: var(--color-fox-gray-950);
    text-transform: uppercase;
    font-size: 3.5rem;
    text-effect: emboss;
    font-family: "Jersey 10", sans-serif;
    letter-spacing: 1px;
    /* transform: rotateX(50deg); */
    width: fit-content;
    margin-bottom: 5px;

    transition: text-shadow .4s ease-in-out;
}


pre {
    font-size: 2px;
    font-family: monospace;
    transform-origin: bottom;
    aspect-ratio: auto;
    scale: initial;
    text-shadow: 0 0 0 transparent;
    margin-top: 10px;
    /* opacity: 0 !important; */


    &#fox1 {
        margin-right: 2rem;
    }

    &#fox3 {
        scale: 1.12;
    }
}