* {
  text-decoration: none;
  background-color: #303742
  ;
  color: white;
}

.main {
  border: 2px solid white;

  display: flex;
  height: 364px;
  width: 700px;
}

.container {
  border: 2px solid black;
  display: flex;
  flex-direction: column-reverse;

  width: 700px;
  background-color: gray;
}

.p-1 {
  height: 20px;
}

.c-1 {
  height: 200px;
}

.p-2 {
  height: 20px;
  margin-top: 180px;
}

.c-2 {
  margin-top: 180px;
  height: 180px;
}

.p-3 {
  height: 20px;
  margin-top: 340px;
}

.filling-1 {
  background-color: blue;
  height: 100%;
  width: 100%;
  transition: height 1s linear;
}

.filling-2 {
  background-color: blue;
  height: 0%;
  width: 100%;
  transition: height 1s linear;
}

.filling-3 {
  background-color: blue;
  height: 0%;
  width: 100%;
  transition: height 1s linear;
}

.filling-4 {
  background-color: blue;
  height: 0%;
  width: 100%;
  transition: height 1s linear;
}

.filling-5 {
  background-color: blue;
  height: 0%;
  width: 100%;
  transition: height 1s linear;
}