* {
  box-sizing: border-box;
}

body {
  background-color:tan;
}

code, cite {
	color: blue;
}

.page {
  border: 1px solid #666666;
  border-radius: 5px;
  padding: 3px;
  background-color:OliveDrab; 
  opacity:1;
  break-inside: avoid;
}

.container {
  border: 2px solid #666666;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 3px;
  margin: 5px 0px;
  z-index:-2;
}

.darker {
  border-color: #ccc;
  background-color: #ddd;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

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