<!-- Meta data 
========================== -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Fujiwara Tofu Shop, the home of FiveM touge racing.">
<meta name="author" content="arigata9 / 0xygen">
<meta name="google" content="notranslate" />
<title>FTS Â· Home</title>

<!-- JQuery JS CDN,  required for bootstrap.js and accordions -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous"></script>


<!-- Bootstrap core CSS + JS
========================== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


<!-- Favicons 
========================== -->
<link rel="apple-touch-icon" href="img/tofu64x64.png"
    sizes="64x64">
<link rel="icon" href="img/tofu32x32.png" sizes="32x32"
    type="image/png">
<link rel="icon" href="img/tofu16x16.png" sizes="16x16"
    type="image/png">
<link rel="icon" href="img/tofu64x64.png">


<!-- Custom styles for leaderboard
=================================== -->
<link href="css/leaderboard.css" rel="stylesheet">

<!-- Custom styles for diagonal content and fts specific stuff
============================================================== -->
<link href="css/fts.css" rel="stylesheet">

<!-- Custom styles for preloader -->
<link href="css/preloader.css" rel="stylesheet">

<style>
    /* ===================================================================
    * # preloader
    *
    * ------------------------------------------------------------------- */
    :root {
        --primary-color: hsl(196, 78%, 61%);
    }

    .loader-wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: black;
        display: block;
        /* justify-content: center;
        align-items: center; */
        z-index: 2147483647;
    }

    .loading {
        position: relative;
        top: 50%;
        left: 50%;
        width: 4rem;
        height: 4rem;
        transform-style: preserve-3d;
        perspective: 800px;
    }

    .loading .arc {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border-bottom: 3px solid var(--primary-color);
    }

    .loading .arc:nth-child(1) {
        animation: rotate1 1.15s linear infinite;
    }

    .loading .arc:nth-child(2) {
        animation: rotate2 1.15s linear infinite;
    }

    .loading .arc:nth-child(3) {
        animation: rotate3 1.15s linear infinite;
    }

    .loading .arc:nth-child(1) {
        animation-delay: -0.8s;
    }

    .loading .arc:nth-child(2) {
        animation-delay: -0.4s;
    }

    .loading .arc:nth-child(3) {
        animation-delay: 0s;
    }

    @keyframes rotate1 {
        from {
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
        }

        to {
            transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
        }
    }

    @keyframes rotate2 {
        from {
            transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
        }

        to {
            transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
        }
    }

    @keyframes rotate3 {
        from {
            transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
        }

        to {
            transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
        }
    }
</style>

<!-- Current Jquery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- Preloader JS -->
<script src="js/preloader.js"></script>