*{box-sizing:border-box}body{background-color:#212121;width:100vw;height:100vh;margin:0 0 3em;padding:0 0 2em;font-family:Montserrat,sans-serif}h1,p,h2{color:#e9d2a8;margin:0;padding:0}header{background-color:#282828;padding:1.5em}.header-text>h1{text-align:center;margin-bottom:.5em}.header-text>p{text-align:center;letter-spacing:1.5px;font-size:.9rem}.button-container{justify-content:space-around;margin-top:1.5em;display:flex}button{letter-spacing:.4px;cursor:pointer;background-color:#c69e73;border-color:#c69e73;border-radius:10px;width:150px;height:40px;font-family:inherit;font-size:.8rem;font-weight:600;box-shadow:0 0 4px #e7ba8a}button.active{color:#212121;background-color:#e9d2a8;border-color:#e9d2a8}.card-container{width:300px;height:250px;margin:auto auto 2em;padding:1.5em}.coffee-popular{color:#000;background-color:#c69e73;border-radius:10px;margin:.5em;padding:.3em .5em;font-size:.7rem}.coffee-img{anchor-name:--coffee-img-anchor;z-index:-10;border-radius:10px}.coffee-popular{position-anchor:--coffee-img-anchor;position-visibility:always;position:absolute}.star-icon{width:12px}.coffee-name{text-align:center;margin-bottom:.5em}.coffee-image-outside{flex-direction:column;font-size:.8rem;display:flex}.row-one{justify-content:space-between;align-items:center;margin-top:.5em;margin-bottom:.5em;display:flex}.coffee-price,.coffee-available{color:#000;background-color:#9e9368;border-radius:10px;padding:.2em .5em;font-size:.8rem}.coffee-soldout{color:#f5f5f5;background-color:#742c0d;border-radius:10px;padding:.2em .5em;font-size:.8rem}.hide{display:none}.row-two{justify-content:space-between;align-items:center;display:flex}.row-two-rating{display:flex}.coffee-rating{margin-left:.3em}@media screen and (width>=700px){.coffee-data{grid-template-columns:auto auto;max-width:1200px;margin:auto auto 0;display:grid}.card-container{margin-bottom:3em}}@media screen and (width>=1000px){header{padding:2em}.header-text{min-width:800px;max-width:1000px;margin:auto}.header-text>h1{font-size:3rem}.header-text>p{font-size:1.5rem}.coffee-data{grid-template-columns:auto auto auto;max-width:1200px;margin:auto;padding-bottom:3em;display:grid}.button-container{justify-content:center;gap:2em}}