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

body {
    padding: 80px 100px;
    font: 13px "Helvetica Neue", "Lucida Grande", "Arial";
    background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9));
    background: #ECE9E9 -moz-linear-gradient(top, #fff, #ECE9E9);
    background-repeat: no-repeat;
    color: #555;
    -webkit-font-smoothing: antialiased;
}

h2 {
  font-size: 18px;
}

a {
 color: #555;
 text-decoration: none;
}

a:hover {
 color: #303030; 
}

.file-tiles {
  margin: 10px 0px;
}

.file-tiles ul {
  display: flex;
  flex-wrap: wrap;
}

.file-tiles ul li {
  line-height: 25px; 
  list-style: none;
  border: 1px solid #00000000;
  border-radius: 5px;
  width: 30%;
  margin: 1px;
}

.file-tiles ul li:hover {
  background-color: white;
  border: 1px solid #ececec;
}

.file-tiles ul li a {
  white-space: nowrap; 
  padding: 0px 2px;
  width: 100%; 
  height: 25px;
  
  overflow: hidden;
  text-indent: 28px;
  text-overflow: ellipsis;
}

.i-f, .i-html, .i-link {
  display: block;
  width: 16px;
  height: 16px;
  
  background-position: 8px 4px;
  background-repeat: no-repeat;
}

.i-f {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAWtQTFRFAAAA/PPQ9Nhc2q402qQ12qs2/PTX2pg12p81+/LM89NE9dto2q82+/fp2rM22qY39d6U+/bo2qo2/frx/vz32q812qs12qE279SU8c4w9NZP+/LK//367s9y7s925cp0/vzw9t92//342po2/vz25s1579B6+OSO2bQ0/v799NyT8tE79dld8Msm+OrC/vzx79KA2IYs7s6I9d6R4cJe9+OF/PLI/fry79OF/v30//328tWB89RJ8c9p8c0u9eCf//7+9txs6sts5Mdr+++5+u2z/vrv+/fq6cFz8dBs8tA57cpq+OaU9uGs27Y8//799NdX/PbY9uB89unJ//z14sNf+emh+emk+vDc+uys9+OL8dJy89NH+eic8tN5+OaV+OWR9N2n9dtl9t529+KF9+GB9Nue9NdU8tR/9t5y89qW9dpj89iO89eG/vvu2pQ12Y4z/vzy2Ict/vvv48dr/vzz4sNg///+2Igty3PqwQAAAAF0Uk5TAEDm2GYAAACtSURBVBjTY2AgA2iYlJWVhfohBPg0yx38y92dS0pKVOVBAqIi6sb2vsWWpfrFeTI8QAEhYQEta28nCwM1OVleZqCAmKCEkUdwYWmhQnFeOStQgL9cySqkNNDHVJGbiY0FKCCuYuYSGRsV5KgjxcXIARRQNncNj09JTgqw0ZbkZAcK5LuFJaRmZqfHeNnpSucDBQoiEtOycnIz4qI9bfUKQA6pKKqAgqIKQyK8BgAZ5yfODmnHrQAAAABJRU5ErkJggg=='); 
}

.i-html {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHtSURBVDjLjZM9T9tQFIYpQ5eOMBKlW6eWIQipa8RfQKQghEAKqZgKFQgmFn5AWyVDCipVQZC2EqBWlEqdO2RCpAssQBRsx1+1ndix8wFvfW6wcUhQsfTI0j33PD7n+N4uAF2E+/S5RFwG/8Njl24/LyCIOI6j1+v1y0ajgU64cSSTybdBSVAwSMmmacKyLB/DMKBpGkRRZBJBEJBKpXyJl/yABLTBtm1Uq1X2JsrlMnRdhyRJTFCpVEAfSafTTUlQoFs1luxBAkoolUqQZbmtJTYTT/AoHInOfpcwtVtkwcSBgrkDGYph+60oisIq4Xm+VfB0+U/P0Lvj3NwPGfHPTcHMvoyFXwpe7UmQtAqTUCU0D1VVbwTPVk5jY19Fe3ZfQny7CE51WJDXqpjeEUHr45ki9rIqa4dmQiJfMLItGEs/FcQ2ucbRmdnSYy5vYWyLx/w3EaMfLmBaDpMQvuDJ65PY8Dpnz3wpYmLtApzcrIAqmfrEgdZH1grY/a36w6Xz0DKD8ES25/niYS6+wWE8mWfByY8cXmYEJFYLkHUHtVqNQcltAvoLD3v7o/FUHsNvzlnwxfsCEukC/ho3yUHaBN5Buo17Ojtyl+DqrnvQgUtfcC0ZcAdkUeA+ye7eMru9AUGIJPe4zh509UP/AAfNypi8oj/mAAAAAElFTkSuQmCC'); 
}

.i-link {
  background-image: url('https://siwakornpc.neocities.org/images/vsc-li-dir/icon-dir-link.png');
}

footer {
  position: fixed;
  bottom: 0;
  padding: 10px 0px;
}

@media (max-width: 768px) {
  body {
    font-size: 13px;
    line-height: 16px;
    padding: 0px;
  }
  
  small {
    display: none; 
  }
  
  h2 {
    color: white;
    font-size: 2em;
    line-height: 1.5em;
    background: black;
    padding: 15px 10px;
  }
  
  .file-tiles {
    margin: 0; 
  }
  
  ul {
    flex-direction: column;
  }
  
  li:nth-child(odd) {
    background-color: #e0e0e0; 
  }
  
  .file-tiles ul li {
    float: none;
    width: 100%;
    display: block;
    border-bottom: 1px solid #cacaca;
    border-radius: 0px;
    font-size: 2em;
    line-height: 1.2em;
    margin: 0;
  }
  
  .file-tiles ul li a {
    height: auto;
    border: 0;
    border-radius: 0;
    padding: 15px 10px;
    text-indent: 41px;
    white-space: nowrap; 
    text-overflow: ellipsis;
    line-height: 1.434em;
  }
    
  .i-f, .i-html, .i-link {
    background-position: 10px 50%;
  }
}