Front Template: <!-- Prettify by @pranavdeshai: Cloze (front)

Version: 0.1.3
Readme: https://github.com/pranavdeshai/anki-prettify
Links:
- Reddit: https://www.reddit.com/user/Various_Breadfruit48
- GitHub: https://github.com/pranavdeshai
- Buy Me a Coffee: https://www.buymeacoffee.com/pranavdeshai
- Ko-fi: https://ko-fi.com/pranavdeshai

-->
<div class="prettify-flashcard">
  <div class="prettify-deck">{{Deck}}</div>
  <div class="prettify-field prettify-field--front">{{edit:cloze:Content}}</div>
  <!--{{#Tags}}
  <div class="prettify-tags">{{clickable:Tags}}</div>
  {{/Tags}}-->
</div>

<script>
  // Split hierarchical tags
  var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
  if (tagsContainerEl.length > 0) {
    var tags = []
    tagsContainerEl.forEach((tagEl) => {
      tagEl.classList.add('prettify-tag')
      tags.push(tagEl.innerHTML)
      tags.forEach((tag) => {
        var childTag = tag.split('::').filter(Boolean)
        tagEl.innerHTML = childTag[childTag.length - 1].trim()
      })
    })
  } else {
    tagsContainerEl = document.querySelector('.prettify-tags')
    var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
    var html = ''
    tags.forEach((tag) => {
      var childTag = tag.split('::').filter(Boolean)
      html +=
        "<span class='prettify-tag'>" +
        childTag[childTag.length - 1] +
        '</span>'
    })
    tagsContainerEl.innerHTML = html
  }
</script>

<script>
  // Breadcrumbs to current deck
  var deckEl = document.querySelector('.prettify-deck')
  var subDecks = deckEl.innerHTML.split('::').filter(Boolean)
  html = []
  subDecks.forEach((subDeck) => {
    html.push("<span class='prettify-subdeck'>" + subDeck + '</span>')
  })
  deckEl.innerHTML = html.join('&nbsp;/&nbsp;')
</script>


<script data-name="Cloze Interactive" data-version="v1.4.0">
// https://github.com/huandney/Anki-Cloze-Interactive/blob/main/card/front-template.html

// User Settings
var userSettings = {
    gesturesEnabled: true,    // Set to "false" to disable gestures on AnkiDesktop and AnkiWeb with touch screens
    invertGestures: false,    // Set to "true" to invert the gestures
    swipeThreshold: 50,       // Adjust this value to change the swipe sensitivity
    scrollDuration: 500,      // Scroll duration in milliseconds
    autoFlip: "all", // "all", "off", ["AnkiDesktop", "AnkiDroid", "AnkiMobile", "AnkiWeb"]
    revealNextKeys: ["KeyW", "ArrowRight"], // Keys to reveal the next cloze - for custom keycodes: https://keycode.info/
    hideLastKeys: ["KeyQ", "ArrowLeft"],    // Keys to hide the last cloze
    highlightCloze: true // Set to "false" to disable next cloze highlighting
};

// Detects where the script is being executed
function detectAnkiPlatform() {
    if (window.anki && window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.cb !== undefined) {
        return "AnkiMobile";
    } else if (document.querySelector("span.align-middle") && document.querySelector("span.align-middle").textContent.includes("AnkiWeb")) {
        return "AnkiWeb";
    } else if (typeof AnkiDroidJS !== "undefined") {
        return "AnkiDroid";
    } else if (typeof pycmd !== "undefined") {
        return "AnkiDesktop";
    } else {
        return "Unknown";
    }
}

// Updates the gesture configuration, only for AnkiDesktop and AnkiWeb
function updateGestureSetting() {
    var platform = detectAnkiPlatform();
    // AnkiMobile and AnkiDroid are managed by their own app settings through User Actions
    if (platform !== "AnkiWeb" && platform !== "AnkiDesktop") {
        userSettings.gesturesEnabled = false;
    }
}

// Converts span to a links for direct cloze activation on touch devices, avoiding gesture conflicts
function convertSpanToLink() {
    const clozeSpans = document.querySelectorAll("span.cloze");

    clozeSpans.forEach((span, i) => {
        const link = document.createElement("a");
        
        for (let attr of span.attributes) {
            link.setAttribute(attr.name, attr.value);
        }

        link.setAttribute("href", "#");
        link.setAttribute("onclick", `revealCloze(${i}); return false;`);
        link.innerHTML = span.innerHTML;
        span.parentNode.replaceChild(link, span);
    });
}

// Calculates overlay heights to adjust layouts for both AnkiWeb and AnkiMobile, considering fixed/sticky elements and AnkiMobile UI specifics
function getOverlayHeights() {
    const heights = {
        top: 0,
        bottom: 0
    };

    // Captures and adds the height of fixed or sticky elements
    document.querySelectorAll("*").forEach(el => {
        const style = window.getComputedStyle(el);
        if (style.position === "fixed" || style.position === "sticky") {
            const position = parseFloat(style.top) === 0 ? "top" : "bottom";
            heights[position] += el.offsetHeight;
        }
    });

    // Checks and adds the heights defined by CSS variables only in AnkiMobile
    if (detectAnkiPlatform() === "AnkiMobile" && window.getComputedStyle) {
        const rootStyle = getComputedStyle(document.documentElement);
        const bottomInset = parseInt(rootStyle.getPropertyValue("--bottom-inset"), 10) || 0;
        
        heights.bottom += bottomInset;
    }

    return heights;
}

function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    const overlayHeights = getOverlayHeights(); // Considers heights of "fixed"/"sticky" elements

    return (
        rect.left >= 0 &&
        rect.right <= window.innerWidth &&
        rect.bottom <= (window.innerHeight - overlayHeights.bottom) &&
        rect.top >= overlayHeights.top
    );
}

var touchStartX = 0;

function touchHandler(e) {
    if (!userSettings.gesturesEnabled) return;
    
    if (e.type === "touchstart") {
        touchStartX = e.touches[0].clientX;
    } else if (e.type === "touchend") {
        const touchEndX = e.changedTouches[0].clientX;
        const touchDeltaX = touchStartX - touchEndX;

        if (touchDeltaX > userSettings.swipeThreshold) {
            userSettings.invertGestures ? revealNextCloze() : hideLastCloze();
        } else if (touchDeltaX < -userSettings.swipeThreshold) {
            userSettings.invertGestures ? hideLastCloze() : revealNextCloze();
        }
    }
}

if ("ontouchstart" in window) {
    window.addEventListener("touchstart", touchHandler);
    window.addEventListener("touchend", touchHandler);
}

var elements;
var clozes;
var revealed = [];
var originalClozeHTML = [];
var revealOrder = [];

// In AnkiDroid, fixes the error of some Mathjax not rendering and also autoFlip not working
if (detectAnkiPlatform() === "AnkiDroid") {
    // Required for rendering MathJax, only on AnkiDroid
    function replaceMathJax(mathjaxString) {
        return mathjaxString.replace(/\\\\\\[.+\\\\]/g, "").replace(/\\\\\\(.+\\\\\\)/g, "");
    }
}

// Checks if all clozes have been revealed
function allClozesRevealed() {
    return revealed.every(el => el);
}

function revealCloze(i) {
    if (!revealed[i]) {
        originalClozeHTML[i] = elements[i].innerHTML;
        elements[i].innerHTML = clozes[i];
        revealed[i] = true;

        // Add the class "revealed" to the element
        elements[i].classList.add("revealed");

        // Add the index to revealOrder
        revealOrder.push(i);

        // Render MathJax, will only run if it is defined
        // Additional prevention, AnkiDroid error with autoFlip
        if (typeof MathJax !== "undefined") {
            MathJax.typesetPromise([elements[i]]);
        }

        // Update the highlight of the next cloze
        highlightCloze();

        if (allClozesRevealed()) {
            flipToBack();
        }
    }
}

function revealNextCloze() {
    const firstUnrevealed = revealed.findIndex((el) => !el);
    if (firstUnrevealed != -1) {
        if (!isElementInViewport(elements[firstUnrevealed])) {
            smoothScrollTo(elements[firstUnrevealed]);
        } else {
            revealCloze(firstUnrevealed);
        }
    }
}

function hideLastCloze() {
    if (allClozesRevealed()) {
        return;
    }
    
    let i = revealOrder.length - 1;
    if (i !== -1) {
        if (!isElementInViewport(elements[revealOrder[i]])) {
            smoothScrollTo(elements[revealOrder[i]]);
        } else {
            elements[revealOrder[i]].innerHTML = originalClozeHTML[revealOrder[i]];
            revealed[revealOrder[i]] = false;

            // Remove the "revealed" class from the element
            elements[revealOrder[i]].classList.remove("revealed");

            // Remove the last element from revealOrder
            revealOrder.pop();

            // Remove a “highlight-cloze” class
            highlightCloze();
        }
    }
}

function highlightCloze() {
    if (!userSettings.highlightCloze) return;
    
    const firstUnrevealed = revealed.findIndex(el => !el);
    
    elements.forEach((el, i) => 
        el.classList.toggle('highlight-cloze', i === firstUnrevealed)
    );
}

function smoothScrollTo(element) {
    const yOffset = element.getBoundingClientRect().top + window.pageYOffset - (window.innerHeight / 2);
    const startTime = performance.now();
    const duration = userSettings.scrollDuration;

    function animateScroll(currentTime) {
        const elapsedTime = currentTime - startTime;
        const easing = easeInOutQuad(elapsedTime, 0, 1, duration);

        window.scrollTo(0, (1 - easing) * window.pageYOffset + easing * yOffset);

        if (elapsedTime < duration) {
            requestAnimationFrame(animateScroll);
        }
    }

    function easeInOutQuad(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return (c / 2) * t * t + b;
        t--;
        return (-c / 2) * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animateScroll);
}

function flipToBack() {
    const platform = detectAnkiPlatform();
    let shouldFlip = false; // Assumes we shouldn't flip the card initially

    // Checks the autoFlip configuration
    if (userSettings.autoFlip === "all") {
        shouldFlip = true;
    } else if (userSettings.autoFlip === "off") {
        shouldFlip = false;
    } else if (Array.isArray(userSettings.autoFlip)) {
        shouldFlip = userSettings.autoFlip.includes(platform);
    }

    const executeFlip = () => {
        switch (platform) {
            case "AnkiMobile":
                // AnkiMobile doesn't have a public JS API for show answers
                // In app set "topCenter," "midCenter," or "bottomCenter" as tap gestures to show answers and adjust "msg" bellow accordingly
                window.webkit.messageHandlers.cb.postMessage(JSON.stringify({scheme: "ankitap", msg: "midCenter"}));
                break;
            case "AnkiWeb":
                const showAnswerButton = document.querySelector(".btn.btn-primary.btn-lg");
                if (showAnswerButton) {
                    showAnswerButton.click();
                }
                break;
            case "AnkiDroid":
                showAnswer();
                break;
            case "AnkiDesktop":
                pycmd("ans");
                break;
            default:
                console.log("Platform not recognized by flipToBack.");
        }
    };

    if (shouldFlip) {
        if (platform === "AnkiMobile") {
            // For AnkiMobile, apply a delay to ensure compatibility with touch gestures
            setTimeout(executeFlip, 200); // Delay of 200ms, adjustable as needed
        } else {
            executeFlip();
        }
    }
}

function initialize() {
    updateGestureSetting();
    convertSpanToLink();
    elements = document.querySelectorAll(".cloze");
    clozes = Array.from(elements).map(el => el.getAttribute("data-cloze"));

    elements.forEach((el, i) => {
        el.addEventListener("click", () => revealCloze(i));
    });

    revealed.length = elements.length;
    revealed.fill(false);
    originalClozeHTML.length = elements.length;
    originalClozeHTML.fill("");

    // Highlight the first cloze to be revealed
    highlightCloze();
}

if (typeof onUpdateHook !== "undefined") {
    onUpdateHook.push(initialize);
} else {
    initialize();
}

// Listen for key presses to trigger keyboard shortcuts.
document.addEventListener("keydown", handleKeyboardShortcuts, false);

function handleKeyboardShortcuts(event) {
    if (event.defaultPrevented) {
        return;
    }

    if (userSettings.revealNextKeys.includes(event.code)) {
        event.preventDefault();
        revealNextCloze();
    } else if (userSettings.hideLastKeys.includes(event.code)) {
        event.preventDefault();
        hideLastCloze();
    }
}

// User Actions
// In AnkiMobile (v2.0.88+) and AnkiDroid (v2.17.0+), it's possible to map JavaScript functions to gestures or gamepad actions to enhance card interactivity
var userJs1 = revealNextCloze; // User Action 1
var userJs2 = hideLastCloze;   // User Action 2
</script>
Back Template: 
<!-- Prettify by @pranavdeshai: Cloze (back)

Version: 0.1.3
Readme: https://github.com/pranavdeshai/anki-prettify
Links:
- Reddit: https://www.reddit.com/user/Various_Breadfruit48
- GitHub: https://github.com/pranavdeshai
- Buy Me a Coffee: https://www.buymeacoffee.com/pranavdeshai
- Ko-fi: https://ko-fi.com/pranavdeshai

-->
<div class="prettify-flashcard">
  <div class="prettify-deck">{{Deck}}</div>
  <div class="prettify-field prettify-field--front">{{edit:cloze:Content}}</div>
  <div class="prettify-divider prettify-divider--answer"></div>
  {{#Extra 1}}
  <div class="prettify-field prettify-field--back">{{Extra 1}}</div>
  {{/Extra 1}} 
  {{#Extra 2}}
  <div class="prettify-field prettify-field--back">{{Extra 2}}</div>
  {{/Extra 2}}
  {{#CID_Index}}
  <div class="prettify-field prettify-field--back">{{CID_Index}}</div>
  {{/CID_Index}}
  {{#Tags}}
  <div class="prettify-tags">{{clickable:Tags}}</div>
  {{/Tags}}
</div>

<script>
  // Split hierarchical tags
  var tagsContainerEl = document.querySelectorAll('.prettify-tags > *')
  if (tagsContainerEl.length > 0) {
    var tags = []
    tagsContainerEl.forEach((tagEl) => {
      tagEl.classList.add('prettify-tag')
      tags.push(tagEl.innerHTML)
      tags.forEach((tag) => {
        var childTag = tag.split('::').filter(Boolean)
        tagEl.innerHTML = childTag[childTag.length - 1].trim()
      })
    })
  } else {
    tagsContainerEl = document.querySelector('.prettify-tags')
    var tags = tagsContainerEl.innerHTML.split(' ').filter(Boolean)
    var html = ''
    tags.forEach((tag) => {
      var childTag = tag.split('::').filter(Boolean)
      html +=
        "<span class='prettify-tag'>" +
        childTag[childTag.length - 1] +
        '</span>'
    })
    tagsContainerEl.innerHTML = html
  }
</script>

<script>
  // Breadcrumbs to current deck
  var deckEl = document.querySelector('.prettify-deck')
  var subDecks = deckEl.innerHTML.split('::').filter(Boolean)
  html = []
  subDecks.forEach((subDeck) => {
    html.push("<span class='prettify-subdeck'>" + subDeck + '</span>')
  })
  deckEl.innerHTML = html.join('&nbsp;/&nbsp;')
</script>

<script>
function scrollToCloze() {
    var clozeElement = document.querySelector('.cloze');
    if (clozeElement) {
        clozeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', scrollToCloze);
} else {
    scrollToCloze();
}
</script>
Styling: /* Everforest Nostalgic Anki Theme
   Based on Prettify by @pranavdeshai, customized for a minimal nostalgic feel
   while maintaining the Everforest palette.
*/

/* -------------------------------------------------- PREFERENCES */
:root {
  --card-max-width: 40em;
  --card-text-align: left;
  --font-size-regular: 17px;
  --font-size-small: 14px;
  --font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --monospace-font: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --img-width: 55%;
  --img-brightness: 0.85;
  --img-filter: none;
  --border-radius: 0.2em;
  --paper-texture: url("data:image/png;base64,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");
}

/* -------------------------------------------------- COLORS */
.card {
  /* Light theme - More Everforest-focused colors */
  background-color: #fdf6e3; /* Warmer, more forest-like cream */
  --text-fg: #5c6a72; /* Everforest soft text */
  --text-fg-faint: #5c6a72bb; /* More visible faint text */
  --text-bg-selected: #a7c08020; /* Light green selection */
  --card-bg: #f4f0d9; /* More saturated cream background */
  --card-border: #d3c6aa40; /* Softer, more Everforest border */
  --card-box-shadow: #5c6a7215; /* Slightly more visible shadow */
  --divider: #a7c08030; /* Green-tinted divider */
  --tag-fg: #5c6a72; /* Consistent text color for tags */
  --tag-bg: #e9e5d3; /* Warmer tag background */
  --tag-fg-active: #3a514a; /* Darker green for active state */
  --tag-bg-active: #d3c6aa80; /* More visible active background */
  --tag-border: #d3c6aa60;
  --cloze-fg: #2b8c52; /* Everforest green for cloze */
  --cloze-bg: #a7c08015; /* Very light green background */
  --link-fg: #2b8c52; /* Everforest green for links */
  --link-bg: transparent;
  --link-fg-active: #3a9f64; /* Slightly lighter green */
  --link-bg-active: transparent;
  --bold-fg: #3a514a; /* Darker green for bold text */
  --italic-fg: #5c6a72dd; /* Slightly more prominent italic */
  --bold-italic-fg: #3a514a; /* Same as bold for bold-italic */
  --underline-fg: #5c6a72; /* Same as text for underline */
  --highlight-bg: #dbbc7f30; /* Soft yellow highlight */
  --header-fg: #2b8c52; /* Forest green for headers */
}

.card.night_mode {
  /* Dark theme - More Everforest-focused */
  background-color: #2d353b; /* Slightly more saturated dark background */
  --text-fg: #d3c6aa; /* Everforest light text */
  --text-fg-faint: #d3c6aac0; /* More visible faint text */
  --text-bg-selected: #a7c08025; /* Light green selection */
  --card-bg: #343f44; /* More saturated card background */
  --card-border: #3d484d; /* Subtle contrast border */
  --card-box-shadow: #00000030; /* More visible shadow */
  --divider: #a7c08040; /* Green-tinted divider */
  --tag-fg: #d3c6aa; /* Light text for tags */
  --tag-bg: #404c51; /* Darker background for contrast */
  --tag-fg-active: #a7c080; /* Green active text */
  --tag-bg-active: #4a5e53; /* Medium green active background */
  --tag-border: #a7c08040;
  --cloze-fg: #a7c080; /* Everforest light green for cloze */
  --cloze-bg: #3a4b4225; /* Subtle dark green background */
  --link-fg: #83c092; /* Everforest medium green for links */
  --link-bg: transparent;
  --link-fg-active: #a7c080; /* Lighter green */
  --link-bg-active: transparent;
  --bold-fg: #dbbc7f; /* Soft yellow for bold text */
  --italic-fg: #d3c6aaea; /* Slightly more prominent italic */
  --bold-italic-fg: #dbbc7f; /* Same as bold for bold-italic */
  --underline-fg: #d3c6aa; /* Same as text for underline */
  --highlight-bg: #dbbc7f25; /* Soft yellow highlight */
  --header-fg: #a7c080; /* Forest green for headers */
}

/* -------------------------------------------------- BACKGROUND */
.card {
  cursor: default;
  padding: 0.5em 0;
  position: relative;
}
html:not(.mobile) .card {
  padding: 0.5em;
}
.card::-webkit-scrollbar {
  display: none;
}

/* Background texture for nostalgic feel */
.card:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  pointer-events: none;
  background-image: var(--paper-texture);
  z-index: -1;
}

/* -------------------------------------------------- FLASHCARD */
.prettify-flashcard {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-box-shadow) 0px 4px 10px 0px, var(--card-box-shadow) 0px 2px 4px 0px;
  color: var(--text-fg);
  font-family: var(--font-family);
  font-size: var(--font-size-regular);
  line-height: 1.5;
  margin: 0 auto;
  max-width: var(--card-max-width);
  text-align: var(--card-text-align);
  word-wrap: break-word;
  padding: 0.5em;
  position: relative;
}
.prettify-flashcard ::selection {
  background-color: var(--text-bg-selected);
}

/* Subtle decorative edge like old papers/books */
.prettify-flashcard:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 10px;
  width: 10px;
  border-bottom: 1px solid var(--divider);
  border-right: 1px solid var(--divider);
  opacity: 0.5;
}

/* -------------------------------------------------- FIELDS */
.prettify-field {
  margin: 2em;
  position: relative;
}
.mobile .prettify-field {
  margin: 1em;
}

.prettify-field--back {
  color: var(--text-fg-faint);
  font-size: var(--font-size-small);
}

/* Subtle drop cap effect - more refined */
.prettify-field p:first-of-type:first-letter {
  float: left;
  font-size: 2.2em;
  line-height: 0.85;
  margin-right: 0.08em;
  margin-top: 0.05em;
  color: var(--header-fg);
  font-weight: 600;
}

/* -------------------------------------------------- CLOZE */
.cloze {
  background-color: var(--cloze-bg);
  color: var(--cloze-fg);
  padding: 0 0.2em;
  border-bottom: 1px dashed var(--cloze-fg);
}

/* -------------------------------------------------- DECK */
.prettify-deck {
  margin: 2em;
  display: flex;
  color: var(--text-fg-faint);
  font-size: var(--font-size-small);
  white-space: nowrap;
  font-style: italic;
}
.mobile .prettify-deck {
  margin: 1em;
}

.prettify-subdeck {
  text-decoration: none;
  border-bottom: 1px dotted var(--text-fg-faint);
  text-overflow: ellipsis;
  overflow: hidden;
}

/* -------------------------------------------------- TAGS */
.prettify-tags {
  margin: 2em;
  display: flex;
  flex-flow: row wrap;
  font-size: var(--font-size-small);
}
.mobile .prettify-tags {
  margin: 1em;
}

.prettify-tag {
  all: initial;
  background-color: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 0.3em;
  color: var(--tag-fg);
  display: inline-block;
  font-size: var(--font-size-small);
  font-family: var(--monospace-font);
  font-weight: 500;
  margin: 0 0.4em 0.4em 0;
  padding: 0.3em 0.6em;
  transition: all 0.2s ease;
  word-break: break-word;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.prettify-tag:hover {
  background-color: var(--tag-bg-active);
  color: var(--tag-fg-active);
  cursor: pointer;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px var(--card-box-shadow);
}

/* -------------------------------------------------- DIVIDER */
.prettify-divider {
  background-color: transparent;
  border: none;
  border-bottom: 1px dashed var(--divider);
  margin: 1em;
  padding: 0;
  position: relative;
}

/* Decorative center mark on dividers for nostalgic feel */
.prettify-divider:after {
  content: "❧";  /* Floral leaf character for nostalgic feel */
  position: absolute;
  left: 50%;
  top: -0.5em;
  transform: translateX(-50%);
  background-color: var(--card-bg);
  padding: 0 0.5em;
  color: var(--text-fg-faint);
  font-size: 0.9em;
}

.prettify-divider--answer {
  margin: 0 0 1em;
}

/* -------------------------------------------------- IMAGES */
img {
  border-radius: var(--border-radius);
  display: block;
  margin: 1em auto;
  max-width: var(--img-width) !important;
  transition: max-width 0.25s 0.1s, opacity 0.25s 0.1s, filter 0.1s, transform 0s;
  /* Nostalgic photo frame effect */
  box-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 0 0 1px var(--card-border);
  padding: 3px;
  background-color: var(--card-bg);
}
.night_mode img {
  filter: var(--img-filter);
  opacity: var(--img-brightness);
}
img:hover {
  cursor: zoom-in;
  filter: none;
  max-width: 100% !important;
  opacity: 1;
}
img + br {
  display: none;
}
html:not(.mobile) img:active {
  border: 1px solid var(--link-fg-active);
  cursor: zoom-out;
  filter: none;
  left: 0;
  max-width: 95% !important;
  opacity: 1;
  position: fixed;
  top: 0;
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
  z-index: 100;
}

/* -------------------------------------------------- TABLES */
table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid var(--text-bg-selected);
}
table thead {
  background-color: var(--card-border);
}
table tr:nth-of-type(even) {
  background-color: var(--card-border);
}
table tr:first-child th:first-child {
  border-top-left-radius: var(--border-radius);
}
table tr:first-child th:last-child {
  border-top-right-radius: var(--border-radius);
}
table tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius);
}
table tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius);
}
table th {
  border-bottom: solid 1px var(--text-bg-selected);
  border-left: solid 1px var(--text-bg-selected);
  border-top: solid 1px var(--text-bg-selected);
  padding: 0.5em;
  color: var(--header-fg);
}
table th:last-child {
  border-right: solid 1px var(--text-bg-selected);
}
table td {
  border-bottom: solid 1px var(--text-bg-selected);
  border-left: solid 1px var(--text-bg-selected);
  padding: 0.5em;
}
table td:last-of-type {
  border-right: solid 1px var(--text-bg-selected);
}

/* -------------------------------------------------- HYPERLINKS */
a, a:visited {
  text-decoration: none;
  color: var(--link-fg);
  border-bottom: 1px dotted var(--link-fg);
  padding-bottom: 1px;
}
a:hover, a:active {
  text-decoration: none;
  color: var(--link-fg-active);
  border-bottom: 1px solid var(--link-fg-active);
}

/* -------------------------------------------------- FORMATTING */
b {
  color: var(--bold-fg);
  font-weight: 600;
}

i {
  color: var(--italic-fg);
}

b > i,
i > b {
  color: var(--bold-italic-fg);
}

u {
  color: var(--underline-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--underline-fg);
  padding-bottom: 1px;
}

/* Highlight styling */
mark {
  background-color: var(--highlight-bg);
  padding: 0 0.2em;
  border-radius: 0.1em;
}

/* Headers styling */
h1, h2, h3, h4, h5, h6 {
  color: var(--header-fg);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: normal;
}

h1 {
  font-size: 1.7em;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 0.2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.3em;
}

h4, h5, h6 {
  font-size: 1.1em;
}

/* Code blocks */
code, pre {
  font-family: var(--monospace-font);
  background-color: var(--tag-bg);
  border-radius: var(--border-radius);
}

code {
  padding: 0.1em 0.3em;
  font-size: 0.9em;
}

pre {
  padding: 0.5em;
  overflow-x: auto;
  white-space: pre-wrap;
  margin: 1em 0;
  font-size: 0.9em;
}

pre code {
  background-color: transparent;
  padding: 0;
}

/* Lists styling */
ul, ol {
  padding-left: 2em;
}

li {
  margin-bottom: 0.3em;
}

/* Blockquote styling */
blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 3px solid var(--divider);
  color: var(--text-fg-faint);
  font-style: italic;
}

/* -------------------------------------------------- CUSTOM FONTS */
@font-face {
  font-family: "JetBrains Mono";
  src: local("JetBrainsMono-Regular"), url("_JetBrainsMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "JetBrains Mono";
  src: local("JetBrainsMono-Medium"), url("_JetBrainsMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Inter";
  src: local("Inter-Regular"), url("_Inter-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Inter";
  src: local("Inter-Medium"), url("_Inter-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Inter";
  src: local("Inter-SemiBold"), url("_Inter-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Inter";
  src: local("Inter-Italic"), url("_Inter-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: normal;
}
/* -------------------------------------------------- END OF THEME */

I recently modified my Cloze Notetype, and converted into the format of a "Prettier Notetype, with everforest colors, and some custom functionalities", it has some issues. Among others, the most glaring being that it does not scroll to the Clozed part of the card on mobile. The cards are set up in a way, so that on desktop, when I press w, it scrolls to the cloze deletion (if it is not already visible on the current page), and on pressing w again, it shows the back of that card. For AnkiDroid, however, I have to scroll manually and it is visually difficult to see the clozed deletion part. I want you to overhaul the visuals of my note type, keeping my mind the everfores theme, but at the same time, fixing this problem which I have (for AnkiDroid). I want a retro styled card, which is focussed, minimal, and goes well with my everforest rice.