body { font-size: 18px; } /* Desktop default */
@media (max-width: 767px) {
  body { font-size: 16px; } /* Mobile size */
}


/*
--------------------------------------------------container--------------------------------------------------------------------------------------------------
*/
.container {
  display: flex;
  background-color: DodgerBlue;
}

.container div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
/*
  fancy input------------------------------------------flex container---------------------------------------------------------------------------------------------------------
*/
* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  column-gap: 60px;
  
}


.flex-item {
 /*
  background-color: #f1f1f1;
  */
  margin-top: 20px;
  padding: 10px;
  border: 3px solid green;
  border-radius:15px;
  font-size: 30px;
  text-align: left;
  width: 100%;
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}