*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;--black: hsl(0, 0%, 8%);--white: hsl(0, 0%, 100%);--green: hsl(156, 94%, 57%);--dark-black: hsl(0, 8%, 3%)}body{background-color:var(--black);background:linear-gradient(135deg,#0d0d0d 20%,#101915 80%);color:var(--white);min-height:100vh;padding:1rem}.main{margin:1rem 2rem;display:flex;flex-direction:column;gap:2rem;justify-content:center;align-items:center}main h1{text-align:center}main h1 span{color:var(--green);border-bottom:2px dashed var(--white);position:relative}.btns{display:flex;gap:1rem;max-width:100%;align-items:center;justify-content:center;flex-wrap:wrap}.btns button{border:none;padding:.46rem 1rem;border-radius:23px;font-weight:900;cursor:pointer}.btns button:active{transform:scale(.94)}.active{background-color:var(--green)}.searchSolution{width:60%;border:1px solid #ccc;border-radius:33px;padding:20px;outline:none;transition:border-color .3s ease,box-shadow .3s ease}.searchSolution:focus{border-color:var(--green);box-shadow:0 0 5px 2px var(--green)}.container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;background-color:inherit;max-width:100%;padding:.5rem}.card{background:var(--dark-black);border-radius:10px;box-shadow:0 4px 10px #0000001a;transition:transform .3s ease-in-out;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 .5rem .5rem #0d1117);max-width:350px}.img-box{width:100%;display:flex;align-items:center;justify-content:center}.img-box img{border-top-left-radius:10px;border-top-right-radius:10px;width:100%;max-width:100%;height:auto;object-fit:contain}.card:hover{transform:scale(1.1)}.title{font-size:1.2rem;margin:15px 0;font-size:1rem}.content{padding:1rem;text-align:center}.links a{display:inline-block;text-decoration:none;color:var(--dark-black);padding:8px 12px;border-radius:5px;transition:all .3s ease-in;font-weight:800;font-size:1rem}.links{display:flex;align-items:center!important;justify-content:center;gap:1rem;width:100%;flex-wrap:wrap}.links a:hover{color:var(--white);background-color:var(--green);transform:scale(1.1)}.demo-link{background-color:var(--green)}.demo-link:hover,.code-link{background-color:var(--white)}@media (max-width: 550px){.main{margin:2rem .5rem}h1{font-size:1.7rem}.container{grid-template-columns:1fr}h3{font-size:15px}.searchSolution{width:100%}}