@import url("https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");*{box-sizing:border-box;padding:0;margin:0;list-style-type:none;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.outer{display:flex;justify-content:center;height:100svh;overflow:hidden;--bgc:#F8F9FA;--bg-word:#f0f4f8;--bgc-reveal:#e3eaf2;--bg-inner:rgba(0,0,0,0.05);--shadow-block:rgba(0,0,0,0.4) 0 1px 3px 0;--shadow-little:rgba(0,0,0,0.4) 0 1px 2px 0;--bg-glassbutton:radial-gradient(farthest-corner at 0 0,rgba(150,150,250,0.1),rgba(0,0,50,0.15));--bg-glassbutton-hover:radial-gradient(farthest-corner at 0 0,rgba(100,100,200,0.15),rgba(0,0,50,0.25));--bg-glassbutton-compl:rgba(193,163,68,0.5);--bg-glassbutton-compl-hover:rgba(193,163,68,1);--sh-glassbutton:rgba(100,100,155,0.9) 1px 2px 3px 0;--sh-glassbutton-compl:#8b742e 2px 3px 4px 0;--sh-glassbutton-compl-hover:#5f4f1f 2px 3px 4px 0;--bg-layer0:linear-gradient(165deg,#8dAcD8,#3d5c98);--bg-layer1:linear-gradient(270deg,rgba(230,255,230,0.2),rgba(230,255,230,0.6));--bg-layer2:radial-gradient(farthest-corner at 20% 20%,rgba(255,255,255,0.7),rgba(255,255,255,0));--color-basic:#2c2e4d;--color-revealed:#3f416e;--color-muted:#827f75;--color-button:#555555;--color-arabic:#995764;--color-title:#474969;--compl:#c1a344;--compl-pale:#5f4f1f;--compl-dark:#5f4f1f;color:var(--color-basic);font-family:Raleway,sans-serif;position:relative;background:var(--bg-layer2)}.outer.dark{--bgc:#1E1E1E;--bg-word:#232734;--bgc-reveal:#1F232F;--bg-inner:rgba(255,255,255,0.05);--shadow-block:rgba(0,0,0,0.7) 0 1px 5px 0;--shadow-little:rgba(0,0,0,0.7) 0 1px 4px 0;--bg-glassbutton:radial-gradient(farthest-corner at 0 0,rgba(0,0,0,0.5),rgba(0,0,0,0.7));--bg-glassbutton-hover:radial-gradient(farthest-corner at 0 0,rgba(0,0,0,0.2),rgba(0,0,0,0.3));--bg-glassbutton-compl:rgba(63,53,21,0.5);--bg-glassbutton-compl-hover:rgba(63,53,21,0.7);--sh-glassbutton:rgba(0,0,0,1) 1px 2px 3px 0;--sh-glassbutton-compl:#000 2px 3px 4px 0;--sh-glassbutton-compl-hover:#000 2px 3px 4px 0;--bg-layer0:linear-gradient(#101824,#020407);--bg-layer1:linear-gradient(270deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1));--bg-layer2:transparent;--color-basic:#9c9789;--color-revealed:#8a8679;--color-muted:#8a8679;--color-button:#9c9789;--color-arabic:#a6751b;--color-title:#736148;--compl:#5e5020;--compl-dark:#988234}.outer:before{background-image:var(--bg-layer0);z-index:-2}.outer:after,.outer:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:1;background-size:100% 100%}.outer:after{background-image:var(--bg-layer1);z-index:-1}.inner{max-width:1170px;flex:1 1;display:flex;flex-direction:column;background-color:var(--bg-inner);box-shadow:var(--shadow-block)}::-webkit-scrollbar{width:20px}::-webkit-scrollbar-track{box-shadow:inset 0 0 20px 20px transparent;border:5px solid transparent}::-webkit-scrollbar-thumb{box-shadow:inset 0 0 20px 20px var(--compl);border:5px solid transparent;border-radius:35px}main{flex:1 1;overflow:hidden}::selection{background:var(--bgc-reveal)}h1,h2{font-weight:400;color:var(--color-title)}main{padding:10px}.glassbutton{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:3px;cursor:pointer;position:relative;z-index:1;font-size:16px;text-align:center;transition:opacity .1s linear;padding:5px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--color-button);box-shadow:var(--sh-glassbutton)}.glassbutton.complbutton{box-shadow:var(--sh-glassbutton-compl);color:var(--compl-dark)}.glassbutton:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;background:var(--bg-glassbutton);z-index:-1;transition:opacity .1s linear;opacity:1;border-radius:3px}.glassbutton.complbutton:before{background:var(--bg-glassbutton-compl)}.glassbutton:hover:before{opacity:0}.glassbutton:after{position:absolute;content:"";top:0;right:0;bottom:0;left:0;background:var(--bg-glassbutton-hover);z-index:-1;transition:opacity .1s linear;opacity:0;border-radius:3px}.glassbutton.complbutton:after{background:var(--bg-glassbutton-compl-hover)}.glassbutton:hover:after{opacity:1}.playbutton{min-width:40px;min-height:40px}.playbutton,.playbutton:before{border-radius:50%}.error-message{margin:10px 0;font-size:14px}.pointer{cursor:pointer;transition:.2s}.pointer:hover{background-color:var(--bgc-reveal)}.translation{font-style:italic}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.header{padding:10px;display:flex}.header .glassbutton{width:40px;height:40px}.logo{flex:1 1;text-align:center}.homepage{padding:10px}.homepage .modes{display:flex;padding:10px 0;align-items:center;justify-content:center}.homepage .modes .glassbutton{width:200px;height:300px;margin-right:10px}.homepage .modes .glassbutton:last-of-type{margin-right:0}@media (max-width:649px){.homepage .modes{flex-direction:column}.homepage .modes .glassbutton{width:100%;height:75px;margin-right:0;margin-bottom:10px}}.flashcards{overflow:hidden;height:100%;display:flex;flex-direction:column}.flashcards .categories{display:flex;flex-wrap:wrap;overflow:auto;flex:1 1;align-content:flex-start}.flashcards .categories li{width:20%;padding:5px}.flashcards .categories .glassbutton{height:75px}@media (max-width:991px){.flashcards .categories li{width:25%}}@media (max-width:767px){.flashcards .categories li{width:50%}}.search{padding:10px 0;display:flex;justify-content:center;align-items:center;width:100%;max-width:500px;margin:0 auto;position:relative}.search .icon{margin-right:10px;color:var(--compl);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}.search input{flex:1 1;background:none;border:1px solid var(--compl-pale);border-radius:5px;outline:none;height:40px;padding:0 5px;color:var(--color-basic);font-family:Raleway,sans-serif;font-size:16px;z-index:2}@media (max-width:649px){.flashcards .categories li{width:100%}}.category{height:100%;display:flex;flex-direction:column}.category .buttons-menu{display:flex;width:100%;max-width:700px;margin:20px auto}.category .glassbutton{height:50px;flex:1 1;margin-right:15px}.category .glassbutton:last-of-type{margin-right:0}@media (max-width:649px){.category .buttons-menu{flex-direction:column}.category .glassbutton{flex:auto;margin:0 0 5px}}.word{overflow:auto;margin:15px auto 0;padding:5px 0;max-width:700px;width:100%}.word-content{display:flex;flex-direction:column;border:1px solid var(--border);background-color:var(--bg-word);border-radius:3px;transition:.2s;padding:10px;box-shadow:var(--shadow-block);width:100%;margin:0 auto}.word-reveal{min-height:100px;display:flex;align-items:center;justify-content:center;margin:0 -10px -10px}.word-reveal__hint{color:var(--color-revealed)}.word-reveal__content{text-align:center}.word-reveal .word-audio{margin-bottom:10px}.word .title{margin-bottom:20px;font-size:20px}.word .pronunciation,.word .translation{margin-bottom:10px;font-size:20px}.word-context{border-radius:3px;transition:.2s;width:100%;margin:10px auto 0}.context{border:1px solid var(--border);margin-bottom:3px;padding:10px;transition:.2s;border-radius:3px;background:var(--bg-word);box-shadow:var(--shadow-little)}.context.pointer:hover{background:var(--bgc-reveal)}.context-content{flex:1 1}.context:last-of-type{margin-bottom:0}.context .title,.context .translation{margin-bottom:0;font-size:14px}.context .translation{margin-top:5px}.context .arabic{font-size:28px;padding:5px 0}.context-audio{width:40px;display:flex;align-items:center;justify-content:center}.context .word-audio.no-audio>*{display:none}.word-elem{margin-bottom:10px;background:var(--bg-word);border:1px solid var(--border);padding:10px;display:flex;min-height:62px;box-shadow:var(--shadow-little);width:100%}.word-elem:last-of-type{margin-bottom:0}.word-elem__content{display:flex;flex:1 1}.word-elem .pronunciation,.word-elem .title,.word-elem .translation{flex:1 1;align-self:center;font-size:16px}.word-elem .word-audio{width:40px;display:flex;align-items:center;justify-content:center}.word-elem .word-audio.no-audio>*{display:none}@media (max-width:649px){.word-elem__content{flex-direction:column;text-align:center}}.words-list{margin:10px auto 0;overflow-y:auto;height:100%;max-width:700px;width:100%}