/* CSS Test3 Styles v3.0 by Ron Craig*/
/* Written 11 Nov 2020  :Revised 17 Jan 2023 */
/* Flexbox startup
   # - id="" - can only be used 1nce per page
   . - class="" - can be used multiple times per page */
/*  The width & height properties do not include padding, border, & margin of the element  */

.flex-tabl-container {
  display:flex;
  flex-direction:column;
  max-width:720px;
  margin:auto;
  padding:1rem;
  border-radius:1rem;
  font:italic bold 2rem/3.6rem cursive,sans-serif;
}
.flex-tabl-row {
  display:flex;
  flex-wrap:wrap;
  max-width:700px;
}
.flex-tabl-col1,
.flex-tabl-col3 {
  width:175px;
}
.flex-tabl-col1 { order:1; }
.flex-tabl-col2 {
  width:350px;
  order:2;
}
.flex-tabl-col3 { padding-right:1rem; text-align:right; order:3; }
.flex-tabl-col3-top { padding-left:7rem; text-align:left; order:3;}

@media(max-width: 970px) {
  .flex-tabl-container { max-width:400px; }
  .flex-tabl-col1 { order:1; }
  .flex-tabl-col2 { order:3; }
  .flex-tabl-col3,
  .flex-tabl-col3-top { padding-right:1rem; order:2; }
}

  /* EOF */