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

* {
    font-family: 'Fira Xdi8 Variable', "FiraGO", "Fira Sans", "MI Lan Pro VF", sans-serif;
    line-height:1.3em;
    color: rgb(35, 48, 59);
}

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

caps {
    -moz-font-feature-settings: 'case'; 
    -webkit-font-feature-settings: 'case'; 
    font-feature-settings: 'case' on; 
    color: inherit;
}

html,
body {
    width: 100%;
    height: 100%;
}
html {
    display: table;
}
body {
    display: table-cell;
    background: rgb(241, 241, 241);
}

h1 span {
    font-weight: 800;
    background: linear-gradient(to top, rgba(252, 117, 28, 0.877) 52%, transparent 52%);
    padding-left: 7px;
    margin-left: -7px;
    padding-right: 7px;
    margin-right: -7px;
}
span {
    color: inherit;
}

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="radio"]:checked {
    outline: none !important;
    background-color: rgb(162, 176, 221);
}
input[type="radio"]+label{ 
    /* position: fixed; */
    color: rgb(74, 98, 117);
} 
input[type="radio"]+label:hover {
    background-color: rgb(216, 228, 240);
    padding-left: 7px;
    margin-left: -7px;
    padding-right: 7px;
    margin-right: -7px;
    padding-top: 2px;
    margin-top: -2px;
    padding-bottom: 2px;
    margin-bottom: -2px;
}
input[type="radio"]:checked+label{ 
    font-weight: bold; 
    color: rgb(46, 54, 61);
} 

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="checkbox"]:checked {
    outline: none !important;
    background-color: rgb(162, 176, 221);
}
input[type="checkbox"]+label{ 
    font-weight: bold; 
    color: rgb(46, 54, 61);
} 
input[type="checkbox"]+label:hover {
    background-color: rgb(216, 228, 240);
    padding-left: 7px;
    margin-left: -7px;
    padding-right: 7px;
    margin-right: -7px;
    padding-top: 2px;
    margin-top: -2px;
    padding-bottom: 2px;
    margin-bottom: -2px;
}

button {
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.pageContainer{
    max-width: 500px;
    margin: auto;
    padding:3rem;
    padding-right: 3rem;
}

.radioContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1em;
}

.radioGroup{
    display:inline-block;
    align-items: center;
    overflow-x: visible;
    white-space:nowrap;
}
#radioGroup1{
    margin-left: -0.7em;
    margin-right: -0.35em;
}

.arrow{
    display:inline-block;
    align-items: center;
    font-size: 400%;
    font-weight: 100;
    padding-left: 1rem;
    padding-right: 1rem;
    color: rgb(240, 155, 98);
}

.textarea {
    border: 1px solid rgb(138, 157, 219);
    font-family: inherit;
    font-size: inherit;
    padding: 3px 6px;
    display: block;
    width: 100%;
    overflow: hidden;
    resize: both;
    min-height: 5.2em;
    line-height: 1.3em;
    resize: none;
    border-radius: 0.3em;
    margin-left: -7px;
    margin-right: -7px;
    white-space: pre-wrap;
}
.textarea:focus {
    outline: none !important;
    border-color: rgb(131, 150, 212);
    box-shadow: 0 0 5px rgb(138, 157, 219);
}

#result {
    min-height: 1.3em;
    /* white-space: pre; */
}

.placeholder {
    color: rgb(126, 136, 168);
    font-weight: 350;
}

#inputLable{ 
    font-weight: 300;
    /* font-size: 1.2rem; */
    color: rgb(46, 54, 61);
    background-color: rgb(232, 236, 240);
    padding-left: 14px;
    margin-left: -7px;
    padding-right: 14px;
    margin-right: -7px;
    padding-top: 6px;
    margin-top: -3px;
    padding-bottom: 6px;
    margin-bottom: -3px;
} 
#inputLable:hover {
    background-color: rgb(216, 228, 240);
    padding-left: 14px;
    margin-left: -7px;
    padding-right: 14px;
    margin-right: -7px;
    padding-top: 6px;
    margin-top: -3px;
    padding-bottom: 6px;
    margin-bottom: -3px;
}

#oldlink {
    padding-top: 2.6em;
    font-size: small;
}
#oldlink a {
    color: rgb(131, 150, 212);
}