body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: monospace, 'courier new', courier;
    font-size: 1.1em;  
}

a.otsikko:link, a.otsikko:visited { color: black; text-decoration:none; }

html { overflow-y: scroll; }
.container {
    width: 100%;
    min-height: 100vh;     max-width: 800px;
    margin: 0 auto;
    border-left: 1px solid black;
    border-right: 1px solid black;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .container {
        width: 100%;
    }
}



figcaption { font-size: 0.8em; }

article { font-family: monospace; padding: 0px; }
header { background-color: orange; color: black; padding: 0px 5px 0px 5px; font-weight: bold; }
p { white-space: pre-wrap; text-align: justify; padding: 5px; }
pre { padding: 0px 5px 0px 5px; word-wrap: break-word; white-space: pre-wrap; }
h1 { margin: 0px; text-align:center;}

details > summary { width: 100%; background-color: orange; border: none; cursor: pointer; font-weight: bold; font-size: 0.8em; margin:0px 0px 5px 0px; }
details > p { font-family: monospace, 'courier new', courier; font-size: 0.8em; }


.cntr { display: block; margin-left: auto; margin-right: auto; }


a { word-break: break-all;}
p.koodi {
  background-color: WhiteSmoke;
  white-space: pre-wrap;
  overflow-x: auto;
  padding: 10px;
  border: 1px solid #ddd;
  font-family: monospace;
}

.koodi2 {
  background-color: WhiteSmoke;
  white-space: pre;
  overflow-x: auto;
  padding: 10px;
  border: 1px solid #ddd;
  font-family: monospace;
}