*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  background-color: #dedede;
  color: #202020;
  padding: 20px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

canvas {
  outline: none;
}

#container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  background-color: #fff;
  background-image: linear-gradient(#ccc 1px, transparent 1px),linear-gradient(90deg, #ccc 1px, transparent 1px),linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
  background-position:
    calc(50vw - 0px) calc(50vh - 1px),
    calc(50vw - 0px) calc(50vh - 1px),
    calc(50vw - 0px) calc(50vh - 1px),
    calc(50vw - 0px) calc(50vh - 1px);
}

#info {
  z-index: 1;
  position: absolute;
  left: 25px;
  bottom: 40px;
}

#label {
  position: absolute;
  z-index: 10;
  font-size: 40px;
  text-align: left;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
  margin-top: 0.5em;
  margin-left: .2em;
}
body.dragging > #label {
  opacity: 0;
}

#infobox {
  position: absolute;
  bottom: 3vw;
  right: 3vw;
  font-size: 40px;
  z-index: 10;
  cursor: pointer;
  display: none;
}
#detailbox {
  position: fixed;
  right: 0;
  top: 0;
  height: 96vh;
  width: 30%;
  max-width: 800px;
  min-width: 400px;
  margin-top: 2vh;
  margin-bottom: 2vh;
  padding: 4vw;
  background-color: #000000bd;
  overflow-y: scroll;
  z-index: 9000;
  transform: translate(120%,0);
  transition: transform 0.5s ease;
}
body.detailbox > #detailbox {
  transform: translate(0,0);
}
body.dragging > #detailbox {
  transform: translate(120%,0);
}

#detailbox .content {
  position: absolute;
  top: 1em; left: 1em;
  width: 90%;
  margin-right: 1em;
  display: none;
  padding-bottom: 20vh;
}

#detailbox .content.show { display: block; }
#detailbox .content.hide { display: none; }
#detailbox .content.hide.unhide { display: block; }
#detailbox { /* TYPO */
  color: #eeeeee;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: .02em;
}
#detailbox .content > h1 {
  margin-bottom: 1em;
  line-height: .9;
}
#detailbox .content > p {
  margin-top: 1em;
  margin-bottom: 1.5em;
}
#detailbox .content > p,
#detailbox .content > ul,
#detailbox .content > ol {
  font-size: 1.2em;
}
#detailbox .content > ul,
#detailbox .content > ol {
  margin-left: 1em;
  margin-right: .5em;
}
p.footnote {
  font-style: italic;
}
#detailbox .content > p {
  hyphens: auto;               /* Enable hyphenation */
  word-wrap: break-word;       /* Break long words if needed */
  overflow-wrap: break-word;   /* Modern equivalent */
  -webkit-hyphens: auto;       /* Safari/Chrome */
  -ms-hyphens: auto;           /* IE 10+ */
}
#detailbox .content > img {
  width: 100%;
  margin: auto;
  margin-bottom: 2em;
  background-color: #eeeeee;
}
/* ---------------------------------------
   ON MOBILE
   --------------------------------------- */
@media screen and (max-width: 600px) {

 body.detailbox > #detailbox {
   transform: translate(90%,0);
 }
 body.detailbox > #detailbox.showonmobile {
   transform: translate(0,0);
 }
 #detailbox {
   width: 100%;
   max-width: none;
   min-width: 0;
   background-color: #000000d9;
 }
 #detailbox .content {
   margin-top: 1.2em;
 }
 #detailbox .content > p {
   font-size: 1.0em;
 }
}
/* --------------------------------------- */

#menu {
  position: absolute;
  top: 100px;
  bottom: 100px;
  left: 20px;
  width: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translate(0,0);
  transition: transform 0.5s ease;
  margin: 0;
  padding: 40px;
  font-size: 18px;
  background-color: #ffffff80;
  border: 8px solid transparent;
  pointer-events: auto;
}
body.dragging > #menu {
  transform: translate(-120%,0);
}

#menu::-webkit-scrollbar {
  width: 10px;
}
#menu::-webkit-scrollbar-track {
  background: #ffffff;
}
#menu::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
  border-radius: 6px;
  border: 3px solid #efefef00;
}
#menu::-webkit-scrollbar-track {
  background: transparent;
}
#menu {
  scrollbar-width: auto;
  scrollbar-color: #bfbfbf #efefef00;
}

#menu ul {
  margin-top: .5em;
  margin-left: .8em;
}
#menu > ul,
#menu > ul > li:first-of-type {
  margin-top: 0;
}
#menu > ul > li {
  margin-top: 2em;
}
#menu > ul > li > ul {
  margin-top: 0;
  margin-left: .1em;
}
#menu ul > li > ul > li > ul {
  padding-top: .25em;
  padding-bottom: .5em;
  display: none;
}
#menu ul > li > ul > li > ul:hover {
  display: block;
}
#menu ul > li > ul > li.show ul {
  display: block;
}
#menu ul > li > ul > li.show > a {
  color: #ffffff;
  background-color: #000000;
  padding: .2em;
  margin: -.2em;
  display: inline-block;
  width: 100%;
  padding-left: .5em;
}
#menu ul > li > ul > li.show ul {
/*background-color: #ff0000;*/
}
#menu ul > li > ul > li.show > ul a {
  color: #000000;
  line-height: 1.5em;
}
#menu ul > li > ul > li > ul > li.show a {
  color: #0000ff;
  background-color: transparent;
  padding-left: .2em;
  display: inline;
}

#menu li {
  line-height: 1.4em;
}
#menu > ul > li {
  font-size: 1.2em;
}
#menu > ul > li > ul > li {
  font-size: 0.8em;
  list-style: square;
}
#menu > ul > li > ul > li > ul > li {
  list-style: circle;
}

#menu a {
  color: #282828;
  text-shadow: #fff 1px 0 50px;
  text-decoration: none;
  margin: -.25em;
  padding: .25em;
  pointer-events: auto;
  cursor: pointer;
}
#menu a:hover {
  color: #ffffff;
  background-color: #66666675;
}
/* ---------------------------------------
   ON MOBILE
   --------------------------------------- */
@media screen and (max-width: 600px) {

 #menu {
   transform: translate(-85%,0);
 }
 body.dragging > #menu {
   transform: translate(-85%,0);
 }
 #menu.showonmobile {
   transform: translate(0,0);
 }
}
/* --------------------------------------- */
.badge {
  position: fixed;
  z-index: 8000;
  width: 35px;
  height: 35px;
  margin: 0;
  background-color: transparent;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.badge > a { position: absolute;
             width: 100%;
             height: 100%;
             top: 0;
             left: 0;
             text-decoration: none;
          /* Makes sure the link doesn't get underlined */
             z-index: 12;
          /* raises anchor tag above everything else in div */
             background-color: white;
          /* workaround to make clickable in IE */
             opacity: 0;
          /* workaround to make clickable in IE */
             filter: alpha(opacity=0);
          /* workaround to make clickable in IE */
             cursor: pointer;
             pointer-events: auto;
}
#HOME.badge {
  bottom: 40px;left: 40px;
  background-color: #000000;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-10.5z'/></svg>");
}
#HOME.badge:hover {
  background-color: #0000ff;
}
#LOGO.badge {
  top: 10px;
  left: 10px;
  width: 100px;
  height: 80px;
  background-size: 60%;
  background-image: url("daclogo.png");
}