* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            overflow-x: hidden;
            font-family: Arial, sans-serif;
            background-color: #121716;
        }

/* ID tags */

#socials{
    color: #40f;
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth color transition */
}

#socials:hover{
    color: hotpink;
}

#socials:visited{
    text-decoration: none;
    color: #40f;
}

#active-button a {
    font-style: normal;
    font-weight: bold;
    color: hotpink;
    text-decoration: none; /* Optional: Remove underline */
}

#active-button a:hover {
    color: white;
    font-weight: bold;
    font-style: normal;
}

/* NAV en dergelijk item */

        .navbar {
            display: flex;
            justify-content: space-around;
            padding: 15px;
            background-color: #40f;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        .navbar a {
            color: #121716;
            font-style: oblique;
            font-size: 22px;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .navbar a:visited {
            color: #121716;
        }

        .navbar a:hover {
            color: hotpink;
        }

        @media only screen and (max-width: 600px) {
            .navbar a {
                font-size: 16px; 
            }
        }

        .container {
            display: flex;
            margin-top: 60px;
            padding: 20px;
            color: #bfd6cb;
        }
        .left-panel {
            width: 50%;
            height: 100vh;
            overflow-y: auto;
            padding-right: 20px;
            scrollbar-width: none;
            -ms-overflow-style: none; 
        }

        @media (max-width: 768px) {
        .left-panel {
            display: none;
        }

        .left-panel::-webkit-scrollbar {
         display: none;}

        }

        .right-panel {
            width: 50%;
            padding-left: 20px;
            padding: 15px 0;
            overflow-y: auto;
        }

        @media (max-width: 768px) {
        .right-panel {
            width: 100%; /* Full width for mobile and smaller devices */
            height: 100vh; /* Make it take full screen height */
            padding: 15px; /* Adjust padding */
            }
        }

        @media (max-width: 480px) {
        .right-panel {
                padding: 10px; /* Reduce padding for even smaller screens */
            }
        }

/* work item */

        .work-item {
            border-bottom: 1px solid #ddd;
            padding: 15px 0;
            padding-left: 20px;
            padding-right: 20px;
            margin-bottom: 15px;
            height: auto;
        }
        .work-item h2 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        .work-item img {
            width: 100%;
            display: block;
            margin: 10px 0;
        }
        .work-item p {
            font-size: 14px;
        }

/* expandable text */
.expandable-title { 
    font-weight: bold;
    color: #1a55fd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #121716;
    border: 1px solid #1a55fd;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.expandable-title:hover {
    background-color: #1a55fd10;
}

.arrow {
    transition: transform 0.3s ease;
}

.expandable-title.expanded .arrow {
    transform: rotate(180deg);
}

.expandable-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
    padding: 0 10px;
    background-color: #1a55fd;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 
    opacity: 0;
    display: block; /* Always block, visibility controlled via height/opacity */
}

.expandable-content.expanded {
    max-height: 1000px; /* Set to a larger value, or use 500px for smaller content */
    padding: 10px;
    opacity: 1;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .expandable-content.expanded {
        max-height: 800px; /* Adjust max-height for mobile */
    }
}

#exp-text {
    font-size: 14px;
    color: #bfd6cb;
}