/* Reset */
  body, html { margin:0; padding:0; font-family:sans-serif; }

  /* Sidebar */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 220px;
    height: 100%;
    background: #BF1B17;
    color: white;
    overflow-y: auto;
    padding-top: 20px;
  }

  .sidebar .menu { list-style:none; padding:0; margin:0; }
  .sidebar .menu > li { position: relative; }
  .sidebar .menu > li > a { display:block; padding:12px 16px; color:white; text-decoration:none; }
  .sidebar .menu > li > a:hover { background:#CFCFCD; }

  /* Dropdown */
  .dropdown-menu { display:none; list-style:none; padding:0; margin:0; background:#CFCFCD; }
  .dropdown:hover .dropdown-menu { display:block; }
  .dropdown-menu li a { display:block; padding:10px 20px; }

  /* Main content */
  main { margin-left:220px; padding:20px; }

  /* Header & Footer */
  header, footer { padding:10px 20px; background:#BF1B17; color:white; }

  /* Mobile */
  .menu-toggle {
    display:none;
    background:#BF1B17;
    color:white;
    border:none;
    padding:12px 16px;
    font-size:18px;
    width:100%;
    text-align:left;
    cursor:pointer;
  }
  @media (max-width:768px) {
    .sidebar { position:relative; width:100%; height:auto; }
    main { margin-left:0; }
    .menu { display:none; flex-direction:column; }
    .menu.show { display:flex; }
    .menu-toggle { display:block; }
  }