/** index.css **/
/* <!-- --------------------------------------------------------------
  ___              ___  __   __        __   __   __
 |   |/\\\   |  | |__  |__) /  `  /\  |__) |  \ (__`
 |   |  \\\  |/\| |___ |__) \__, /--\ |  \ |__/ .__)
 |___| ///   card models for computing, composing, and communication
-----\///------------------------------------------------------------> */
body {
  accent-color:               var(--blue);
  align-items:                center;
  display:                    flex;
  flex-direction:             column;
  justify-content:            space-between;
  overflow:                   hidden;
}

h3, h4 {
  margin:                     0;
}

pre {
  font-size:                  0.9rem;
}

th, td {
  min-width:                  6rem;
  overflow:                   hidden;
  text-align:                 left;
  vertical-align:             top;
  word-wrap:                  break-word;
}

.pre {
  display:                    block;
  font-family:                "Courier New", monospace;
  font-size:                  0.9rem;
  unicode-bidi:               embed;
  //  white-space:            pre;
}

.pageOuterSection {
  background:                 rgb(253, 250, 250);
  border-radius:              1rem;
  border:                     solid 1px rgb(225, 230, 235);
  box-shadow:                 5px 5px 5px rgba(0, 0, 0, 0.25);
  flex-grow:                  1;
  margin:                     1rem 0 1rem 0;
  max-width:                  800px;
  width:                      100%;
}

.pageInnerSection {
  max-height:                 100%;
  overflow:                   auto;
  padding:                    1rem 2rem;
  width:                      100%;
}

.experimentTable {
  width:                      100%;
//  border:                   var(--border);
  border-collapse:            collapse; /* separate */
  margin-top:                 0.5rem;
  width:                      100%;
}

/* detect phone */
@media screen and (any-pointer: coarse) and (max-width: 900px) {
  .pageOuterSection {
    box-shadow:               none;
    margin:                   0.5rem 0 0 0;
    max-width:                calc(100% - 2rem);
  }
}

/* detect phone in portrait */
@media screen and (any-pointer: coarse) and (orientation: portrait)
    and (max-width: 400px) {
}

/* detect phone in landscape */
@media screen and (any-pointer: coarse) and (orientation: landscape)
    and (max-width: 900px) {
}