:root{--primary-color: #f3f7f7;--secondary-color: #718c7e;--tertiary-color: #7da8c3;--text-primary: #ffffff;--text-secondary: #718c7e;--text-tertiary: #525252;--font-size-primary: 2rem;--font-size-secondary: 1.5rem;--font-size-tertiary: 1.25rem}body{margin:0;background-color:var(--secondary-color)}h1,h2{margin:0;padding:0}h1{font-size:var(--font-size-primary)}h2{font-size:var(--font-size-secondary)}textarea::placeholder{color:var(--text-tertiary)}textarea:hover,input:hover,textarea:active,input:active,textarea:focus,input:focus,button:focus,button:active,button:hover,label:focus,.btn:active,.btn.active{outline:0px!important;-webkit-appearance:none;box-shadow:none!important}.header{background-color:var(--primary-color);height:7rem;width:auto;display:flex;align-items:center;justify-content:space-between;padding:0 2rem}.header h1{font-family:"Jacquard 24",system-ui;font-size:4rem;color:var(--text-secondary)}.translation-container{height:60vh;display:flex;flex-direction:column;gap:.5rem}#dragon-head{pointer-events:none;z-index:20;position:absolute;height:10rem;top:17.26%;left:13%}#dragon-body{position:absolute;height:8rem;width:18rem;top:60%;left:40.5%;z-index:-1}#dragon-tail{transform:rotate(180deg);position:absolute;height:8rem;top:17.26%;left:82%;z-index:-1}.translation-header-container{display:flex;flex-direction:row;justify-content:space-between;margin:6rem 2rem 0;text-transform:uppercase;color:var(--text-primary)}.translation-header-container .left-header{width:48%;padding-left:20px;font-size:var(--font-size-secondary);font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}.translation-header-container .middle-header{display:flex;justify-content:center;align-items:center;text-align:center;width:4%;cursor:pointer;margin-left:0}.translation-header-container .right-header{width:48%;padding-left:20px;font-size:var(--font-size-secondary);font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}.translation-box-container{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4%;height:60%;margin:0 2rem;font-size:var(--font-size-tertiary)}.translation-box{height:100%;width:100%;border-radius:1rem;color:var(--text-tertiary);display:flex}.translation-text-container{position:relative;color:inherit;width:100%;height:100%}.input-text-area,.text-display{width:100%;height:100%;margin:inherit;padding:12px 20px;box-sizing:border-box;border-radius:inherit;border-style:inherit;background-color:inherit;font-size:inherit;resize:none;font-family:inherit}.input-text-area{color:transparent;z-index:1}.text-display{position:absolute;top:0;left:0;color:var(--text-tertiary);z-index:2;pointer-events:none}.word-span{pointer-events:all;cursor:pointer}.clear-icon{padding:10px 14px 0 0;cursor:pointer}.output-text-area{width:100%;height:100%;margin:inherit;padding:12px 20px}#box-from,#box-to{background-color:var(--primary-color);z-index:10}.rules-container{padding:1rem 2rem 2rem}.rules-header-container{background-color:var(--primary-color);width:max-content;padding:5px 10px}.rules-header-container h2{font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif;color:var(--text-secondary);text-transform:uppercase}.rules-content-container{border-top:3px solid var(--secondary-color);background-color:var(--primary-color);padding:12px 20px;font-size:var(--font-size-tertiary);color:var(--text-tertiary)}