@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Rubik+Mono+One&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

.navbar {
  background-color: rgb(42, 42, 42);
}

body {
  background-image: url('https://www.shutterstock.com/image-vector/four-bright-spotlights-shine-on-260nw-2570696771.jpg');
  background-size: cover;
}

#draggable1,
#draggable2,
#draggable3,
#draggable4 {
  width: 100px;
  height: 100px;
  float: right;
  margin: 10px 10px 10px 10px;
  background-color: transparent;
}

#droppable1,
#droppable2,
#droppable3,
#droppable4 {
  width: 100px;
  height: 100px;
  padding: 1em;
  background-color: transparent;
  position: absolute;
  top: 430px;
}

#droppable1 {
  left: 146px;
}

#droppable2 {
  left: 435px;
}

#droppable3 {
  left: 760px;
}

#droppable4 {
  left: 1100px;
}

img {
  width: 100px;
  height: 100px;
}

h4 {
  color: white;
}

footer {
  background-color: rgb(42, 42, 42);
}

a {
  color: white;
  text-decoration: none;
}