body{margin:0;font-family:Arial,sans-serif;background-color:#121212;color:#fff}.sidebar{position:fixed;top:50%;left:10px;transform:translateY(-50%);background-color:hsla(0,0%,7%,.8);border-radius:100px;box-shadow:0 0 10px rgba(0,188,212,.5);padding:20px;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav{display:flex;flex-direction:column;justify-content:space-around;height:100%}.nav-item{color:#00bcd4;text-decoration:none;display:block;margin:10px 0;text-align:center}.nav-item:hover{color:#fff}@media (max-width:1280px){body{padding-bottom:120px}.sidebar{position:fixed;bottom:0;left:0;right:0;width:100%;height:60px;background-color:hsla(0,0%,7%,.8);border-radius:0;box-shadow:0 -2px 10px rgba(0,188,212,.5);padding:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);top:auto;transform:none}.nav{flex-direction:row;justify-content:space-around;height:100%;padding:0}.nav,.nav-item{display:flex;align-items:center}.nav-item{color:#00bcd4;text-decoration:none;font-size:1rem;flex-direction:column}.nav-item span{margin-top:5px;font-size:.75rem}.nav-item:hover{color:#fff}}.scroll-container{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px;scrollbar-width:thin;scrollbar-color:#00bcd4 transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.scroll-container::-webkit-scrollbar{height:8px}.scroll-container::-webkit-scrollbar-thumb{background-color:#00bcd4;border-radius:10px}.scroll-container::-webkit-scrollbar-track{background:transparent}.card{flex:0 0 auto;width:150px;margin-right:10px;scroll-snap-align:start;transition:transform .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.card img{width:100%;border-radius:5px;pointer-events:none}.card h3,p{text-align:center}.scroll-container{cursor:-webkit-grab;cursor:grab}.scroll-container.grabbing{cursor:-webkit-grabbing;cursor:grabbing}.content-container{max-width:1200px;margin:0 auto;padding:20px;background-color:hsla(0,0%,7%,.9);border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.5)}.search-container{display:flex;gap:10px;margin-bottom:20px}.search-input{flex:1 1;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:1rem}.search-button{padding:10px 20px;background-color:#00bcd4;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:20px;gap:20px}