/*flex.css*/
.bmenu {
  display: flex;
  flex-flow:  wrap;/*  Allow items to wrap into multiple lines */
  height: 100%;
  background-color: rgb(0 148 207);
}
.bmenu0 {
  justify-content: space-between; /* flex-start; column; row */
}
.bmenu1 {
  justify-content: space-between; /* flex-start; column; row */
  flex-direction: row-reverse;
}
.bmenu2 {
  justify-content: center;/* space-between; flex-start; column; row */
}
.bmenu3 {
  justify-content: flex-end;
}
.bmenu4 {
  flex-direction: row-reverse;
}
.bmenu5 {
  flex-direction: column;
  width: 50%;/**/
}
.bmenu55 {
  flex-direction: row;
}
.bmenu55 > div {
  flex: 1 0 9em; 
  margin: 1px 1px 1px 0;
}
.bmenu6 {
  flex-direction: row;
  justify-content: flex-end;;
}

.list1 {
  color: white;
  padding: 12px;
}
.list1:hover{
  background-color: white;
  color: blue;
  cursor: pointer;
}

.list2 {
  color: white;
  padding: 12px;
  border: 2px solid rgb(0 98 137);
}
.list2:hover{
  background-color: white;
  color: blue;
  cursor: pointer;
}

.list3 {
  color: white;
  padding: 12px;
  border: 2px solid rgb(0 98 137);
  background-color: rgb(0 148 207);
}
.list3:hover{
  background-color: white;
  color: blue;
  cursor: pointer;
}

.list4 {
  color: white;
  padding: 12px;
  margin: 8px 15px 8px 0px;
	/*width: 30%;*/
  border: 2px solid rgb(0 98 137);
}
.list4:hover{
  background-color: white;
  color: blue;
  cursor: pointer;
}

/********ch3*********/

.flex-container {
  display: flex;
  flex-flow:  wrap;/*  Allow items to wrap into multiple lines */
  flex-direction: row;
  height: 100%;

  gap: 10px; /* проміжок між елементами */
}

.flex-item {
  text-align: center;
  background-color: rgb(237 103 62);
  color: white;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/********ch4*********/