*{
  margin: 3px;
  padding: 3px;
}
body{
  background-image: url(hbd9.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
p{
  text-align: center;
  color: black;
  font-weight: bold;
}

.div1{
  background: #dff9fb;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 20px;
  left: 0;
  text-align: center;
}
.div1:hover{
  width: 100%;
  background: red;
  color: white;
}

.div2{
  background: #6ab04c;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 180px;
  right: 0;
}
.div2:hover{
  width: 100%;
  background: red;
  color: white;
}
.div3{
  background: #ff6b6b;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 340px;
  left: 0;
}
.div3:hover{
  width: 100%;
  background: red;
  color: white;
}
.div4{
  background: #1dd1a1;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 500px;
  right: 0;
}
.div4:hover{
  width: 100%;
  background: red;
  color: white;
}
.div5{
  background: #aaa69d;
  width: 300px;
  height: 80px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 660px;
  left: 0;
  text-align: center;
}
.div5:hover{
  width: 100%;
  background: red;
  color: white;
}
.div6{
  background: red;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 820px;
  right: 0;
}
.div6:hover{
  width: 100%;
  background: red;
  color: white;
}
.div7{
  background: #CAD3C8;
  width: 300px;
  height: 90px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 980px;
  left: 0;
}
.div7:hover{
  width: 100%;
  background: red;
  color: white;
}
.div8{
  background: #D6A2E8;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 1140px;
  right: 0;
}
.div8:hover{
  width: 100%;
  background: red;
  color: white;
}
.div9{
  background: #25CCF7;
  width: 300px;
  height: 130px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 1300px;
  left: 0;
}
.div9:hover{
  width: 100%;
  background: red;
  color: white;
}
.div10{
  background: #079992;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 1460px;
  right: 0;
}
.div10:hover{
  width: 100%;
  background: red;
  color: white;
}
.div11{
  background: #fa983a;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 1620px;
  left: 0;
}
.div11:hover{
  width: 100%;
  background: red;
  color: white;
}
.div12{
  background: #b8e994;
  width: 300px;
  height: 80px;
  opacity: 0.4;
  border-radius: 45px;
  position: absolute;
  top: 1780px;
  right: 0;
}
.div12:hover{
  width: 100%;
  background: red;
  color: white;
}
.div13{
  background: #f368e0;
  width: 300px;
  height: 100px;
  opacity: 0.4;
  border-radius: 10px;
  position: absolute;
  top: 1940px;
  left: 53px;
}