html,body{height:100%;margin:0}body{align-items:center;display:flex;justify-content:center;background:fixed linear-gradient(to bottom right, #444444, #40724d);font-size:1.5rem}main{color:#fff6d5;font-family:sans-serif;text-align:center;width:100%;height:100%}.frontend{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:20px}.search_bar{min-height:60px;display:flex;justify-content:center;align-items:center;border-bottom:2px solid rgba(255,255,255,.2);box-sizing:border-box;flex-wrap:wrap}.filter{min-height:20px;overflow-x:scroll;border-bottom:2px solid rgba(255,255,255,.2)}.filter_label{margin:1rem 0 .3rem 0}.filter_select{min-width:50%;height:20vh;min-height:100px}.filter_minmax{display:flex;min-width:75%;justify-content:center;gap:15px;flex-wrap:wrap}@media(min-width: 768px){.frontend{grid-template-columns:min(max(25vw,400px),500px) 3fr;height:calc(100% - 60px)}.filter{order:1;border-right:2px solid rgba(255,255,255,.2);border-bottom:none;min-height:fit-content}.results{order:2}.search_input{width:70vw;max-width:800px;margin-left:0;margin-right:15px}}.search_input{height:60%;border:0;width:80vw;font-size:1.2rem;border-radius:6px;padding-left:4px;box-sizing:border-box;background-color:rgba(255,255,255,.8156862745);margin-left:2rem;margin-right:2rem}.search_input:hover{background-color:rgba(255,255,255,.7294117647)}.search_button{height:60%;border:0;width:32px;border-radius:6px;background:rgba(255,255,255,.3333333333);padding:0;font-size:1.3rem}.results{display:grid;grid-template-columns:repeat(auto-fit, minmax(284px, 1fr));gap:20px;justify-items:center;padding:1rem 2rem 1rem 2rem;height:fit-content}.card{background-color:rgba(184,184,184,.3333333333);border-radius:12px;width:280px;padding:2px;transition:background-color 150ms;max-width:fit-content;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.card:hover{background-color:rgba(184,184,184,.5215686275)}.card>.top,.card>.bottom{display:flex;flex-direction:column;align-items:center;width:100%}.card>.bottom>.title{font-size:.8rem}.card>.top>.image_container{min-height:5rem;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.5137254902);border-radius:11px 11px 0 0;border:2px solid #48714f;box-sizing:border-box;width:100%}.card>.top>.image_container>img{object-fit:cover;border-radius:9px 9px 0 0;width:100%;max-height:230px}.card>.top>.gpu_variant{font-size:1.2rem;margin:8px 0 0 0}.card>.bottom>.price{font-size:1.8rem;margin-top:8px;margin-bottom:8px}.gpu_amd{color:red}.gpu_intel{color:blue}.gpu_nvidia{color:#aeffae}.card>.bottom>button,.filter_button{background:#7fffd4;border:none;border-radius:6px;padding:4px 16px 4px 16px;cursor:pointer;transition:all 180ms ease;margin-bottom:10px;font-size:.9rem;width:fit-content}.card>.bottom>button:active,.filter_button:active{transform:scale(0.9)}.filter_button{margin:1rem 0 .8rem 0}hr{margin:0;color:#fff}.quotient{display:flex;flex-direction:column}.scrape_options{display:flex;justify-content:center;place-items:center}.scrape_options>button{background-color:#7fffd4;border:none;border-radius:6px;cursor:pointer;padding:8px 16px 8px 16px;color:#000;font-size:1.1rem;margin-right:3rem}.scrape_options>button:disabled{background-color:gray;cursor:not-allowed;opacity:40%}.scrape_options>input{margin:0 12px 0 12px}