Ah, the previous message got messed up because of some crash on my end. So, what I was saying is I do have a template now but the JS comes from o3. As I don’t know how JS works if you can, I’d like you to check the JS.
Here’s a preview of what it looks like:
Here are the templates:
Front template
<div class="prettify-flashcard">
<div class="prettify-deck">{{Subdeck}}</div>
<hr class="prettify-divider">
<div class="prettify-field center-text">
{{Question}}
</div>
<div class="prettify-field option-group center-text">
{{#Option1}}
<input type="radio" id="opt1" name="mcq" value="1">
<label for="opt1">{{Option1}}</label>
{{/Option1}}
{{#Option2}}
<input type="radio" id="opt2" name="mcq" value="2">
<label for="opt2">{{Option2}}</label>
{{/Option2}}
{{#Option3}}
<input type="radio" id="opt3" name="mcq" value="3">
<label for="opt3">{{Option3}}</label>
{{/Option3}}
{{#Option4}}
<input type="radio" id="opt4" name="mcq" value="4">
<label for="opt4">{{Option4}}</label>
{{/Option4}}
</div>
<div class="last-row">
{{#Tags}}
<div class="prettify-tags">{{clickable:Tags}}</div>
{{/Tags}}
<div class="prettify-report">
<!-- report link svg. will put later -->
</div>
</div>
</div>
<script>
// clean up first, then do our thing
try {
sessionStorage.removeItem('anki-mcq-selected');
sessionStorage.removeItem('anki-mcq-order');
} catch (_) {}
(function(){
function shuffleOptions(container) {
const inputs = Array.from(container.querySelectorAll('input[type=radio]'));
const opts = inputs.map(inp => {
const lbl = container.querySelector(`label[for="${inp.id}"]`);
if (!lbl) {
console.warn('Label for', inp.id, 'not found');
}
// make labels keyboard-focusable
lbl.tabIndex = 0;
lbl.addEventListener('keydown', e => {
if (e.key === ' ' || e.key === 'Enter') {
inp.checked = true;
inp.dispatchEvent(new Event('change'));
}
});
return { inp, lbl };
});
// Fisher–Yates shuffle
for (let i = opts.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[opts[i], opts[j]] = [opts[j], opts[i]];
}
// persist order
try {
sessionStorage.setItem('anki-mcq-order', JSON.stringify(opts.map(o=>o.inp.value)));
} catch (err) {
console.warn('Cannot write mcq order to storage:', err);
}
// re-append
opts.forEach(({inp, lbl}) => {
container.appendChild(inp);
container.appendChild(lbl);
});
// store selection
opts.forEach(({inp}) => {
inp.addEventListener('change', e => {
try {
sessionStorage.setItem('anki-mcq-selected', e.target.value);
} catch (err) {
console.warn('Cannot write mcq selection to storage:', err);
}
});
});
}
const container = document.querySelector('.option-group');
if (!container) return console.warn('MCQ container not found');
shuffleOptions(container);
})();
</script>
<script>
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>
Back template
<div class="prettify-flashcard">
<div class="prettify-deck">{{Subdeck}}</div>
<hr class="prettify-divider">
<div class="prettify-field center-text">
{{Question}}
</div>
<div class="prettify-field option-group center-text">
{{#Option1}}<label>{{Option1}}</label>{{/Option1}}
{{#Option2}}<label>{{Option2}}</label>{{/Option2}}
{{#Option3}}<label>{{Option3}}</label>{{/Option3}}
{{#Option4}}<label>{{Option4}}</label>{{/Option4}}
</div>
{{#Explanation}}
<hr class="prettify-divider">
<h3>Explanation</h3>
<div class="prettify-field center-text">
{{Explanation}}
</div>
{{/Explanation}}
<div class="last-row">
{{#Tags}}<div class="prettify-tags">{{clickable:Tags}}</div>{{/Tags}}
<div class="prettify-report"><!-- report link svg. will put later --></div>
</div>
</div>
<script>
(function(){
function renderResults(container, order, picked, correctIdx) {
const labels = Array.from(container.querySelectorAll('label'));
// reorder to match front shuffle
order.forEach(val => {
const idx = parseInt(val, 10) - 1;
if (labels[idx]) {
container.appendChild(labels[idx]);
}
});
labels.forEach((lbl, i) => {
const idx = String(i + 1);
const isCorrect = idx === correctIdx;
const isPicked = idx === picked;
if (isCorrect && isPicked) {
lbl.insertAdjacentHTML('beforeend',
'<span class="badge correct-response">Correct response!</span>'
);
lbl.classList.add('highlight-correct');
}
else {
if (isCorrect) {
lbl.insertAdjacentHTML('beforeend',
'<span class="badge correct-answer">Correct answer</span>'
);
lbl.classList.add('highlight-correct');
}
if (isPicked) {
lbl.insertAdjacentHTML('beforeend',
'<span class="badge your-answer">Your answer</span>'
);
lbl.classList.add(isPicked !== correctIdx ? 'highlight-wrong' : 'highlight-correct');
}
}
});
}
const container = document.querySelector('.option-group');
if (!container) return console.warn('MCQ results container not found');
let order = [];
let picked = null;
try {
order = JSON.parse(sessionStorage.getItem('anki-mcq-order') || '[]');
picked = sessionStorage.getItem('anki-mcq-selected');
} catch (err) {
console.warn('Failed to read mcq state:', err);
}
const correctIdx = String(parseInt('{{Correct}}', 10));
renderResults(container, order, picked, correctIdx);
})();
</script>
<script>
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>
Styling
/* --------------------------------------------------------- MCQS
*/
.option-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75em;
margin-top: 1em;
}
@media (max-width: 600px) {
.option-group {
grid-template-columns: 1fr;
}
}
.option-group input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.option-group label {
padding: 0.75em;
background-color: var(--tag-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
cursor: pointer;
transition: transform 0.1s ease, border-color 0.2s;
}
.option-group label:active {
transform: scale(0.97);
}
.option-group input[type="radio"]:checked + label {
border-color: var(--text-fg);
background-color: var(--card-bg);
}
/* Make labels positioning contexts */
.option-group label {
position: relative;
padding: 0.75em;
/* ensure the badge can overlap cleanly */
overflow: visible;
}
/* Adjust the existing badge rules */
.option-group .badge {
position: absolute;
top: -1px; /* sit on the border */
left: -1px; /* sit on the border */
padding: 0.1em 0.4em;
font-size: 0.75em;
border-radius: 0.25em 0.25em 0.25em 0; /* square cut where it overlaps */
color: white;
z-index: 1;
}
/* Match badge background + border to the label’s correct/your-answer border color */
.badge.correct-answer {
background: var(--scheme-green);
border: 1px solid var(--scheme-teal);
color: var(--scheme-crust);
}
.badge.your-answer {
background: var(--scheme-red);
border: 1px solid var(--scheme-rosewater);
color: var(--scheme-crust);
}
/* single “correct response” badge when picked=correct */
.badge.correct-response {
background: var(--scheme-green);
border: 1px solid var(--scheme-teal);
color: var(--scheme-crust);
}
/* highlight borders via JS-added classes */
.highlight-correct {
border-color: var(--scheme-green) !important;
background: var(--card-bg) !important;
}
.highlight-wrong {
border-color: var(--scheme-red) !important;
background: var(--card-bg) !important;
}
/* -------------------------------------------------- PREFERENCES */
:root {
--card-max-width: 40em;
--card-text-align: left;
--font-size-regular: 16px;
--font-size-small: 14px;
--img-width: 50%;
--img-brightness: 0.95;
--img-filter: none;
--font-weight: 500;
--table-radius: 0.8em;
--card-radius: 8px;
--mochi-toggle: block;
--option-correct-border: var(--scheme-green);
}
.mobile {
--card-max-width: 40em;
--card-text-align: left;
--font-size-regular: 16px;
--font-size-small: 14px;
--img-width: 50%;
--img-brightness: 0.95;
--img-filter: none;
--font-weight: 500;
--table-radius: 0.8em;
--card-radius: 8px;
--mochi-mobile-toggle: block;
}
/*
--------------------------------------------- THEME VARIABLES
*/
.card {
--card-bg: #EFF1F5;
--text-fg: #4C4F69;
--text-fg-faint: #6C6F85;
--text-bg-selected: #BCC0CC;
--card-border: #BCC0CC;
--card-box-shadow: #0000001f;
--divider: #BCC0CC;
--tag-fg: #5C5F77;
--tag-bg: #9CA0B0;
--tag-fg-active: #DE9584;
--tag-bg-active: #ACB0BE;
--tag-border: transparent;
--cloze-fg: #E49320;
--cloze-bg: #EFF1F5;
--link-fg: #2A6EF5;
--link-bg: transparent;
--link-fg-active: #04A5E5;
--link-bg-active: transparent;
--bold-fg: #E49320;
--italic-fg: #40A02B;
--h1-fg: #40A02B;
--h2-fg: #179299;
--h3-fg: #8839EF;
--h4-fg: #D20F39;
--h5-fg: #04A5E5;
--bold-italic-fg: var(--bold-fg);
--highlight1: #E64553;
--highlight2: #40A02B;
--highlight3: #7287FD;
--highlight4: #FE640B;
--scheme-rosewater: #DE9584;
--scheme-flamingo: #DD7878;
--scheme-pink: #EC83D0;
--scheme-mauve: #8839EF;
--scheme-red: #D20F39;
--scheme-maroon: #E64553;
--scheme-peach: #FE640B;
--scheme-yellow: #E49320;
--scheme-green: #40A02B;
--scheme-teal: #179299;
--scheme-sky: #04A5E5;
--scheme-sapphire: #209FB5;
--scheme-blue: #2A6EF5;
--scheme-lavender: #7287FD;
--scheme-crust: #DCE0E8;
--scheme-grey: #6C6F85;
--mark-color: rgba(228, 147, 32, 0.2);
}
.nightMode.card {
--card-bg: #2e2f31;
--text-fg: #ffffffe6;
--text-fg-faint: #ffffffb3;
--text-bg-selected: #ffffff1f;
--card-border: #ffffff0a;
--card-box-shadow: #0000001f;
--divider: #ffffff1f;
--tag-fg: #ffffffb3;
--tag-bg: #ffffff14;
--tag-fg-active: #ffffff;
--tag-bg-active: #ffffff1f;
--tag-border: transparent;
--cloze-fg: #F9E2AF;
--cloze-bg: #2e2f31;
--link-fg: #87B0F9;
--link-bg: transparent;
--link-fg-active: #89DCEB;
--link-bg-active: transparent;
--bold-fg: #F9E2AF;
--italic-fg: #A6E3A1;
--h1-fg: #A6E3A1;
--h2-fg: #94E2D5;
--h3-fg: #CBA6F7;
--h4-fg: #F38BA8;
--h5-fg: #89DCEB;
--bold-italic-fg: var(--bold-fg);
--highlight1: #EBA0AC;
--highlight2: #A6E3A1;
--highlight3: #B4BEFE;
--highlight4: #FAB387;
--scheme-rosewater: #F5E0DC;
--scheme-flamingo: #F2CDCD;
--scheme-pink: #F5C2E7;
--scheme-mauve: #CBA6F7;
--scheme-red: #F38BA8;
--scheme-maroon: #EBA0AC;
--scheme-peach: #FAB387;
--scheme-yellow: #F9E2AF;
--scheme-green: #A6E3A1;
--scheme-teal: #94E2D5;
--scheme-sky: #89DCEB;
--scheme-sapphire: #74C7EC;
--scheme-blue: #87B0F9;
--scheme-lavender: #B4BEFE;
--scheme-crust: #000000;
--scheme-grey: #BDBDBD;
--mark-color: rgba(249, 226, 175, 0.2);
}
/*
----------------------------------------------- CARD STYLING
*/
/* -------------------------------------------------- BACKGROUND */
.card {
cursor: default;
padding: 0.5em 0.3em;
}
html:not(.mobile) .card {
padding: 0.5em;
}
.card::-webkit-scrollbar {
display: none;
}
/* --------------------------------------------------- FLASHCARD */
.prettify-flashcard {
background-color: var(--card-bg);
border-radius: var(--card-radius);
border: 1px solid var(--card-border);
box-shadow: var(--card-box-shadow) 0px 7px 14px 0px, var(--card-box-shadow) 0px 3px 6px 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: normal;
}
.prettify-flashcard ::selection {
background-color: var(--text-bg-selected);
}
.cloze-type {
text-align: left;
}
/* ------------------------------------------------------ FIELDS
*/
.prettify-field {
margin: 1em;
margin-bottom: 1em;
overflow: auto;
}
.mobile .prettify-field {
margin: 0.25em;
margin-bottom: 0.75em;
}
.prettify-field:last-of-type {
margin-bottom: 1.4em;
}
/* ------------------------------------------------------- CLOZE
*/
.cloze {
border-radius: 0.25em;
font-weight: bold;
background-color: inherit;
color: var(--cloze-fg);
padding: 0 0.1em;
}
/* -------------------------------------------------------- DECK
*/
.prettify-deck {
margin: 0.75em;
margin-left: 1em;
margin-bottom: 0.5em;
display: flex;
color: var(--text-fg-faint);
font-size: var(--font-size-small);
white-space: nowrap;
text-overflow: ellipsis;
overflow: scroll;
}
.prettify-deck::-webkit-scrollbar {
display: none;
}
.mobile .prettify-deck {
margin: 1em;
}
.prettify-subdeck {
text-overflow: ellipsis;
overflow: clip;
min-width: fit-content;
}
/* --------------------------------------------------------- TAGS
*/
.prettify-tags {
margin: 0.5em;
margin-left: 1em;
margin-bottom: 1em;
display: flex;
flex-flow: row wrap;
font-size: var(--font-size-small);
}
.mobile .prettify-tags {
margin: 0.3em;
}
.prettify-tag {
all: initial;
background-color: var(--tag-bg);
border-radius: 0.2em;
color: var(--tag-fg);
display: inline;
font-size: var(--font-size-small);
font-family: var(--font-family);
margin: 0.25em;
padding: 0.25em;
transition: all 0.25s;
word-break: break-word;
}
.prettify-tag:hover {
background-color: var(--tag-bg-active);
color: var(--tag-fg-active);
cursor: pointer;
}
.extra {
color: var(--text-fg-faint);
font-size: var(--font-size-small);
}
/* ----------------------------------------------------- DIVIDER
*/
.prettify-field hr {
border: none;
border-bottom: 1px dashed var(--divider);
background-color: transparent;
width: 80%;
}
.prettify-divider {
background-color: transparent;
border: none;
border-bottom: 1px dashed var(--divider);
padding: 0;
}
/* ----------------------------------------------------- TABLES
*/
table {
border-collapse: separate;
border-spacing: 0;
min-width: 60%;
position: relative;
box-align: center;
margin-left: auto;
margin-right: auto;
overflow: scroll;
border: 1px solid;
text-align: center;
border-color: var(--card-border);
margin-top: 10px;
}
td,
th {
border: 1px solid;
text-align: center;
border-color: var(--card-border);
}
tr:nth-of-type(odd) {
background-color: var(--card-box-shadow);
}
/* ------------------------------------------------------- LINKS */
a,
a:visited {
text-decoration: none;
color: var(--link-fg);
}
a:hover,
a:active {
text-decoration: underline;
color: var(--link-fg-active);
}
/* -------------------------------------------------- FORMATTING */
/* ----------------------------------------------------- HEADERS
*/
h1 {
color: var(--h1-fg);
margin: 0em;
text-align: center;
}
h2 {
color: var(--h2-fg);
margin: 0em;
text-align: center;
}
h3 {
color: var(--h3-fg);
margin: 0em;
text-align: center;
}
h4 {
color: var(--h4-fg);
margin: 0em;
text-align: center;
}
h5 {
color: var(--h5-fg);
margin: 0em;
text-align: center;
}
h6 {
color: var(--h6-fg);
margin: 0em;
text-align: center;
}
/*
-------------------------------------------------- HIGHLIGHT */
hl {
color: var(--highlight1);
}
hl2 {
color: var(--highlight2);
}
hl3 {
color: var(--highlight3);
}
hl4 {
color: var(--highlight4);
}
/*
------------------------------------------- OTHER FORMATTING */
pre {
font-size: var(--font-size-small);
background-color: var(--cloze-bg);
padding: 10px;
border-radius: calc(var(--card-radius) * 0.5);
max-width: fit-content;
min-width: 80%;
margin: 0 auto;
}
.title-field {
color: var(--text-fg);
font-size: 140%;
font-weight: bold;
}
:is(h1, h2, h3, h4, h5, h6) + :is(ul, ol) {
margin-block-start: 5px;
}
ol li::marker {
color: var(--scheme-rosewater);
font-weight: bold;
}
mark {
background-color: var(--mark-color);
border-radius: 3px;
color: var(--text-fg);
}
#hidden {
display: none;
}
/* ------------------------------------------------------- INPUT */
input {
background-color: var(--card-bg);
border-width: 2px;
border-style: solid;
border-color: var(--card-border);
border-radius: 7px;
min-height: 25px;
font-family: var(--font-family) !important;
font-size: var(--font-size-regular) !important;
color: var(--text-fg-faint);
padding: 10px;
}
input::selection {
background-color: rgb(var(--ctp-blue)) !important;
color: var(--card-bg) !important;
}
/*
----------------------------------------------- REPLAY BUTTON
*/
.replay-button svg circle {
fill: var(--card-bg);
stroke: var(--tag-bg);
stroke-width: 4px;
}
.replay-button svg path {
fill: var(--tag-bg);
stroke: var(--tag-bg);
}
.morsecode {
padding: 15px 20px;
margin-left: 5px;
margin-right: 5px;
border-radius: 10px;
background-color: rgba(220, 224, 232, 0.4);
border: solid 2px var(--card-border);
}
.replay-button svg {
padding: 20px;
width: 0px;
height: 0px;
background-color: var(--text-fg);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolygon points='10 8 16 12 10 16 10 8'%3E%3C/polygon%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
}
/*
--------------------------------------------- CENTER TEXT DIV
*/
.center-text {
text-align: center;
}
.center-text ul,
.center-text ol {
padding-inline-start: 0;
}
.center-text ul li,
.center-text ol li {
width: fit-content;
margin: 0 auto;
}
.shift-right {
padding-left: 20px;
}
.shift-right :is(ul, ol) {
padding-inline-start: 15px;
}
.shift-right :is(ul, ol):first-child {
margin-block-start: 5px;
}
.shift-right .center-text {
padding-left: 0;
}
.shift-right .center-text > :is(ul, ol) {
padding-inline-start: 5px;
}
.shift-right .center-text > :is(ul, ol):first-child {
margin-block-start: 5px;
}
.center-text .shift-right {
padding-left: 0;
}
.center-text .shift-right > :is(ul, ol) {
padding-inline-start: 5px;
}
.center-text .shift-right > :is(ul, ol):first-child {
margin-block-start: 5px;
}
/*
----------------------------------------------- FEEDBACK FORM
*/
.prettify-report {
display: flex;
justify-content: end;
margin-top: auto;
margin-left: auto;
margin-right: 0.3em;
}
/*
------------------------------------------------- LAST ROW DIV
*/
.last-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/*
------------------------------------------------------- MOCHI */
.prettify-flip {
color: var(--text-fg-faint);
font-size: var(--font-size-small);
padding: 1em 0;
background: rgba(255, 255, 255, 0.0196078431);
border-top: 1px dashed var(--divider);
display: var(--mochi-mobile-toggle, var(--mochi-toggle, none));
}
.prettify-hint {
color: var(--text-fg-faint);
opacity: 0.5;
font-size: var(--font-size-small);
font-family: var(--font-family);
padding-top: 1em;
display: var(--mochi-mobile-toggle, var(--mochi-toggle, none));
}
.prettify-flip svg {
height: 20px;
width: 20px;
margin-bottom: calc(-13px + 0.5 * var(--font-size-small));
}
.prettify-hint svg {
height: 20px;
width: 20px;
margin-bottom: calc(-13px + 0.5 * var(--font-size-small));
}
html:not(.mobile) .prettify-hint.touch {
display: none;
}
html.mobile .prettify-hint.key {
display: none;
}
/*
--------------------------------------- FORMAT ERROR MESSAGES */
div:has(> [href^="https://docs.ankiweb.net"], [href^="https://anki.tenderapp.com"], [href^="https://faqs.ankiweb.net"]) {
text-align: center;
}
/*
---------------------------------------------------- BUTTONS */
button,
.isMac button {
color: var(--tag-fg);
border-radius: 0.2em;
box-shadow: none;
border: 1px solid var(--card-border);
border-bottom-color: var(--card-border);
font-size: var(--font-size-small);
font-family: inherit;
transition: all 0.25s;
background: none;
background-color: var(--tag-bg);
}
button:active, button:hover,
.isMac button:active,
.isMac button:hover {
background: none;
background-color: var(--tag-bg-active);
color: var(--tag-fg-active);
cursor: pointer;
}
/*
-------------------------------------- ADJUSTMENTS FOR MOBILE
*/
.mobile .card,
.mobile #content {
font-size: 120%;
margin: 0;
}
/*
----------------------------------------------------- IMAGES */
img.zoomable-image,
.zoomable-image img {
border-radius: 0.25em;
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;
}
.nightMode img.zoomable-image,
.nightMode .zoomable-image img {
filter: var(--img-filter);
opacity: var(--img-brightness);
}
img.zoomable-image:hover,
.zoomable-image img:hover {
cursor: zoom-in;
filter: none;
max-width: 100% !important;
opacity: 1;
}
img.zoomable-image + br,
.zoomable-image img + br {
display: none;
}
html:not(.mobile) img.zoomable-image:active,
html:not(.mobile) .zoomable-image 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;
}
/* -------------------------------------------------- LOAD FONTS */
@font-face {
font-family: 'Lexend';
src: url('_LexendDeca.ttf');
font-weight: 350;
}
/*
----------------------------------------------- SELECT FONTS */
:root {
--font-family: "Lexend";
}
.mobile {
--font-family: "Lexend";
}
Pinging @SuhasK because they wanted to help too.
