@keyframes gradient-move{0%{background-position:0% 50%}to{background-position:50% 100%}}@keyframes typing{0%{content:"."}50%{content:".."}to{content:"..."}}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Marope,sans-serif;width:100vw;height:100%;margin:0;padding:0}.wrapper{display:flex;flex-direction:column;min-height:100vh}header{display:flex;justify-content:center;align-items:center;position:sticky;top:0;z-index:999;width:100%;height:5rem;box-shadow:0 1px 3px #0000001a;background-color:#f5f5db}@media (min-width: 26.76rem){header{height:7rem}}header .brand{display:flex;align-items:center;justify-content:space-between;height:60px;width:226px}header .brand-image-container{height:100%;width:60px;overflow:hidden}header .brand-image{width:100%;height:100%;object-fit:cover}header .brand-name{font-weight:700;color:#3e2723}main{width:100%;bottom:3rem;margin:auto;padding:auto;flex:1}main .hero{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;margin-bottom:1.25rem}main .hero .intro{margin:2rem;width:90%;padding:0}main .hero .intro-heading{font-weight:700;background:linear-gradient(90deg,#8b4513,#d2691e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gradient-move .3s ease-in infinite;font-size:3rem;text-align:center;margin-bottom:1rem}main .hero .intro-description{font-size:1.1rem;text-align:center;color:#3e2723;font-weight:700}@media (min-width: 26.76rem){main .hero .intro{padding:2rem;width:80%}}main .hero .form{display:flex;justify-content:center;align-items:center;width:90%;gap:8px;height:38px}@media (min-width: 26.76rem){main .hero .form{width:80%}}main .hero .form-input{flex-grow:1;min-width:10rem;max-width:16rem;height:100%;padding:1rem;border:2px solid hsl(19,56%,40%);outline:none;border-radius:.5rem}main .hero .form-button{width:8rem;height:100%;border:none;border-radius:.5rem;color:#f5f5db;background:#8b4513;cursor:pointer;transition:all .3s ease-in}main .hero .form-button:hover{background:#9f512d}main .hero .form-button:active{background-color:#d2691e}main .hero .form-button:disabled{cursor:not-allowed;background-color:#d2691e}main .recipe{padding:1rem;width:100%;display:grid;place-items:center}@media (min-width: 26.76rem){main .recipe{padding:2rem}}main .recipe-container{display:flex;justify-content:center;align-items:center;flex-direction:column;width:90%;background-color:#eaeab3;padding:1rem;border:2px double hsl(19,56%,40%);border-radius:.5rem}@media (min-width: 26.76rem){main .recipe-container{width:75%;padding:1.25rem}}main .recipe-container h1{color:#9f512d;font-weight:700;font-size:2rem;text-decoration:underline;text-align:center;margin-bottom:.5rem}main .recipe-container h2{color:#d2691e;margin:.5rem 0;font-size:1.7rem;text-align:center}main .recipe-container h3{color:#d2691e;margin:.2rem 0;text-align:center}main .recipe-container ul,main .recipe-container ol{color:#3e2723;font-weight:700;margin:.5rem 0;list-style-type:none;display:flex;justify-content:center;align-items:center;flex-direction:column;align-items:flex-start}main .recipe-container ul li,main .recipe-container ol li{line-height:1.85rem}main .recipe-container ul li strong,main .recipe-container ol li strong{display:block;font-size:1rem;font-family:Marope,sans-serif}main .recipe-container p{margin:1rem auto;text-align:center;color:#3e2723;font-weight:700}main .recipe-container p strong{font-size:1.5rem;font-family:Marope,sans-serif}main .recipe-container p .loading{font-weight:700}main .recipe-container p .loading:after{content:"";animation:typing 1.2s infinite}footer{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:5rem;background-color:#f5f5db}footer .rule{border:1px solid hsl(25,76%,31%);width:80%;margin-bottom:1rem}footer .footer-message{width:80%;text-align:center;color:#3e2723;font-weight:700}