/* ADVANCED styling */

    /* sidebar */

    #sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      transition: 0.4s;
      overflow: hidden;
      z-index: 2;
    }

    .sidebar-toggle {
      cursor: pointer;
      font-size: 2em;
      padding: 5px;
    }

    #sidebar-toggle {
      position: fixed;
      top: 0;
      background-color: inherit;
      z-index: 1;
    }

    #sidebar-toggle-input {
      display: none;
    }

    #main {
      position: relative;
      left: 0;
      width: 100%;
    }

    #sidebar-toggle-input:not(:checked)~#sidebar {
      width: 0px;
    }

    #sidebar-toggle-input:checked~#sidebar {
      width: 250px;
    }

    #sidebar-toggle-input:checked~#main {
      left: 250px;
      width: calc(100% - 250px);
    }

    @media screen and (max-width: 767px) {
      #sidebar-toggle {
        left: auto;
        right: 0;
      }
      #sidebar-toggle-input:checked~#sidebar {
        width: 100%;
      }
      #sidebar-toggle-input:checked~#main .container {
        width: 100%;
      }
    }

    @media screen and (min-width: 768px) {
      #sidebar-toggle-input:checked~#main .container {
        width: calc(744.96px - 250px);
      }
    }

    @media screen and (min-width: 992px) {
      #sidebar-toggle-input:checked~#main .container {
        width: calc(962.24px - 250px);
      }
    }

    @media screen and (min-width: 1200px) {
      #sidebar-toggle-input:checked~#main .container {
        width: calc(1164px -250px);
      }
    }

    @media screen and (min-width: 1800px) {
      #sidebar-toggle-input:checked~#main .container {
        width: calc(1746px - 250px);
      }
    }