*{
  font-family: "Lucida Console", "Courier New", monospace;
  user-select: none;
  line-height: 1.5em;
  box-sizing:border-box;
  margin:0px;
  padding:0px;
}

@media only screen and (min-width: 768px){ /*desktop */
  body{
    margin:0px;
    width:100%;
    padding-top:10%;
    padding-left:20%;
    margin-bottom:10%;
    font-size:1em;
  }
  a{
    text-decoration: none;
    color:black;
    padding-left:20px;
  }
  a:visited{
    color:grey;
  }
  a:hover{
    color:lightgreen;
  }
  .title{
    padding:2px 10px 2px 10px;
    border-radius:5px;
  }
  .title:hover{
    background:rgb(240,240,240);
  }

}

@media only screen and (max-width: 768px){ /*mobile */
  body{
    width:100%;
    padding-top:15%;
    padding-left:1%;
    font-size:1em;
  }
  a{
    text-decoration: none;
    color:lightgreen;
    padding-left:20px;
  }
  a:visited{
    color:salmon;
  }
}
.folder{
  width:1em;
  /* vertical-align:top; */
  margin-bottom:-1px;
}

div{
  margin-left:2em;
  display:none;
}

span:hover{
  /* color:cornflowerblue; */
}