@import"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";*{font-family:Inter,sans-serif;box-sizing:border-box}html,body{margin:0;padding:0;background-color:#f7fcf5}div.layout,div.layoutCollapsed{display:grid;grid-template-areas:"header header" "sidebar main";grid-template-columns:260px 1fr;grid-template-rows:64px 1fr;height:100vh;transition:grid-template-columns .6s ease}header{grid-area:header;border-bottom:1px solid lightgrey}nav{grid-area:sidebar;padding:10px;border-right:1px solid lightgrey}div.layout{grid-template-columns:260px 1fr}div.layoutCollapsed{grid-template-columns:95px 1fr}main{grid-area:main;padding-top:12px;padding-left:40px;padding-right:40px}header{display:flex;justify-content:space-between;align-items:center;padding-left:10px;background-color:#fff}header h1.websiteTitle{font-size:24px}header button.signOutButton{margin-right:15px;background:none;border:none;font-size:16px;font-weight:700;cursor:pointer;text-decoration:underline}nav.sidebar{background-color:#f2f2f2;font-size:20px;display:flex;flex-direction:column}nav.sidebar div.collapseItem{display:flex}nav.sidebar div.collapseItem img.collapseImage{margin-left:auto;width:30px;cursor:pointer}nav.sidebar div.profileItem{display:flex;align-items:center;gap:15px;margin-top:10px;margin-bottom:20px}nav.sidebar div.profileItem img.profileImage{width:52px;height:auto}nav.sidebar div.profileItem p.profileCollapsed{font-size:0}nav.sidebar div.navItem .navbutton,nav.sidebar div.navItem .navbuttonCollapsed{text-decoration:none;color:#000;display:flex;align-items:center;gap:10px;width:90%;padding:10px}nav.sidebar div.navItem .navbutton img,nav.sidebar div.navItem .navbuttonCollapsed img{width:30px;height:auto}nav.sidebar div.navItem .navbuttonCollapsed{font-size:0;justify-content:center;gap:0}nav.sidebar div.navItem .navbutton.active,nav.sidebar div.navItem .navbuttonCollapsed.active{font-weight:600;background-color:#fff;border-radius:10px}nav.sidebar .pomodoroWrapper{margin-top:auto;padding-bottom:20px}div.pomodoroContainer{background-color:#fff;border-radius:12px;border:1px solid black;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px;margin:15px}div.pomodoroContainer .startButton{background-color:#b4f056;border-radius:10px;border:none;padding:10px;width:90%;text-align:center;text-decoration:none;color:#000;font-size:14px;cursor:pointer}div.pomodoroContainer .startButton:hover{background-color:#aae038}div.pomodoroHeader{width:100%;display:flex;justify-content:flex-start}div.pomodoroHeader p{margin:0;font-size:18px}div.pomodoroContainer h2{margin:0}div.pomodoroModes{display:flex;gap:6px;width:100%}div.pomodoroModes button{flex:1;padding:6px 0;border-radius:20px;border:1px solid #ccc;background:#f7f7f7;cursor:pointer;font-size:14px;transition:.2s;color:#000}div.pomodoroModes button:hover{background:#ededed}div.pomodoroModes .active{background:#b4f056;border-color:#9bd63f;font-weight:600}div.form{display:flex;justify-content:center;align-items:center;margin:50px}form.authForm{background-color:#fff;width:90%;max-width:350px;border-radius:10px;border:1px solid black;padding:20px}form.authForm h1{text-align:center}form.authForm label.authFormLabel{display:block;padding-bottom:15px}form.authForm label.authFormLabel input.authFormInput{width:100%;margin-top:5px;padding:10px;border-radius:10px;border:1px solid lightgray}form.authForm div.authFormButton{text-align:center}form.authForm div.authFormButton button{background-color:#b4f056;color:#000;padding:12px 40px;border-radius:10px;border:none;font-size:16px;font-weight:700;cursor:pointer}form.authForm div.authFormButton button:hover{background-color:#aae038}form.authForm p.errorMessage{color:red}form.authForm p.accountLabel{color:gray}@media(max-width:1024px){form.authForm{max-width:320px;padding:18px}form.authForm h1{font-size:22px}}@media(max-width:768px){div.form{margin:30px}form.authForm{width:95%;max-width:300px;padding:16px}label.authFormLabel input.authFormInput{padding:8px;font-size:15px}div.authFormButton button{padding:10px 30px;font-size:15px}}@media(max-width:480px){div.form{margin:20px}form.authForm{width:100%;max-width:280px;padding:14px}form.authForm h1{font-size:20px}label.authFormLabel input.authFormInput{padding:8px;font-size:14px}div.authFormButton button{width:100%;padding:10px;font-size:14px}p.accountLabel{font-size:14px}}div.cards{display:flex;gap:50px}div.cards div.card{background-color:#fff;padding:20px;border:1px solid black;border-radius:10px;width:300px;height:240px;display:flex;flex-direction:column;justify-content:space-between}div.cards div.card div.cardDetails img{width:74px;height:74px}div.cards div.card div.cardDetails p.cardName{margin:0;font-size:20px}div.cards div.card div.cardDetails p.cardDescripton{color:gray}div.cards div.card div.button{display:flex;justify-content:center}div.cards div.card div.button .navbutton{background-color:#b4f056;border-radius:10px;padding:10px;width:197px;text-align:center;text-decoration:none;color:#000;font-weight:700}div.cards div.card div.button .navbutton:hover{background-color:#aae038}.flashcardSetContainer{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;margin-top:20px}.flashcardSet{background:#fff;padding:24px;border:1px solid black;border-radius:12px;display:flex;flex-direction:column;gap:12px}.flashcardSet .cardHeader{display:flex;justify-content:space-between}.flashcardSet .cardHeader .setName{margin:0;font-size:20px;font-weight:700}.flashcardSet .cardHeader .cardButtons{display:flex;gap:8px}.flashcardSet .cardHeader .cardButtons .button{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#f9fafb;border:1px solid #d1d5db;cursor:pointer;transition:all .2s ease}.flashcardSet .cardHeader .cardButtons .button:hover{background-color:#e5e7eb;border-color:#9ca3af;transform:scale(1.05)}.flashcardSet .cardHeader .cardButtons .button img{width:18px;height:18px}.flashcardSet .lastOpenedContainer{margin-top:auto;padding-top:16px;border-top:1px solid #e4e7ec;font-size:14px;display:flex;justify-content:space-between;align-items:center}.flashcardSet .lastOpenedContainer .label{font-weight:700;color:gray}.flashcardSet .lastOpenedContainer .date{color:gray}.flashcardSet .openSetContainer{display:flex;justify-content:center;margin-top:8px}.flashcardSet .openSetContainer .navbutton{background-color:#b4f056;border-radius:10px;padding:10px;width:100%;text-align:center;text-decoration:none;color:#000;font-weight:700;transition:background-color .2s ease}.flashcardSet .openSetContainer .navbutton:hover{background-color:#aae038}@media(max-width:1024px){.flashcardSetContainer{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.flashcardSet{padding:20px}div.header .navbutton{width:130px;padding:8px}}@media(max-width:768px){div.header{flex-direction:column;gap:12px;align-items:flex-start}.flashcardSetContainer{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.flashcardSet{padding:18px}.flashcardSet .setName{font-size:18px}}@media(max-width:480px){div.header{flex-direction:column;align-items:stretch;text-align:center}div.header .navbutton{width:100%}.flashcardSetContainer{grid-template-columns:1fr;gap:14px}.flashcardSet{padding:16px}.flashcardSet .setName{font-size:16px}.openSetContainer .navbutton{padding:8px;font-size:14px}}div.frontCardContainer{background-color:#fff;display:flex;gap:10px;width:50%;margin:auto;padding:20px;border:1px solid black;border-radius:10px}div.setNameCard{background-color:#fff;display:flex;flex-direction:column;gap:10px;width:50%;margin:auto;padding:20px;border:1px solid black;border-radius:10px}label.setNameLabel,label.frontLabel{display:flex;flex-direction:column;gap:5px;width:95%;margin:auto}label.setNameLabel .labelHeader,label.frontLabel .labelHeader{display:flex;justify-content:space-between;align-items:center;width:100%}label.setNameLabel .labelHeader span,label.frontLabel .labelHeader span{flex:0 0 auto}label.setNameLabel .labelHeader .deleteButtonContainer,label.frontLabel .labelHeader .deleteButtonContainer{display:flex;justify-content:center}label.setNameLabel .labelHeader .deleteButtonContainer .deleteButton,label.frontLabel .labelHeader .deleteButtonContainer .deleteButton{width:32px;height:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;background-color:#f9fafb;border:1px solid #d1d5db;padding:0;cursor:pointer;transition:all .2s ease}label.setNameLabel .labelHeader .deleteButtonContainer .deleteButton img,label.frontLabel .labelHeader .deleteButtonContainer .deleteButton img{width:18px;height:18px;transition:opacity .2s}label.setNameLabel .labelHeader .deleteButtonContainer .deleteButton img:hover,label.frontLabel .labelHeader .deleteButtonContainer .deleteButton img:hover{opacity:.6}label.setNameLabel input.setNameInput,label.setNameLabel input.frontInput,label.frontLabel input.setNameInput,label.frontLabel input.frontInput{width:100%;margin-top:5px;padding:10px;border-radius:10px;border:1px solid lightgray;box-sizing:border-box}label.descriptionLabel textarea.backInput,label.backLabel textarea.backInput{width:100%;margin-top:5px;padding:10px;border-radius:10px;border:1px solid lightgray;resize:vertical}div.addCardButtonContainer{display:flex;justify-content:center;margin-top:20px}div.addCardButtonContainer button{width:60px;height:60px;border-radius:50%;border:none;box-shadow:0 4px 10px #000000b3;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:30px}div.addCardButtonContainer img{width:24px;height:24px}@media(max-width:768px){div.frontCardContainer,div.setNameCard{width:85%;padding:15px}label.setNameLabel,label.frontLabel,label.descriptionLabel,label.backLabel{width:100%}}@media(max-width:480px){div.frontCardContainer,div.setNameCard{width:95%;padding:12px}.deleteButton{width:28px;height:28px}.deleteButton img{width:16px;height:16px}input.setNameInput,input.frontInput,textarea.descriptionInput,textarea.backInput{font-size:14px;padding:8px}}button.generateQuizButton{cursor:pointer;font-size:15px;color:#000;background-color:#b4f056;border:none;border-radius:10px;padding:10px;width:150px;text-align:center;text-decoration:none;display:flex;justify-content:center}button.generateQuizButton:hover{background-color:#aae038}button.generateQuizButton:disabled{background-color:#e2e8f0;color:#94a3b8;border:none;cursor:not-allowed;box-shadow:none}div.subHeader p.description{color:#6b7280;max-width:650px}div.subHeader p.flashcardLength{background-color:#eef1f5;color:#000;padding:4px 12px;border-radius:20px;font-size:14px;font-weight:700;border:1px solid lightgrey;width:fit-content}div.viewFlashcardsContainer{display:flex;justify-content:center;align-items:center}div.viewFlashcardsContainer button.arrowButton{display:flex;justify-content:center;align-items:center;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;cursor:pointer}div.viewFlashcardsContainer button.arrowButton img{width:20px;height:20px}div.viewFlashcardsContainer button.arrowButton:hover:not(:disabled){background:#f3f4f6;color:#111827;transform:scale(1.05)}div.viewFlashcardsContainer button.arrowButton:disabled{color:#dfe2e6;background:#eef1f5;cursor:not-allowed;box-shadow:none}div.viewFlashcardsContainer div.flashcard{display:flex;align-items:center;justify-content:center;width:100%;max-width:800px;min-height:450px;background-color:#fff;padding:20px;margin-right:20px;margin-left:20px;border-radius:16px;border:1px solid black;cursor:pointer;text-align:center}div.viewFlashcardsContainer div.flashcard h1.flashcardFrontText{font-size:56px;margin:0}div.viewFlashcardsContainer div.flashcard p.flashcardBackText{font-size:28px;margin:0}div.currentFlashcardNum{display:flex;justify-content:center;font-size:18px}div.currentFlashcardNum p{font-weight:700}@media(max-width:1024px){div.viewFlashcardsContainer div.flashcard{max-width:600px;min-height:380px}div.viewFlashcardsContainer div.flashcard h1.flashcardFrontText{font-size:44px}div.viewFlashcardsContainer div.flashcard p.flashcardBackText{font-size:24px}}@media(max-width:768px){div.viewFlashcardsContainer{padding:0 12px}div.viewFlashcardsContainer div.flashcard{max-width:100%;min-height:340px;margin-right:10px;margin-left:10px;padding:16px}div.viewFlashcardsContainer button.arrowButton{width:40px;height:40px}div.viewFlashcardsContainer button.arrowButton img{width:18px;height:18px}div.viewFlashcardsContainer div.flashcard h1.flashcardFrontText{font-size:36px}div.viewFlashcardsContainer div.flashcard p.flashcardBackText{font-size:22px}button.generateQuizButton{width:200px}}@media(max-width:480px){button.generateQuizButton{width:100%;max-width:260px;padding:12px;font-size:16px}div.viewFlashcardsContainer{flex-direction:column;gap:12px}div.viewFlashcardsContainer div.flashcard{margin:0;min-height:260px;padding:14px}div.viewFlashcardsContainer button.arrowButton{width:36px;height:36px}div.viewFlashcardsContainer button.arrowButton img{width:16px;height:16px}div.viewFlashcardsContainer div.flashcard h1.flashcardFrontText{font-size:28px}div.viewFlashcardsContainer div.flashcard p.flashcardBackText{font-size:18px}div.currentFlashcardNum{font-size:16px}}.header .navbutton{background-color:#b4f056;color:#000;border:none;border-radius:10px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.header .navbutton:hover{background-color:#aae038}.quizCardContainer{background-color:#fff;border:1px solid black;border-radius:12px;padding:30px;margin:20px auto;max-width:600px;box-shadow:0 4px 6px #0000000d}.quizCardContainer .quizCardHeader h3{margin:0;font-size:20px;font-weight:400}.quizCardContainer .quizCardHeader hr{margin:15px 0 30px;border:none;border-top:1px solid #ccc}.quizCardContainer .quizQuestion{text-align:center;margin-bottom:40px}.quizCardContainer .quizQuestion h2{font-size:28px;font-weight:500;margin:0}.quizCardContainer .quizOptions{display:flex;flex-direction:column;gap:15px;margin-bottom:40px}.quizCardContainer .quizOptions .optionButton{background-color:#fff;border:1px solid #767676;border-radius:6px;padding:15px 20px;text-align:left;font-size:16px;cursor:pointer;transition:all .2s ease}.quizCardContainer .quizOptions .optionButton b{margin-right:10px}.quizCardContainer .quizOptions .optionButton:hover{background-color:#f7f7f7}.quizCardContainer .quizOptions .optionButton.selected{background-color:#b4f056;border-color:#9bd63f}.quizCardContainer .quizFooter{display:flex;justify-content:flex-end}.quizCardContainer .quizFooter .nextButton{background-color:#e0e0e0;border:none;border-radius:6px;padding:10px 30px;font-size:16px;cursor:pointer;transition:.2s}.quizCardContainer .quizFooter .nextButton:hover:not(:disabled){background-color:#d0d0d0}.quizCardContainer .quizFooter .nextButton:disabled{opacity:.5;cursor:not-allowed}.quizResultsContainer{background-color:#fff;border:1px solid black;border-radius:12px;padding:50px;text-align:center;max-width:600px;margin:40px auto}.quizResultsContainer .scoreDisplay{font-size:24px;font-weight:700;margin-bottom:30px}.quizResultsContainer .navbutton{background-color:#b4f056;color:#000;border:none;border-radius:10px;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.quizResultsContainer .navbutton:hover{background-color:#aae038}.quizFooter{display:flex;justify-content:space-between;gap:10px}.quizFooter .nextButton,.quizFooter .prevButton{background-color:#e0e0e0;border:none;border-radius:6px;padding:10px 30px;font-size:16px;cursor:pointer;transition:.2s}.quizFooter .nextButton:hover:not(:disabled),.quizFooter .prevButton:hover:not(:disabled){background-color:#d0d0d0}.quizFooter .nextButton:disabled,.quizFooter .prevButton:disabled{opacity:.5;cursor:not-allowed}.quizFooter .finishButton{background-color:#b4f056;color:#000;font-weight:600}.quizFooter .finishButton:hover:not(:disabled){background-color:#aae038}div.header .navbutton{background-color:#b4f056;border-radius:10px;padding:10px;width:150px;text-align:center;text-decoration:none;color:#000}div.header .navbutton:hover{background-color:#aae038}.noteContainer{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;margin-top:20px}.noteCard{background:#fff;padding:24px;border:1px solid black;border-radius:12px;display:flex;flex-direction:column;gap:12px}.noteCard .cardHeader{display:flex;justify-content:space-between}.noteCard .cardHeader .noteName{margin:0;font-size:20px;font-weight:700}.noteCard .cardHeader .cardButtons{display:flex;gap:8px}.noteCard .cardHeader .cardButtons .button{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#f9fafb;border:1px solid #d1d5db;cursor:pointer;transition:all .2s ease}.noteCard .cardHeader .cardButtons .button:hover{background-color:#e5e7eb;border-color:#9ca3af;transform:scale(1.05)}.noteCard .cardHeader .cardButtons .button img{width:18px;height:18px}.noteCard .lastOpenedContainer{margin-top:auto;padding-top:16px;border-top:1px solid #e4e7ec;font-size:14px;display:flex;justify-content:space-between;align-items:center}.noteCard .lastOpenedContainer .label{font-weight:700;color:gray}.noteCard .lastOpenedContainer .date{color:gray}.modalContainer{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0000001a}.modal{padding:20px;border-radius:8px;border:none;display:flex;flex-direction:column;align-items:center}.modal h2{margin-top:0;margin-bottom:12px}.modal p{color:#4b5563;margin-bottom:24px;line-height:1.5}.modal div.modalButtons{display:flex;justify-content:center;gap:15px}.modal div.modalButtons button{padding:10px 24px;border-radius:8px;font-weight:600;cursor:pointer;font-size:15px;border:none;transition:all .2s ease}.modal div.modalButtons .cancelButton{background-color:#f3f4f6;color:#374151}.modal div.modalButtons .cancelButton:hover{background-color:#e5e7eb}.modal div.modalButtons .delButton{background-color:#ef4444;color:#fff}.modal div.modalButtons .delButton:hover{background-color:#dc2626}@media(max-width:1024px){.noteContainer{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.noteCard{padding:20px}div.header .navbutton{width:130px;padding:8px}}@media(max-width:768px){div.header{flex-direction:column;gap:12px;align-items:flex-start}.noteContainer{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.noteCard{padding:18px}.noteCard .noteName{font-size:18px}}@media(max-width:480px){div.header{flex-direction:column;align-items:stretch;text-align:center}div.header .navbutton{width:100%}.noteContainer{grid-template-columns:1fr;gap:14px}.noteCard{padding:16px}.noteCard .noteName{font-size:16px}}div.cardsContainer{display:flex;flex-direction:column;gap:20px}div.frontCardContainer,div.setNameCard{background-color:#fff;display:flex;flex-direction:column;gap:10px;width:50%;margin:auto;padding:20px;border:1px solid black;border-radius:10px}div.frontCard{flex:1;display:flex;flex-direction:column;gap:10px}label.setNameLabel{display:flex;flex-direction:column;gap:5px;width:95%;margin:auto}label.setNameLabel input.setNameInput{width:100%;margin-top:5px;padding:10px;border-radius:10px;border:1px solid lightgray;box-sizing:border-box}label.descriptionLabel,label.backLabel{display:flex;flex-direction:column;gap:5px;width:95%;margin:auto}label.descriptionLabel textarea.descriptionInput,label.backLabel textarea.descriptionInput{width:100%;height:100px;margin-top:5px;padding:10px;border-radius:10px;border:1px solid lightgray;resize:vertical}label.descriptionLabel textarea.noteTextInput,label.backLabel textarea.noteTextInput{width:100%;height:350px;margin-top:5px;padding:15px;border-radius:10px;border:1px solid lightgray;resize:vertical;font-family:inherit;line-height:1.5}div.createSetButtonContainer{display:flex;justify-content:center;margin-top:40px;margin-bottom:40px}div.createSetButtonContainer button{cursor:pointer;color:#000;background-color:#b4f056;border:none;border-radius:10px;padding:10px;width:150px;font-size:16px;font-weight:700;text-align:center;text-decoration:none;display:flex;justify-content:center}div.createSetButtonContainer button:hover{background-color:#aae038}p.error{color:red;font-size:14px;margin:0;padding:0}@media(max-width:1024px){div.frontCardContainer,div.setNameCard{width:70%}}@media(max-width:768px){div.frontCardContainer,div.setNameCard{width:85%;padding:15px}label.setNameLabel,label.descriptionLabel,label.backLabel{width:100%}}@media(max-width:480px){div.frontCardContainer,div.setNameCard{width:95%;padding:12px}input.setNameInput,textarea.descriptionInput,textarea.noteTextInput{font-size:14px;padding:8px}}div.header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}div.header .pointsDisplay{font-size:18px;background-color:#fff;border:1px solid black;border-radius:10px;padding:10px 20px}.storeItemsContainer{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;margin-top:20px}.storeItemCard{background:#fff;padding:24px;border:1px solid black;border-radius:12px;display:flex;flex-direction:column;gap:12px}.storeItemCard .cardHeader{display:flex;justify-content:space-between}.storeItemCard .cardHeader .itemName{margin:0;font-size:20px;font-weight:700}.storeItemCard .description{color:#4b5563;line-height:1.5;margin:0}.storeItemCard .itemFooter{margin-top:auto;padding-top:16px;font-size:16px;display:flex;justify-content:space-between;align-items:center}.storeItemCard .itemFooter .price{font-weight:700;color:#000}.storeItemCard .buyContainer{display:flex;justify-content:center;margin-top:8px}.storeItemCard .buyContainer .navbutton{background-color:#b4f056;border-radius:10px;padding:10px;width:100%;text-align:center;border:none;color:#000;font-weight:700;cursor:pointer;transition:background-color .2s ease,color .2s ease}.storeItemCard .buyContainer .navbutton:hover:not(:disabled){background-color:#aae038}.storeItemCard .buyContainer .navbutton:disabled{background-color:#e5e7eb;color:#9ca3af;cursor:not-allowed}@media(max-width:1024px){.storeItemsContainer{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.storeItemCard{padding:20px}}@media(max-width:768px){div.header{flex-direction:column;gap:12px;align-items:flex-start}.storeItemsContainer{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.storeItemCard{padding:18px}.storeItemCard .cardHeader .itemName{font-size:18px}}@media(max-width:480px){div.header{align-items:stretch;text-align:center}.storeItemsContainer{grid-template-columns:1fr;gap:14px}.storeItemCard{padding:16px}.storeItemCard .cardHeader .itemName{font-size:16px}.buyContainer .navbutton{padding:8px;font-size:14px}}