@media screen and (max-width: 500px) {
  body {
    overflow-y: scroll;
    margin: 0 8px 8px 8px;
  }

  .latex {
    font-size: 14px;
  }
  
  #container {
    width: calc(100% - 18px);
    padding-bottom: 60px;
    margin: 0 8px 8px 8px;
  }

  #container img {
    min-width: 90%;
    border: 3px solid #eee;
  }

  body, pre code, #container input, #container textarea {
    font-size: 14px;
  }

  form {
    top: 8px;
    position: sticky;
  }

  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .sidenav input {width: 80%;}
  
  #navbar li a {
    font: bold 25px "Akkurat Mono";
    text-decoration: none;
    color: #fff;
  }

  #back-trigger a {
    font-size: 20px;
  }

  form[name="postJournal"] {
    display: none;
  }

  .post {
    margin-right: 50px;
  }

  #push-trigger {
    width: 80%;
  }
}

@media screen and (max-height: 500px) {
  body {
    overflow-y: scroll;
  }

  body, pre code, #container input, #container textarea {
    font-size: 14px;
  }

  .latex {
    font-size: 14px;
  }

  #navbar li a {
    font: bold 25px "Akkurat Mono";
    text-decoration: none;
    color: #fff;
  }

  #back-trigger a {
    font-size: 20px;
  }
  
  #container {
    padding-bottom: 6px;
  }

  form {
    position: sticky;
    top: 8px;
  }

  .container img {
    min-width: 87%;
    border: 3px solid #eee;   
  }

  form[name="postJournal"] {
    display: none;
  }

  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
  .sidenav input {width: 80%;}

  .post {
    margin-right: 50px;
  }
}