body{
  font-family:Arial;
  background:#1e1e2e;
  color:white;
  margin:0;
  padding:20px;
}

h1{
  text-align:center;
}

.container{
  display:flex;
  gap:20px;
  margin-top:20px;
}

.sidebar,
.discoveries{
  width:220px;
  background:#2b2b3c;
  padding:10px;
  border-radius:8px;
  height:400px;
  overflow:auto;
}

.workspace{
  flex:1;
  background:#2b2b3c;
  border:2px dashed #555;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.element{
  background:#3c3c55;
  padding:8px;
  margin:5px 0;
  border-radius:6px;
  cursor:grab;
  transition:0.2s;
}

.element:hover{
  background:#5a5a7a;
}

#search{
  width:100%;
  padding:8px;
  border-radius:6px;
  border:none;
  margin-top:10px;
}

#result{
  position:fixed;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  background:#4caf50;
  padding:15px 30px;
  border-radius:10px;
  opacity:0;
  transition:0.4s;
  font-size:20px;
}

#result.show{
  opacity:1;
  transform:translateX(-50%) scale(1.1);
}

ul{
  padding-left:20px;
}
.workspaceElement{
  background:#4c4c70;
  padding:10px 14px;
  border-radius:8px;
  margin:5px;
  display:inline-block;
  animation:pop 0.3s;
}

@keyframes pop{
  from{transform:scale(0.7);opacity:0;}
  to{transform:scale(1);opacity:1;}
}