html, body {
  font-family: monospace;
  font-size: 13px;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  background-color: #FFF7E9;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 2rem;
}

h1 { font-size: 28px; }
h2 { font-size: 20px; }

a {
  color: #0013FF;
}

pre {
  padding-left: 0.5em;
  border-width: 0;

  /* allows browsers that don't support CSS to see something decent */
  overflow-x: auto;
  background-color: #AEB2C3;
}

.proxy-warning {
  background-color: #729C9C;
  color: #fff4ec;
  padding: 0.5em;
}

.solaris {
  background-color: #C1C1C1;
  padding: 8px;
  box-shadow:
    0 0 0 10px #B24D7A,
    5px 5px 0 10px #57253B;
  margin: 20px 10px 30px;
}

#ip-address {
  background: #A59F80;
  border: solid 5px #5B5746;
  font-family: monospace;
}
#ip-address td { padding: 10px; }

table { border-collapse: collapse; }

table.values {
  border: solid 10px #b24d7a;
  background: #bbb9c8;
}
table.values th,
table.values td {
  border: solid 1px #b24d7a;
}
table.values th {
  text-align: right;
  padding: 0.5em 2em;
  white-space: nowrap;
}

table.values td {
  padding: 0.5em 1em;
  overflow-x: hidden;
  word-wrap: break-word;
  word-break: break-all;
}

.header {
  background-color: #C1C1C1;
  box-shadow:
    0px 0px 0 10px #A59F80,
    5px 5px 0 10px #5B5746;
  margin: 10px 10px 40px;
}
.header h1 { padding: 0.5em 0.2em; }

h1.main { line-height: 1; margin: 0; }

hr {
  border: dotted 2px #B24D7A;
  margin: 40px 0;
  display: block;
}

/*@media only screen and (min-width: 901px) {
  table.values td { border: }
}*/

@media only screen and (max-width: 800px) {
  table.values { min-width: 90% }

  table.values td,
  table.values th,
  table.values tr {
    display: block;
    border-width: 0;
  }

  html, body {
    padding: 5px;
  }

  table.values th,
  table.values td {
    text-align: left;
    padding: 0.3em;
  }

  table.values tr:not(:last-child) {
    border-bottom: solid 1px #b24d7a;
    margin-bottom: 0.5em;
  }
}