:root{--foreground: #FFFFFF;--background: #E5E5E5;--accent: #1899D6;--accent-light: #1CB0F6;--correct: #7ba71f;--correct-light: #99d618;--incorrect: #d61899;--option: #535a5e;background-color:var(--background);font-family:din-round,sans-serif}h1{font-family:din-round,sans-serif;font-weight:700;letter-spacing:.8px;text-align:center;text-transform:capitalize}#app{display:flex;justify-content:center}.box{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:25px}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.fade-in{animation-name:fade-in;animation-duration:.6s}.grid-container{display:grid;grid-template-columns:400px;width:400px;row-gap:20px;background-color:var(--foreground);padding-top:40px;padding-bottom:40px;border-radius:16px}#progress-bar{grid-row:1}#word-prompt{grid-row:2}#button-1{grid-row:3}#button-2{grid-row:4}#button-3{grid-row:5}#src-lang-select{grid-row:1}#trg-lang-select{grid-row:2}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#f1f1f1;min-width:200px;box-shadow:0px 8px 16px 0px rgba(0,0,0,.2);z-index:1;text-transform:capitalize;text-align:center;border-radius:16px;justify-content:center;align-items:center}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#ddd}.dropdown-content{display:block}.dropdown:hover .dropbtn{background-color:var(--accent-light)}.progress-bar{border-radius:50%;width:200px;height:200px;display:flex;background:var(--background);align-items:center;justify-content:center;align-self:center;justify-self:center}.progress-bar-under-50{background-image:linear-gradient(calc(270deg + var(--progress) * 360deg / 100), var(--background) 50%, transparent 50%),linear-gradient(270deg, var(--accent) 50%, var(--background) 50%)}.progress-bar-over-50{background-image:linear-gradient(calc(90deg + var(--progress) * 360deg / 100), var(--accent) 50%, transparent 50%),linear-gradient(270deg, var(--accent) 50%, var(--background) 50%)}.progress-bar-overlay{border-radius:50%;width:150px;height:150px;background:var(--foreground);text-align:center;display:flex;align-items:center;justify-content:center}.selection-button{appearance:button;background-color:var(--accent);border:solid rgba(0,0,0,0);border-radius:16px;border-width:0 0 4px;box-sizing:border-box;color:var(--foreground);cursor:pointer;display:inline-block;font-family:din-round,sans-serif;font-weight:700;letter-spacing:.8px;line-height:20px;margin:0;outline:none;overflow:visible;padding:13px 16px;text-align:center;text-transform:capitalize;touch-action:manipulation;transform:translateZ(0);transition:filter .2s;user-select:none;-webkit-user-select:none;vertical-align:middle;white-space:nowrap;width:200px;justify-self:center}.selection-button:after{background-clip:padding-box;background-color:var(--accent-light);border:solid rgba(0,0,0,0);border-radius:16px;border-width:0 0 4px;bottom:-4px;content:"";left:0;position:absolute;right:0;top:0;z-index:-1}.selection-button:main,.selection-button:focus{user-select:auto}.selection-button:hover:not(:disabled){filter:brightness(1.1);-webkit-filter:brightness(1.1)}.selection-button:disabled{cursor:auto}.selection-button-correct{background-color:var(--correct)}.selection-button-correct:after{background-color:var(--correct-light)}.option_button{display:flex;flex-direction:column;align-items:center;padding:0px 14px;font-family:-apple-system,BlinkMacSystemFont,"Roboto",sans-serif;border-radius:6px;border:none;background:var(--option);box-shadow:0px .5px 1px rgba(0,0,0,.1),inset 0px .5px .5px rgba(255,255,255,.5),0px 0px 0px .5px rgba(0,0,0,.12);color:var(--foreground);user-select:none;-webkit-user-select:none;touch-action:manipulation}.option_button:hover{filter:brightness(1.1);-webkit-filter:brightness(1.1)}.option_button:focus{filter:brightness(1.1);-webkit-filter:brightness(1.1)}