@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap";.footer{padding:20px 0;display:flex;justify-content:center;align-items:center;border-top:1px solid var(--color-border)}.footer p{font-size:var(--font-size-text);color:var(--color-text)}.navbar{padding-bottom:20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-border)}.navbar .pattern{display:flex;gap:2px}.navbar .pattern .circle{width:25px;height:25px;border-radius:50%}.navbar .pattern .white{background-color:var(--color-white)}.navbar .pattern .gray{background-color:var(--color-text)}.navbar .pattern .primary{background-color:var(--color-primary)}.navbar .logo{font-size:var(--font-size-l)}.navbar .logo span{font-weight:700}.navbar .github{letter-spacing:2px;color:var(--color-bg);padding:4px 14px;background-color:var(--color-white);border-radius:5px;transition:.3s linear}.navbar .github:hover{background-color:var(--color-text)}@media screen and (max-width: 720px){.navbar .pattern .circle{width:20px;height:20px}.navbar .github{letter-spacing:1px;padding:2px 10px}}.categories{display:flex;justify-content:start;align-items:center;gap:20px;flex-wrap:wrap}.categories button{padding:5px 10px;border-radius:5px;background-color:transparent;color:var(--color-text);font-size:var(--font-size-text);cursor:pointer;border:1px solid transparent;transition:.3s linear}.categories button:hover{border:1px solid var(--color-border);color:var(--color-white)}.categories .active{padding:5px 10px;background-color:var(--color-search);border-radius:5px}.home_container{display:flex;flex-direction:column;gap:50px;margin-bottom:20px;flex:1}.home_container .home_top{padding-top:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.home_container .home_top .head{display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:default}.home_container .home_top .head p{font-size:var(--font-size-xl);font-weight:700;letter-spacing:2px;text-align:center}.home_container .home_top .head p .primary{color:var(--color-primary)}.home_container .home_top .head p .gray{background:linear-gradient(to bottom,#fff,#fff0);-webkit-background-clip:text;color:transparent;opacity:50%;transition:.3s linear}.home_container .home_top .search_wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}.home_container .home_top .search_wrapper .search{display:flex;justify-content:space-around;gap:100px;align-items:center;background-color:var(--color-search);padding:10px 30px;border-radius:5px;border:1px solid var(--color-border)}.home_container .home_top .search_wrapper .search .input_content{display:flex;gap:10px;align-items:center;justify-content:center}.home_container .home_top .search_wrapper .search .input_content .icon{color:var(--color-text)}.home_container .home_top .search_wrapper .search .input_content input{outline:none;background:transparent;font-size:var(--font-size-text);padding:5px;color:var(--color-text)}.home_container .home_top .search_wrapper .search .search_btn{background-color:var(--color-primary);color:var(--color-bg);letter-spacing:2px;padding:4px 14px;border-radius:5px;transition:.3s linear;font-size:var(--font-size-text);cursor:pointer}.home_container .home_top .search_wrapper .search .search_btn:hover{background-color:var(--color-primary-variant)}.home_container .home_top .search_wrapper .search-tag{font-size:var(--font-size-text);color:var(--color-text)}.home_container .home_bottom{display:flex;flex-direction:column;gap:50px}.home_container .home_bottom .search_input-state,.home_container .home_bottom .no-card{font-size:var(--font-size-text);color:var(--color-text);text-align:center}@media screen and (max-width: 720px){.home_container .home_top{padding-top:50px}.home_container .home_top .head p{letter-spacing:1}.home_container .home_top .search_wrapper .search{gap:50px;padding:5px 10px}.home_container .home_top .search_wrapper .search .search_btn{padding:2px 7px}}@media screen and (max-width: 420px){.home_container .home_top{padding-top:20px}.home_container .home_top .search_wrapper .search{gap:20px}}@media screen and (max-width: 350px){.home_container .home_top .search_wrapper .search{flex-direction:column;align-items:center;justify-content:center;gap:10px}}.card_wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.card_wrapper .card_container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card_wrapper .card{display:flex;flex-direction:column;gap:5px}.card_wrapper .card .image_container{width:100%;max-height:330px;min-height:200px}.card_wrapper .card .image_container img{width:100%;height:100%;object-fit:cover}.card_wrapper .card .card_details{display:flex;align-items:center;justify-content:space-between}.card_wrapper .card .card_details p{font-size:var(--font-size-text)}.card_wrapper .card .card_details p span{color:var(--color-text)}.card_wrapper .card .card_details .heart{font-size:var(--font-size-text);color:var(--color-text)}.card_wrapper .load-more{padding:4px 14px;border-radius:5px;font-size:var(--font-size-text);color:var(--color-bg);background-color:var(--color-primary);cursor:pointer;transition:.3s linear}.card_wrapper .load-more:hover{background-color:var(--color-primary-variant)}@media screen and (max-width: 720px){.card_wrapper .load-more{padding:2px 7px}}:root{--color-bg: #000;--color-primary: #ff3d00;--color-primary-variant: #F95521;--color-white: #F9F9F9;--color-text: #7e7e7e;--color-border: #2B2A2A;--color-search: #1b1b1b;--font-size-xl: clamp(2rem, 1.3182rem + 3.6364vw, 4.5rem);--font-size-l: clamp(1.125rem, .8864rem + 1.2727vw, 2rem);--font-size-sm: clamp(.875rem, .7727rem + .5455vw, 1.25rem);--font-size-text: clamp(.75rem, .6818rem + .3636vw, 1rem)}*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;border:none}body{min-height:100vh;font-family:Space Grotesk,sans-serif;background-color:var(--color-bg);color:var(--color-white);cursor:default}.container{width:95%;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;margin:0 auto;padding:20px 100px 10px}@media screen and (max-width: 1280px){.container{width:100%;padding:10px}}
