*{box-sizing:border-box}body{background:#2d2013;color:#fff;font-family:Verdana,Geneva,Tahoma,sans-serif;margin:0}.container{margin:auto;max-width:800px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.flex{display:flex}input,button{border:1px solid #dedede;border-top-left-radius:4px;border-bottom-left-radius:4px;font-size:14px;padding:8px 10px;margin:0}input[type=text]{width:300px}.search-btn{cursor:pointer;border-left:0;border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.random-btn{cursor:pointer;margin-left:10px;border-top-right-radius:4px;border-bottom-right-radius:4px}.meals{display:grid;grid-template-columns:repeat(4, 1fr);grid-gap:20px;margin-top:20px}.meal{cursor:pointer;position:relative;height:180px;width:180px;text-align:center}.meal img{width:100%;height:100%;border:4px #fff solid;border-radius:2px}.meal-info{position:absolute;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;transition:opacity .2s ease-in;opacity:0}.meal:hover .meal-info{opacity:1}.single-meal{margin:30px auto;width:70%}.single-meal img{width:300px;margin:15px;border:4px #fff solid;border-radius:2px}.single-meal-info{margin:20px;padding:10px;border:2px #e09850 dashed;border-radius:5px}.single-meal p{margin:o;letter-spacing:.5px;line-height:1.5}.single-meal ul{padding-left:0;list-style-type:none}.single-meal ul li{border:1px solid #ededed;border-radius:5px;background-color:#fff;display:inline-block;color:#2d2013;font-size:12px;font-weight:bold;padding:5px;margin:0 5px 5px 0}@media(max-width: 800px){.meals{grid-template-columns:repeat(3, 1fr)}}@media(max-width: 700px){.meals{grid-template-columns:repeat(2, 1fr)}.meal{height:200px;width:200px}}@media(max-width: 500px){input[type=text]{width:100%}.meals{grid-template-columns:1fr}.meal{height:300px;width:300px}}