@import"https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap";#root{margin:0 auto;text-align:center;box-sizing:border-box}.dark-background{background-color:#222}.category-wrapper{width:90%;max-width:1000px;margin:3em auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2em}.category-wrapper img{border-radius:16px}.category-card{border:1px solid #222;border-radius:16px;padding:2em 1em;transition:ease-in-out .3s;display:flex;flex-direction:column;justify-content:space-around;min-height:425px}.category-card:hover{-webkit-box-shadow:4px 1px 21px -7px rgba(34,34,34,.4);box-shadow:4px 1px 21px -7px #2226;cursor:pointer}.random-button{display:flex;flex-direction:column;justify-content:center;color:#fff;background-color:orange;cursor:pointer;border-radius:12px;font-size:3rem;height:425px;font-family:Permanent Marker,cursive}.search-wrapper{margin-top:2em;width:100%;max-width:1000px}.search-wrapper input[type=text]{width:60%}header{display:flex;align-items:center;flex-direction:column;margin-bottom:2em;padding:2em}.toggle-theme{align-self:self-end;position:absolute;padding:0}.dark-switcher,.light-switcher{display:block;width:30px;height:30px}.logo-button{display:flex;align-items:center;flex-direction:column}.divwrapper{background-repeat:no-repeat;background-size:cover;width:200px;height:200px}.light-image-wrapper{background-image:url(/img/yummy-logo.png)}.dark-image-wrapper{background-image:url(/img/Yummy_yeah.png)}footer{margin-top:5em;width:100%;padding:3em 0}.footer-social-wrapper{height:30px;display:flex;justify-content:center;gap:2em}.category-items-wrapper{display:grid;grid-template-columns:repeat(2,1fr)}.category-items-wrapper img{width:300px}.detail-view-wrapper{margin:3em auto}.detail-view-wrapper img{border-radius:16px;width:100%;height:500px;object-fit:cover}.item-info{display:flex}.detail-info-text-img-container{width:75%;padding:0 3em}.detail-item-info{display:flex;width:80%;margin:3em auto}.detail-item-info-text{padding:3em 0;text-align:left}.detail-item-info-text h2{margin-bottom:2em}.ingredients-sidebar{text-align:left;width:25%;padding:3em 1em 3em 4em;border:1px solid #222;border-radius:16px;text-transform:capitalize;align-content:center}.ingredients-sidebar ul{list-style:none;line-height:2.5rem;margin:2em 0}.ingredients-sidebar button{margin-top:2em}.loading-wrapper{width:100%;height:100vh;display:flex;justify-content:center;align-content:center}.loader{width:100px;height:100px;display:block;margin:auto;position:relative;background:#222;border-radius:50%;box-sizing:border-box;transform-origin:170px 50px;border:4px solid #333;box-shadow:3px 4px #0003 inset,0 0 6px #0002 inset;animation:panmov .4s ease-in-out infinite alternate}.loader:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) skew(-15deg,15deg) rotate(-15deg);width:55px;height:53px;background:#fff;background-image:radial-gradient(circle 3px,#fff6 90%,transparent 10%),radial-gradient(circle 12px,#ffc400 90%,transparent 10%),radial-gradient(circle 12px,#ffae00 100%,transparent 0);background-repeat:no-repeat;background-position:-4px -6px,-2px -2px,-1px -1px;box-shadow:-2px -3px #0002 inset,0 0 4px #0003 inset;border-radius:47% 36% 50% 50%/49% 45% 42% 44%;animation:ylmov .6s ease-in-out infinite alternate}.loader:after{content:"";position:absolute;left:100%;top:48px;height:15px;width:70px;background:#222;border-radius:0 8px 8px 0;box-shadow:3px 0 3px #eee2 inset;transform:rotate(5deg) translate(3px)}@keyframes panmov{0%,10%{transform:rotate(5deg)}90%,to{transform:rotate(-5deg)}}@keyframes ylmov{to{border-radius:50% 36% 50% 50%/49% 50% 45% 45%;background-position:-2px -4px,2px 2px,1px 1px}}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif}a{text-decoration:none}p{color:#222;font-size:1.1rem;line-height:1.7rem}img{max-width:100%}button{background-color:#febf00;padding:1em 2em;border:none;border-radius:25px}button:hover{background-color:#fe8b00;cursor:pointer;color:#fff}input[type=text]{border-radius:25px;border:1px solid #222;padding:1em 2em;margin-right:1.5em}h1{font-size:5.5rem;font-family:Permanent Marker,cursive;font-weight:400;font-style:normal;color:#222}h2,h3{font-size:1.5rem;font-family:Permanent Marker,cursive;font-weight:400;font-style:normal;color:#222}.dark-background .yummy-titel,.dark-background .detail-item-info-text p,.dark-background .detail-item-info-text h2,.dark-background .category-card h2{color:#fff}.dark-background .category-card{border:1px solid #fff}.dark-background .ingredients-sidebar{border:1px solid #fff;color:#fff}.dark-background .ingredients-sidebar h3{color:#fff}@media screen and (max-width: 550px){.detail-item-info{flex-direction:column;align-items:center}.detail-item-info-text,.ingredients-sidebar{width:100%}h1{font-size:3rem}.search-wrapper input[type=text]{width:100%;margin-bottom:1em}.divwrapper{width:100px;height:100px}.detail-info-text-img-container{width:100%}.detail-info-text-img-container{width:100%;padding:0}}