* { box-sizing: border-box; margin: none; } body { background-color: rgb(255, 255, 255); display: flex; margin-top: 25px; align-items: center; justify-content: center; background-image: url("../assets/bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .wrapper { display: flex; width: 90vw; height: 90vh; align-items: center; justify-content: center; } .container { display: flex; align-items: center; background-color: rgb(0, 255, 255,0.2); backdrop-filter: blur(15px); border-radius: 30px; width: 90vw; height: 80vh; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); overflow: hidden; } footer{ position: fixed; bottom: 0px; background-color: rgb(12, 12, 12); height: 50px; width: 100vw; } footer p{ color: white; text-align: center; } .contentbox { display: flex; position: absolute; right: 30px; background-color: rgb(0, 255, 255,0.3); border-radius: 20px; height: 85%; width: 40%; justify-content: center; align-items: center; } .searchbar { display: flex; justify-content: center; align-items: center; position: absolute; overflow: hidden; top: 20px; width: 90%; height: 10%; background-color: rgb(255, 255, 255, 0.8); border-radius: 10px 10px 0 0; } .searchbar input { width: 95%; height: 80%; border: blue 2px slateblue; box-shadow: none; background-color: rgb(255, 255, 255, 0.5); border-radius: 20px; padding-left: 20px; padding-right: 40px; } .searchbar img { display: block; position: absolute; top: 24%; right: 25px; width: 25px; } .objcontainer { display: flex; flex-direction: column; row-gap: 10px; position: absolute; bottom: 20px; width: 90%; height: 80%; background-color: rgb(255, 255, 255, 0.8); border-radius: 0 0 10px 10px; overflow: auto; padding-top: 10px; padding-bottom: 10px; align-items: center; } .objcontainer div{ padding: 20px; width: 90%; height: 200px; background-color: rgb(255, 255, 255, 0.5); text-align: center; box-shadow: 0 0 10px black; border: rgba(0, 255, 255, 0.5) 1px solid; overflow: hidden; } .objcontainer div:hover { background-color: rgb(128, 128, 128, 0.4); } .objcontainer div:not(:hover) { background-color: rgb(255, 255, 255, 0.5); } .querybox { display: flex; justify-content: center; align-items: center; position: absolute; left: 30px; bottom: 40px; background-color: rgb(0, 255, 255,0.3); border-radius: 20px; height: 60%; width: 50%; } .infopanel { width: 90%; height: 80%; background-color: rgb(255, 255, 255, 0.8); border-radius: 10px; } .buttonbox { position: absolute; left: 30px; top: 40px; background-color: rgb(0, 255, 255,0.3); border-radius: 20px; height: 20%; width: 50%; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: hsl(0, 0%, 53%); } ::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 33%); }