.card{background-color:rgba(0,0,0,.2);border:2px solid rgba(255,255,255,.2);padding:1em;position:relative}.card a{text-decoration:none;color:var(--text-color)}.card a h2{font-size:1.5em;margin-bottom:.5em}.card a p{font-size:.9em;margin-bottom:1em}.card.external h2::after{content:" ";background-image:url("img/external-icon.svg");background-size:contain;background-repeat:no-repeat;image-rendering:pixelated;display:inline-block;width:16px;height:16px;margin-left:.4em}.card-container{display:flex;flex-wrap:wrap;gap:1em;justify-content:center}.content{padding:2% 5%}.inputs{display:flex;flex-direction:row;gap:1.5em;margin:2em auto;width:80%;align-items:flex-end}.file-input label{display:block;font-size:1.1em;color:var(--text-color);margin-bottom:.5em}.file-input label input[type=file]{width:100%;padding:.8em;background-color:var(--background-secondary-color);border:2px solid rgba(255,255,255,.2);color:var(--text-color);outline:0;font-size:.9em}.file-input label input[type=file]::placeholder{color:var(--placeholder-color)}.file-input label input[type=file]:hover{background-color:var(--background-primary-color)}.file-input label input[type=file]:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,120,215,.2)}.submit-button{text-align:center}.submit-button button{background-color:var(--primary-color);color:var(--text-color);padding:.8em 1.2em;border:2px solid rgba(255,255,255,.2);cursor:pointer;font-size:1.1em}.submit-button button:hover{filter:brightness(140%)}.submit-button button:focus{outline:0;box-shadow:0 0 0 3px rgba(0,120,215,.3)}.submit-button.small button{padding:.1em 1em;font-size:.8em}.required{position:relative;color:var(--primary-color)}.side-by-side{display:flex;flex-direction:row;gap:1em}.side-by-side textarea{flex-grow:1;resize:none;border:2px solid rgba(0,0,0,.2);background:rgba(0,0,0,.4);padding:.5em;font-family:monospace}h1{margin-top:.2em}textarea{tab-size:4}.psych-char-converter .file-input{display:none}.psych-char-converter .convert-folder-button,.psych-char-converter .file-label,.psych-char-converter .save-button{display:inline-block;background-color:var(--primary-color);cursor:pointer;color:var(--text-color);padding:.8em 1.2em;border:2px solid rgba(255,255,255,.2)}.psych-char-converter .convert-folder-button:hover,.psych-char-converter .file-label:hover,.psych-char-converter .save-button:hover{filter:brightness(140%)}.psych-char-converter .file-name{font-size:14px}#dropzone{position:relative}#dropzone.highlight::after{content:"Drop your character here";font-size:1.5em;color:var(--text-color);display:flex;align-items:center;justify-content:center;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;background-color:rgba(255,255,255,.1803921569);transform:scale(1.05);border:4px dashed #fff}