/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input{margin:0;padding:0}h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th{font-size:1em;font-weight:normal;font-style:normal}ul,ol{list-style:disc;padding-left:16px}fieldset,img{border:none;max-width:100%;height:auto;}caption,th{text-align:left}table{border-collapse:collapse;border-spacing:0}

html {
  margin-bottom: 1px;
  overflow: -moz-scrollbars-vertical !important;
  overflow-y: scroll;
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body { font: 14px/19px "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif; background-color: #646461; background: #fff; color: #630; -webkit-font-smoothing: antialiased;}
p { margin-bottom: 18px; }
a { color: #CC5500; text-decoration: underline; outline-style: none; }
a:hover { text-decoration: underline; }

hr {width: 100%; 
    margin: 10 auto;
    color: #630;
    height: 2px;}





#container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
 
#container > dik {
  min-width: 80px;
  min-height: 80px;
  border-radius: 0.5em;
  margin: 0.1em;
  padding: 1.2em;
  box-shadow: inset -2px -2px 5px #777;
}




/*
 * Layout
 */
#page {
  margin: 0 auto;
  width: 800px;
  padding: 60px 20px;
  clear: both;
}

@media all and (max-width: 800px) {
  #page { width: 100%; }
}


h1, h2, h3 { clear: both; color: #552200; font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, sans-serif; font-weight: bold; margin: 0 0 17px 0;}
h1 { font-size: 28px; line-height: 34px; font-family: "HelveticaNeue","Helvetica Neue","HelveticaNeueRoman","HelveticaNeue-Roman","Helvetica Neue Roman",Helvetica,Arial,sans-serif,Verdana; }
h2 { font-size: 20px; color: #663300; line-height: 27px; margin-bottom: 0; }
h3 { font-size: 16px; color: #663300; line-height: 23px; margin-bottom: 0; }