body, html {margin:0px!important; padding:0px; }
canvas {position:absolute}
#allcontainer {position:relative;}
#info {position: absolute;
    bottom: 0;
    right: 0;}
head {
    margin: 0;
    padding: 0;
  }
  body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Sans", "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 100;
    font-size: 1em;
  }
  p {
    padding: 10px;
  }
  textarea {
    padding: 5;
    font-family: "Lucida Sans", "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 100;
    font-size: 1em;
  }

  /* make the network vis on top of the images and make it look decent. */
  #p5Container{
    position: absolute;
    left: 0;
    top: 0;
   /* mix-blend-mode: multiply;*/
    display:none;
  }

  button[value="addlayer"] {
    position: absolute;
    margin-left: auto;
    /*font-size: 2em;*/
    transform: translate(-50%);
    font-family: "Lucida Sans", "Helvetica Neue",Helvetica,Arial,sans-serif;
  }

  button[value^="addneuron"] {
    transform: translate(-50%);
  }

  #svgcont{
    position:absolute;
    top:0;
  }

  svg {
    filter: drop-shadow(0px 0px 5px rgb(255 255 244 / 0.9));
  }

  ellipse.neuron {
    cursor:pointer;
  }

  #infoDivs{
    position: absolute;
    left: 0;
    top: 0;
  }

  #infoDivs .infoDiv{
    position: absolute;
    top: 0;
    left: 0;
    min-width: 150px;
    display:none;
    transform: translate(-110%, -50%);
    padding:5px;
    background: #fff;
    border: 1px solid #000;
    border-radius:5px;
  }
  .infoDiv h3 {margin:0}
  .infoDiv p {padding:0; margin:0.5em 0em;}

  .infoDiv.show{
    display:block!important;
  }

.infoDiv .nprop {text-align:right; padding-right:5px}
.infoDiv .weightinfo {display:grid; grid-template-columns: 30% 70%; margin:1em 0em; }
.custom-handle {
    font-size:0.8em;
    text-align: center;
    padding:0.2em;
    width:auto!important;
    margin-left:-1em!important;
  }
.infoDiv .slider{margin:0px 15px}


  .infoDiv {
    position: relative;
    background: #fff;
    border: 1px solid #000;
    border-radius:5px;
  }
  .arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  
  .arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #fff;
    border-width: 6px;
    margin-top: -6px;
  }
  .arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #000;
    border-width: 7px;
    margin-top: -7px;
  }

  .infoDiv canvas {
    width:160px;
    height:160px; /* maybe set in JS in case I change it?*/
    position:relative;
  }

  .infoDiv .neurondiv {
    text-align: center;
  }
    
fieldset {
  border:0;
  padding:0;
}

#infoicon {position:fixed; right:10px; top:10px; cursor:pointer; font-size:2em; z-index:1000; padding: 5px; border-radius: 50%;}
#title {position:absolute; bottom:2em; left:2em; font-size:1.1em; filter: drop-shadow(0px 0px 5px rgb(255 255 244 / 0.9)); z-index:-1}
#title p {padding:0;}

@media screen and (max-width: 1000px) {
  html {
      font-size:80%
  }
}