diff --git a/docs/5.0/bounds.md b/docs/5.0/bounds.md
index 436526c6..680a0294 100644
--- a/docs/5.0/bounds.md
+++ b/docs/5.0/bounds.md
@@ -1,6 +1,6 @@
 ---
 layout: default
-title: The Bounds enum
+title: The Bounds Enumeration
 ---
 
 # The Bounds Enumeration
diff --git a/docs/5.0/index.md b/docs/5.0/index.md
index 821d07fc..51c80990 100644
--- a/docs/5.0/index.md
+++ b/docs/5.0/index.md
@@ -1,14 +1,15 @@
 ---
 layout: default
-title: Examples
+title: Overview
 ---
 
 # Overview
 
-[![Author](//img.shields.io/badge/author-@nyamsprod-blue.svg?style=flat-square)](//twitter.com/nyamsprod)
-[![Latest Version](//img.shields.io/github/release/thephpleague/period.svg?style=flat-square)](//github.com/thephpleague/period/releases)
-[![Software License](//img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)
-[![Total Downloads](//img.shields.io/packagist/dt/league/period.svg?style=flat-square)](//packagist.org/packages/league/period)
+[![Author](https://img.shields.io/badge/author-@nyamsprod-blue.svg?style=flat-square)](https://phpc.social/@nyamsprod)
+[![Latest Version](https://img.shields.io/github/release/thephpleague/period.svg?style=flat-square)](https://github.com/thephpleague/period/releases)
+[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](https://github.com/thephpleague/period/blob/master/LICENSE)
+[![Total Downloads](https://img.shields.io/packagist/dt/league/period.svg?style=flat-square)](https://packagist.org/packages/league/period)
+![php 8.1+](https://img.shields.io/badge/php-min%208.1.0-red.svg)
 
 `Period` is PHP's missing time range API. this package cover all basic operations regarding time ranges.
 
diff --git a/docs/5.0/sequence/index.md b/docs/5.0/sequence/index.md
index 280e4373..838db8c1 100644
--- a/docs/5.0/sequence/index.md
+++ b/docs/5.0/sequence/index.md
@@ -3,7 +3,7 @@ layout: default
 title: The Sequence class
 ---
 
-# The Sequence object
+# The Sequence class
 
 If you need to manipulate multiple `Period` instances you can now manage them easily using the provided `Sequence` class. 
 This class is a **List** similar to an array that uses incremental integer keys.
diff --git a/docs/_data/project.yml b/docs/_data/project.yml
index b1184072..bf965b77 100644
--- a/docs/_data/project.yml
+++ b/docs/_data/project.yml
@@ -7,7 +7,7 @@ releases:
   current:
     version: '5.0'
     requires: 'PHP >= 8.1'
-    latest: '5.0'
+    latest: '5.3.2'
     supported_until: 'TBD'
     documentation_link: '/5.0/'
   previous:
@@ -34,4 +34,4 @@ highlights:
         - Covers all basic manipulations related to time range
         - Enables working with simple or complex time ranges logic
 composer: '$ composer require league/period'
-support: 'Once a new major version is released, the previous stable release remains supported for six more months through patches and security fixes.'
+support: 'Once a new **major** version is released, the previous stable release remains supported for **six more months** through patches and security fixes.'
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 12fa09b0..bfe0075a 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -5,8 +5,8 @@
     {% assign upgrading = true %}
 {% endif %}
 {% capture version_home %}/{{ version }}/{% endcapture %}
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -14,10 +14,12 @@
     <meta name="description" content="{{ site.data.project.description }}">
     <meta name="docsearch:version" content="{{ version }}">
     <title>{{ page.title }} - {{ site.data.project.title }}</title>
-    <link rel="icon" type="image/x-icon" href="//theme.thephpleague.com/img/favicon.ico" />
+    <link rel="icon" href="/assets/img/period-logo.svg" type="image/svg+xml">
     <link rel="apple-touch-icon-precomposed" href="//theme.thephpleague.com/img/apple-touch-icon-precomposed.png">
-    <link rel="stylesheet" href="//theme.thephpleague.com/css/all.css?2">
-    <link rel="stylesheet" href="/custom.css?21">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Onest:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
+    <link href="/output.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
     <script async src="https://www.googletagmanager.com/gtag/js?id={{  site.data.project.google_analytics_tracking_id }}"></script>
     <script>
@@ -27,95 +29,162 @@
         gtag('config', '{{  site.data.project.google_analytics_tracking_id }}');
     </script>
 </head>
-<body>
-<header>
-    <div class="header-content">
-        <h1 class="title"><a href="/">{{ site.data.project.title }}</a></h1>
-        <div class="search"><input type="search" id="doc-search" placeholder="search the docs..."></div>
-        <nav class="versions">
-            <h2>{% if upgrading == true %}Notes{% else %}v{{ version }}{% endif %} &#9662;</h2>
-            <ul>
-            {% for v in site.data.menu.version %}
-                <li {% if version == v[0] and upgrading == false %}class="selected"{% endif %}><a href="/{{ v[0] }}/">v{{ v[0] }}</a></li>
-            {% endfor %}
-                <li {% if upgrading == true %}class="selected"{% endif %}><a href="/releases/">Notes</a></li>
-            </ul>
-        </nav>
-    </div>
-</header>
-
-<input type="checkbox" id="menu">
-<label for="menu" onclick>
-    <div class="closed">&#9776;</div>
-    <div class="open">&#10799;</div>
-</label>
-
-<main>
-    <menu>
-        <div class="versions-small">
-        <h2>Versions</h2>
-            <ul>
-        {% for v in site.data.menu.version %}
-                <li {% if version == v[0] and upgrading == false %}class="selected"{% endif %}>
-                    <a href="/{{ v[0] }}/">{{ v[0] }}</a>
-                </li>
-        {% endfor %}
-                <li {% if upgrading == true %}class="selected"{% endif %}><a href="/releases/">Releases Notes</a></li>
-            </ul>
+<body class="bg-white text-dark font-onest antialiased relative">
+<div class="relative z-10">
+    <header class="flex items-center sm:justify-center pl-6 pr-6 pb-6 max-w-7xl mx-auto pb-32">
+        <div class="flex gap-6 md:gap-0 md:flex-row justify-between md:items-center p-3 md:p-6 w-full max-w-7xl">
+            <a class="flex items-center gap-2 sm:gap-3" href="/">
+                <img src="/assets/img/period-logo.svg" alt="Logo" class="w-[40px] sm:w-[50px] h-[40px] sm:h-[50px]"/>
+                <div class="font-black">PERIOD</div>
+            </a>
         </div>
-
-        {% if upgrading == false %}
-            {% for section in site.data.menu.version[version] %}
-            <div class="menu-section">
-                <h2>{{ section[0] }}</h2>
-                <ul>
-                    {% for link in section[1] %}
+        <div class="flex gap-6 md:gap-0 md:flex-row justify-between md:items-center p-3 md:p-6 w-full max-w-7xl">
+            <input type="search" id="doc-search" class="w-64" placeholder="search the docs...">
+        </div>
+    </header>
+    <main class="relative flex justify-center mx-auto max-w-8xl sm:px-2 lg:px-8 xl:px-12">
+        <label for="navigation" class="fixed top-5 right-5 z-50 flex items-center justify-center w-12 h-12 mb-4 ml-4 bg-white border rounded-full shadow-lg cursor-pointer text-slate-600 border-slate-300 lg:hidden transition duration-200 ease-in-out active:scale-95">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
+            </svg>
+        </label>
+        <input type="checkbox" name="navigation" id="navigation" class="hidden peer" />
+        <div class="fixed top-[3.5rem] h-screen shadow-xl px-4 left-0 hidden peer-checked:block lg:relative lg:top-0 lg:h-auto lg:px-0 lg:block lg:flex-none lg:shadow-none  bg-slate-100 lg:bg-transparent">
+            <div class="absolute inset-y-0 right-0 w-full lg:w-[50vw]"></div>
+            <nav class="sticky top-[4.5rem] w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
+                <ul role="list" class="-ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-7 pl-0.5 space-y-8">
+                    {% if upgrading == false %}
+                    {% for section in site.data.menu.version[version] %}
+                    <h3 class="font-semibold tracking-tight text-slate-900">{{ section[0] }}</h3>
+                    <ul role="list" class="pl-3 mt-3 space-y-2">
+                        {% for link in section[1] %}
                         <li {% if page.url == link[1] %}class="selected"{% endif %}>
-                            <a href="{{ link[1] }}">{{ link[0] }}</a>
+                            <a href="{{ link[1] }}" class="text-slate-900 hover:text-slate-800">{{ link[0] }}</a>
                         </li>
+                        {% endfor %}
+                    </ul>
                     {% endfor %}
-                </ul>
-            </div>
-            {% endfor %}
-        {% else %}
-            {% for section in site.data.menu.upgrading %}
-                <h2>{{ section[0] }}</h2>
-                <ul>
-                    {% for link in section[1] %}
+                    {% else %}
+                    {% for section in site.data.menu.upgrading %}
+                    <h3 class="font-semibold tracking-tight text-slate-900">{{ section[0] }}</h3>
+                    <ul role="list" class="pl-3 mt-3 space-y-2">
+                        {% for link in section[1] %}
                         <li {% if page.url == link[1] %}class="selected"{% endif %}>
-                            <a href="{{ link[1] }}">{{ link[0] }}</a>
+                            <a href="{{ link[1] }}" class="text-slate-900 hover:text-slate-800">{{ link[0] }}</a>
                         </li>
+                        {% endfor %}
+                    </ul>
                     {% endfor %}
+                    {% endif %}
+                    <h3 class="font-semibold tracking-tight text-slate-900">Release Notes</h3>
+                    <ul role="list" class="pl-3 mt-3 space-y-2">
+                        <li {% if upgrading == true %}class="selected"{% endif %}><a href="/releases/">Releases Notes</a></li>
+                    </ul>
+                    <h3 class="font-semibold tracking-tight text-slate-900">Older versions</h3>
+                    <ul role="list" class="pl-3 mt-3 space-y-2">
+                        {% for v in site.data.menu.version %}
+                        <li {% if version == v[0] and upgrading == false %}class="selected"{% endif %}>
+                            <a href="/{{ v[0] }}/">{{ v[0] }} {% if v[0] == site.data.project.releases.current.version %}(latest stable){% endif %}</a>
+                        </li>
+                        {% endfor %}
+                    </ul>
                 </ul>
-            {% endfor %}
-        {% endif %}
-    </menu>
-    <article>
-    {% if version == site.data.project.releases.next.version %}
-        <p class="message-notice">This is the documentation for the upcoming <code>version {{ version }}</code>. This is a work in progress</p>
-    {% endif %}
-
-    {% if version == site.data.project.releases.previous.version %}
-        <p class="message-notice">This is the documentation for <code>version {{ version }}</code> which will be supported until <strong>{{ site.data.project.releases.previous.supported_until }}</strong>. Please consider upgrading your code to <a href="{{ site.data.project.releases.current.documentation_link }}">the latest stable version</a></p>
-    {% endif %}
-
-    {% if version == site.data.project.releases.legacy.version %}
-        <p class="message-notice">This is the documentation for the unsupported <code>version {{ version }}</code>. Please consider upgrading your code to <a href="{{ site.data.project.releases.current.documentation_link }}">the latest stable version</a></p>
-    {% endif %}
-
-        {{ content }}
-    </article>
-
-</main>
-
-<aside class="sponsors hide">
-    <p>Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">Support its development!</a></p>
-</aside>
-
-<footer>
-    <span>&copy; Copyright <a href="//thephpleague.com">The League of Extraordinary Packages</a>.</span>
-    <span>Site design by <a href="//reinink.ca">Jonathan Reinink</a> and <a href="//nyamsprod.com">Ignace Nyamagana Butera</a>.</span>
-</footer>
+            </nav>
+        </div>
+        <div class="flex-auto max-w-2xl min-w-0 px-4 py-10 lg:max-w-4xl lg:pr-0 lg:pl-8 xl:px-16">
+            <article class="content">
+            {% if version == site.data.project.releases.next.version %}
+                <p class="message-notice">This is the documentation for the upcoming <code>version {{ version }}</code>. This is a work in progress</p>
+            {% endif %}
+
+            {% if version == site.data.project.releases.previous.version %}
+                <p class="message-notice">This is the documentation for <code>version {{ version }}</code> which will be supported until <strong>{{ site.data.project.releases.previous.supported_until }}</strong>. Please consider upgrading your code to <a href="{{ site.data.project.releases.current.documentation_link }}">the latest stable version</a></p>
+            {% endif %}
+
+            {% if version == site.data.project.releases.legacy.version %}
+                <p class="message-notice">This is the documentation for the unsupported <code>version {{ version }}</code>. Please consider upgrading your code to <a href="{{ site.data.project.releases.current.documentation_link }}">the latest stable version</a></p>
+            {% endif %}
+                {{ content }}
+            </article>
+        </div>
+    </main>
+    <footer class="p-6 max-w-7xl mx-auto pb-32">
+        <hr class="border-t border-light border-opacity-50 max-w-7xl mx-auto" />
+
+        <div class="flex flex-col lg:flex-row gap-12 my-16 px-6 md:px-0">
+            <a href="https://csv.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/csv-logo.svg" alt="CSV Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">CSV</div>
+
+                    <p class="text-light">Data manipulation made easy in PHP</p>
+                </div>
+            </a>
+
+            <a href="https://uri.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/uri-logo.svg" alt="URI Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">URI</div>
+
+                    <p class="text-light">Modern API to process URIs in PHP</p>
+                </div>
+            </a>
+
+            <a href="https://period.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/period-logo.svg" alt="Period Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">PERIOD</div>
+
+                    <p class="text-light">Time range API for PHP</p>
+                </div>
+            </a>
+        </div>
+
+        <hr class="border-t border-light border-opacity-50 max-w-7xl mx-auto mb-16" />
+
+        <div class="gap-12 sm:gap-32 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
+            <div class="flex flex-col gap-3 sm:col-span-3 lg:col-span-1">
+                <div class="text-period-base font-black text-xl">Copyright</div>
+
+                <a href="//thephpleague.com" class="font-mono tracking-tighter text-sm underline transition-all hover-text">The League of <br />Extraordinary Packages</a>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="text-dark font-black text-xl">Questions?</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://github.com/thephpleague/csv" target="_blank" class="transition-all hover-text">
+                        CSV was created by Ignace Nyamagana Butera.
+                        Find him on Twitter at <span class="underline">@nyamsprod</span>.
+                    </a>
+                </p>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="text-dark font-black text-xl">Design</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://twitter.com/sandr" target="_blank" class="transition-all hover-text">
+                        Brand and site design by <span class="underline">Sander van der Kolk</span>
+                    </a>
+                </p>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="font-black text-xl">License package</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://github.com/thephpleague/csv" target="_blank" class="transition-all hover-text underline">
+                        The MIT License (MIT)
+                    </a>
+                </p>
+            </div>
+        </div>
+    </footer>
+</div>
 <script src="/custom.js?7"></script>
 <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
 <script> docsearch({
diff --git a/docs/_layouts/homepage.html b/docs/_layouts/homepage.html
deleted file mode 100644
index 8a680109..00000000
--- a/docs/_layouts/homepage.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html class="homepage">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="{{ site.data.project.description }}">
-    <meta name="docsearch:version" content="{{ site.data.project.releases.current.version }}">
-    <meta name="theme-color" content="#19232D">
-    <title>{{ site.data.project.tagline }} - {{ site.data.project.title }}</title>
-    <link rel="icon" type="image/x-icon" href="//theme.thephpleague.com/img/favicon.ico" />
-    <link rel="apple-touch-icon-precomposed" href="//theme.thephpleague.com/img/apple-touch-icon-precomposed.png">
-    <link rel="stylesheet" href="//theme.thephpleague.com/css/all.css?2">
-    <link rel="stylesheet" href="/homepage.css?15">
-    <script async src="https://www.googletagmanager.com/gtag/js?id={{  site.data.project.google_analytics_tracking_id }}"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', '{{  site.data.project.google_analytics_tracking_id }}');
-    </script>
-</head>
-<body>
-
-<header>
-    <div class="inner-content">
-      <h1>{{ site.data.project.title }}</h1>
-      <h2>{{ site.data.project.tagline }}</h2>
-      <p class="composer"><span>{{ site.data.project.composer }}</span></p>
-      <ul class="hot-links clearfix">
-        <li class="source"><a href="//github.com/thephpleague/period">source code</a></li>
-        <li class="documentation"><a href="{{ site.data.project.releases.current.documentation_link}}">documentation</a></li>
-      </ul>
-      <p class="footnote">{{ site.data.project.support }}</p>
-    </div>
-</header>
-
-<aside class="sponsors hide">
-    <p>Love this package ? <a href="https://github.com/sponsors/{{ site.data.project.author.github_account }}">Support its development!</a></p>
-</aside>
-
-<main>
-  <div class="highlights">
-    <div class="inner-content">
-      <div class="column one">
-        <h1>Highlights</h1>
-        <div class="description">
-        <p>{{ site.data.project.highlights.description }}</p>
-        </div>
-      </div>
-      <div class="column two">
-        <ol>
-          {% for feature in site.data.project.highlights.features %}
-          <li><p>{{ feature }}</p></li>
-          {% endfor %}
-        </ol>
-      </div>
-    </div>
-  </div>
-
-  <div class="features">
-    <div class="inner-content">
-{{ content }}
-    </div>
-  </div>
-
-  <div class="questions">
-    <div class="inner-content">
-      <h1>Questions?</h1>
-      <p><a href="https://github.com/thephpleague/{{ site.data.project.repository }}">{{ site.data.project.title }}</a> was created by {{ site.data.project.author.name }}. Find him on Twitter at <a href="https://twitter.com/{{ site.data.project.author.twitter_account }}">@{{ site.data.project.author.twitter_account }}</a>.</p>
-    </div>
-  </div>
-</main>
-
-<footer>
-    <span>&copy; Copyright <a href="//thephpleague.com">The League of Extraordinary Packages</a>.</span>
-    <span>Site design by <a href="//reinink.ca">Jonathan Reinink</a> and <a href="//nyamsprod.com">Ignace Nyamagana Butera</a>.</span>
-</footer>
-<script src="/custom.js?7"></script>
-</body>
-</html>
diff --git a/docs/_layouts/index.html b/docs/_layouts/index.html
new file mode 100644
index 00000000..5d16b7d7
--- /dev/null
+++ b/docs/_layouts/index.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{ site.data.project.description }}">
+    <meta name="docsearch:version" content="{{ site.data.project.releases.current.version }}">
+    <meta name="theme-color" content="#FFC61D">
+    <link rel="icon" href="/assets/img/period-logo.svg" type="image/svg+xml">
+    <title>Time range API for PHP - PERIOD</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Onest:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
+    <link href="output.css" rel="stylesheet">
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-46050814-6"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '{{  site.data.project.google_analytics_tracking_id }}');
+    </script>
+</head>
+<body class="bg-white text-dark font-onest antialiased relative">
+<div class="relative z-10">
+    <header class="flex items-center sm:justify-center">
+        <div class="flex gap-6 md:gap-0 md:flex-row justify-between md:items-center p-3 md:p-6 w-full max-w-7xl">
+            <div class="flex items-center gap-2 sm:gap-3">
+                <img src="/assets/img/period-logo.svg" alt="Logo" class="w-[40px] sm:w-[50px] h-[40px] sm:h-[50px]"/>
+
+                <div class="font-black">PERIOD</div>
+            </div>
+            <div class="flex items-center gap-2 md:gap-6">
+                <a href="https://github.com/thephpleague/period" class="hidden sm:flex text-white transition-all hover-button rounded-full">
+                    <img src="/assets/img/github-logo.svg" alt="Github" class=""/>
+                </a>
+                <a href="{{ site.data.project.releases.current.documentation_link}}" target="_blank" class="px-2 py-2 sm:px-6 sm:py-3 rounded-full text-xs md:text-lg font-bold text-white bg-period-base transition-all whitespace-nowrap hover-button">documentation</a>
+                <a href="https://github.com/sponsors/nyamsprod" target="_blank" class="px-2 py-2 sm:px-6 sm:py-3 rounded-full text-xs md:text-lg font-bold text-white bg-period-dark whitespace-nowrap hover-button">Become a sponsor</a>
+            </div>
+        </div>
+    </header>
+
+    <main class="flex justify-center">
+        <div class="flex flex-col gap-3 pt-24 justify-between px-6 sm:px-12 lg:px-0 w-full max-w-5xl">
+            <h1 class="font-black text-8xl md:text-9xl tracking-tighter">PERIOD</h1>
+
+            <h2 class="font-medium text-3xl text-light">Time range API for PHP</h2>
+
+            <div class="flex">
+                <span class="mt-6 rounded-xl bg-white p-6 py-9 shadow-lg border border-light border-opacity-10 flex items-center gap-6 transition hover-block">
+                    <div class="bg-gray-200 px-6 py-3 rounded-lg text-light font-mono transition-all hover:bg-black-200">
+                        composer require league/period:^5.3.1
+                    </div>
+                </span>
+            </div>
+
+            <div class="flex flex-col gap-6 py-16 sm:py-24 text-light">
+
+            </div>
+
+            <div class="flex flex-col gap-6 sm:w-2/3">
+                <h3 class="font-black text-6xl md:text-8xl tracking-tighter">Highlights</h3>
+
+                <p class="text-light">
+                    <code>Period</code> is PHP's Time Range class. Based on ideas from
+                    <a class="underline" href="https://verraes.net/2014/08/resolving-feature-envy-in-the-domain/">Resolving Feature Envy in the Domain</a>
+                    by Mathias Verraes, this package extends the concept to cover all basic operations regarding time ranges.
+                </p>
+
+                <div class="gap-6 flex flex-col my-16">
+                    <h4 class="font-bold text-2xl">Uses Immutable Value Objects</h4>
+
+                    <div class="bg-gradient-to-r from-period-base to-white h-px"></div>
+
+                    <h4 class="font-bold text-xl">Uses named constructors to ease object creation</h4>
+
+                    <div class="bg-gradient-to-r from-period-base to-white h-px"></div>
+
+                    <h4 class="font-bold text-xl">Covers all basic manipulations related to time range</h4>
+
+                    <div class="bg-gradient-to-r from-period-base to-white h-px"></div>
+
+                    <h4 class="font-bold text-xl">Enables working with simple or complex time ranges logic</h4>
+                </div>
+            </div>
+
+            <div class="bg-slate-800 p-6 rounded-lg text-white flex flex-col sm:flex-row gap-6">
+                <div class="bg-period-light text-black font-black text-lg w-12 h-12 flex shrink-0 items-center justify-center rounded-full">!</div>
+                <p>Once a new <strong>major</strong> version is released, the previous stable release remains supported for <strong>six more months</strong> with patches and security fixes.</p>
+            </div>
+
+            <div class="flex flex-col gap-3 my-16 content">
+                {{ content }}
+            </div>
+        </div>
+    </main>
+
+    <footer class="p-6 max-w-7xl mx-auto pb-32">
+        <hr class="border-t border-light border-opacity-50 max-w-7xl mx-auto" />
+
+        <div class="flex flex-col lg:flex-row gap-12 my-16 px-6 md:px-0">
+            <a href="https://csv.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/csv-logo.svg" alt="CSV Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">CSV</div>
+
+                    <p class="text-light">Data manipulation made easy in PHP</p>
+                </div>
+            </a>
+
+            <a href="https://uri.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/uri-logo.svg" alt="URI Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">URI</div>
+
+                    <p class="text-light">Modern API to process URIs in PHP</p>
+                </div>
+            </a>
+
+            <a href="https://period.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/period-logo.svg" alt="Period Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">PERIOD</div>
+
+                    <p class="text-light">Time range API for PHP</p>
+                </div>
+            </a>
+        </div>
+
+        <hr class="border-t border-light border-opacity-50 max-w-7xl mx-auto mb-16" />
+
+        <div class="gap-12 sm:gap-32 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
+            <div class="flex flex-col gap-3 sm:col-span-3 lg:col-span-1">
+                <div class="text-period-base font-black text-xl">Copyright</div>
+
+                <a href="//thephpleague.com" class="font-mono tracking-tighter text-sm underline transition-all hover-text">The League of <br />Extraordinary Packages</a>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="text-dark font-black text-xl">Questions?</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://github.com/thephpleague/csv" target="_blank" class="transition-all hover-text">
+                        CSV was created by Ignace Nyamagana Butera.
+                        Find him on Twitter at <span class="underline">@nyamsprod</span>.
+                    </a>
+                </p>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="text-dark font-black text-xl">Design</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://twitter.com/sandr" target="_blank" class="transition-all hover-text">
+                        Brand and site design by <span class="underline">Sander van der Kolk</span>
+                    </a>
+                </p>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="font-black text-xl">License package</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://github.com/thephpleague/csv" target="_blank" class="transition-all hover-text underline">
+                        The MIT License (MIT)
+                    </a>
+                </p>
+            </div>
+        </div>
+    </footer>
+</div>
+
+<div class="absolute z-0 flex justify-center top-0 right-0 left-0 overflow-hidden">
+    <img src="/assets/img/period-logo-big.svg" alt="Logo" class="w-1/2 sm:w-auto rotate-6 z-0 top-logo -right-logo"/>
+</div>
+</body>
+</html>
diff --git a/docs/_layouts/redirect.html b/docs/_layouts/redirect.html
index 72019222..bb5f70cc 100644
--- a/docs/_layouts/redirect.html
+++ b/docs/_layouts/redirect.html
@@ -1,18 +1,26 @@
-<!DOCTYPE html>
-<html class="homepage">
+{% assign version = page.url | remove_first: "/" | split: "/" | first %}
+{% assign upgrading = false %}
+{% if version == '' or version == 'releases' %}
+{% assign version = site.data.project.releases.current.version %}
+{% assign upgrading = true %}
+{% endif %}
+{% capture version_home %}/{{ version }}/{% endcapture %}
+<!doctype html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta http-equiv="refresh" content="0; url={{ page.redirect.to }}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="docsearch:version" content="{{ site.data.project.releases.current.version }}">
     <meta name="description" content="{{ site.data.project.description }}">
-    <title>{{ site.data.project.tagline }} - {{ site.data.project.title }}</title>
-    <link rel="canonical" href="{{ page.redirect.to }}">
-    <link rel="icon" type="image/x-icon" href="//theme.thephpleague.com/img/favicon.ico" />
+    <meta name="docsearch:version" content="{{ version }}">
+    <title>{{ page.title }} - {{ site.data.project.title }}</title>
+    <link rel="icon" href="/assets/img/period-logo.svg" type="image/svg+xml">
     <link rel="apple-touch-icon-precomposed" href="//theme.thephpleague.com/img/apple-touch-icon-precomposed.png">
-    <link rel="stylesheet" href="//theme.thephpleague.com/css/all.css?2">
-    <link rel="stylesheet" href="/homepage.css?15">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Onest:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
+    <link href="/output.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
     <script async src="https://www.googletagmanager.com/gtag/js?id={{  site.data.project.google_analytics_tracking_id }}"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
@@ -21,31 +29,162 @@
         gtag('config', '{{  site.data.project.google_analytics_tracking_id }}');
     </script>
 </head>
+<body class="bg-white text-dark font-onest antialiased relative">
+<div class="relative z-10">
+    <header class="flex items-center sm:justify-center pl-6 pr-6 pb-6 max-w-7xl mx-auto pb-32">
+        <div class="flex gap-6 md:gap-0 md:flex-row justify-between md:items-center p-3 md:p-6 w-full max-w-7xl">
+            <a class="flex items-center gap-2 sm:gap-3" href="/">
+                <img src="/assets/img/period-logo.svg" alt="Logo" class="w-[40px] sm:w-[50px] h-[40px] sm:h-[50px]"/>
+                <div class="font-black">PERIOD</div>
+            </a>
+        </div>
+        <div class="flex gap-6 md:gap-0 md:flex-row justify-between md:items-center p-3 md:p-6 w-full max-w-7xl">
+            <input type="search" id="doc-search" class="w-64" placeholder="search the docs...">
+        </div>
+    </header>
+    <main class="relative flex justify-center mx-auto max-w-8xl sm:px-2 lg:px-8 xl:px-12">
+        <label for="navigation" class="fixed top-5 right-5 z-50 flex items-center justify-center w-12 h-12 mb-4 ml-4 bg-white border rounded-full shadow-lg cursor-pointer text-slate-600 border-slate-300 lg:hidden transition duration-200 ease-in-out active:scale-95">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
+            </svg>
+        </label>
+        <input type="checkbox" name="navigation" id="navigation" class="hidden peer" />
+        <div class="fixed top-[3.5rem] h-screen shadow-xl px-4 left-0 hidden peer-checked:block lg:relative lg:top-0 lg:h-auto lg:px-0 lg:block lg:flex-none lg:shadow-none  bg-slate-100 lg:bg-transparent">
+            <div class="absolute inset-y-0 right-0 w-full lg:w-[50vw]"></div>
+            <nav class="sticky top-[4.5rem] w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
+                <ul role="list" class="-ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-7 pl-0.5 space-y-8">
+                    {% if upgrading == false %}
+                    {% for section in site.data.menu.version[version] %}
+                    <h3 class="font-semibold tracking-tight text-slate-900">{{ section[0] }}</h3>
+                    <ul role="list" class="pl-3 mt-3 space-y-2">
+                        {% for link in section[1] %}
+                        <li {% if page.url == link[1] %}class="selected"{% endif %}>
+                            <a href="{{ link[1] }}" class="text-slate-900 hover:text-slate-800">{{ link[0] }}</a>
+                        </li>
+                        {% endfor %}
+                    </ul>
+                    {% endfor %}
+                    {% else %}
+                    {% for section in site.data.menu.upgrading %}
+                    <h3 class="font-semibold tracking-tight text-slate-900">{{ section[0] }}</h3>
+                    <ul role="list" class="pl-3 mt-3 space-y-2">
+                        {% for link in section[1] %}
+                        <li {% if page.url == link[1] %}class="selected"{% endif %}>
+                            <a href="{{ link[1] }}" class="text-slate-900 hover:text-slate-800">{{ link[0] }}</a>
+                        </li>
+                        {% endfor %}
+                    </ul>
+                    {% endfor %}
+                    {% endif %}
+                    <h3 class="font-semibold tracking-tight text-slate-900">Release Notes</h3>
+                    <ul role="list" class="pl-3 mt-3 space-y-2">
+                        <li {% if upgrading == true %}class="selected"{% endif %}><a href="/releases/">Releases Notes</a></li>
+                    </ul>
+                    <h3 class="font-semibold tracking-tight text-slate-900">Older versions</h3>
+                    <ul role="list" class="pl-3 mt-3 space-y-2">
+                        {% for v in site.data.menu.version %}
+                        <li {% if version == v[0] and upgrading == false %}class="selected"{% endif %}>
+                            <a href="/{{ v[0] }}/">{{ v[0] }} {% if v[0] == site.data.project.releases.current.version %}(latest stable){% endif %}</a>
+                        </li>
+                        {% endfor %}
+                    </ul>
+                </ul>
+            </nav>
+        </div>
+        <div class="flex-auto max-w-2xl min-w-0 px-4 py-10 lg:max-w-4xl lg:pr-0 lg:pl-8 xl:px-16">
+            <article class="content">
+              <h1>Redirecting…</h1>
+              <a href="{{ page.redirect.to }}" style="color:#ff4043">Click here if you are not redirected.</a>
+              <script>location="{{ page.redirect.to }}"</script>
+            </article>
+        </div>
+    </main>
+    <footer class="p-6 max-w-7xl mx-auto pb-32">
+        <hr class="border-t border-light border-opacity-50 max-w-7xl mx-auto" />
 
-<body>
-<header>
-    <div class="inner-content">
-      <h1>{{ site.data.project.title }}</h1>
-      <h2>{{ site.data.project.tagline }}</h2>
-      <p class="composer"><span>{{ site.data.project.composer }}</span></p>
-    </div>
-</header>
-
-<main>
-  <div class="highlights">
-    <div class="inner-content">
-      <h1>Redirecting…</h1>
-      <div class="content">
-      <a href="{{ page.redirect.to }}" style="color:#ff4043">Click here if you are not redirected.</a>
-      <script>location="{{ page.redirect.to }}"</script>
-      </div>
-    </div>
-  </div>
-</main>
-
-<footer>
-    <span>&copy; Copyright <a href="//thephpleague.com">The League of Extraordinary Packages</a>.</span>
-    <span>Site design by <a href="//reinink.ca">Jonathan Reinink</a> and <a href="//nyamsprod.com">Ignace Nyamagana Butera</a>.</span>
-</footer>
+        <div class="flex flex-col lg:flex-row gap-12 my-16 px-6 md:px-0">
+            <a href="https://csv.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/csv-logo.svg" alt="CSV Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">CSV</div>
+
+                    <p class="text-light">Data manipulation made easy in PHP</p>
+                </div>
+            </a>
+
+            <a href="https://uri.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/uri-logo.svg" alt="URI Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">URI</div>
+
+                    <p class="text-light">Modern API to process URIs in PHP</p>
+                </div>
+            </a>
+
+            <a href="https://period.thephpleague.com/" class="flex gap-3 lg:justify-between items-start transition-all hover-block">
+                <img src="/assets/img/period-logo.svg" alt="Period Logo" class="" />
+
+                <div class="flex flex-col">
+                    <div class="font-black text-lg text-dark">PERIOD</div>
+
+                    <p class="text-light">Time range API for PHP</p>
+                </div>
+            </a>
+        </div>
+
+        <hr class="border-t border-light border-opacity-50 max-w-7xl mx-auto mb-16" />
+
+        <div class="gap-12 sm:gap-32 grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
+            <div class="flex flex-col gap-3 sm:col-span-3 lg:col-span-1">
+                <div class="text-period-base font-black text-xl">Copyright</div>
+
+                <a href="//thephpleague.com" class="font-mono tracking-tighter text-sm underline transition-all hover-text">The League of <br />Extraordinary Packages</a>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="text-dark font-black text-xl">Questions?</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://github.com/thephpleague/csv" target="_blank" class="transition-all hover-text">
+                        CSV was created by Ignace Nyamagana Butera.
+                        Find him on Twitter at <span class="underline">@nyamsprod</span>.
+                    </a>
+                </p>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="text-dark font-black text-xl">Design</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://twitter.com/sandr" target="_blank" class="transition-all hover-text">
+                        Brand and site design by <span class="underline">Sander van der Kolk</span>
+                    </a>
+                </p>
+            </div>
+
+            <div class="flex flex-col gap-3">
+                <div class="font-black text-xl">License package</div>
+
+                <p class="font-mono text-sm tracking-tighter">
+                    <a href="https://github.com/thephpleague/csv" target="_blank" class="transition-all hover-text underline">
+                        The MIT License (MIT)
+                    </a>
+                </p>
+            </div>
+        </div>
+    </footer>
+</div>
+<script src="/custom.js?7"></script>
+<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script> docsearch({
+    apiKey: '0b444a337a024ecded8e2da9367775fa',
+    indexName: 'period_thephpleague',
+    inputSelector: '#doc-search',
+    algoliaOptions: { 'facetFilters': ["version:{{ version }}"] },
+    debug: false // Set debug to true if you want to inspect the dropdown
+});
+</script>
 </body>
 </html>
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf
new file mode 100644
index 00000000..2e437e21
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf
new file mode 100644
index 00000000..f2695fce
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLight.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLight.ttf
new file mode 100644
index 00000000..573ef764
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLight.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLightItalic.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLightItalic.ttf
new file mode 100644
index 00000000..ea13f86d
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ExtraLightItalic.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf
new file mode 100644
index 00000000..3cb28a39
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf
new file mode 100644
index 00000000..df167f09
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf
new file mode 100644
index 00000000..c9072e96
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf
new file mode 100644
index 00000000..39f178db
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-MediumItalic.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-MediumItalic.ttf
new file mode 100644
index 00000000..0d887f76
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-MediumItalic.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf
new file mode 100644
index 00000000..81ca3dcc
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf
new file mode 100644
index 00000000..73dd5a4f
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBoldItalic.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBoldItalic.ttf
new file mode 100644
index 00000000..a41b0d3d
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBoldItalic.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Thin.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Thin.ttf
new file mode 100644
index 00000000..e173f5a1
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Thin.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ThinItalic.ttf b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ThinItalic.ttf
new file mode 100644
index 00000000..85292757
Binary files /dev/null and b/docs/assets/fonts/IBM_Plex_Mono/IBMPlexMono-ThinItalic.ttf differ
diff --git a/docs/assets/fonts/IBM_Plex_Mono/OFL.txt b/docs/assets/fonts/IBM_Plex_Mono/OFL.txt
new file mode 100644
index 00000000..245d5f40
--- /dev/null
+++ b/docs/assets/fonts/IBM_Plex_Mono/OFL.txt
@@ -0,0 +1,93 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/docs/assets/fonts/Onest/OFL.txt b/docs/assets/fonts/Onest/OFL.txt
new file mode 100644
index 00000000..fee7fd47
--- /dev/null
+++ b/docs/assets/fonts/Onest/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2021 The Onest Project Authors (https://github.com/googlefonts/onest)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/docs/assets/fonts/Onest/Onest-VariableFont_wght.ttf b/docs/assets/fonts/Onest/Onest-VariableFont_wght.ttf
new file mode 100644
index 00000000..6c77d201
Binary files /dev/null and b/docs/assets/fonts/Onest/Onest-VariableFont_wght.ttf differ
diff --git a/docs/assets/fonts/Onest/README.txt b/docs/assets/fonts/Onest/README.txt
new file mode 100644
index 00000000..55637d47
--- /dev/null
+++ b/docs/assets/fonts/Onest/README.txt
@@ -0,0 +1,71 @@
+Onest Variable Font
+===================
+
+This download contains Onest as both a variable font and static fonts.
+
+Onest is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Onest-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Onest:
+  static/Onest-Thin.ttf
+  static/Onest-ExtraLight.ttf
+  static/Onest-Light.ttf
+  static/Onest-Regular.ttf
+  static/Onest-Medium.ttf
+  static/Onest-SemiBold.ttf
+  static/Onest-Bold.ttf
+  static/Onest-ExtraBold.ttf
+  static/Onest-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/docs/assets/fonts/Onest/static/Onest-Black.ttf b/docs/assets/fonts/Onest/static/Onest-Black.ttf
new file mode 100644
index 00000000..d11a9c71
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-Black.ttf differ
diff --git a/docs/assets/fonts/Onest/static/Onest-Bold.ttf b/docs/assets/fonts/Onest/static/Onest-Bold.ttf
new file mode 100644
index 00000000..d210ddae
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-Bold.ttf differ
diff --git a/docs/assets/fonts/Onest/static/Onest-ExtraBold.ttf b/docs/assets/fonts/Onest/static/Onest-ExtraBold.ttf
new file mode 100644
index 00000000..0c94fb5f
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-ExtraBold.ttf differ
diff --git a/docs/assets/fonts/Onest/static/Onest-ExtraLight.ttf b/docs/assets/fonts/Onest/static/Onest-ExtraLight.ttf
new file mode 100644
index 00000000..8b310c0d
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-ExtraLight.ttf differ
diff --git a/docs/assets/fonts/Onest/static/Onest-Light.ttf b/docs/assets/fonts/Onest/static/Onest-Light.ttf
new file mode 100644
index 00000000..75534d20
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-Light.ttf differ
diff --git a/docs/assets/fonts/Onest/static/Onest-Medium.ttf b/docs/assets/fonts/Onest/static/Onest-Medium.ttf
new file mode 100644
index 00000000..af129b9a
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-Medium.ttf differ
diff --git a/docs/assets/fonts/Onest/static/Onest-Regular.ttf b/docs/assets/fonts/Onest/static/Onest-Regular.ttf
new file mode 100644
index 00000000..1ef71b68
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-Regular.ttf differ
diff --git a/docs/assets/fonts/Onest/static/Onest-SemiBold.ttf b/docs/assets/fonts/Onest/static/Onest-SemiBold.ttf
new file mode 100644
index 00000000..57d25c35
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-SemiBold.ttf differ
diff --git a/docs/assets/fonts/Onest/static/Onest-Thin.ttf b/docs/assets/fonts/Onest/static/Onest-Thin.ttf
new file mode 100644
index 00000000..a6dc0787
Binary files /dev/null and b/docs/assets/fonts/Onest/static/Onest-Thin.ttf differ
diff --git a/docs/assets/img/csv-logo-big.svg b/docs/assets/img/csv-logo-big.svg
new file mode 100644
index 00000000..a7047024
--- /dev/null
+++ b/docs/assets/img/csv-logo-big.svg
@@ -0,0 +1,22 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 222.222C0 99.4923 99.4923 0 222.222 0L777.778 0C900.508 0 1000 99.4923 1000 222.222V777.778C1000 900.508 900.508 1000 777.778 1000H222.222C99.4923 1000 0 900.508 0 777.778L0 222.222Z" fill="url(#paint0_linear_73_3)"/>
+<g filter="url(#filter0_d_73_3)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M484.462 137.778C409.779 137.778 349.194 198.138 348.83 272.736H348.828V273.412H348.83C349.194 348.01 409.779 408.37 484.462 408.37H520C594.683 408.37 655.268 348.01 655.633 273.412H655.634V272.736H655.633C655.268 198.139 594.683 137.778 520 137.778H484.462ZM484.462 346.148C444.031 346.148 411.233 313.463 411.051 273.074C411.233 232.686 444.031 200.001 484.462 200.001H520C560.432 200.001 593.229 232.686 593.411 273.074C593.229 313.463 560.432 346.148 520 346.148H484.462ZM349.251 582.222C348.971 585.78 348.828 589.377 348.828 593.007V674.672C348.828 701.196 356.605 727.138 371.196 749.287L406.734 803.235C480.771 915.623 655.635 863.203 655.635 728.619L655.634 593.007C655.634 589.377 655.492 585.78 655.212 582.222H592.625C593.144 585.742 593.412 589.343 593.412 593.007L593.412 728.619C593.413 801.462 498.768 829.835 458.695 769.005L423.157 715.058C415.26 703.069 411.05 689.028 411.05 674.672V593.007C411.05 589.343 411.319 585.742 411.837 582.222H349.251Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_73_3" x="298.828" y="92.7783" width="406.807" height="826.724" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="5"/>
+<feGaussianBlur stdDeviation="25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.243137 0 0 0 0 0.764706 0 0 0 0 0.4 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_73_3"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_73_3" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_73_3" x1="500" y1="0" x2="500" y2="1000" gradientUnits="userSpaceOnUse">
+<stop stop-color="#38C161"/>
+<stop offset="1" stop-color="#38C163" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/docs/assets/img/csv-logo.svg b/docs/assets/img/csv-logo.svg
new file mode 100644
index 00000000..70bb6faa
--- /dev/null
+++ b/docs/assets/img/csv-logo.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11.1111C0 4.97461 4.97461 0 11.1111 0H38.8889C45.0254 0 50 4.97461 50 11.1111V38.8889C50 45.0254 45.0254 50 38.8889 50H11.1111C4.97461 50 0 45.0254 0 38.8889V11.1111Z" fill="#38C163"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2244 6.88885C20.4902 6.88885 17.461 9.90686 17.4428 13.6367H17.4427V13.6706H17.4428C17.461 17.4004 20.4902 20.4184 24.2244 20.4184H26.0013C29.7354 20.4184 32.7647 17.4004 32.7829 13.6706H32.783V13.6367H32.7829C32.7647 9.90686 29.7354 6.88885 26.0013 6.88885H24.2244ZM24.2244 17.3073C22.2028 17.3073 20.5629 15.6731 20.5538 13.6536C20.5629 11.6342 22.2028 9.99997 24.2244 9.99997H26.0013C28.0229 9.99997 29.6627 11.6342 29.6718 13.6536C29.6627 15.6731 28.0229 17.3073 26.0013 17.3073H24.2244ZM17.4638 29.1111C17.4498 29.289 17.4427 29.4688 17.4427 29.6503V33.7336C17.4427 35.0597 17.8315 36.3568 18.5611 37.4643L20.338 40.1617C24.0398 45.7811 32.783 43.1601 32.783 36.4309L32.783 29.6503C32.783 29.4688 32.7759 29.289 32.7619 29.1111H29.6326C29.6585 29.2871 29.6719 29.4671 29.6719 29.6503L29.6719 36.4309C29.6719 40.0731 24.9397 41.4917 22.936 38.4502L21.1591 35.7528C20.7643 35.1534 20.5538 34.4513 20.5538 33.7336V29.6503C20.5538 29.4671 20.5672 29.2871 20.5931 29.1111H17.4638Z" fill="white"/>
+</svg>
diff --git a/docs/assets/img/github-logo.svg b/docs/assets/img/github-logo.svg
new file mode 100644
index 00000000..96ee44e6
--- /dev/null
+++ b/docs/assets/img/github-logo.svg
@@ -0,0 +1,10 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_71_68)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8838 0C6.26788 0 0.919556 5.5 0.919556 12.3042C0.919556 17.7432 4.34641 22.3472 9.10037 23.9767C9.69474 24.0992 9.91245 23.712 9.91245 23.3862C9.91245 23.101 9.89286 22.1232 9.89286 21.1045C6.5647 21.838 5.87164 19.6378 5.87164 19.6378C5.33678 18.2118 4.54429 17.8452 4.54429 17.8452C3.45498 17.0915 4.62364 17.0915 4.62364 17.0915C5.83196 17.173 6.466 18.3545 6.466 18.3545C7.53547 20.2285 9.25882 19.699 9.95213 19.373C10.0511 18.5785 10.3682 18.0285 10.7049 17.723C8.05049 17.4377 5.25768 16.3785 5.25768 11.6523C5.25768 10.3078 5.73278 9.20775 6.4856 8.35225C6.36682 8.04675 5.95074 6.7835 6.60462 5.09275C6.60462 5.09275 7.61482 4.76675 9.89262 6.35575C10.8678 6.08642 11.8735 5.9494 12.8838 5.94825C13.894 5.94825 14.9238 6.091 15.8747 6.35575C18.1528 4.76675 19.163 5.09275 19.163 5.09275C19.8169 6.7835 19.4005 8.04675 19.2818 8.35225C20.0544 9.20775 20.5099 10.3078 20.5099 11.6523C20.5099 16.3785 17.7171 17.4172 15.0428 17.723C15.4787 18.11 15.8549 18.8432 15.8549 20.0045C15.8549 21.6545 15.8353 22.9787 15.8353 23.386C15.8353 23.712 16.0533 24.0992 16.6474 23.977C21.4014 22.347 24.8282 17.7432 24.8282 12.3042C24.8478 5.5 19.4799 0 12.8838 0Z" fill="#2C2C2C"/>
+</g>
+<defs>
+<clipPath id="clip0_71_68">
+<rect width="24" height="24" fill="white" transform="translate(0.919556)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/assets/img/period-logo-big.svg b/docs/assets/img/period-logo-big.svg
new file mode 100644
index 00000000..27637bcf
--- /dev/null
+++ b/docs/assets/img/period-logo-big.svg
@@ -0,0 +1,22 @@
+<svg width="1001" height="1001" viewBox="0 0 1001 1001" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.52539 222.747C0.525391 100.017 100.018 0.525147 222.748 0.525147L778.303 0.525147C901.033 0.525147 1000.53 100.017 1000.53 222.747L1000.53 778.303C1000.53 901.033 901.033 1000.53 778.303 1000.53L222.748 1000.53C100.018 1000.53 0.52539 901.033 0.52539 778.303L0.52539 222.747Z" fill="url(#paint0_linear_75_16)"/>
+<g filter="url(#filter0_d_75_16)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M418.325 216.081L391.666 216.081C311.891 216.081 247.221 280.751 247.221 360.525L247.221 640.12C247.221 739.656 337.035 796.991 418.325 782.645L418.325 713.604C371.874 730.249 313.888 698.807 313.888 640.12L313.888 360.525C313.888 317.57 348.71 282.748 391.666 282.748L418.325 282.748L418.325 216.081ZM584.992 783.016C665.691 795.949 753.888 738.755 753.888 640.119L753.888 360.524C753.888 280.75 689.218 216.08 609.443 216.08L584.992 216.08L584.992 282.747L609.443 282.747C652.399 282.747 687.221 317.569 687.221 360.525L687.221 640.119C687.221 697.88 631.051 729.249 584.992 714.356L584.992 783.016Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_75_16" x="197.221" y="171.08" width="606.667" height="668.748" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="5"/>
+<feGaussianBlur stdDeviation="25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.776471 0 0 0 0 0.113725 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_75_16"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_75_16" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_75_16" x1="500.525" y1="0.525147" x2="500.525" y2="1000.53" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC61D"/>
+<stop offset="1" stop-color="#FFC61D" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/docs/assets/img/period-logo.svg b/docs/assets/img/period-logo.svg
new file mode 100644
index 00000000..a8f600ef
--- /dev/null
+++ b/docs/assets/img/period-logo.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11.1111C0 4.97461 4.97461 0 11.1111 0H38.8889C45.0254 0 50 4.97461 50 11.1111V38.8889C50 45.0254 45.0254 50 38.8889 50H11.1111C4.97461 50 0 45.0254 0 38.8889V11.1111Z" fill="#FFC61D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8915 10.7777L19.5582 10.7777C15.5695 10.7777 12.336 14.0112 12.336 17.9999L12.3359 31.9796C12.3359 36.9566 16.8269 39.8233 20.8915 39.1058V35.6537C18.5689 36.4862 15.6693 34.9141 15.6693 31.9796L15.6693 17.9999C15.6693 15.8521 17.4104 14.111 19.5582 14.111H20.8915V10.7777ZM29.2248 39.1245C33.2597 39.7709 37.6693 36.9112 37.6693 31.9796L37.6693 17.9999C37.6693 14.0111 34.4358 10.7776 30.4471 10.7776H29.2248V14.111H30.4471C32.5948 14.111 34.3359 15.8521 34.3359 17.9999L34.336 31.9796C34.336 34.8675 31.5277 36.4359 29.2248 35.6915V39.1245Z" fill="white"/>
+</svg>
diff --git a/docs/assets/img/uri-logo-big.svg b/docs/assets/img/uri-logo-big.svg
new file mode 100644
index 00000000..2e97b797
--- /dev/null
+++ b/docs/assets/img/uri-logo-big.svg
@@ -0,0 +1,22 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.00061012 222.222C0.000610248 99.492 99.4929 -0.000244037 222.223 -0.000243909L777.778 -0.000243328C900.508 -0.0002432 1000 99.492 1000 222.222L1000 777.778C1000 900.508 900.508 1000 777.778 1000L222.223 1000C99.4929 1000 0.000609411 900.508 0.000609539 777.778L0.00061012 222.222Z" fill="url(#paint0_linear_75_9)"/>
+<g filter="url(#filter0_d_75_9)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M569.707 204.528C626.116 148.119 717.573 148.119 773.982 204.528L800.695 231.241C857.104 287.65 857.104 379.107 800.695 435.517L714.254 521.958C708.712 527.5 702.752 532.558 696.443 537.094L648.115 488.766C655.083 485.128 661.496 480.435 667.113 474.818L753.555 388.376C783.929 358.002 783.929 308.756 753.555 278.382L726.842 251.669C696.468 221.295 647.222 221.295 616.848 251.669L513.932 354.584L466.792 307.443L569.707 204.528ZM306.775 461.696C299.543 466.669 292.747 472.313 286.483 478.577L200.042 565.018C143.633 621.427 143.633 712.884 200.042 769.293L226.755 796.007C283.164 852.416 374.621 852.416 431.03 796.007L536.058 690.979L488.918 643.839L383.889 748.866C353.515 779.24 304.269 779.24 273.895 748.866L247.182 722.153C216.808 691.779 216.808 642.533 247.182 612.159L333.624 525.717C339.992 519.349 347.383 514.169 355.446 510.367L306.775 461.696Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_75_9" x="107.735" y="117.221" width="785.267" height="776.092" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="5"/>
+<feGaussianBlur stdDeviation="25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.447059 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_75_9"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_75_9" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_75_9" x1="500.001" y1="-0.000243618" x2="500.001" y2="1000" gradientUnits="userSpaceOnUse">
+<stop stop-color="#376FFF"/>
+<stop offset="1" stop-color="#376FFF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/docs/assets/img/uri-logo.svg b/docs/assets/img/uri-logo.svg
new file mode 100644
index 00000000..e441790b
--- /dev/null
+++ b/docs/assets/img/uri-logo.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11.1111C0 4.97461 4.97461 0 11.1111 0H38.8889C45.0254 0 50 4.97461 50 11.1111V38.8889C50 45.0254 45.0254 50 38.8889 50H11.1111C4.97461 50 0 45.0254 0 38.8889V11.1111Z" fill="#376FFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.484 10.2265C31.3045 7.40603 35.8773 7.40604 38.6978 10.2265L40.0335 11.5621C42.8539 14.3826 42.8539 18.9554 40.0335 21.7759L35.7114 26.098C35.434 26.3754 35.1357 26.6285 34.8199 26.8555L32.4033 24.439C32.7521 24.257 33.0732 24.0221 33.3544 23.741L37.6764 19.4189C39.1951 17.9002 39.1951 15.4379 37.6764 13.9192L36.3408 12.5835C34.8221 11.0648 32.3598 11.0648 30.8411 12.5835L25.6945 17.7301L23.3374 15.3731L28.484 10.2265ZM15.3364 23.0855C14.9752 23.334 14.6357 23.616 14.3229 23.9289L10.0008 28.251C7.18032 31.0714 7.18032 35.6443 10.0008 38.4647L11.3364 39.8004C14.1569 42.6209 18.7297 42.6209 21.5502 39.8004L26.8007 34.5499L24.4437 32.1928L19.1932 37.4434C17.6745 38.9621 15.2122 38.9621 13.6935 37.4434L12.3578 36.1077C10.8391 34.589 10.8391 32.1267 12.3578 30.608L16.6799 26.2859C16.998 25.9678 17.3671 25.709 17.7698 25.5189L15.3364 23.0855Z" fill="white"/>
+</svg>
diff --git a/docs/custom.css b/docs/custom.css
deleted file mode 100644
index ad7553dd..00000000
--- a/docs/custom.css
+++ /dev/null
@@ -1,392 +0,0 @@
-html {
-  background:#f2f7fc;
-}
-
-blockquote {
-  border-left: 4px solid #ccc;
-  font-style:italic;
-}
-
-blockquote {
-  box-sizing: border-box;
-  padding:0 10px;
-}
-
-header {
-  position:fixed;
-  height:4.5em;
-  z-index: 1;
-  border-bottom:1px solid #cfe4f9;
-  max-width: none;
-  width: 100%;
-  padding:0;
-  margin:0;
-  background:#fff;
-}
-
-header .header-content:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-header .title {
-  float: left;
-  text-align:left;
-  font-family: "Museo 100";
-  font-weight: bold;
-  margin:0;
-  padding:0;
-  width:96px;
-}
-
-header .title a {
-  color:#ff4143;
-  text-decoration: none;
-}
-
-header .search {
-  float:left;
-  text-align:right;
-  width:calc(100% - 175px);
-  padding-right:.3em;
-}
-
-pre code {
-  line-height:200%;
-}
-
-#doc-search {
-  font-family: "Museo Sans 500";
-  font-weight: normal;
-  font-size: 16px;
-  border:1px solid #e8e8e8;
-  background-color:#f4f4f4;
-  padding:.5em 1em;
-  margin-left:.3em;
-  border-radius: .3em;
-}
-
-header .versions {
-  float:left;
-  display:none;
-  font-family: "Museo Sans 500";
-  font-weight: normal;
-}
-
-header .versions h2 {
-  font-family: "Museo Sans 500";
-  font-weight: normal;
-  font-size: 16px;
-  background:#1672ce;
-  color:#fff;
-  margin:0;
-  width: 75px;
-  text-align: center;
-  border-radius: .3em;
-  margin-bottom:.4em;
-  padding:.5em .3em;
-  cursor: pointer;
-}
-
-header .versions ul {
-  display:none;
-  margin:0;
-  padding:0;
-  list-style:none;
-  width: 75px;
-}
-
-header .versions .show {
-  display:block;
-}
-
-header .versions li {
-  margin:0;
-  padding:0;
-  text-align: center;
-}
-
-header .versions a {
-  display:block;
-  margin:0;
-  padding:.5em .3em;
-  text-decoration:none;
-  color:#1672ce;
-  background: #fff;
-  border:solid #c7c7c7;
-  border-width:0 1px 1px;
-}
-
-header .versions a:hover {
-  background:#f1f1f1;
-}
-
-header .versions li:first-of-type a {
-  border-top-width: 1px;
-  border-radius:.3em .3em 0 0;
-}
-
-header .versions li:last-of-type a {
-  border-radius:0 0 .3em .3em;
-}
-
-label[for=menu] {
-  position:fixed;
-  z-index: 2;
-  top:20px;
-  right:0;
-  display:inline-block;
-  box-sizing: border-box;
-  background:transparent;
-  color:#1672ce;
-  width:50px;
-  font-size:30px;
-  line-height: 1;
-  padding:0;
-  margin:0;
-}
-
-label[for=menu]:hover {
-  background:transparent;
-  color:#1672ce;
-}
-
-main {
-  padding-top:4em;
-  background:none;
-}
-
-/* ---------- header automatic permalink -----------*/
-
-.header-permalink {
-  text-decoration: none;
-  color:transparent;
-  font-size:.8em;
-  vertical-align: super;
-}
-
-.header-permalink:hover,
-h1:hover .header-permalink,
-h2:hover .header-permalink,
-h3:hover .header-permalink,
-h4:hover .header-permalink,
-h5:hover .header-permalink {
-  text-decoration: none;
-  color:#777;
-}
-
-h4 {
-  font-variant: small-caps;
-  font-size:1em;
-}
-
-main article p code,
-main article li code,
-main article div > code {
-  font-family: Consolas,Monaco,'Andale Mono',monospace;
-  font-size: 17px;
-  line-height: 2;
-  color:#1672ce;
-  background: #fff;
-  border:none;
-}
-
-main article p img {
-  box-sizing: border-box;
-  margin:.3em auto;
-  padding:0;
-  display: block;
-}
-
-main article p a img {
-  box-sizing: border-box;
-  margin:0;
-  padding:0;
-  display:inline;
-}
-
-footer {
-  border-top:1px solid #cfe4f9;
-  background:#fff;
-  max-width: none;
-  text-align:center;
-  color:#a1a1a1;
-}
-
-footer span a {
-  color:#007ec6;
-}
-
-main menu .menu-section {
-  border-bottom:1px dashed #cfe4f9;
-  padding-bottom:1em;
-}
-
-main menu .menu-section:last-of-type {
-  border-bottom:none;
-}
-
-main menu h2 {
-  margin-top:1.5em;
-  padding-left:.7em;
-  color:#2b3d50;
-  font-size:1em;
-  font-weight: bold;
-  text-transform: none;
-  box-shadow: none;
-}
-
-main menu ul li a {
-  border-radius:.1em;
-  font-size:1em;
-  margin:.2em;
-  padding:.6em;
-  color:#1672ce;
-}
-
-main menu ul li a:hover {
-  color:#1672ce;
-  padding:.6em;
-  background:transparent;
-  text-decoration: underline;
-}
-
-main menu ul li.selected {
-  background: none;
-}
-
-main menu ul li.selected a {
-  color:#fff;
-  background:#1672ce;
-  padding:.6em;
-}
-
-main menu ul li.selected a:hover {
-  text-decoration: none;
-}
-
-pre {
-  border-width:0 0 0 4px;
-  background: #fff;
-}
-
-table {
-  border:1px solid #eee;
-  background: #fff;
-  box-shadow:0 6px 6px 0 rgba(80, 88, 94, .24);
-}
-
-table th {
-  color:#fff;
-  background: #1672ce;
-}
-
-.sponsors {
-  background: #f68fc8;
-  border-bottom:none;
-  color: #ffffff;
-  font:normal 1em/1.5 "Museo 300";
-  text-align:center;
-  margin:0 auto;
-  padding:0;
-}
-
-.sponsors p {
-  margin:0 auto;
-  padding:.5em .3em;
-}
-
-.sponsors a {
-  display:inline-block;
-  padding:.4em;
-  background: #ea0a86;
-  color: #fff;
-  border-radius: .3em;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.sponsors a.close {
-  background: transparent;
-  color:#ea0a86;
-  text-decoration: underline;
-  padding:.2em;
-  font-size: .8em;
-}
-
-.hide {
-  display:none;
-}
-
-@media screen and (max-width: 400px) {
-  header .title {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 549px) {
-  header {
-    padding: 20px 0 25px 10px;
-  }
-
-  menu {
-    text-align: center;
-  }
-}
-
-@media screen and (min-width: 550px) {
-  header {
-    background:#fff;
-  }
-
-  header .header-content {
-    box-sizing: border-box;
-    max-width:1192px;
-    margin:0 auto;
-    padding:1em;
-  }
-
-  header .versions {
-    display: block;
-  }
-
-  label[for=menu] {
-    display:none;
-  }
-
-  main {
-    background: none;
-  }
-
-  main menu {
-    border-right: 1px dashed #cfe4f9;
-  }
-
-  main menu .versions-small {
-    display:none;
-  }
-
-  main article p,
-  main article li {
-    font-size:.9em;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  header .header-content {
-    width:1192px;
-  }
-  main {
-    margin-left:auto;
-    margin-right:auto;
-    width:1192px;
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .sponsors p {
-    width: 250px;
-    margin: .3em auto 0;
-  }
-}
diff --git a/docs/custom.js b/docs/custom.js
index b97f11c8..f52b4509 100644
--- a/docs/custom.js
+++ b/docs/custom.js
@@ -1,12 +1,4 @@
 (() => {
-
-  let headers = document.querySelector('header nav h2');
-  if (headers) {
-    headers.addEventListener('click', function () {
-      this.parentNode.querySelector('ul').classList.toggle('show');
-    }, false);
-  }
-
   let contentHeaders = document.querySelectorAll("main h2[id]");
   if (!document.querySelector('html').classList.contains('homepage') && contentHeaders) {
     const uri = new URL(location.href);
@@ -20,23 +12,4 @@
       header.appendChild(link);
     });
   }
-
-  const sponsorBanner = document.querySelector('.sponsors');
-  if (sponsorBanner) {
-    let hideUntil = localStorage.getItem('hideSponsorUntil');
-    if (hideUntil === null || hideUntil < (new Date().getTime())) {
-      localStorage.removeItem('hideSponsorUntil');
-      sponsorBanner.classList.remove('hide');
-    }
-
-    let closeButton = document.createElement('a');
-    closeButton.classList.add('close');
-    closeButton.innerHTML = 'close me';
-    closeButton.addEventListener('click',  () => {
-      localStorage.setItem('hideSponsorUntil', new Date().getTime() + (7 * 86400 * 1e4));
-      sponsorBanner.classList.add('hide');
-    }, false);
-
-    sponsorBanner.firstElementChild.appendChild(closeButton);
-  }
 })();
diff --git a/docs/docker-compose.yml b/docs/docker-compose.yml
deleted file mode 100644
index ab4e8b44..00000000
--- a/docs/docker-compose.yml
+++ /dev/null
@@ -1,10 +0,0 @@
-version: '3'
-
-services:
-  jekyll:
-    image: jekyll/jekyll:latest
-    command: jekyll serve --watch --force_polling --verbose
-    ports:
-      - 4000:4000
-    volumes:
-      - .:/srv/jekyll
diff --git a/docs/homepage.css b/docs/homepage.css
deleted file mode 100644
index 382e9636..00000000
--- a/docs/homepage.css
+++ /dev/null
@@ -1,359 +0,0 @@
-blockquote {
-  border-left: 4px solid #ccc;
-  font-style:italic;
-}
-
-blockquote {
-  box-sizing: border-box;
-  padding:0 10px;
-}
-
-footer {
-  text-align: center;
-  color:#fff;
-}
-
-pre {
-  border-width:0 0 0 4px;
-  background: #fff;
-}
-
-main p code,
-main li code,
-main div > code {
-  font-family: Consolas,Monaco,'Andale Mono',monospace;
-  font-size: 17px;
-  line-height: 100%;
-  color:#1672ce;
-  background: #fff;
-  border:none;
-}
-/* -------- homepage css -----------------*/
-
-.homepage header {
-  margin:0 auto;
-  padding:0 0 3em;
-  box-sizing: border-box;
-  background:#19242F url(//thephpleague.com/img/header_bg.png) no-repeat top center;
-  background-size: cover;
-  max-width: none;
-  color:#fff;
-  font-family: "Museo 300";
-}
-
-.homepage header h1 {
-  margin:.3em auto;
-  font-family: "Museo 300";
-  font-size:72px;
-  font-weight: normal;
-}
-
-.homepage header h2 {
-  margin:0 auto;
-  font-family: "Museo 300";
-  color:#ff4043;
-  font-size:36px;
-  line-height:1.33;
-  font-weight:normal;
-}
-
-.homepage .composer span {
-  padding:.3em 1em;
-  background-color:rgba(0, 0, 0, .3);
-  color:#fff;
-  font-size:.9rem;
-  font-family: Consolas, Monaco ,'Andale Mono', monospace;
-  line-height: 140%;
-  text-align: left;
-  white-space: pre;
-  word-wrap: normal;
-  word-spacing: normal;
-  hyphens: none;
-  display:inline-block;
-  border-radius: .3em;
-}
-
-.homepage .hot-links {
-  margin:0 auto;
-  padding:0;
-  list-style:none;
-  width:300px;
-  display:flex;
-  align-content: top;
-  align-items: center;
-}
-
-.homepage .hot-links li {
-  padding:0;
-  margin:0;
-}
-
-.homepage .hot-links a {
-  display:block;
-  margin:0;
-  padding:1em;
-  width:150px;
-  border-radius:2px 0 0 2px;
-  text-decoration:none;
-  text-align:center;
-  font-weight:bold;
-  background:#fff;
-  color:#ff4043;
-}
-
-.homepage .hot-links :last-child a {
-  border-radius:0 2px 2px 0;
-  background:#ff4043;
-  color:#fff;
-}
-
-.homepage .hot-links:hover :last-child a {
-  color:#ff4043;
-}
-
-.homepage .hot-links:hover a {
-  background:#fff;
-  color:#ff4043;
-}
-
-.homepage .hot-links:hover a:hover {
-  background: #ff4043;
-  color: #fff;
-}
-
-.homepage main {
-  color: #2b3d50;
-  font-family: "Museo 300";
-  line-height: 160%;
-  font-weight: normal;
-  background:#19242f;
-  width:auto;
-  right:auto;
-}
-
-.homepage main > div {
-  margin:0 auto;
-  padding:3em 0;
-  box-sizing: border-box;
-}
-
-.inner-content {
-  margin:0 auto;
-  padding:1em;
-  box-sizing: border-box;
-  text-align:center;
-}
-
-.inner-content h1 {
-  color:#fff;
-  font-size:50px;
-  line-height:100%;
-  font-weight:normal;
-  font-family:"Museo Sans 300", sans-serif;
-  text-transform:uppercase;
-  margin:0;
-}
-
-.inner-content:after {
-  content: '';
-  display:table;
-  clear:both;
-}
-
-.features {
-  background: #F2F7FC;
-  border-bottom:1px solid #CFE4F9;
-  color:#666;
-  font:normal 18px/1.5 "Museo 300";
-}
-
-.features h1 {
-  color:#6abcdd;
-}
-
-.features h2 {
-  color:#6abcdd;
-  font-weight: normal;
-}
-
-.features p {
-  text-align: left;
-}
-
-.features a {
-  color:#6abcdd;
-}
-
-.highlights {
-  background:#fff;
-  border-bottom:1px solid #CFE4F9;
-}
-
-.highlights .description {
-  color:#666;
-  font:normal 18px/1.5 "Museo 300";
-  text-align: left;
-}
-
-.highlights h1 {
-  color:#ff4043;
-  font-size: 36px;
-  line-height:115%;
-}
-
-.highlights ol {
-  margin:0;
-  text-align:left;
-}
-
-.highlights li {
-  margin:0 0 15px 0;
-  color:#666;
-  font-size:16px;
-  font-weight:bold;
-}
-
-.highlights li p {
-  margin:0;
-  font:normal 18px/1.4 "Museo 300";
-  color:#ff4043;
-}
-
-.highlights a {
-  color:#ff4043;
-}
-
-.questions {
-  padding:0;
-  background:#fff;
-  color:#666;
-  border-bottom:1px solid #CFE4F9;
-}
-
-.questions h1 {
-  font-size:36px;
-  color:#ff4043;
-}
-
-.questions a {
-  color:#6abcdd;
-}
-
-.questions a:hover {
-  text-decoration: none;
-}
-
-.sponsors {
-  background: #f68fc8;
-  border-bottom:none;
-  color: #ffffff;
-  font:normal 1em/1.5 "Museo 300";
-  text-align:center;
-  margin:0 auto;
-  padding:0;
-}
-
-.sponsors p {
-  margin:0 auto;
-  padding:.5em .3em;
-}
-
-.sponsors a {
-  display:inline-block;
-  background: #ea0a86;
-  color: #fff;
-  border-radius: .3em;
-  text-decoration: none;
-  padding:.4em;
-  cursor: pointer;
-}
-
-.sponsors a.close {
-  background: transparent;
-  color:#ea0a86;
-  text-decoration: underline;
-  padding:.2em;
-  font-size: .8em;
-}
-
-.hide {
-  display:none;
-}
-
-@media screen and (min-width: 404px) {
-  .homepage header {
-    padding:3em 0;
-  }
-
-  .homepage header h1 {
-    font-size:96px;
-  }
-
-  .homepage .composer span {
-    font-size:1rem;
-  }
-}
-
-@media screen and (min-width: 549px) {
-  .homepage header h1 {
-    margin:0 auto;
-  }
-
-  .inner-content {
-    max-width:1000px;
-  }
-
-  .homepage main {
-    width:initial;
-    right:initial;
-  }
-
-  .highlights h1 {
-    font-size: 50px;
-  }
-
-  .highlights li {
-    font-size:24px;
-  }
-
-  .highlights li p {
-    font-size:20px;
-  }
-
-  .highlights .column {
-    float:left;
-    width:45%;
-  }
-
-  .highlights .one {
-    margin:0 10% 0 0;
-  }
-
-  .documentation h1 {
-    font-size:50px;
-  }
-}
-
-@media screen and (min-width:700px) {
-  .documentation .version {
-    float:left;
-    width:42%;
-    margin:2%;
-    max-width:289px;
-  }
-}
-
-@media screen and (min-width: 910px) {
-  .documentation .version {
-    float:left;
-    width:30%;
-    margin:1%;
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .sponsors p {
-    width: 250px;
-    margin: .3em auto 0;
-  }
-}
diff --git a/docs/index.md b/docs/index.md
index 7c23cf81..aac1ed0d 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,10 +1,10 @@
 ---
-layout: homepage
+layout: index
 ---
 
 # Features
 
-## easy instance creation
+## Easy instance creation
 
 ~~~php
 use League\Period\Period;
@@ -23,7 +23,7 @@ $interval = Period::fromDate($startDate, $endDate);
 
 To help you start working with `Period` objects, the library comes bundled with many more named constructors to ease datepoint, duration and intervals creation.
 
-## iterating over the interval made simple
+## Iterating over the interval made simple
 
 You can return selected date endpoints inside the interval
 
@@ -49,7 +49,7 @@ foreach (Period::fromMonth(2014, 10)->splitForward('1 DAY') as $period) {
 
 The library also allow iterating backwards over the interval.
 
-## compare intervals and datepoints
+## Compare intervals and datepoints
 
 You can compare time ranges based on their duration, their datepoints and even their boundary types.
 
@@ -80,7 +80,7 @@ $period->contains($altPeriod); //return false;
 $altPeriod->durationGreaterThan($period); //return true;
 ~~~
 
-## formatting
+## Formatting
 
 Format and export your `Period` instance following standardized format.
 
diff --git a/docs/input.css b/docs/input.css
new file mode 100644
index 00000000..a4e4894b
--- /dev/null
+++ b/docs/input.css
@@ -0,0 +1,531 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.top-logo {
+    margin-top: 225px;
+}
+.-right-logo {
+    margin-left: 45%;
+}
+
+@media only screen and (max-width: 600px) {
+    .top-logo {
+        margin-top: 100px;
+    }
+    .-right-logo {
+        margin-left: 75%;
+    }
+}
+
+pre {
+    @apply p-6 overflow-auto bg-gray-100 border-0 border-b-4 border-b-gray-200 rounded-lg my-4;
+}
+
+.hover-button:hover {
+    @apply opacity-90 drop-shadow-lg;
+}
+
+.hover-block:hover {
+    @apply drop-shadow-lg;
+}
+
+.hover-text:hover {
+    @apply no-underline text-light;
+}
+
+.hover-text:hover .underline {
+    @apply no-underline text-light;
+}
+
+.hover-block:hover div.hover-action {
+    @apply bg-gradient-to-tr from-csv-base via-uri-base to-period-base text-white;
+}
+
+.hover-block:hover img.hover-action {
+    @apply bg-none opacity-100;
+}
+
+code {
+    @apply text-sm sm:text-base font-mono;
+}
+
+.language-php .string {
+    color: #ff4143
+}
+
+.language-php .this,.language-php .keyword {
+    color: #2b3d50
+}
+
+.language-php .comment {
+    color: #b6b6b6
+}
+
+.language-php .property,.language-php .function,.language-php .class-name,.language-php .variable {
+    color: #07a
+}
+
+.language-php .punctuation {
+    color: #2b3d50
+}
+
+.language-php .php .keyword,.language-php .php .string {
+    color: #ff4143
+}
+
+.language-php .php .function,.language-php .php .property,.language-php .php .this,.language-php .php .variable,.language-php .php .operator,.language-php .php .punctuation {
+    color: #07a
+}
+
+.language-php .markup .token {
+    color: #2b3d50
+}
+
+.language-php .markup .token.comment {
+    color: #b6b6b6
+}
+
+.language-php .markup .token .php .keyword,.language-php .markup .token .php .string,.language-php .markup .token .php .punctuation {
+    color: #690
+}
+
+.language-php .markup .token .php .function,.language-php .markup .token .php .property,.language-php .markup .token .php .this,.language-php .markup .token .php .variable,.language-php .markup .token .php .operator {
+    color: #07a
+}
+
+.language-javascript .punctuation {
+    color: #007e74
+}
+
+.language-javascript .string {
+    color: #ff4143
+}
+
+.language-bash .comment {
+    color: #b6b6b6
+}
+
+.highlight .hll {
+    background-color: #ffc
+}
+
+.highlight .c {
+    color: #999988;
+    font-style: italic
+}
+
+.highlight .err {
+    color: #a61717;
+    background-color: #e3d2d2
+}
+
+.highlight .k {
+    color: #000000;
+    font-weight: bold
+}
+
+.highlight .o {
+    color: #000000;
+    font-weight: bold
+}
+
+.highlight .cm {
+    color: #999988;
+    font-style: italic
+}
+
+.highlight .cp {
+    color: #999999;
+    font-weight: bold;
+    font-style: italic
+}
+
+.highlight .c1 {
+    color: #999988;
+    font-style: italic
+}
+
+.highlight .cs {
+    color: #999999;
+    font-weight: bold;
+    font-style: italic
+}
+
+.highlight .gd {
+    color: #000000;
+    background-color: #fdd
+}
+
+.highlight .ge {
+    color: #000000;
+    font-style: italic
+}
+
+.highlight .gr {
+    color: #a00
+}
+
+.highlight .gh {
+    color: #999
+}
+
+.highlight .gi {
+    color: #000000;
+    background-color: #dfd
+}
+
+.highlight .go {
+    color: #888
+}
+
+.highlight .gp {
+    color: #555
+}
+
+.highlight .gs {
+    font-weight: bold
+}
+
+.highlight .gu {
+    color: #aaa
+}
+
+.highlight .gt {
+    color: #a00
+}
+
+.highlight .kc {
+    color: #000000;
+    font-weight: bold
+}
+
+.highlight .kd {
+    color: #000000;
+    font-weight: bold
+}
+
+.highlight .kn {
+    color: #000000;
+    font-weight: bold
+}
+
+.highlight .kp {
+    color: #000000;
+    font-weight: bold
+}
+
+.highlight .kr {
+    color: #000000;
+    font-weight: bold
+}
+
+.highlight .kt {
+    color: #445588;
+    font-weight: bold
+}
+
+.highlight .m {
+    color: #099
+}
+
+.highlight .s {
+    color: #d01040
+}
+
+.highlight .na {
+    color: teal
+}
+
+.highlight .nb {
+    color: #0086B3
+}
+
+.highlight .nc {
+    color: #445588;
+    font-weight: bold
+}
+
+.highlight .no {
+    color: teal
+}
+
+.highlight .nd {
+    color: #3c5d5d;
+    font-weight: bold
+}
+
+.highlight .ni {
+    color: purple
+}
+
+.highlight .ne {
+    color: #990000;
+    font-weight: bold
+}
+
+.highlight .nf {
+    color: #990000;
+    font-weight: bold
+}
+
+.highlight .nl {
+    color: #990000;
+    font-weight: bold
+}
+
+.highlight .nn {
+    color: #555
+}
+
+.highlight .nt {
+    color: navy
+}
+
+.highlight .nv {
+    color: teal
+}
+
+.highlight .ow {
+    color: #000000;
+    font-weight: bold
+}
+
+.highlight .w {
+    color: #bbb
+}
+
+.highlight .mf {
+    color: #099
+}
+
+.highlight .mh {
+    color: #099
+}
+
+.highlight .mi {
+    color: #099
+}
+
+.highlight .mo {
+    color: #099
+}
+
+.highlight .sb {
+    color: #d01040
+}
+
+.highlight .sc {
+    color: #d01040
+}
+
+.highlight .sd {
+    color: #d01040
+}
+
+.highlight .s2 {
+    color: #d01040
+}
+
+.highlight .se {
+    color: #d01040
+}
+
+.highlight .sh {
+    color: #d01040
+}
+
+.highlight .si {
+    color: #d01040
+}
+
+.highlight .sx {
+    color: #d01040
+}
+
+.highlight .sr {
+    color: #009926
+}
+
+.highlight .s1 {
+    color: #d01040
+}
+
+.highlight .ss {
+    color: #990073
+}
+
+.highlight .bp {
+    color: #999
+}
+
+.highlight .vc {
+    color: teal
+}
+
+.highlight .vg {
+    color: teal
+}
+
+.highlight .vi {
+    color: teal
+}
+
+.highlight .il {
+    color: #099
+}
+
+.message-info,
+.message-notice,
+.message-warning {
+  @apply p-2 my-3 rounded-lg text-light
+}
+
+.message-info a,.message-notice a,.message-warning a {
+    color: black
+}
+
+.message-info {
+    color: #196090;
+    background: #cce5f6;
+}
+
+.message-info code {
+    background: rgba(255,255,255,0.8);
+    border-color: #5faee3;
+    color: #196090
+}
+
+.message-notice {
+    color: #927608;
+    background: #fbedb8;
+}
+
+.message-notice code {
+    background: rgba(255,255,255,0.8);
+    border-color: #f4d03f;
+    color: #927608
+}
+
+.message-warning {
+    color: #a82315;
+    background: #fbdedb;
+}
+
+.message-warning code {
+    background: rgba(255,255,255,0.8);
+    border-color: #ed7669;
+    color: #a82315
+}
+
+.content h1 {
+  @apply font-black text-6xl tracking-tighter mb-6
+}
+
+.content h2 {
+  @apply text-3xl tracking-tight text-period-base mb-4
+}
+
+.content h3 {
+  @apply text-2xl tracking-tight text-gray-800 py-3
+}
+
+.content {
+  @apply leading-loose
+}
+
+.content code.language-plaintext {
+  @apply text-orange-600
+}
+
+.content table {
+  @apply border-collapse border border-slate-400 w-full
+}
+
+.content thead {
+  @apply bg-gray-800 text-white bg-period-base
+}
+
+.content th,
+.content td {
+  @apply border border-slate-300 p-2
+}
+
+.content tr:nth-child(even) {
+  @apply bg-period-light
+}
+
+.header-permalink {
+  text-decoration: none;
+  color:transparent;
+  font-size:.8em;
+  vertical-align: super;
+}
+
+.header-permalink:hover,
+h1:hover .header-permalink,
+h2:hover .header-permalink,
+h3:hover .header-permalink,
+h4:hover .header-permalink,
+h5:hover .header-permalink {
+  text-decoration: none;
+  color:#777;
+}
+
+nav li a:hover {
+  @apply underline
+}
+
+nav li.selected a {
+  @apply text-period-dark underline
+}
+
+.content ul li {
+  @apply list-disc mx-4
+}
+
+img {
+  @apply m-auto inline
+}
+
+.content p > img {
+  @apply object-none object-center
+}
+
+.algolia-autocomplete {
+  width: 100% !important
+}
+
+.algolia-autocomplete input {
+  font-weight: normal;
+  font-size: 16px;
+  border:1px solid #e8e8e8;
+  background-color:#f4f4f4;
+  padding:.5em 1em;
+  margin-left:.3em;
+  border-radius: .3em;
+  width: 80%;
+}
+
+@media (max-width: 768px) {
+  .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+    max-width: calc(100vw - 2rem) !important;
+    width: calc(100vw - 2rem) !important;
+    min-width: 0 !important;
+    margin-left: 16px !important;
+    right: -3rem !important;
+  }
+  .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
+    right: 58px;
+  }
+  .algolia-autocomplete .algolia-docsearch-suggestion--content {
+    width: 100% !important;
+    padding-left: 0 !important;
+  }
+  .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
+    display: none !important;
+  }
+  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+    display: none !important;
+  }
+}
diff --git a/docs/output.css b/docs/output.css
new file mode 100644
index 00000000..23fd6cf4
--- /dev/null
+++ b/docs/output.css
@@ -0,0 +1,2049 @@
+/*
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: "IBM Plex Mono", mono;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
+.right-5 {
+  right: 1.25rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-5 {
+  top: 1.25rem;
+}
+
+.top-\[3\.5rem\] {
+  top: 3.5rem;
+}
+
+.top-\[4\.5rem\] {
+  top: 4.5rem;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-50 {
+  z-index: 50;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-16 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.-ml-0 {
+  margin-left: -0px;
+}
+
+.-ml-0\.5 {
+  margin-left: -0.125rem;
+}
+
+.mb-16 {
+  margin-bottom: 4rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.table {
+  display: table;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-\[40px\] {
+  height: 40px;
+}
+
+.h-\[calc\(100vh-4\.5rem\)\] {
+  height: calc(100vh - 4.5rem);
+}
+
+.h-px {
+  height: 1px;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-12 {
+  width: 3rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-64 {
+  width: 16rem;
+}
+
+.w-\[40px\] {
+  width: 40px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-7xl {
+  max-width: 80rem;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.shrink {
+  flex-shrink: 1;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.rotate-6 {
+  --tw-rotate: 6deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-12 {
+  gap: 3rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-light {
+  --tw-border-opacity: 1;
+  border-color: rgb(128 128 128 / var(--tw-border-opacity));
+}
+
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
+.border-opacity-10 {
+  --tw-border-opacity: 0.1;
+}
+
+.border-opacity-50 {
+  --tw-border-opacity: 0.5;
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-period-base {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 198 29 / var(--tw-bg-opacity));
+}
+
+.bg-period-dark {
+  --tw-bg-opacity: 1;
+  background-color: rgb(178 139 20 / var(--tw-bg-opacity));
+}
+
+.bg-period-light {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 221 119 / var(--tw-bg-opacity));
+}
+
+.bg-slate-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
+
+.bg-slate-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-period-base {
+  --tw-gradient-from: #FFC61D var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 198 29 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-white {
+  --tw-gradient-to: #fff var(--tw-gradient-to-position);
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.py-7 {
+  padding-top: 1.75rem;
+  padding-bottom: 1.75rem;
+}
+
+.py-9 {
+  padding-top: 2.25rem;
+  padding-bottom: 2.25rem;
+}
+
+.pb-32 {
+  padding-bottom: 8rem;
+}
+
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pl-0 {
+  padding-left: 0px;
+}
+
+.pl-0\.5 {
+  padding-left: 0.125rem;
+}
+
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
+.pl-6 {
+  padding-left: 1.5rem;
+}
+
+.pr-6 {
+  padding-right: 1.5rem;
+}
+
+.pr-8 {
+  padding-right: 2rem;
+}
+
+.pt-24 {
+  padding-top: 6rem;
+}
+
+.font-mono {
+  font-family: "IBM Plex Mono", mono;
+}
+
+.font-onest {
+  font-family: "Onest", sans-serif;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
+.text-8xl {
+  font-size: 6rem;
+  line-height: 1;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-black {
+  font-weight: 900;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.tracking-tighter {
+  letter-spacing: -0.05em;
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-dark {
+  --tw-text-opacity: 1;
+  color: rgb(44 44 44 / var(--tw-text-opacity));
+}
+
+.text-light {
+  --tw-text-opacity: 1;
+  color: rgb(128 128 128 / var(--tw-text-opacity));
+}
+
+.text-period-base {
+  --tw-text-opacity: 1;
+  color: rgb(255 198 29 / var(--tw-text-opacity));
+}
+
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.top-logo {
+  margin-top: 225px;
+}
+
+.-right-logo {
+  margin-left: 45%;
+}
+
+@media only screen and (max-width: 600px) {
+  .top-logo {
+    margin-top: 100px;
+  }
+
+  .-right-logo {
+    margin-left: 75%;
+  }
+}
+
+pre {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  overflow: auto;
+  border-radius: 0.5rem;
+  border-width: 0px;
+  border-bottom-width: 4px;
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(229 231 235 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  padding: 1.5rem;
+}
+
+.hover-button:hover {
+  opacity: 0.9;
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.hover-block:hover {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.hover-text:hover {
+  --tw-text-opacity: 1;
+  color: rgb(128 128 128 / var(--tw-text-opacity));
+  text-decoration-line: none;
+}
+
+.hover-text:hover .underline {
+  --tw-text-opacity: 1;
+  color: rgb(128 128 128 / var(--tw-text-opacity));
+  text-decoration-line: none;
+}
+
+.hover-block:hover div.hover-action {
+  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
+  --tw-gradient-from: #38C163 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(56 193 99 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(55 111 255 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #376FFF var(--tw-gradient-via-position), var(--tw-gradient-to);
+  --tw-gradient-to: #FFC61D var(--tw-gradient-to-position);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover-block:hover img.hover-action {
+  background-image: none;
+  opacity: 1;
+}
+
+code {
+  font-family: "IBM Plex Mono", mono;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 640px) {
+  code {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+.language-php .string {
+  color: #ff4143
+}
+
+.language-php .this,.language-php .keyword {
+  color: #2b3d50
+}
+
+.language-php .comment {
+  color: #b6b6b6
+}
+
+.language-php .property,.language-php .function,.language-php .class-name,.language-php .variable {
+  color: #07a
+}
+
+.language-php .punctuation {
+  color: #2b3d50
+}
+
+.language-php .php .keyword,.language-php .php .string {
+  color: #ff4143
+}
+
+.language-php .php .function,.language-php .php .property,.language-php .php .this,.language-php .php .variable,.language-php .php .operator,.language-php .php .punctuation {
+  color: #07a
+}
+
+.language-php .markup .token {
+  color: #2b3d50
+}
+
+.language-php .markup .token.comment {
+  color: #b6b6b6
+}
+
+.language-php .markup .token .php .keyword,.language-php .markup .token .php .string,.language-php .markup .token .php .punctuation {
+  color: #690
+}
+
+.language-php .markup .token .php .function,.language-php .markup .token .php .property,.language-php .markup .token .php .this,.language-php .markup .token .php .variable,.language-php .markup .token .php .operator {
+  color: #07a
+}
+
+.language-javascript .punctuation {
+  color: #007e74
+}
+
+.language-javascript .string {
+  color: #ff4143
+}
+
+.language-bash .comment {
+  color: #b6b6b6
+}
+
+.highlight .hll {
+  background-color: #ffc
+}
+
+.highlight .c {
+  color: #999988;
+  font-style: italic
+}
+
+.highlight .err {
+  color: #a61717;
+  background-color: #e3d2d2
+}
+
+.highlight .k {
+  color: #000000;
+  font-weight: bold
+}
+
+.highlight .o {
+  color: #000000;
+  font-weight: bold
+}
+
+.highlight .cm {
+  color: #999988;
+  font-style: italic
+}
+
+.highlight .cp {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic
+}
+
+.highlight .c1 {
+  color: #999988;
+  font-style: italic
+}
+
+.highlight .cs {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic
+}
+
+.highlight .gd {
+  color: #000000;
+  background-color: #fdd
+}
+
+.highlight .ge {
+  color: #000000;
+  font-style: italic
+}
+
+.highlight .gr {
+  color: #a00
+}
+
+.highlight .gh {
+  color: #999
+}
+
+.highlight .gi {
+  color: #000000;
+  background-color: #dfd
+}
+
+.highlight .go {
+  color: #888
+}
+
+.highlight .gp {
+  color: #555
+}
+
+.highlight .gs {
+  font-weight: bold
+}
+
+.highlight .gu {
+  color: #aaa
+}
+
+.highlight .gt {
+  color: #a00
+}
+
+.highlight .kc {
+  color: #000000;
+  font-weight: bold
+}
+
+.highlight .kd {
+  color: #000000;
+  font-weight: bold
+}
+
+.highlight .kn {
+  color: #000000;
+  font-weight: bold
+}
+
+.highlight .kp {
+  color: #000000;
+  font-weight: bold
+}
+
+.highlight .kr {
+  color: #000000;
+  font-weight: bold
+}
+
+.highlight .kt {
+  color: #445588;
+  font-weight: bold
+}
+
+.highlight .m {
+  color: #099
+}
+
+.highlight .s {
+  color: #d01040
+}
+
+.highlight .na {
+  color: teal
+}
+
+.highlight .nb {
+  color: #0086B3
+}
+
+.highlight .nc {
+  color: #445588;
+  font-weight: bold
+}
+
+.highlight .no {
+  color: teal
+}
+
+.highlight .nd {
+  color: #3c5d5d;
+  font-weight: bold
+}
+
+.highlight .ni {
+  color: purple
+}
+
+.highlight .ne {
+  color: #990000;
+  font-weight: bold
+}
+
+.highlight .nf {
+  color: #990000;
+  font-weight: bold
+}
+
+.highlight .nl {
+  color: #990000;
+  font-weight: bold
+}
+
+.highlight .nn {
+  color: #555
+}
+
+.highlight .nt {
+  color: navy
+}
+
+.highlight .nv {
+  color: teal
+}
+
+.highlight .ow {
+  color: #000000;
+  font-weight: bold
+}
+
+.highlight .w {
+  color: #bbb
+}
+
+.highlight .mf {
+  color: #099
+}
+
+.highlight .mh {
+  color: #099
+}
+
+.highlight .mi {
+  color: #099
+}
+
+.highlight .mo {
+  color: #099
+}
+
+.highlight .sb {
+  color: #d01040
+}
+
+.highlight .sc {
+  color: #d01040
+}
+
+.highlight .sd {
+  color: #d01040
+}
+
+.highlight .s2 {
+  color: #d01040
+}
+
+.highlight .se {
+  color: #d01040
+}
+
+.highlight .sh {
+  color: #d01040
+}
+
+.highlight .si {
+  color: #d01040
+}
+
+.highlight .sx {
+  color: #d01040
+}
+
+.highlight .sr {
+  color: #009926
+}
+
+.highlight .s1 {
+  color: #d01040
+}
+
+.highlight .ss {
+  color: #990073
+}
+
+.highlight .bp {
+  color: #999
+}
+
+.highlight .vc {
+  color: teal
+}
+
+.highlight .vg {
+  color: teal
+}
+
+.highlight .vi {
+  color: teal
+}
+
+.highlight .il {
+  color: #099
+}
+
+.message-info,
+.message-notice,
+.message-warning {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(128 128 128 / var(--tw-text-opacity));
+}
+
+.message-info a,.message-notice a,.message-warning a {
+  color: black
+}
+
+.message-info {
+  color: #196090;
+  background: #cce5f6;
+}
+
+.message-info code {
+  background: rgba(255,255,255,0.8);
+  border-color: #5faee3;
+  color: #196090
+}
+
+.message-notice {
+  color: #927608;
+  background: #fbedb8;
+}
+
+.message-notice code {
+  background: rgba(255,255,255,0.8);
+  border-color: #f4d03f;
+  color: #927608
+}
+
+.message-warning {
+  color: #a82315;
+  background: #fbdedb;
+}
+
+.message-warning code {
+  background: rgba(255,255,255,0.8);
+  border-color: #ed7669;
+  color: #a82315
+}
+
+.content h1 {
+  margin-bottom: 1.5rem;
+  font-size: 3.75rem;
+  line-height: 1;
+  font-weight: 900;
+  letter-spacing: -0.05em;
+}
+
+.content h2 {
+  margin-bottom: 1rem;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  letter-spacing: -0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(255 198 29 / var(--tw-text-opacity));
+}
+
+.content h3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  letter-spacing: -0.025em;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.content {
+  line-height: 2;
+}
+
+.content code.language-plaintext {
+  --tw-text-opacity: 1;
+  color: rgb(234 88 12 / var(--tw-text-opacity));
+}
+
+.content table {
+  width: 100%;
+  border-collapse: collapse;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(148 163 184 / var(--tw-border-opacity));
+}
+
+.content thead {
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 198 29 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.content th,
+.content td {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+  padding: 0.5rem;
+}
+
+.content tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 221 119 / var(--tw-bg-opacity));
+}
+
+.header-permalink {
+  text-decoration: none;
+  color:transparent;
+  font-size:.8em;
+  vertical-align: super;
+}
+
+.header-permalink:hover,
+h1:hover .header-permalink,
+h2:hover .header-permalink,
+h3:hover .header-permalink,
+h4:hover .header-permalink,
+h5:hover .header-permalink {
+  text-decoration: none;
+  color:#777;
+}
+
+nav li a:hover {
+  text-decoration-line: underline;
+}
+
+.hover-text:hover nav li a:hover {
+  --tw-text-opacity: 1;
+  color: rgb(128 128 128 / var(--tw-text-opacity));
+  text-decoration-line: none;
+}
+
+nav li.selected a {
+  --tw-text-opacity: 1;
+  color: rgb(178 139 20 / var(--tw-text-opacity));
+  text-decoration-line: underline;
+}
+
+.hover-text:hover nav li.selected a {
+  --tw-text-opacity: 1;
+  color: rgb(128 128 128 / var(--tw-text-opacity));
+  text-decoration-line: none;
+}
+
+.content ul li {
+  margin-left: 1rem;
+  margin-right: 1rem;
+  list-style-type: disc;
+}
+
+img {
+  margin: auto;
+  display: inline;
+}
+
+.content p > img {
+  -o-object-fit: none;
+     object-fit: none;
+  -o-object-position: center;
+     object-position: center;
+}
+
+.algolia-autocomplete {
+  width: 100% !important
+}
+
+.algolia-autocomplete input {
+  font-weight: normal;
+  font-size: 16px;
+  border:1px solid #e8e8e8;
+  background-color:#f4f4f4;
+  padding:.5em 1em;
+  margin-left:.3em;
+  border-radius: .3em;
+  width: 80%;
+}
+
+@media (max-width: 768px) {
+  .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+    max-width: calc(100vw - 2rem) !important;
+    width: calc(100vw - 2rem) !important;
+    min-width: 0 !important;
+    margin-left: 16px !important;
+    right: -3rem !important;
+  }
+
+  .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
+    right: 58px;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--content {
+    width: 100% !important;
+    padding-left: 0 !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
+    display: none !important;
+  }
+
+  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+    display: none !important;
+  }
+}
+
+.hover\:text-slate-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
+.active\:scale-95:active {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.peer:checked ~ .peer-checked\:block {
+  display: block;
+}
+
+@media (min-width: 640px) {
+  .sm\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .sm\:flex {
+    display: flex;
+  }
+
+  .sm\:h-\[50px\] {
+    height: 50px;
+  }
+
+  .sm\:w-2\/3 {
+    width: 66.666667%;
+  }
+
+  .sm\:w-\[50px\] {
+    width: 50px;
+  }
+
+  .sm\:w-auto {
+    width: auto;
+  }
+
+  .sm\:grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:justify-center {
+    justify-content: center;
+  }
+
+  .sm\:gap-3 {
+    gap: 0.75rem;
+  }
+
+  .sm\:gap-32 {
+    gap: 8rem;
+  }
+
+  .sm\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .sm\:px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:py-24 {
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .sm\:py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:gap-0 {
+    gap: 0px;
+  }
+
+  .md\:gap-6 {
+    gap: 1.5rem;
+  }
+
+  .md\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .md\:text-8xl {
+    font-size: 6rem;
+    line-height: 1;
+  }
+
+  .md\:text-9xl {
+    font-size: 8rem;
+    line-height: 1;
+  }
+
+  .md\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:relative {
+    position: relative;
+  }
+
+  .lg\:top-0 {
+    top: 0px;
+  }
+
+  .lg\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
+  .lg\:h-auto {
+    height: auto;
+  }
+
+  .lg\:w-\[50vw\] {
+    width: 50vw;
+  }
+
+  .lg\:max-w-4xl {
+    max-width: 56rem;
+  }
+
+  .lg\:flex-none {
+    flex: none;
+  }
+
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+
+  .lg\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .lg\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .lg\:pl-8 {
+    padding-left: 2rem;
+  }
+
+  .lg\:pr-0 {
+    padding-right: 0px;
+  }
+
+  .lg\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .lg\:shadow-none {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:w-72 {
+    width: 18rem;
+  }
+
+  .xl\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .xl\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .xl\:pr-16 {
+    padding-right: 4rem;
+  }
+}
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
new file mode 100644
index 00000000..427c684d
--- /dev/null
+++ b/docs/tailwind.config.js
@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./**/*.{html,js}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        'onest': ['"Onest"', 'sans-serif'],
+        'mono': ['"IBM Plex Mono"', 'mono']
+      },
+      colors: {
+        'csv': {
+          light: '#74D492',
+          base: '#38C163',
+          dark: '#278745'
+        },
+        'uri': {
+          light: '#739AFF',
+          base: '#376FFF',
+          dark: '#274EB2'
+        },
+        'period': {
+          light: '#FFDD77',
+          base: '#FFC61D',
+          dark: '#B28B14'
+        },
+        'dark': '#2C2C2C',
+        'light': '#808080'
+      }
+    },
+  },
+  plugins: [],
+}
+