@import"https://fonts.googleapis.com/css2?family=Pacifico&display=swap";@import"https://fonts.googleapis.com/css2?family=Open+Sans&family=Cinzel&display=swap";.navbar{background-color:#2e2e2e33;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:0 20px;top:0;left:2px;width:97%;z-index:1000;position:fixed;border-radius:15px}.navbar-container{width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:10px 0}.navbar-title{font-family:Pacifico,cursive;font-size:2em;color:#ede7e7;text-decoration:none;font-weight:700;display:flex;align-items:center;gap:10px}.navbar-icon{width:32px;height:32px;fill:#fc0}.navbar-list{list-style:none;padding:0;margin:0;display:flex}.nav-item{margin-right:20px;border-radius:12px;overflow:hidden;font-size:25px}.nav-links{text-decoration:none;font-family:Pacifico,cursive;color:#f6efef;font-size:1em;transition:all .3s;font-weight:500;border-radius:12px;padding:5px 15px;background:rgba(255,255,255,.1)}.nav-links:hover{color:#fc0;background-color:#fc03}.navbar-icon{width:64px;height:64px;fill:#fc0}.search-box-wrapper{display:flex;justify-content:center;align-items:center}.search-box{width:350px;border:none;box-shadow:0 3px 15px #0000001a;outline:none;font-size:16px}.search-result{display:flex;direction:row;align-items:center}.search-result img{border-radius:25%;padding-right:10px}.search-content{display:flex;flex-direction:column}.search-content-category{font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;font-size:15px}Base Styles and Variables :root{--base-color: #925252;--pattern-color: rgba(119, 6, 6, .05)}.background-pattern{width:100vw;height:100vh;background-color:var(--base-color);font-family:Helvetica,sans-serif;overflow:hidden;position:fixed;top:0;left:0;z-index:-1}.background-pattern:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background-image:linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(https://perryzjc.github.io/recipe_demo/assets/main_background.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var( --pattern-color )}.container{font-family:Open Sans,sans-serif;display:flex;justify-content:center;align-items:center;min-height:70vh;padding-left:20px;padding-right:20px;box-shadow:0 8px 32px #1f26875e;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:10px;border:1px solid rgba(255,255,255,.18)}.card-layout{margin-top:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}body{font-family:Open Sans,sans-serif;background:#eaeaea;display:flex;justify-content:center;align-items:center;height:100vh;perspective:1000px;margin:0}.card{width:300px;height:300px;position:relative;transform-style:preserve-3d;transform:rotateY(0);transform-origin:center;transition:transform 1s;cursor:pointer;color:#000;box-sizing:border-box}.card:hover{transform:rotateY(180deg)}.card .front,.card .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:10px;box-shadow:0 10px 30px -5px #0000004d;overflow:hidden;box-sizing:border-box}.card .back{transform:rotateY(180deg);display:flex;justify-content:center;align-items:center;font-family:Cinzel,serif;font-size:2rem;background:#ffffff}.card .front{position:relative;background:#ffffff;text-align:center}.card .front h3{font-family:Cinzel,serif;font-size:1.5rem;position:absolute;bottom:0;left:0;background:rgba(0,0,0,.5);color:#fff;width:100%;text-align:center;margin:0;padding:10px}.card .front p{margin-bottom:10px;line-height:1.5}.card img{border-radius:10px 10px 0 0;height:100%}.categoryPage{padding:20px;font-family:Cinzel,serif;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-size:cover;background-position:center;background-repeat:no-repeat;width:100vw;height:100vh;background-image:linear-gradient(rgba(4,9,30,.7),rgba(4,9,30,.7)),url(https://perryzjc.github.io/recipe_demo/assets/CatBack-8da71f02.jpg)}h2{position:absolute;top:10vh;font-size:2em;margin-bottom:10px;color:#fcfcfc}.panel{position:absolute;top:15vh;left:12vw;width:80vw;max-width:1200px;padding:30px;border-radius:20px;box-shadow:0 6px 20px #0000001a;margin-top:20px;overflow-y:auto;max-height:90vh}.grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:50px}.grid-item{text-decoration:none}.contentImg{width:500px;height:250px}.categoryPage{padding-top:150px}.recipe-instruction-page{padding:20px;font-family:Cinzel,serif;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-size:cover;background-position:center;background-repeat:no-repeat;width:100vw;height:100vh;overflow:auto;background-color:#0009}.recipe-instruction-page h2{font-family:Cinzel,serif;color:#fcfcfc;text-shadow:2px 2px 4px rgba(0,0,0,.5);margin-bottom:50px}.recipe-instruction-container{position:absolute;top:18vh;padding:20px;width:80vw;max-height:70vh;overflow-y:auto}.custom-card-grid{border-radius:15px;background:rgba(255,255,255,.3);box-shadow:0 5px 15px #0000001a;margin-top:20px;transition:transform .3s,box-shadow .3s;width:100%}.custom-card-grid:hover{transform:scale(1.05);box-shadow:0 7px 20px #0003}.step-column{background:linear-gradient(145deg,rgba(43,124,217,.8),rgba(62,170,247,.8));color:#fff;display:flex;justify-content:center;align-items:center;border-radius:15px 0 0 15px}.step-content{font-size:24px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.instruction-column{background-color:#ecf0f199;border-left:3px solid #3498db;padding:20px;display:flex;align-items:center;font-size:18px;border-radius:0 15px 15px 0}.recipe-instruction-page{color:#fff;padding:20px;background-size:cover;background-position:center}.recipe-name{text-align:center;margin-bottom:20px;font-size:2em}.recipe-instruction-container{display:flex;flex-direction:column}.step-content{flex:0 0 100px;font-weight:700;background-color:#00000080;padding:10px;text-align:center}.instruction-row{display:flex;margin-bottom:20px;align-items:center;overflow:auto;border-radius:10px;max-width:100%}.instruction-content{padding:10px;background-color:#ffffff4d;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:inline-block}.instruction-row:hover{scale:1.05}.recipe-upload-form button{background-color:#4caf50;color:#fff;border:none;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;transition:background-color .3s,box-shadow .3s;cursor:pointer}.recipe-upload-form button:hover,.recipe-upload-form button:focus{background-color:#45a049;box-shadow:0 5px 15px #0000004d;outline:none}.recipe-upload-form input[type=text],.recipe-upload-form textarea{padding:10px;border:1px solid #ccc;border-radius:4px;transition:border-color .3s,box-shadow .3s}.recipe-upload-form input[type=text]:focus,.recipe-upload-form textarea:focus{border-color:#4caf50;box-shadow:0 0 5px #00ff004d;outline:none}input:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.recipe-upload-form{background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;width:1000px;margin:auto;padding:20px;position:relative;top:20px}.recipe-upload-form form{display:flex;flex-direction:column}.recipe-upload-form .upload-label{font-family:Pacifico,cursive;font-size:1.5em;color:#4967aa;margin-bottom:20px}.recipe-upload-form label{font-size:14px;color:#333;margin-bottom:8px}.recipe-upload-form input[type=text],.recipe-upload-form textarea{padding:10px;margin-bottom:20px;border:1px solid #cccccc;border-radius:4px}.recipe-upload-form #instructions{height:250px}.image-info{text-align:center}.upload-btn-wrapper{position:absolute;top:10px;right:20px;cursor:pointer}.upload-btn-wrapper button{font-family:Pacifico,cursive;border:none;color:#fff;background:RGB(73,103,170);font-size:1em;padding:8px 16px;border-radius:4px;cursor:pointer}.upload-btn-wrapper input[type=file]{font-size:100px;position:absolute;left:0;top:0;opacity:0;cursor:pointer;width:100%;height:100%}.recipe-upload-form button[type=submit]{text-decoration:none;font-family:Pacifico,cursive;color:#fff;font-size:1em;transition:all .3s;font-weight:500;border-radius:12px;padding:5px 15px;background:#595959ff}.recipe-upload-form select{padding:10px;margin-bottom:20px;border:1px solid #cccccc;border-radius:4px;background-color:#fff;cursor:pointer;transition:border-color .3s,box-shadow .3s}.recipe-upload-form select:focus{border-color:#4caf50;box-shadow:0 0 5px #00ff004d;outline:none}.recipe-upload-form input[type=text],.recipe-upload-form textarea,.recipe-upload-form select{width:100%;box-sizing:border-box}@media (max-width: 600px){.recipe-upload-form{width:100%;padding:10px}.upload-btn-wrapper{position:static;margin-top:20px;text-align:center}}.button-group{display:flex;justify-content:space-between}.url-box{background-color:RGB(73,103,170);color:#fff;width:600px;padding:50px;border-radius:10px;position:relative;margin:auto;text-align:center;top:150px;display:flex;flex-direction:column;opacity:.9}.image-space{height:250px;width:600px;display:flex;flex-direction:column;align-self:center;justify-content:center;padding-bottom:20px}.button-group{display:inline}.close-icon{position:absolute;top:10px;right:10px;cursor:pointer}input{margin-bottom:10px;padding:5px;border-radius:8px;border:none}.preview-button{background-color:#1cbcce;color:#fff;padding:8px 15px;border:none;border-radius:5px;cursor:pointer;width:280px}.confirm-button{background-color:#2ecc71;color:#fff;padding:8px 15px;border:none;border-radius:5px;cursor:pointer;width:280px}button:hover{background-color:#27ae60}.image-space img{min-height:250px;align-self:center}