@media (max-width: 767px) {
  h1 { font-size: 1.5em; }
  h2 { padding: 0 10px; }
  header { padding: 0 10px; }

  nav ul { padding: 0 10px; height: 32px;}
  nav li { padding: 0 5px; margin-right: 5px; line-height: 30px; letter-spacing: inherit; max-width: 25%; overflow: hidden; text-overflow: ellipsis; }

  .tile { width: calc(33.33% - 20px); font-size: 1.4em; line-height: 30px; }

  .container { padding: 0 10px; }
  .container h2 { padding: 0; }

  section form.right { padding-right: 10px; }
  form[name="add-ranking"] { padding: 0 10px; }
  form[name="add-ranking"] > * { margin-bottom: 10px; }
}

@media (max-width: 424px) {
  nav { margin-bottom: 10px; }
  nav ul { height: auto; border-top: 1px solid #eee; padding: 5px; }
  nav li { float: none; position: static; max-width: 100%; width: 100%; line-height: 25px; border: none; text-align: center; }
  nav li.active { background-color: rgba(255, 255, 255, 0.1);}

  section, table, .tiles-container { margin-top: 10px; }

  .tile { width: calc(50% - 20px); height: 100px; padding: 20px 5px; }
  .addtile input { top: 20px; }
  .addtile button.btn { top: 30px; }
}