@import "https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#fff;--secondary-color:#d55d4f;--background-color:#f5f6f7;--background-secondary:#dcdcdc;--text-color:#11192b;--text-secondary:#898c92}body{background-color:var(--background-color);color:var(--text-color);font-family:Lexend,sans-serif;font-weight:700}.mainContainer{background-color:var(--background-color);flex-direction:column;min-height:100vh;display:flex}.mainContainer div{gap:2rem;width:100%;padding:2rem;display:flex}.mainContainer div .wordForm{background-color:var(--primary-color);border-radius:.5rem;flex:1;height:fit-content;padding:4rem;box-shadow:1px -1px 7px #d8d8d8}.mainContainer div .quizForm{background-color:var(--primary-color);border-radius:.5rem;flex-direction:column;flex:2;align-items:center;height:fit-content;padding:4rem;display:flex;box-shadow:1px -1px 7px #d8d8d8}.mainContainer div .listCard{background-color:var(--primary-color);border-radius:.5rem;flex:1;height:fit-content;padding:4rem;box-shadow:1px -1px 7px #d8d8d8}.mainContainer div .listsContainer{flex-direction:column;gap:2rem;display:flex}.mainContainer div .listsContainer section:first-child{color:var(--secondary-color);background-color:#fcece8}.mainContainer div .listsContainer section:last-child{color:var(--text-secondary)}.navbar{background-color:var(--primary-color);flex-direction:row;justify-content:space-between;align-items:center;width:100vw;height:60px;min-height:50px;padding:1rem;display:flex}.navbar .logo{flex-direction:row;justify-content:start;align-items:center;gap:.5rem;display:flex}.navbar .logo svg{color:var(--secondary-color)}.navbar .miProfile{width:fit-content}form{flex-direction:column;gap:1rem;padding:1rem;display:flex}form .formContent{flex-direction:column;gap:.8rem;padding:.5rem 0;font-size:1rem;font-weight:300;display:flex}form .formContent input{border:.1rem solid #ccc;border-radius:.25rem;padding:.5rem;font-family:Lexend}form .formContent button{background-color:var(--secondary-color);color:var(--primary-color);cursor:pointer;border:none;border-radius:.5rem;margin-top:1rem;padding:1rem 2rem;font-family:Lexend,sans-serif;font-size:1rem;font-weight:400}form .formContent button:hover{transform:scale(1.05)}.error{color:#9a3412;background-color:#fff7ed;border-bottom:2px solid #d55d4f;border-radius:.5rem;margin-top:1rem;font-weight:700}.success{color:#166534;background-color:#dcfce7;border-bottom:2px solid #166534;border-radius:.5rem;margin-top:1rem;font-weight:700}.quizForm{flex-direction:column;align-items:center;display:flex}.quizForm .quizTitle{padding:1rem}.quizForm .changeLanguage{flex-direction:column;justify-content:start;align-items:center;padding:0;display:flex}.quizForm .changeLanguage div{background-color:var(--background-color);border-radius:.5rem;flex-direction:row;justify-content:center;gap:0;width:fit-content;padding:.2rem}.quizForm .changeLanguage div button{background-color:inherit;color:var(--text-secondary);text-align:center;border:none;border-radius:.5rem;padding:.5rem;font-family:Lexend;font-weight:600}.quizForm .changeLanguage div button:first-child{color:var(--secondary-color);background-color:#fcece8}.quizForm .quizWord{background-color:var(--background-color);border-radius:.5rem;justify-content:center;width:fit-content;min-width:300px;padding:3rem 6rem}.quizForm .isCorrect{color:#155724;background-color:#d4edda}.quizForm .isIncorrect{color:#721c24;background-color:#f8d7da}.quizForm input{background-color:var(--background-color);text-align:center;border:1.5px solid #bcbcbc;border-radius:.3em;min-width:300px;padding:.5rem;font-family:Lexend,sans-serif}.quizForm .quizSubmit{justify-content:center;gap:1rem;padding:0;display:flex}.quizForm .quizSubmit button{background-color:var(--background-secondary);border:none;border-radius:.5rem;padding:1rem 2rem;font-family:Lexend,sans-serif;font-size:1rem}.quizForm .quizSubmit button:first-child{background-color:var(--secondary-color);color:var(--primary-color)}.quizForm .quizSubmit button{cursor:pointer}.quizForm .quizSubmit button:hover{transform:scale(1.05)}.counter{color:var(--text-secondary);justify-content:center;min-width:max-content;padding:0;font-weight:500;display:flex}.counter p{align-items:center;gap:.5rem;display:flex}.counter p:first-child svg{color:green}.counter p:last-child svg{color:red}.counter p span{color:var(--text-color)}.listCard{min-width:fit-content}.listCard ul{columns:2;margin-top:2rem;font-weight:400;line-height:1.5rem;list-style:none}
