*{padding:0;margin:0;box-sizing:border-box}.App{height:100vh;background-color:#52221f;color:#e8d4a3;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.flashcard--container{display:flex;flex-direction:column;gap:2em}.flashcard--headings{display:flex;flex-direction:column;text-align:center;align-items:center;gap:1em}.flashcard--headings h2{font-size:3rem;font-family:Grenze Gotisch,serif}.flashcard--headings p{font-size:1.25rem}.flashcard--wrapper{align-self:center;width:35em;height:25em;aspect-ratio:7 / 5;perspective:1000px}.flashcard{width:100%;height:100%;position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform .6s}.flashcard.flipped{transform:rotateY(180deg)}.flashcard--inner{width:100%;height:100%;transform-style:preserve-3d}.flashcard--front,.flashcard--back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;background:linear-gradient(to bottom right,#d19e1d,#ffd86e,#e3a812);color:#000;border-radius:25px;padding:2em;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 0 5px 5px #481515;transition:box-shadow .15s}.flashcard--front:hover,.flashcard--back:hover{box-shadow:0 0 10px 15px #481515}.flashcard--back{transform:rotateY(180deg)}.flashcard--icon{height:10%;background-color:#fff;border-radius:100px;position:absolute;top:2.5em}.flashcard--icon img{height:100%}.flashcard--front{display:flex}.flashcard--content{height:100%;font-size:2.5rem;text-align:center;font-family:Libre Baskerville,serif;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em}.flashcard--image{height:50%;border-radius:10px}.flashcard--image img{box-shadow:0 0 5px #00000080;border-radius:inherit;height:100%}.flashcard--difficulty_wrapper{position:absolute;font-size:1.5rem;bottom:1.25em;width:100%;display:flex;justify-content:center;align-items:center;border-top:1px solid black;border-bottom:1px solid black;padding:.25em}.hard{background-color:#a0251c;color:#fff}.medium{background-color:#a87c0b;color:#fff}.easy{background-color:#58ac4d}.flashcard--buttons{align-self:center;display:flex;gap:1em}.flashcard--button{font-family:Courier New,Courier,monospace;font-size:1.25rem;font-weight:700;width:8em;padding:.25em;border:none;border-radius:10px;background-color:#834444;color:#fff;box-shadow:0 0 10px #00000080;cursor:pointer;transition:all .15s}.flashcard--button:hover{color:#000;background-color:#de9595}.flashcard--shuffle{width:2.25em;height:2.25em;padding:.3em;display:flex;background-color:#de9595;border-radius:100px;cursor:pointer;transition:all .15s}.flashcard--shuffle:hover{background-color:#ecc4c4}.flashcard--shuffle img{height:100%}.flashcard--number{align-self:center;font-size:1.25rem;display:flex;justify-content:center;align-items:center;background-color:#713531;width:4em;border-radius:100px}@media (max-width: 1200px){.flashcard--container{padding:0 1em;margin-top:8em}.flashcard--headings h2{font-size:2rem;font-family:Grenze Gotisch,serif}.flashcard--headings p{font-size:1.15rem}.flashcard--icon{top:1.5em}.flashcard--content{font-size:1.25rem;gap:.25em}.flashcard--difficulty_wrapper{position:absolute;font-size:1rem;bottom:1.25em}.flashcard--wrapper{align-self:center;width:20em;height:auto;aspect-ratio:7 / 5;perspective:1000px}.flashcard--button{font-family:Courier New,Courier,monospace;font-size:1.15rem;font-weight:700;width:7em;padding:.1em}}.guessMode{right:3em;top:3em;width:17em;height:10em;position:absolute;display:flex;flex-direction:column}.guessMode--button{margin:1.25em 0 1em;width:60%;height:2em;border-radius:5px;border:none;box-shadow:0 5px 5px #00000040;align-self:center;cursor:pointer;transition:all .15s;font-family:Courier New,Courier,monospace;font-weight:700;padding:.25em}.guessMode--button:hover{background-color:#d4e2ee}.guessMode--button:active{background-color:#000;color:#d4e2ee}.guessMode--frame{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.75em;background-color:#834444;padding:1em;border-radius:10px}.guessMode--currentScore{text-align:center;width:30%;color:#ffedc4;font-weight:700}.guessMode--input_bar{display:flex;border-radius:10px;overflow:hidden}.guessMode--input_bar input{border:none;border-radius:0;font-family:Times New Roman,Times,serif;padding:.25em .5em}.guessMode--submit{background-color:#000;border:none;color:#fff;padding:.25em .5em;font-family:Times New Roman,Times,serif;cursor:pointer}.guessMode--first_line{display:flex;align-items:center;justify-content:center;width:100%;padding:0 .5em}.guessMode--difficulty_counts{display:flex;justify-content:center;align-items:center;gap:.25em;width:35%}.guessMode--difficulty_counts div{border-radius:100px;line-height:1.5em;width:1.5em;display:flex;justify-content:center;align-items:center}.guessMode--difficulty_hard{background-color:#a0251c;color:#fff}.guessMode--difficulty_medium{background-color:#a87c0b;color:#fff}.guessMode--difficulty_easy{background-color:#58ac4d;color:#000}.guessMode--streak_container{width:35%;display:flex;align-items:center;justify-content:flex-start}.guessMode--streak{display:flex;justify-content:center;align-items:center;height:2em;width:2em;position:relative}.guessMode--streak_count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#000;font-weight:700;z-index:1000}.guessMode--streak img{height:100%;opacity:.85}.guessMode--comment{padding:0 .5em;text-align:center}@media (max-width: 1200px){.guessMode{left:50%;transform:translate(-50%);top:1em;width:17em;height:10em;position:absolute;display:flex;flex-direction:column}.guessMode--frame{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em;background-color:#834444;padding:.25em;border-radius:10px}}.notification--wrapper{position:fixed;top:0;bottom:0;left:0;right:0;background-color:#000000bf;z-index:1000}.notification{position:absolute;background-color:#fff;height:20%;width:75%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#000;font-size:2rem;text-align:center}.notification--xmark{width:2rem;height:2rem;position:absolute;right:.5em;top:.5em;cursor:pointer}.notification--xmark img{height:100%;width:100%}@media (max-width: 1200px){.notification{font-size:1.35rem}}