/**
 * Minified by jsDelivr using clean-css v4.2.4.
 * Original file: /gh/edward-martyr/syyon-vencie@8da2bc1/Xdi8Translator.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */

* {
    font-family: FiraGO, "Fira Sans", "MI Lan Pro VF", sans-serif
}

@font-face {
    font-family: "Fira Xdi8";
    src: url(https://cdn.jsdelivr.net/gh/edward-martyr/syyon-vencie@2f449da/FiraXdi8-Regular-subset.ttf) format('ttf')
}

@font-face {
    font-family: 'Fira Xdi8 Variable';
    src: url(https://cdn.jsdelivr.net/gh/edward-martyr/syyon-vencie@2f449da/Fira%20Xdi8%20Variable-subset.woff2) format('woff2-variations');
    font-weight: 100 900
}

xd {
    font-family: "Fira Xdi8 Variable", "Fira Xdi8", FiraGO, "Fira Sans", "Source Sans Variable", "MI Lan Pro VF", sans-serif
}

hr {
    border: 1px solid #a9a9a9;
    background-color: #a9a9a9;
}

a:-webkit-any-link:active {
    color: unset;
}

a:-webkit-any-link {
    color: #5e7ace;
    text-decoration: none;
}

#display-box {
    padding-block: 3vh;
    font-size: 1.5rem;
}

.xd {
    font-family: "Fira Xdi8 Variable", "Fira Xdi8", FiraGO, "Fira Sans", "Source Sans Variable", "MI Lan Pro VF", sans-serif
}

comment {
    color: #a9a9a9;
    font-size: 80%;
    display: inline
}

textarea {
    width: 100%;
    min-width: 10rem;
    border-color: #b3cad6;
    border-radius: .2em
}

textarea:focus {
    outline: 0!important;
    border-color: #b3cad6;
    box-shadow: 0 0 10px #b3cad6
}

button,
textarea {
    font-family: inherit;
    font-size: 95%
}

.radiocontainer input:checked~.checkmark~.radiolabel {
    color: #304c9e
}

.radiocontainer input:checked~.checkmark~.radiolabel comment {
    color: #777
}

.xdnum {
    font-family: "Fira Xdi8 Variable", "Fira Xdi8", FiraGO, "Fira Sans", "Source Sans Variable", "MI Lan Pro VF", sans-serif;
    font-weight: var(--text-weight);
    font-variation-settings: "wght" var(--text-weight)
}

caps {
    font-family: "Fira Xdi8 Variable", "Fira Xdi8", FiraGO, "Fira Sans", "Source Sans Variable", "MI Lan Pro VF", sans-serif;
    -moz-font-feature-settings: 'case';
    -webkit-font-feature-settings: 'case';
    font-feature-settings: 'case' on
}

:root {
    --text-weight: 400;
    --text-width: 100;
    --text-slant: 0
}

html {
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: inherit
}

body {
    margin: 0
}

.container {
    margin: 0 auto;
    max-width: 60rem;
    padding: 3rem;
    text-align: justify
}

.demo-text {
    font-family: "Fira Xdi8 Variable", "Fira Xdi8", FiraGO, "Fira Sans", "Source Sans Variable", "MI Lan Pro VF", sans-serif;
    font-size: 120%;
    font-weight: var(--text-weight);
    font-variation-settings: "wght" var(--text-weight);
    margin: 0
}

.controls {
    margin-top: 3rem
}

.slider-container {
    margin-top: -1rem
}

.slider-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem
}

.slider-label {
    font-size: 120%;
    font-style: normal;
    font-variation-settings: "slnt" var(--text-slant);
    font-weight: 400
}

.output {
    font-style: normal;
    font-variation-settings: "slnt" var(--text-slant);
    font-weight: 400
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: .5rem;
    border-radius: .25rem;
    background: #dee7ec;
    outline: 0
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #456bd9;
    cursor: pointer
}

.slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #456bd9;
    cursor: pointer
}

.slider::-webkit-slider-thumb:active {
    cursor: -webkit-grabbing
}

.slider::-moz-range-thumb:active {
    cursor: -moz-grabbing
}

.button {
    background: #fff;
    border: 3px solid #dee7ec;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 400;
    opacity: 1;
    padding: .25rem .75rem;
    transition: background ease-in .2s
}

.button:focus,
.button:hover {
    background: #eaf0f3
}

.radiocontainer {
    display: block;
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.radiocontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkmark {
    position: absolute;
    top: .25em;
    left: .1em;
    height: 1em;
    width: 1em;
    background-color: #e8f2f7;
    border-radius: 50%
}

.radiocontainer:hover input~.checkmark {
    background-color: #d2e5ee
}

.radiocontainer input:checked~.checkmark {
    background-color: #456bd9
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.radiocontainer input:checked~.checkmark:after {
    display: block
}

.radiocontainer .checkmark:after {
    top: .3em;
    left: .3em;
    height: .4em;
    width: .4em;
    border-radius: 50%;
    background: #e8f2f7
}


/*# sourceMappingURL=/sm/1e243c041e50fe71c325277e0fb771618733263c3e0d88efb3b4fbc5079dec44.map */