* { margin: 0; font-family: Arial, Helvetica, sans-serif; }

      /***** mobile *****/
      @media ( min-width: 720px ) {
        #menu {
          width:100%;
          height:100px;
          background-color:yellow;
          position:fixed;
        }

        #menu>span {
          font-size: 18px;
          background-color:green;
          top:35px;
        }
        div#menu>span{ position:absolute; }
        #menu>span#to_about     {   left:30px;  }
        #menu>span#to_fragments {   left:120px; }
        #menu>span#to_timeline  {   right:30px; }

        a, a:hover, a:visited {
          color:black;
        }

        div#logo_wrapper {
          position:absolute;
          left: calc(50% - 70px);
          top: 10px;
          background-color:cyan;
        }
        img#logo_foh { width:140px; }
        
        div#about_icon_wrapper {
          position:absolute;
          left: calc(50% - 200px);
          top: 50px;
          background-color:orange;
        }
        img#about_icon { width:100px; }

        div#timeline_icon_wrapper {
          position:fixed;
          right: 30px;
          bottom: 30px;
          background-color:teal;
        }
        img#timeline_icon { width:140px; }
      }

      .image{max-width: 100%;}
      .pdf object{width:640px;height: 640px;}
      .dir::before{content:"📁 ";font-size:18px;}
      .filename{display:block;font-family:mono;}
      .unkown-file::before{content:"📄 ";font-size:18px;}
      /* div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;} */
      video {width:640px;max-height:640px;}