/** @fileoverview: testWikiLib.css
<!-- -------------------------------------------------------------
  ___              ___  __   __        __   __   __
 |   |/\\\   |  | |__  |__) /  `  /\  |__) |  \ (__`
 |   |  \\\  |/\| |___ |__) \__, /--\ |  \ |__/ .__)
 |___| ///   card models for computing, composing, and communication
-----\///------------------------------------------------------------> */
body {
  accent-color:     var(--blue);
  align-items:      center;
  display:          flex;
  flex-direction:   column;
  padding:          1rem;
  overflow:         hidden;
}

.titleContainer {
  display:          flex;
  width:            100%;
}

.titleContainerLeft {
  width:            33%;
}

.titleContainerCenter {
  width:            33%;
}

.titleContainerRight {
  width:            33%;
  text-align:       right;
}

.title {
  font-family: monaSansLight;
  font-size: 1.0rem;
  text-align: center;
  width: 100%;
}

.titleDate {
  font-family:          monaSans, arial;
  font-size:            0.8rem;
}

.resultContainer {
  background:       white;
  border:           solid 1px rgb(100, 100, 100);
  box-shadow:       5px 5px 5px rgba(0, 0, 0, 0.25);
  flex-grow:        1;
  font-size:        0.8rem;
  height:           calc(100% - 4rem);
  width:            800px;
  overflow:         auto;
  padding:          0 1rem 1rem 1rem;
}

.resultTitle {
  border-top:       solid 1px rgb(150, 150, 150);
  font-family:      monaSansBold;
  font-size:        1.1rem;
  margin-top:       2rem;
  white-space:      pre-wrap;     /* preserves spaces and line breaks */
}

:nth-child(1 of .resultTitle) {
  border:           none;
  margin-top:       0;
}

.resultJson {
  display:          block;
  font-family:      monospace;    /* simulates the <pre> font */
  white-space:      pre-wrap;     /* preserves spaces and line breaks */
}

.resultError {
  color:            red;
  font-family:      monospace;    /* simulates the <pre> font */
  font-size:        1rem;
}

/* detect phone */
@media screen and (any-pointer: coarse) and (max-width: 900px) {
  .resultsContainer {border: none;border-radius: 0;box-shadow: none;margin: 0;}
}

/* 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) {
}