body, html
{
    height: 100%;
}
body
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    margin: 0;
}
code
{
    font-family: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;
}
.App
{
    text-align: center;
}
.App-logo
{
    height: 40vmin;
    pointer-events: none;
}
@media(prefers-reduced-motion: no-preference)
{
    .App-logo
    {
        animation: App-logo-spin 20s linear infinite;
    }
}
.App-header
{
    align-items: center;
    background-color: #282c34;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: calc(10px + 2vmin);
    justify-content: center;
    min-height: 100vh;
}
.App-link
{
    color: #61dafb;
}
@keyframes App-logo-spin
{
    0%
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotate(1turn);
    }
}
.before-loader
{
    animation: roll .8s ease-in-out infinite alternate;
    border-radius: 50%;
    height: 48px;
    position: relative;
    width: 48px;
}
#root
{
    background-color: var(--tf-bg);
    height: 100%;
    width: 100%;
}
.before-loader:after
{
    border-color: #fff #0000;
    border-radius: 50%;
    border-style: solid;
    border-width: 5px;
    content: "";
    inset: 5px;
    position: absolute;
}
@keyframes roll
{
    0%
    {
        transform: translateX(-150%) rotate(0deg);
    }
    to
    {
        transform: translateX(250%) rotate(1turn);
    }
}