/* Basic stuff */
body {
  max-width: 100ch;
  margin: 0 auto;
  padding: 8px;
  line-height: 1.2;
}
/* To make sure the header text is always bigger than a normal h1*/
header h1 {
  font-size: 300%;
}


/* get these to play nicely with teh max width */
header, main, footer, img{
  max-width: 100ch;
}

a:link{
  color:#5bf
}
a:visited{
  color:#5bf
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}

li p {
  margin-block-start: 0;
  margin-block-end: 0;
}

p code {
  background-color: rgba(173, 173, 173, 0.26);
  border-radius: 0.3em;
  padding: 4px 5px 6px;
}

pre {
  max-width: 95vw;
  display: block;
  overflow: auto;
}

/* navbar */
.links ul, .breadcrumb ul {
  list-style-type: none;
  display: flex;
  padding-left: 0;
}

/* sticky footer */
main {
  min-height: calc(95vh - 150px);
}
footer {
  min-height: 50px;
}

/* spoilers
 using https://starbeamrainbowlabs.com/blog/article.php?article=posts%2F415-pure-css-spoiler.html
 as a base then using it for on hover instead of target.
 Seems to work well enough for mobile as well
*/

.md-spoiler {
  background: #333333;
  border-radius: 0.2em;
  color: transparent;
}
/* hover is for desktop, active for mobile*/
.md-spoiler:hover, .md-spoiler:active {
  background: transparent;
  color: inherit;
}

/* every page gets a scrollbar to stop it shifting around */
html {
  overflow-y: scroll;
}

label, input, select {
  display: table-cell;
  margin-bottom: 10px;
}
/* Make hidden great again */
[hidden] {
  display: none !important;
}


/* Specific to handovers */

h1 {
  color: #087581;
}

h2 {
  color: white;
  background: #087581;
}

h3 {
  background: #B8F4FA;
}

#logo  {
  background: white;
  float: right;
  margin: 0 0 0 1px;
}