* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  margin: 0;
  font-size: 12px; /* Base font size */
}

h1 {
  text-align: center;
}

.boxes1 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}
  
.textblue {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  text-align: left;
  background: #afddf9;
  border: solid 10px #6cb7e6;
  padding: 10px;
  margin: 10px;
}

.columns {
  display: flex;
  flex: 50%;
  flex-flow: column nowrap;
  justify-content: flex-start;
  text-align: left;
  padding: 10px;
}

.rows {
  display: flex;
  flex: 50%;
  flex-flow: row nowrap;
  justify-content: flex-start;
  text-align: left;
  padding: 10px;
}

.centrerows {
  display: flex;
  flex: 50%;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: left;
  padding: 10px;
}

.song {
  display: flex;
  flex: 50%;
  flex-flow: column wrap;
  justify-content: flex-start;
}