#side-nav1 {
    position: absolute;
    width: 60px;
    background-color: rgb(26, 26, 31);
    opacity: .8;
    height: calc(100vh - 4px);
    z-index: 5000;
    top: 4px;
  }

  #side-nav1 .col {
    height: calc(100vh - 20px);
  }

  #side-nav1 div a i, #side-nav1 .btn {
    margin-top: 5px;
    height: 54px;
    width: 56px;
    line-height: 54px;
    font-size: 30px;
    color: rgb(240, 235, 235) !important;
    opacity: .8;
    margin-left: -9px !important;
    border-radius: 6px;
  }

  #app {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(0, 10px);
    width: 60px;
  }

  @media (max-width: 996px) {
    #app {
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translate(0, -40px);
    }
  }

  #app i.fas {
    margin: 0px !important;
  }

  .mail {
    line-height: 51px !important;
  }

  .fa-linkedin {
    line-height: 48px !important;
  }

  #side-nav1 div a i:hover, #side-nav1 .btn {
    background-color: rgb(45, 45, 51);
    color: rgb(255, 255, 255) !important;
  }

  .wallpaper {
    background-image: url('../img/background.jpg');
    background-color: rgb(0, 0, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    z-index: 1000;
    height: calc(100vh + 20px);
    top: -20px;
    position: absolute;
    z-index: 0;
  }

  #terminal {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.93);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 350px;
    width: 650px;
    padding: 35px;
    border-radius: 6px;
    letter-spacing: 1px;
  }

  #terminal span {
    font-size: 18px;
    overflow: hidden !important;
  }

  #terminal-nav {
    border-radius: 6px 6px 0 0;
  }

  #ls, #whoami {
    display: none;
  }

  @keyframes typing1 {
    from {
      width: 0%;
    }
    to {
      width: 82px;
    }
  }

  @keyframes typing2 {
    from {
      width: 0%;
    }
    to {
      width: 185px;
    }
  }

  @keyframes blink {
    from, to {
      border-color: transparent;
    }
    50% {
      border-color: rgb(225, 225, 225);
    }
  }

  #whoami {
    letter-spacing: 1px;
    animation: typing1 .5s steps(500, start);
    white-space: nowrap;
    color: rgb(225, 225, 225) !important;
    border: none;
    position: absolute;
    border-right: 6px solid rgb(225, 225, 225);
  }

  #ls {
    letter-spacing: 1px;
    animation: typing2 .9s steps(500, start);
    white-space: nowrap;
    border: none;
    position: absolute;
    border-right: 6px solid rgb(225, 225, 225);
  }

  #rect {
    animation: blink 1.1s step-end infinite;
    color: rgb(225, 225, 225) !important;
    border-right: 6px solid #fff;
    box-sizing: border-box;
  }

  #rect {
    border-right: none;
  }

  #parag, #lis {
    display: none;
  }

  #amine2, #amine3 {
    display: none;
  }

  #terminal-row {
    width: 640px !important;
    margin: -25px;
  }

  #desktopShortcut {
    top: 40px;
    position: absolute;
    left: 100px;
  }

  .count {
    margin-top: -20px;
  }

  .col.counterLogo {
    background-image: linear-gradient(to top, #000000, #000000, #000000, #1f1f1f81, #2d2742, #1f1f1f81, #000000, #000000, #000000);
    color: #eaeaea;
    /* border: 1px solid #111111; */
    margin-top: 4px !important;
    border-radius: 4px;
    height: 18px;
    max-width: 34px;
    margin-left: 8px;
  }

  #counter {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 7px;
    border: 4px solid rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  #counter .views {
    font-size: 12px !important;
    line-height: 15px !important;
    color: #d8d8d8;
  }

  #topPanel div {
    z-index: 10;
    position: absolute;
    height: 24px;
    background-color: rgb(51, 65, 255, 0.795);
    opacity: 0.795;
    border-bottom: 1px solid rgb(139, 139, 139, 0.459);
  }

  @media (max-width: 992px) {
    #terminal {
      display: none;
    }
  }

  /*  width  */

  #gallery::-webkit-scrollbar {
    width: 5px;
  }

  /*  Track  */

  #gallery::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.8); */
    border-radius: 2px;
  }

  /*  Handle  */

  #gallery::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
  }

  /*  Handle on hover  */

  #gallery::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  .col.counterLogo:hover {
    cursor: context-menu;
  }

  .counterLogo h6 {
    line-height: 20px;
  }

  #gallery {
    position: absolute;
    top: 50%;
    left: calc(-50%);
    transform: translate(50%, 50%);
    background-color: rgba(0, 0, 0, 0.95);
    height: calc(100vh - 7px);
    line-height: 15;
    display: none;
    z-index: 0;
    margin-top: calc(-100vh + 7px);
    overflow: auto;
  }

  @media(max-width: 992px) {
    #galleryRow {
      width: 90% !important;
      margin: auto;
    }
  }

  #galleryRow {
    width: 95%;
    padding-left: 60px;
    margin: auto;
    /* padding-top: 50px; */
  }

  /* ////////////////////////////////////////////////////////////// */

  #iconsDesktop {
    position: absolute;
    top: 40px;
    left: 120px;
    margin: 0;
    padding: 0;
    width: 50px;
  }

  #iconsDesktop .col a {
    height: 40px;
    width: 50px;
    margin-bottom: 43px;
    background-color: none !important;
  }

  #iconsDesktop .col {
    padding: 0;
  }

  #iconsDesktop .btn.btn1::after {
    content: "Visit_My_Portfolio";
  }

  #iconsDesktop .btn.btn2::after {
    content: "Download_CV";
  }

  #iconsDesktop .btn.btn3::after {
    content: "Leave_Feedback";
  }

  #iconsDesktop .col a.btn {
    font-size: 12px;
    color: rgb(255, 255, 255);
    line-height: 10px !important;
    background-color: #3340FF;
  }

  #iconsDesktop .btn.btn1::after {
    margin-left: -8px !important;
  }

  #iconsDesktop .btn.btn2::after {
    margin-left: +2px !important;
  }

  #iconsDesktop .btn.btn3::after {
    margin-left: -8px !important;
  }

  #iconsDesktop .btn::before {
    content: "";
    height: 10px;
    width: 50px;
    background-color: rgb(70, 82, 255);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px 4px 0 0 !important;
    -webkit-border-radius: 4px 4px 0 0 !important;
    -moz-border-radius: 4px 4px 0 0 !important;
  }

  #iconsDesktop .btn::after {
    font-size: 14px;
    color: rgb(230, 230, 230);
    font-family: 'Cairo', sans-serif;
    position: absolute;
    left: 0;
  }

  @media(max-width: 400px) {
    #iconsDesktop {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* margin: 50px auto 0 auto; */
    }
    #iconsDesktop .col a {
      height: 60px;
      width: 75px;
      margin-bottom: 43px;
      background-color: none !important;
    }
    #iconsDesktop .btn::before {
      content: "";
      height: 12px;
      width: 75px;
      background-color: rgb(70, 82, 255);
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 4px 4px 0 0 !important;
      -webkit-border-radius: 4px 4px 0 0 !important;
      -moz-border-radius: 4px 4px 0 0 !important;
    }
    #iconsDesktop .btn::after {
      font-size: 18px;
      text-align: center;
      top: 75px !important;
      background-color: rgb(0, 0, 0);
      position: absolute;
      left: 0px !important;
    }
  }

  .titlegallery {
    font-family: 'Cairo', sans-serif;
    color: rgb(197, 197, 197);
    margin-top: 50px;
    font-size: 18px;
    width: 100%;
    margin-left: 15px;
    text-decoration: underline;
  }

  #iconsDesktop .btn:hover::before, #iconsDesktop .btn:focus::before {
    background-color: rgb(79, 90, 245);
  }

  #iconsDesktop .btn2::after {
    margin-left: 8px;
  }

  /* //////////////////////////////////////////////////////// */

  #iconsDesktop .col a.btn:after {
    height: 18px;
    padding: 4px 3px;
    border-radius: 3px !important;
    position: absolute;
    top: 50px;
    left: 20%;
    transform: translate(-40px, -50%);
  }

  #iconsDesktop .btn:focus::after {
    background-color: rgb(70, 82, 255);
  }

  #iconsDesktop [type=button] {
    box-shadow: none;
  }

  /* ////////////////////////////////////////////////////////////// */

  #glass {
    margin-top: -27px;
    height: 27px;
    background: linear-gradient(110deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.05) 14%, rgba(255, 255, 255, 0.1) 27%, rgba(255, 255, 255, 0.2) 39%, rgba(235, 235, 235, .8) 52%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.1) 54%, rgba(0, 0, 0, 0.1) 76%, rgba(0, 0, 0, .1) 91%, rgba(0, 0, 0, 1) 100%);
    border-radius: 5px;
    width: 200px;
  }

  #viewscol {
    z-index: 0 !important;
  }