#root{font-family:Arial,Helvetica,sans-serif}body{padding-top:5em;padding-bottom:5em;height:100vh;background-color:#edfafa}@media (min-width: 768px){body{margin-left:10em;margin-right:10em}}.tab-active{border-bottom:4px rgb(202,129,2) solid;padding-bottom:.5em}form{display:flex;background-color:#fff;align-items:center}input{padding:.5em;font-size:2em;flex:1;border:none}input:focus{outline:none}button{background-color:#fff;border:none;cursor:pointer}.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:2em}.recipe-card{display:flex;flex-direction:column;justify-content:space-evenly;background-color:#fff;padding:1em;box-shadow:0 4px 12px #0000001a;position:relative;cursor:pointer;gap:1.5em}.recipe-card h3{font-size:1.5em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.view-more-button{font-size:1.5em;padding:1em;font-weight:700;margin:auto auto 3em;transition:background .2s}.view-more-button:hover{background:#f3f4f6}.app-container{display:flex;flex-direction:column;gap:2em}.header{position:relative}.header img{width:100%;height:500px;object-fit:cover;object-position:center;opacity:50%;border-radius:1em}.title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:2em;text-align:center;background-color:#000;opacity:80%;padding:.5em 1.5em}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;z-index:1}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 4px 24px #0000002e;max-height:90vh;width:90vw;max-width:600px;overflow-y:auto;border-radius:16px;background:#fff}.modal-header{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;margin-bottom:1.5em}.modal-title{font-size:2.5em;font-weight:700;letter-spacing:.02em;text-transform:capitalize;margin:0}.close-btn{font-size:2.5em;font-weight:700;color:#333;cursor:pointer;transition:color .2s;margin-left:1em}.close-btn:hover{color:#e74c3c}.modal-summary{font-size:1.15em;line-height:1.8;color:#222;margin-top:1.2em;margin-bottom:.5em;word-break:break-word;text-align:justify;text-justify:inter-word;padding-bottom:.5em}.modal-content{background-color:#fff;padding:2.5em 2em 2em;border-radius:16px;box-shadow:0 2px 8px #00000014;width:100%;box-sizing:border-box}.tabs{display:flex;gap:2em;cursor:pointer}.recipe-card-title{display:flex;align-items:center;gap:.5em}
