body {
  background-color: bisque;
  font-family: "Crete Round", serif;
  font-size: 80%;
  font-style: italic;
  font-weight: bold;
}

.container_1 {
  background-color: blanchedalmond;
  background-image: url("../assets/img_3.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 60vmin;
  width: 75%;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  position: relative;

  transition: 1.5s ease-in-out;
}

.container_1:hover {
  border-radius: 5%;
  transform: scale(1.2);
}

.box_1 {
  background-image: url("../assets/img_2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 35vmin;
  width: 45%;
  position: absolute;
  top: 20%;
  left: 15%;

  transition: 0.5s linear;
}

.box_1:hover {
  transform: translateX(-5%);
  opacity: 0.9;
  border-radius: 30%;
  box-shadow: 0 0 10px 10px darkgray;
}
.box_1:hover > .in_box_11 {
  display: block;
}

.box_2 {
  background-image: url("../assets/img_4.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 38vmin;
  width: 45%;
  position: absolute;
  top: 20%;
  left: 38%;
  transition: 0.5s linear;
}

.box_2:hover {
  transform: translateX(5%);
  opacity: 0.9;
  border-radius: 30%;
  box-shadow: 0 0 10px 10px burlywood;
}

.in_box_11 {
  background-image: url("../assets/book_1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: none;
  height: 9%;
  width: 3%;
  position: absolute;
  top: 58%;
  left: 8%;
  transition: 0.5s linear;
}

.in_box_11:hover {
  transform: scale(2) rotate(360deg);
}

.box_1_text_1 {
  color: aliceblue;
  background-color: grey;
  border: thin solid darkgray;
  border-radius: 40% 0 40% 0;
  display: none;
  padding: 2%;
  text-align: center;
  position: absolute;
  top: 15%;
  left: 35%;
  transform: rotate(-20deg);
}
.in_box_11:hover ~ .box_1_text_1 {
  display: block;
}

.box_1_text_2 {
  color: aliceblue;
  background-color: grey;
  border: thin solid darkgray;
  border-radius: 0 40% 0 40%;
  display: none;
  padding: 2%;
  text-align: center;
  position: absolute;
  top: 15%;
  left: 5%;
  transform: rotate(20deg);
}

.in_box_11:hover ~ .box_1_text_2 {
  display: block;
}

.in_box_21 {
  background-image: url("../assets/book_2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: none;
  height: 9%;
  width: 3%;
  position: absolute;
  top: 50%;
  left: 92%;
  transition: 0.5s linear;
}

.box_2:hover > .in_box_21 {
  display: block;
}

.in_box_21:hover {
  transform: scale(2) rotate(-360deg);
}

.box_2_text_1 {
  color: brown;
  background-color: burlywood;
  border: thin solid darkgoldenrod;
  border-radius: 40% 0 40% 0;
  display: none;
  padding: 2%;
  text-align: center;
  position: absolute;
  top: 25%;
  left: 60%;
  transform: rotate(0deg);
}

.box_2_text_2 {
  color: brown;
  background-color: burlywood;
  border: thin solid darkgoldenrod;
  border-radius: 0 40% 0 40%;
  display: none;
  padding: 2%;
  text-align: center;
  position: absolute;
  top: 15%;
  left: 10%;
  transform: rotate(0deg);
}

.in_box_21:hover ~ .box_2_text_1 {
  display: block;
}

.in_box_21:hover ~ .box_2_text_2 {
  display: block;
}

.c1_button {
  background-color: chocolate;
  background-image: url("../assets/mus_1.png");
  background-size: cover;
  background-position: center;
  border: thin solid goldenrod;
  border-radius: 10%;
  height: 12%;
  width: 3%;
  position: absolute;
  top: 5%;
  left: 3%;
  transition: 0.5s linear;
}

.c1_button:hover {
  transform: scale(0.8);
}

.c1_aud {
  border-radius: 10%;
  width: 15%;
  display: none;
  position: absolute;
  top: -10%;
}

.part_1 {
  background-image: url("../assets/part_1.png");
  background-size: cover;
  background-position: center;
  border-radius: 20%;
  display: none;
  height: 40%;
  width: 70%;
  opacity: 0.75;
  position: absolute;
  top: -20%;
  left: 18%;
}

.home {
  background-image: url("../assets/home.png");
  background-size: cover;
  height: 5vmin;
  width: 3%;
  margin-top: 7%;
  position: relative;
  left: 85%;
}
.home > p {
  color: darkorange;
  font-size: 80%;
  font-weight: bold;
  position: absolute;
  top: 70%;
  left: 20%;
}
