/* desktop design breakpoint */
@media only screen and (min-width:961px){
  body{
    background:#d3d3d3;
     background:#eee;
  }
  .nav-bar{
    position:fixed;
    top:0px;
    left:0px;
    width:27%;
    height: 100%;
    padding:1%;
  }
  .main-head-link{
    color:black;
    text-decoration :none;
    /* margin-bottom:2%; */
  }
  .add{
    color:yellow;
    background:rgb(172, 159, 159);
    margin:1%;
    padding: 1%;
  }
  .active-link{
    background-color:#4CAF50 !important;
    color:white !important;
  }
  .navigation a{
    background:#eee;
    color:black;
    display:block;
    padding:7px;
    text-decoration:none;
  }
  .nav-link:active{
    background-color:#4CAF50!important;
    color:white!important;
  }
  .navigation a:hover{
    background:#ccc;
  }
  .navigation{
    width:100%;
    height: 90%;
    overflow-y:auto;
  }

  .navigation li{
    margin:2%;
  }

  #main-doc{
    padding:1%;
    position:absolute;
    right:0px;
    margin-left:28%;
  }
  .header{
    background:#d3d3d3;
    padding:1%;
    margin:1%;
    font-size: 17px;
    box-shadow: 0px 3px 3px 0px rgba(3, 4, 7, 0.19),  0px 0px 3px 0px rgba(2, 2, 2, 0.19), 0px 0px 3px 0px rgba(3, 4, 7, 0.19);
    /* color:white; */
  }
  li{
    padding:1%;
    margin-left:4%;
  }
  code{
    background:rgba(187, 182, 182, 0.178);
    padding:1.5%;
    width:100%;
    display:block;
    font-family: "Fira code";
    font-size:14px;
  }
}