/* Default style sheet to be used with my pages
basic style is black on a white background */

/* key elements */
html { 	font-family: Helvetica, Verdana, Geneva, sans-serif; }
body {background-color: Gainsboro; }
* {
  box-sizing: border-box;
}
h1, h2, h3 {color:MidNightBlue;
	padding: 15px 0px 0px 0px;
	}
p {color:Black; }
a:link{color:MediumBlue;}
a:visited{color:Orchid;}
table {
    border-collapse: collapse;
	color:Black;
}
th { font-weight: bold; }
td { font-size: 75%; }
.caption {
  font-style: italic;
  font-weight: bold;
  margin: 0 0 0 0;
}
.code {font-family: Courier;
}
/* img {
  width: 100%;
  height: auto;
} */

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: flex-start;  /* or center */
  padding: 10px 10px 0px 10px;  
}
/* padding order: top, right, bottom, left */


/* Default Flex - overrides for larger screens below*/
.row > div {
  flex: 100%;
  max-width: 100%;
  padding: 10px 10px 0px 10px;  
}

/* Responsive layout - 3 col layout */
@media (min-width: 601px) {
    .para {font-size: 12px;}
    .caption {font-size: 10px;}
    .row > div {
      flex: 33%;
      max-width: 33%;
    }
}

@media (min-width: 901px) {
    .para {font-size: 14px;}
    .caption {font-size: 12px;}
}

@media (min-width: 1201px) {
    .para {font-size: 18px;}
    .caption {font-size: 14px;}
}

@media (min-width: 1501px) {
    .para {font-size: 22px;}
    .caption {font-size: 16px;}
}

@media (min-width: 1801px) {
    .para {font-size: 24px;}
    .caption {font-size: 18px;}
}