html {
      scroll-behavior: smooth; 
    }   
    /* side bar voor laptops */
    @media (min-width: 992px) {
      /* sidebar */
      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 200px;
        max-width: 100vw;
        background-color: #343a40;
        padding-top: 1rem;
      }
      /* main content */
      #main-content {
        margin-left: 200px;
        max-width: calc(100vw - 200px);
      }
    }
    /* style voor active link */
    .nav-link.active {
      font-weight: bold;
      color: #0d6efd !important;
    }
    /* circles settings */
    .skill-circles {
      display: flex;
      gap: 4px;
      padding: 10px;
    }
    .skill-circles .circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid #bbb;
      background-color: transparent;
    }
    .skill-circles .circle.filled {
      background-color: #0d6efd;
      border-color: #0d6efd;
    }
    /* Code styling in modal */
    pre {
      background-color: #f8f9fa;
      border-radius: 5px;
      padding: 15px;
      max-height: 300px;
      overflow-y: auto;
      font-size: 0.9rem;
    }
    code {
      color: #d63384;
    }
    /* Carousel caption */
    .carousel-caption {
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 5px;
      padding: 10px;
    }
    /* Badge styling */
    .badge {
      margin-right: 5px;
      margin-bottom: 5px;
    }
    /* Sidebar animation */
    #sidebar {
      transition: transform 0.3s ease;
      transform: translateX(0);
    }
    #sidebar.hidden {
      transform: translateX(-220px);
    }
    /* Project card hover effect */
    .card {
      transition: transform 0.3s;
    }
    .card:hover {
      transform: translateY(-5px);
    }

   /* Margin voor desktop versie van Contact formulier */
    @media (min-width: 992px) 
    {
    #contact
    {margin-left: 20px;}
    }