### Local Development Setup Script for MkDocs

Source: https://context7.com/cachemon/s3-fifo-website/llms.txt

This bash script automates the setup for local development of the MkDocs documentation site. It creates and activates a Python virtual environment, installs the necessary MkDocs Material theme and minify plugin, and then starts the local development server.

```bash
#!/bin/bash
# build.sh - Local development setup

# Create and activate virtual environment
python3 -m venv .venv
source .venv/bin/activate

# Install dependencies
pip3 install mkdocs-material=="9.2.0b0"
pip3 install mkdocs-minify-plugin

# Start local development server
mkdocs serve
# Access at http://127.0.0.1:8000

```

--------------------------------

### Setup Python Virtual Environment

Source: https://github.com/cachemon/s3-fifo-website/blob/main/README.md

Creates and activates a Python virtual environment for project dependencies. This isolates project packages and ensures a clean build environment. It relies on Python 3 being installed.

```bash
python3 -m venv .venv
source .venv/bin/activate
```

--------------------------------

### Serve MkDocs Website Locally

Source: https://github.com/cachemon/s3-fifo-website/blob/main/README.md

Starts a local development server to preview the MkDocs website. This command allows developers to see changes in real-time before deploying. Requires MkDocs to be installed and configured.

```bash
mkdocs serve
```

--------------------------------

### Install MkDocs Minify Plugin

Source: https://github.com/cachemon/s3-fifo-website/blob/main/README.md

Installs the MkDocs minify plugin, used to optimize the website's assets for better performance. This plugin helps reduce file sizes of HTML, CSS, and JavaScript. Requires pip3 to be installed.

```bash
pip3 install mkdocs-minify-plugin
```

--------------------------------

### GitHub Actions Workflow for CI/CD

Source: https://context7.com/cachemon/s3-fifo-website/llms.txt

This GitHub Actions workflow automates the deployment of the MkDocs documentation site to GitHub Pages. It checks out the code, sets up Python, caches dependencies, installs MkDocs and its plugins, and then deploys the documentation using `mkdocs gh-deploy`.

```yaml
# .github/workflows/ci.yml - Automated deployment
name: ci
on:
  push:
    branches:
      - main
permissions:
  contents: write
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-python@v4
        with:
          python-version: 3.x
      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
      - uses: actions/cache@v3
        with:
          key: mkdocs-material-${{ env.cache_id }}
          path: .cache
          restore-keys: |
            mkdocs-material-
      - run: pip install mkdocs-material=="9.2.0b0" mkdocs-minify-plugin
      - run: mkdocs gh-deploy --force

```

--------------------------------

### Install MkDocs Material Theme

Source: https://github.com/cachemon/s3-fifo-website/blob/main/README.md

Installs the Material for MkDocs theme, which is required for the S3-FIFO website's frontend. This command specifies version 9.2.0b0, which supports blog features. Requires pip3 to be installed.

```bash
pip3 install mkdocs-material=="9.2.0b0"
```

--------------------------------

### Initialize and Use S3FIFO Cache in JavaScript

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/home.html

Provides an example of using the S3FIFO cache in JavaScript. It covers creating the cache, adding items with TTL, retrieving values, deleting items, and verifying object presence.

```javascript
const { S3FIFO } = require('cachemonCache');           

// Create a cache backed by DRAM
const cache = new S3FIFO({ size: 10 }); 

// Add an object to the cache
cache.put("key", "value", { ttl: 10 });

// Get an object from the cache
const value = cache.get("key");
console.log(value); // Outputs: "value"

// Remove an object from the cache
cache.delete("key");

// Check if an object is in the cache
const exists = cache.has("key");
console.log(exists); // Outputs: false
```

--------------------------------

### MkDocs Configuration for S3-FIFO Website

Source: https://context7.com/cachemon/s3-fifo-website/llms.txt

This YAML configuration sets up the MkDocs Material theme, enabling features like search, code copying, blog support, and theme customization. It defines the site's structure, navigation, and integrates extensions for syntax highlighting and math rendering.

```yaml
# mkdocs.yml
site_name: "S3-FIFO: Simple, scalable and efficient caching"
site_description: >-
  Simple, scalable and efficient caching with S3-FIFO

watch:
  - material

theme:
  name: material
  custom_dir: material
  features:
    - announce.dismiss
    - content.code.copy
    - navigation.footer
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.top
    - search.highlight
    - search.suggest
  palette:
    - scheme: default
      primary: custom
      accent: custom
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
    - scheme: slate
      primary: custom
      accent: custom
      toggle:
        icon: material/brightness-4
        name: Switch to light mode
  font:
    text: Roboto
    code: Roboto Mono
  favicon: assets/favicon.png
  logo: assets/images/logos/s3fifo-logo1.svg

plugins:
  - search:
      separator: '[s-,:!=\[\]()"`\/]+|\.(?!\d)|&[lg]t;|(?![\b])(?=[A-Z][a-z])'
  - minify:
      minify_html: true
  - blog:

extra:
  analytics:
    provider: google
    property: !ENV GOOGLE_ANALYTICS_KEY

extra_css:
  - stylesheets/extra.css

markdown_extensions:
  - abbr
  - admonition
  - attr_list
  - pymdownx.highlight:
      anchor_linenums: true
      line_spans: __span
      pygments_lang_class: true
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.arithmatex:
      generic: true

nav:
  - Home: index.md
  - Blog:
    - blog/index.md
    - FIFO queues are all you need for cache eviction: blog/posts/S3-FIFO.md
    - the Power of Lazy Promotion and Quick Demotion: blog/posts/QDLP.md

```

--------------------------------

### Initialize and Use S3FIFO Cache in Python

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/home.html

Demonstrates how to create, add, retrieve, delete, and check for the existence of objects in an S3FIFO cache using Python. This cache is backed by DRAM and supports Time-To-Live (TTL) for objects.

```python
from cachemonCache import S3FIFO

# Create a cache backed by DRAM
cache = S3FIFO(size=10) # or cache=LRU(size=10)         

# Add an object to the cache
cache.put("key", "value", ttl=10)

# Get an object from the cache
cache.get("key")
print(value) # Outputs: "value" or None

# Remove an object from the cache
cache.delete("key")

# Check if an object is in the cache
cache.has("key")
print(exists)  # Outputs: False
```

--------------------------------

### MkDocs Material Blog Post Structure with Markdown Extensions

Source: https://context7.com/cachemon/s3-fifo-website/llms.txt

Demonstrates the use of MkDocs Material's extended markdown features for technical blog posts. This includes frontmatter, inline HTML comments, and markdown formatting for content structure. No specific JavaScript or CSS dependencies are required beyond MkDocs Material.

```markdown
---

date: 2023-08-01
authors:
  - jason
categories:
  - Algorithm
  - Performance
---

# FIFO queues are all you need for cache eviction

**TL;DR**

In this blog, I will describe a simple, scalable FIFO-based eviction algorithm with three static queues (S3-FIFO). Evaluated on 6594 cache traces from 14 datasets, we show that S3-FIFO has lower miss ratios than 12 state-of-the-art algorithms. Moreover, S3-FIFO's efficiency is robust — it has the lowest mean miss ratio on 10 of the 14 datasets.

<!-- more -->

## Background

Software caches, such as Memcached, database buffer pool, and page cache, are widely deployed today to speed up data access. A cache should be:

1. *efficient / effective*: it should provide a low miss ratio
2. *performant*: serving data should perform minimal operations
3. *scalable*: throughput grows with CPU cores

### The importance of simplicity and scalability

Modern CPUs have a large number of cores. For example, AMD EPYC 9654P has 192 cores/threads. A cache's scalability measures how its throughput increases with the number of CPU cores.

```

--------------------------------

### Chart.js Bar and Line Charts for Performance Visualization

Source: https://context7.com/cachemon/s3-fifo-website/llms.txt

Implements interactive bar and line charts using Chart.js to visualize S3-FIFO performance metrics. This includes multi-dataset bar charts comparing cache algorithms and line charts for throughput scalability. Requires Chart.js library.

```javascript
// material/mychart.js

// Performance comparison bar chart
const dataChartBarDoubleDatasetsExample = {
  labels: ['Meta', 'Twitter', 'Wikimedia', 'Tencent', 'CDN'],
  datasets: [
    {
      label: 'FIFO',
      data: [0.0938, 0.0574, 0.1087, 0.0967, 0.0767],
      backgroundColor: '#889ABD',
      borderColor: '#889ABD',
    },
    {
      label: 'LRU',
      data: [0.0812, 0.0488, 0.0803, 0.0659, 0.0688],
      backgroundColor: '#778fc7',
      borderColor: '#778fc7',
    },
    {
      label: 'TinyLFU',
      data: [0.0853, 0.0445, 0.0605, 0.0715, 0.0656],
      backgroundColor: '#4F628E',
      borderColor: '#4F628E',
    },
    {
      label: 'S3-FIFO',
      data: [0.0755, 0.0424, 0.0629, 0.0551, 0.0622],
      backgroundColor: '#FFA630',
      borderColor: '#FFA630',
    },
  ]
};

const optionsChartBarDoubleDatasetsExample = {
  scales: {
    y: {
      stacked: false,
      ticks: {
        beginAtZero: true,
        font: { size: 20 },
      },
      title: {
        display: true,
        text: 'Mean Miss Ratio',
        font: { size: 28 }
      },
    },
    x: {
      stacked: false,
      ticks: {
        font: { size: 24 },
      }
    },
  },
  plugins: {
    legend: {
      align: 'end',
      labels: {
        font: { size: 20 },
      },
    },
  },
};

var myChart = new Chart(
  document.getElementById('bar-chart'), {
  type: 'bar',
  data: dataChartBarDoubleDatasetsExample,
  options: optionsChartBarDoubleDatasetsExample
});

// Throughput scalability line chart
const dataLine = {
  labels: ['1', '2', '4', '8', '16'],
  datasets: [
    {
      label: 'LRU',
      data: [2, 3, 4, 5, 6],
      borderColor: '#4F628E',
      backgroundColor: '#4F628E',
    },
    {
      label: 'S3-FIFO',
      data: [2, 7, 12, 18, 28],
      borderColor: '#FFA630',
      backgroundColor: '#FFA630',
    },
  ],
};

const optionsThroughput = {
  scales: {
    x: {
      title: {
        display: true,
        text: 'Number of threads',
        font: { size: 20 },
      },
    },
    y: {
      title: {
        display: true,
        text: 'Throughput (MOPS/s)',
        font: { size: 20 },
      },
    },
  },
  plugins: {
    legend: {
      labels: {
        font: { size: 20 },
      },
    },
  },
};

const chart2 = new Chart(
  document.getElementById('throughput-chart'), {
  type: 'line',
  data: dataLine,
  options: optionsThroughput
});

function scrollToLearnMoreSection() {
  const usageSection = document.getElementById('usage');
  usageSection.scrollIntoView({ behavior: 'smooth' });
}

```

--------------------------------

### Custom Tooltip Implementation CSS

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

A comprehensive CSS implementation for a custom tooltip that appears on hover. It handles positioning, visibility transitions, arrow styling, and supports left and right orientations via data attributes.

```CSS
/* You want a simple and fancy tooltip? Just copy all [data-tooltip] blocks: */
[data-tooltip] {
  position: relative;
  z-index: 10;
}
/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before, [data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 50%;
  bottom: calc(100% + 5px); /* 5px is the size of the arrow */
  pointer-events: none;
  transition: 0.2s;
  will-change: transform;
}
/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
  content: attr(data-tooltip);
  padding: 10px 18px;
  min-width: 50px;
  max-width: 300px;
  width: max-content;
  width: -moz-max-content;
  border-radius: 6px;
  font-size: 14px;
  background-color: rgba(59, 72, 80, 0.9);
  background-image: linear-gradient(30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44));
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  white-space: pre-wrap;
  transform: translate(-50%, -5px) scale(0.5);
}
/* Tooltip arrow */
[data-tooltip]:after {
  content: '';
  border-style: solid;
  border-width: 5px 5px 0px 5px; /* CSS triangle */
  border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
  transition-duration: 0s; /* If the mouse leaves the element, the transition effects for the tooltip arrow are "turned off" */
  transform-origin: top; /* Orientation setting for the slide-down effect */
  transform: translateX(-50%) scaleY(0);
}
/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
  transition-delay: 0.3s;
  transform: translate(-50%, -5px) scale(1);
}
/* Arrow slide down effect only on mouseenter (NOT on mouseleave) */
[data-tooltip]:hover:after {
  transition-delay: 0.5s; /* Starting after the grow effect */
  transition-duration: 0.2s;
  transform: translateX(-50%) scaleY(1);
}
/* That's it. */
/* If you want some adjustability here are some orientation settings you can use: */
/* LEFT */
/* Tooltip + arrow */
[data-tooltip-location="left"]:before, [data-tooltip-location="left"]:after {
  left: auto;
  right: calc(100% + 5px);
  bottom: 50%;
}
/* Tooltip */
[data-tooltip-location="left"]:before {
  transform: translate(-5px, 50%) scale(0.5);
}
[data-tooltip-location="left"]:hover:before {
  transform: translate(-5px, 50%) scale(1);
}
/* Arrow */
[data-tooltip-location="left"]:after {
  border-width: 5px 0px 5px 5px;
  border-color: transparent transparent transparent rgba(55, 64, 70, 0.9);
  transform-origin: left;
  transform: translateY(50%) scaleX(0);
}
[data-tooltip-location="left"]:hover:after {
  transform: translateY(50%) scaleX(1);
}
/* RIGHT */
[data-tooltip-location="right"]:before, [data-tooltip-location="right"]:after {
  left: calc(100% + 5px);
  bottom: 50%;
}
[data-tooltip-location="right"]:before {
  transform: translate(5px, 50%) scale(0.5);
}
[data-tooltip-location="right"]:hover:before {
  transform: translate(5px, 50%) scale(1);
}
[data-tooltip-location="right"]:after {
  border-width: 5px 5px 5px 0px;
  border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent;
  transform-origin: right;
  transform: translateY(50%) scaleX(0);
}
[data-tooltip-location="right"]:hover:after {
  transform: translateY(50%) scaleX(1);
}
```

--------------------------------

### MkDocs Material Custom Homepage Template (HTML)

Source: https://context7.com/cachemon/s3-fifo-website/llms.txt

This HTML template extends the base MkDocs Material layout to create a custom homepage. It includes custom CSS for styling, a hero section with text and buttons, and a canvas element for embedding a Chart.js visualization. The template relies on external JavaScript files for chart rendering.

```html
<!-- material/home.html -->
{% extends "main-styles.html" %}

{% block tabs %}
{{ super() }}

<style>
  .md-header {
    position: sticky
  }
  .md-main__inner {
    margin: 0
  }
  .md-content {
    display: none
  }
  @media screen and (min-width:76.25em) {
    .md-sidebar--primary {
      display: none
    }
  }
</style>

<section class="section-white-body w-100">
  <div class="md-grid conteiner-row pt-1 pt-lg-5 my-4">
    <div class="px-3 ctx-header-text conteiner">
      <div class="conteiner-row">
        <p class="h1 text-xs-center t-b">
          <span style="color:rgb(0, 0, 0);">S3-FIFO</span>
        </p>
      </div>
      <p class="h2 text-xs-center spacing t-b">
        <b>Scalable</b> and <b>Efficient</b> Cache Eviction
      </p>
      <p class="h3 text-xs-center spacing">
        <span style="color:#E65100;">Efficient</span>
        <span style="color:rgb(73, 69, 69);">: up to 72% lower miss ratio than LRU</span>
      </p>
      <div class="conteiner-row conteiner-xs">
        <button type="button"
          onclick="window.open('https://blog.s3fifo.com', '_blank')"
          class="btn-dark btn-xl-large mx-2 mt-2">
          Learn More
        </button>
        <button type="button"
          onclick="window.open('https://dl.acm.org/doi/10.1145/3600006.3613147', '_blank')"
          class="btn-dark btn-xl-large mx-2 mt-2">
          Paper
        </button>
      </div>
    </div>
    <div class="ctx-header-img d-lg">
      <div class="mx-auto w-9/10 overflow-hidden" style="margin-top: 6rem;">
        <canvas id="bar-chart" style="width: 140%; height: 400%;"></canvas>
      </div>
    </div>
  </div>
</section>

<footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
  <script type="text/javascript" src="/mychart.js"></script>
</footer>

{% endblock %}
```

--------------------------------

### General Responsive Adjustments and Thumbnail Styling CSS

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

Applies global adjustments for smaller screen heights and widths, including font size changes and specific styling for a thumbnail view. This section ensures content is readable and visually appealing on various devices.

```CSS
@media (max-height: 450px) {
  main {
    margin: 2rem 0;
  }
}
@media (max-width: 800px) {
  html {
    font-size: 0.9em;
  }
}
/* Thumbnail settings */
@media (max-width: 750px) {
  html {
    animation-duration: 0.6s;
    font-size: 1em;
  }
  body {
    display: flex;
    background: none;
    height: 100%;
    margin: 0px;
  }
  main {
    font-size: 1.1em;
    padding: 6%;
  }
  .info-wrapper p:before, .info-wrapper p:after {
    display: none;
  }
  .example-elements {
    max-width: 150px;
    font-size: 22px;
  }
  .example-elements a, button {
    display: none;
  }
  .example-elements p:before, .example-elements p:after {
    visibility: visible;
    opacity: 1;
  }
  .example-elements p:before {
    content: "Tooltip";
    font-size: 20px;
    transform: translate(-50%, -5px) scale(1);
  }
  .example-elements p:after {
    transform: translate(-50%, -1px) scaleY(1);
  }
  [data-tooltip]:after {
    bottom: calc(100% + 3px);
  }
  [data-tooltip]:after {
    border-width: 7px 7px 0px 7px;
  }
}
```

--------------------------------

### Responsive Design and Media Queries - CSS

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

Applies responsive design principles using media queries to adjust layout and element properties for different screen sizes. Includes overrides for large screens and specific display properties.

```css
@media (min-width: 1220px) {
  .conteiner-row-lg {
    display: flex;
    flex-flow: row;
  }
  .d-xl-none {
    display: none;
  }
  .pt-lg-5 {
    padding-top: 1rem;
  }
  .my-xl-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-xl-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-xl-0 {
    margin-left: 0rem;
    margin-right: 0rem;
  }
  .mx-xl-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mx-xl-0 {
    margin-left: 0rem;
    margin-right: 0rem;
  }
  .text-end-xl {
    text-align: end;
  }
  .text-start-xl {
    text-align: start;
  }
  .btn-xl-large:hover {
    font-size: 20px;
    padding: 10px 30px;
  }
  .btn-lg-large {
    font-size: 20px;
    padding: 10px 24px;
  }
  .btn-rainbow-custom {
    margin-top: 15rem;
  }
  .md-main {
    display: none;
  }
  .md-header__title .md-header__ellip
```

--------------------------------

### Background and Layout Styles - CSS

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

Defines various background styles using gradients and solid colors, as well as layout properties for elements. Includes classes for width control and specific element positioning.

```css
.box-shadow {
  box-shadow: -5px 5px 10px 1px rgb(0 0 0 / 75%);
}
.first-gradiant-body {
  background: rgb(255, 255, 255);
  /* background: linear-gradient(0deg, rgb(150, 190, 243) 0%, rgb(180, 208, 246) 33%, rgb(253, 253, 252) 87%); */
}
.second-gradiant-body {
  background: rgb(255, 255, 255);
  /* background: rgb(150, 190, 243); */
  /* background: linear-gradient(180deg, rgb(150, 190, 243) 0%, rgb(84, 119, 247) 33%, rgb(61, 101, 244) 87%); */
}
.section-white-body {
  background: rgb(255, 255, 255);
}
.section-dark-body {
  background: rgb(31, 31, 31);
}
.stack-tenology-gradient {
  background: hsla(316, 100%, 63%, 1);
  background: linear-gradient(90deg, hsla(316, 100%, 63%, 1) 0%, hsla(2, 62%, 69%, 1) 33%, hsla(68, 77%, 47%, 1) 87%);
}
.third-dark-body {
  background-color: #181917;
}
.four-gray-body {
  background-color: #D0D0D0;
}
.bg-dark {
  background-color: #181917;
}
.w-100 {
  width: 100%;
}
.w-70 {
  width: 70%;
}
.w-50 {
  width: 50%;
}
.w-25 {
  width: 25%;
}
.w-10 {
  width: 10%;
}
.ctx-header-text {
  flex: 80%;
  order: 0;
  display: flex;
  color: #000000;
}
.ctx-header-img {
  flex: 60%;
  order: 1;
  display: flex;
  flex-flow: column;
}
.ctx-card-white-1 {
  flex: 50%;
  order: 0;
  justify-content: center;
}
.ctx-what-is {
  order: 0;
  flex: 50%;
  width: 60%;
}
.laverage-header-img {
  width: 100%;
  margin-left: 2rem;
  margin-top: 3rem;
}
.laverage-mac-img {
  width: 40%;
  margin-left: auto;
  margin-right: 12rem;
}
.howdoeswork-img {
  width: 60%;
}
.why-laverage-img {
  width: 25%;
  left: 60%;
  position: relative;
}
.laverage-mac2-img {
  width: 60%;
  left: 10%;
  position: relative;
}
.card-white {
  width: 100%;
  background-color: white;
  border-radius: 60px 0px 60px 0px;
}
.card-rainbow {
  position: relative;
  bottom: -170px;
  border-radius: 15px;
  width: 80%;
  min-height: 600px;
}
.leverage-title-logo {
  margin-bottom: -10px;
}
.md-main {
  padding: 0px;
}
.md-footer {
  display: none;
}
.item-social-media:hover {
  background-color: #FFA630;
  border-radius: 10px;
}
.item-text-footer:hover {
  color: #c8ff00;
}
.custom-link {
  color: #ec712f;
  text-decoration: underline;
}
.custom-link-text {
  color: #ec712f;
  text-decoration: underline;
}
.custom-link + .custom-link {
  margin-left: 20px;
  /* adjust the space as needed */
}
```

--------------------------------

### CSS Spacing Utilities

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

A collection of CSS utility classes for managing margins and paddings. These classes allow for fine-grained control over element spacing, with predefined values for different axes (top, bottom, left, right, x, y) and increments (0-5, auto, large).

```css
.spacing { margin-bottom: 0.5rem; }
.ml-0 { margin-left: 0rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 3rem; }
.mr-0 { margin-right: 0rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 3rem; }
.pl-0 { padding-left: 0rem; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 3rem; }
.pr-0 { padding-right: 0rem; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 3rem; }
.mt-0 { margin-top: 0rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mt-large { margin-top: 6rem; }
.pt-0 { padding-top: 0rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }
.mb-0 { margin-bottom: 0rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.pb-0 { padding-bottom: 0rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }
.mx-0 { margin-left: 0rem; margin-right: 0rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }
.mx-6 { margin-left: auto; margin-right: 3rem; }
.px-0 { padding-left: 0rem; padding-right: 0rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }
.my-0 { margin-top: 0rem; margin-bottom: 0rem; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 2rem; margin-bottom: 2rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }
.py-0 { padding-top: 0rem; padding-bottom: 0rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

```

--------------------------------

### CSS Text Color Utilities

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

Utility classes for applying specific text colors. This includes predefined classes for pink, white, and dark text colors, allowing for easy theme customization.

```css
.text-pink { color: #d328ae; }
.text-white { color: #fff; }
.text-dark { color: #000; }

```

--------------------------------

### Responsive Pricing Table Layout CSS

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

Styles to adjust the pricing table layout for various screen sizes, ensuring responsiveness from large desktops down to small mobile devices. It modifies widths and display properties.

```CSS
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .pricing-wrapper {
    width: 768px;
  }
  .pricing-table {
    width: 236px;
  }
  .table-list li {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 767px) {
  .pricing-wrapper {
    width: 420px;
  }
  .pricing-table {
    display: block;
    float: none;
    margin: 0 0 20px 0;
    width: 100%;
  }
}
@media only screen and (max-width: 479px) {
  .pricing-wrapper {
    width: 300px;
  }
}
```

--------------------------------

### CSS Flexbox Layout Utilities

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

A set of CSS classes that leverage Flexbox to create various layout structures. This includes row and column direction, centering content, and defining column widths for responsive design.

```css
.d-flex { display: flex; }
.conteiner { display: flex; flex-flow: column; }
.conteiner-row { display: flex; flex-flow: row; }
.two-column-container { display: flex; justify-content: center; }
.center-container { display: flex; justify-content: center; }
.center-footer { flex: 40%; display: flex; justify-content: center; flex-flow: column; /* align-items: center; */ }
.icon-container { display: flex; justify-content: center; }
.figure { width: 40%; /* Adjust as needed */ }
.figure2 { width: 30%; /* Adjust as needed */ right: 10%; }

```

--------------------------------

### CSS Typography Utilities

Source: https://github.com/cachemon/s3-fifo-website/blob/main/material/main-styles.html

This snippet defines CSS classes for controlling typography, including font sizes, font weights, and text alignment. It supports various display sizes and standard heading levels, along with options for bold and semi-bold text.

```css
.italic { font-style: italic; }
.display-1 { font-size: 6rem; }
.display-2 { font-size: 5rem; }
.display-3 { font-size: 4rem; font-family: Roboto, sans-serif; }
.display-4 { font-size: 3rem; }
.h1 { font-size: 4rem; }
.h1-2 { font-size: 3rem; }
.h2 { font-size: 1.7rem; }
.h2-2 { font-size: 1.35rem; /* font-family: Roboto, sans-serif; */ }
.h3 { font-size: 1.2rem; }
.h4 { font-size: 0.8rem; }
.h5 { font-size: 0.25rem; }
.t-b { font-weight: bold; }
.t-600 { font-weight: 600; }
.t-500 { font-weight: 500; }
.text-align-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }

```