*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.-mr-2{margin-right:-.5rem}.-mt-1{margin-top:-.25rem}.-mt-1\.5{margin-top:-.375rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-1{margin-left:.25rem}.ml-12{margin-left:3rem}.ml-3{margin-left:.75rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.box-border{box-sizing:border-box}.flex{display:flex}.h-11{height:2.75rem}.max-w-md{max-width:28rem}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-items-center{justify-items:center}.gap-7{gap:1.75rem}.p-1{padding:.25rem}.text-left{text-align:left}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*{box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#8ecae6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}input::-moz-placeholder{color:#000;opacity:.5}input::placeholder{color:#000;opacity:.5}html,body{margin:0;padding:0;font-family:Montserrat,sans-serif;background-color:#8ecae6;color:#8ecae6}.div{width:100%;margin:0 auto}h1{font-family:VT323,monospace;font-size:3rem;color:#fff;text-align:center}h2,h3{font-family:Pacifico,cursive;font-size:2rem;color:#8ecae6;text-align:center}h3{font-size:1.2rem}a{text-decoration:none}.appContainer{background-color:#023047;width:80%;min-height:80vwh;margin:0vw auto;padding:2rem;border-radius:0 0 20px 20px}.statusRow{width:80%;position:fixed;top:0;right:10%;padding:.5em;z-index:50;background-color:#023047;display:flex;justify-content:flex-end;align-items:center;gap:1rem;border-bottom:.5px solid #8ecae6}.statusRow i{cursor:pointer}.statusRow i:hover{color:#fff}.iconRow{display:flex;gap:1rem}#initDialog{display:flex;position:relative;width:90%;margin:10px auto 0;min-width:300px;min-height:300px;background-color:#023047;color:#fff;border:2px solid #8ecae6;border-radius:2em;padding:2rem}#initDialog ::backdrop{background-color:#00000080}#initUserData{display:flex}#welcome{display:block}.inputContainer{width:100%;margin:1rem auto 0;padding:0rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1rem}.inputfield{font-family:Montserrat,sans-serif;font-size:1rem;width:100%;min-width:5rem;color:#023047;padding:.5em 1em;background-color:#ffb703;border:2px solid #fb8500;border-radius:.5em;margin-top:.3rem;margin-bottom:.3rem}.button{background-color:#ffb703;font-family:Montserrat,sans-serif;font-size:1rem;color:#023047;padding:.5em 1em;border:2px solid #fb8500;border-radius:.5em;cursor:pointer}.button:hover{background-color:#fb8500}.button-small{width:4rem}select{margin:.5em .25em;padding:.5em 1em}.yesNo{width:100%;position:absolute;margin:0 auto;bottom:0rem;left:50%;transform:translate(-50%);height:2rem;background-color:none;border-color:#fff;display:flex;justify-content:center;gap:1rem}.buttonYes{position:relative;width:45%;height:100%;text-align:right;padding:0 .5em}.buttonNo{position:relative;width:45%;height:100%;text-align:left;padding:0 .5em}.buttonYes:hover{color:#90ee90}.buttonNo:hover{color:#f08080}select{font-family:Montserrat,sans-serif;font-size:1rem;color:#023047;padding:.5em 1em;background-color:#ffb703;border:2px solid #fb8500;border-radius:.5em;cursor:pointer}.bin0{position:absolute;bottom:0;width:100%;background-color:#ce3737}.bin1{position:absolute;bottom:0;width:100%;background-color:#cd8039}.bin2{position:absolute;bottom:0;width:100%;background-color:#cbce00}.bin3{position:absolute;bottom:0;width:100%;background-color:#8acb44}.bin4,.bin5{position:absolute;bottom:0;width:100%;background-color:#32ce32}.vocContainer{width:100%;margin:3rem auto 0;padding:0rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.card{background-color:#219ebc;font-size:1.2rem;font-weight:300;color:#fff;width:220px;height:350px;margin:0vw auto;padding:.3em;border:2px solid #023047;border-radius:20px;position:relative;text-align:center;align-items:center}.card .translation{font-weight:600}#defaultCard{display:none;cursor:pointer;margin:3rem auto}.flexContainer{display:flex;width:100%;margin:3rem auto;flex-direction:column;flex-flow:wrap;justify-content:center;align-items:center;gap:4rem}.settingsContainer{display:block;position:relative;background-color:#023047;color:#fff;border:2px solid #8ecae6;border-radius:2em;padding:2rem}.learningDirection{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center}.buttonSettings{width:31px;height:31px;background-color:#ffb703;border-radius:6px;cursor:pointer;text-align:center;align-items:end;padding:6px}.flipCard{width:220px;height:350px;margin:0;padding:0;perspective:1000px;border:2px solid #023047;border-radius:20px;font-size:1.2rem;font-weight:300;color:#fff}.flipCard .content{position:relative;width:100%;height:100%;border-radius:20px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.75,0,.85,1)}.flipCard .buttonFlipCardContainer{display:flex}.check{display:none}#flipCard:checked~.content{transform:rotateY(180deg)}#addVocabularySwitch:checked~.inputContainer{display:flex}#settingsSwitch:checked~.settingsContainer{display:block}#vocListSwitch:checked~#vocContainer{display:flex}.buttonFlipCard{position:relative;text-align:center;font-weight:600;height:3em;width:70%;backface-visibility:hidden}.buttonFlipCard:hover{cursor:pointer;color:#8ecae6}.cardFront,.cardBack{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;transform-style:preserve-3d;border-radius:20px}.cardFront .inner,.cardBack .inner{height:82%;padding:.5em;transform:translateZ(40px) scale(.94)}.cardFront .thin,.cardBack .thin{font-weight:200;font-size:1rem;text-align:center}.cardFront .bold,.cardBack .bold{font-weight:600;font-size:1.3rem;text-align:center}#cardFrontUpper{margin-top:3rem}.cardBack{transform:rotateY(180deg)}.playButton{position:relative;width:100%;min-height:3rem;text-align:center}.credits{width:100%;font-size:.8rem;font-weight:400;justify-self:center;text-align:center;position:absolute;bottom:.5rem;left:50%;transform:translate(-50%)}.credits a{color:#d5e3ea}.credits span{color:#8ecae6}.card0{border:2px solid #ce3737}.card1{border:2px solid #cd8039}.card2{border:2px solid #cbce00}.card3{border:2px solid #8acb44}.card4,.card5{border:2px solid #32ce32}.thinLine{height:1px;background-color:#fff}.loader{display:none;position:absolute;width:100px;height:100px;top:30%;left:calc(50% - 50px);border-radius:50%;background:#8ecae6;-webkit-mask:repeating-conic-gradient(rgba(0,0,0,0) 0deg,#000 1deg 70deg,rgba(0,0,0,0) 71deg 90deg),radial-gradient(farthest-side,rgba(0,0,0,0) calc(100% - 18px),#000 calc(100% - 16px));-webkit-mask-composite:destination-in;mask-composite:intersect;animation:s5 .7s infinite}@keyframes s5{to{transform:rotate(.5turn)}}.donutChart{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:200px;height:200px;border-radius:50%;background:conic-gradient(#ce3737 0deg 2deg,#023047 3deg 4deg,#cd8039 5deg 7deg,#023047 8deg 9deg,#cbce00 10deg 12deg,#023047 13deg 14deg,#8acb44 15deg 17deg,#023047 18deg 19deg,#32ce32 20deg 22deg,#023047 23deg 24deg,#219ebc 25deg 300deg,#023047 300deg 360deg);transform:rotate(-150deg);transition:transform .8s cubic-bezier(.75,0,.85,1)}.hole{width:140px;height:140px;border-radius:50%;background:#023047}.vocCount{width:100%;height:100%;transform:rotate(150deg);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:#fff;font-size:2rem;font-weight:400}.vocCount p{margin:0}.vocCount .learnedCount{font-size:.8rem;color:#32ce32}.vocCount .newCount{font-size:.8rem;color:#ce3737}.displayScore{width:100%;height:2rem;display:block;text-align:center;align-items:center;justify-content:center;position:relative;margin:0;color:#fff}.flipswitch{position:relative;width:140px}.flipswitch input[type=checkbox]{display:none}.flipswitch-label{display:block;overflow:hidden;cursor:pointer;border:0px solid #ffb703;border-radius:6px}.flipswitch-inner{width:200%;margin-left:-100%;transition:margin .3s ease-in 0s}.flipswitch-inner:before,.flipswitch-inner:after{float:left;width:50%;height:22px;padding:0;line-height:22px;font-size:16px;color:#fff;font-family:Trebuchet,Arial,sans-serif;font-weight:700;box-sizing:border-box}.flipswitch-inner:before{content:"normal";padding-left:10px;background-color:#8ecae6;color:#fff}.flipswitch-inner:after{content:"slow";padding-right:10px;background-color:#8ecae6;color:#fff;text-align:right}.flipswitch-switch{width:31px;margin:-4.5px;background:#ffb703;border:0px solid #fb8500;border-radius:6px;position:absolute;top:0;bottom:0;right:115px;transition:all .3s ease-in 0s}.flipswitch-cb:checked+.flipswitch-label .flipswitch-inner{margin-left:0}.flipswitch-cb:checked+.flipswitch-label .flipswitch-switch{right:0}@media screen and (max-device-width: 480px){:root,body,html{background-color:#023047}.appContainer{width:100%;border-radius:0;padding:.5rem}.inputContainer{margin:2.5rem auto 0}.statusRow{width:100%;right:0}}