: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:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:90vh}h1{font-size:3.2em;line-height:1.1}#root{padding:2rem;text-align:center;width:100%}.app-container{display:flex;flex-direction:column;min-height:100vh;background-size:cover;background-repeat:no-repeat;background-position:center}.main-content{flex-grow:1;display:flex;flex-direction:column;align-items:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.footer{background-color:#483d8b;border-radius:20px;margin-top:10px;padding-top:0}.button{align-items:center;background-image:linear-gradient(144deg,#483d8b,#5b42f3 50%,#0ff);border:0;border-radius:8px;box-shadow:#9741fc33 0 15px 30px -5px;box-sizing:border-box;color:#fff;display:flexbox;font-family:Phantomsans,sans-serif;font-size:20px;justify-content:center;line-height:1em;max-width:100%;min-width:140px;padding:3px;margin:20px;text-decoration:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;white-space:nowrap;cursor:pointer}.button:active,.button:hover{outline:0}.button span{background-color:#05062d;padding:16px 24px;border-radius:6px;width:100%;height:100%;transition:.3s}.button:hover span{background:none}@media (min-width: 768px){.button{font-size:24px;min-width:196px}}.formContent{padding:10px}.form{border-radius:50px;margin-top:20px}.fixed-textarea{width:300px;height:150px;border-radius:30px;border:1px solid #ccc;padding:10px;resize:none}.title-entry{display:block;margin:0 auto;width:300px}button{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fcfcfd;border-radius:4px;border-width:0;box-shadow:#2d234266 0 2px 4px,#2d23424d 0 7px 13px -3px,#d6d6e7 0 -3px inset;box-sizing:border-box;color:#36395a;cursor:pointer;display:inline-flex;font-family:JetBrains Mono,monospace;height:48px;justify-content:center;line-height:1;list-style:none;overflow:hidden;padding-left:16px;padding-right:16px;position:relative;text-align:left;text-decoration:none;transition:box-shadow .15s,transform .15s;user-select:none;-webkit-user-select:none;touch-action:manipulation;white-space:nowrap;will-change:box-shadow,transform;font-size:18px}button:focus{box-shadow:#d6d6e7 0 0 0 1.5px inset,#2d234266 0 2px 4px,#2d23424d 0 7px 13px -3px,#d6d6e7 0 -3px inset}button:hover{box-shadow:#2d234266 0 4px 8px,#2d23424d 0 7px 13px -3px,#d6d6e7 0 -3px inset;transform:translateY(-2px)}button:active{box-shadow:#d6d6e7 0 3px 7px inset;transform:translateY(2px)}.flashcard{width:300px;height:200px;border:1px solid #333;border-radius:20px;margin:20px 10px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b;perspective:1000px;position:relative;transition:transform .6s,box-shadow .3s ease;transform-style:preserve-3d}.flashcard.clicked{width:400px;height:450px}.flashcard.flipped{transform:rotateY(180deg)}.flashcard:hover{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;border-radius:20px;font-size:10px;overflow:visible;padding:10px}.flashcard-front{background-color:#d8aa11;position:relative}.flashcard-back{transform:rotateY(180deg);background-image:url(/assets/wood-background.jpg)}.flashcard-text{display:block;font-size:100%;font-weight:700;text-align:center;font-family:Phantomsans,sans-serif;z-index:1;white-space:normal;word-wrap:break-word;text-overflow:ellipsis;transition:opacity .3s ease}.flashcard.clicked .flashcard-front .flashcard-text{opacity:0}.flashcard.clicked .flashcard-back .flashcard-text{opacity:1;position:relative;color:#000;padding:10px}.flashcard-back .flashcard-text{color:#000}.card-image{width:100%;height:100%;object-fit:cover;border-radius:20px;position:absolute;top:0;left:0}.flashcard-front .flashcard-text{position:absolute;bottom:10px;left:0;right:0;background:#000000b3;color:#fff;padding:5px;margin:0;border-radius:0 0 20px 20px}#ingredients{text-align:left;width:100%;margin:0;padding:0}#ingredients-list{align-items:flex-start;margin-right:0;padding-left:20px}#instructions-list{list-style:decimal;margin-right:10px}h3{text-decoration:underline}h1{text-decoration:underline;font-size:30px;font-family:Phantomsans,sans-serif}.cardContainer{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin:20px auto;max-width:90%;border-radius:20px;max-height:500px;min-height:600px;overflow-y:scroll;padding:10px;gap:10px}.cardContainer::-webkit-scrollbar{display:none}.cardContainer{-ms-overflow-style:none;scrollbar-width:none}html{width:100%;height:100%;background:#0c7ee9}.center{display:flex;justify-content:center;align-items:center}body{background-image:url(https://www.creativefabrica.com/wp-content/uploads/2020/08/11/Modern-kitchen-interior-vector-Graphics-4927206-1.jpg);background-size:cover}@-webkit-keyframes slidein{0%{background-position:top;background-size:3000px}to{background-position:-100px 0px;background-size:2750px}}@keyframes slidein{0%{background-position:top;background-size:3000px}to{background-position:-100px 0px;background-size:2750px}}#center{display:flex;align-items:center;justify-content:center;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;background:#4b4bfa4d;border-radius:3px}#center h1{text-align:center;color:#fff;font-family:Source Code Pro,monospace;text-transform:uppercase}.header{background-size:cover;background-position:center;min-height:200px;padding:20px;position:relative;color:#fff;text-align:center}.header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1}.header *{position:relative;z-index:2}