* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
}

/* Styles for the navbar */
.navbar-ml {
    position: fixed; /* Fixed positioning */
    top: 0; /* Stick to the top */
    width: 100%; /* Full width */
    z-index: 1000; /* Makes sure the navbar is on top of other content */
    padding: 5px;
}

/* Content styling */
.content {
    padding-top: 60px; /* Add padding to ensure content starts below the navbar */
}


.container-ml {
    flex: 1; /* Take remaining space */
    padding-top: 60px;
    transition: margin-left ease 0.3s;
}

.navbar-ml-left {
    float: left; /* Floats the element to the left */
    width: 50px; /* Fixed width for demonstration */
}

.navbar-ml-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%; /* Make sure it's wide enough */
}

.navbar-ml-center {
    display: flex;
    align-items: center; /* This ensures the content inside is also centered if more complex than plain text */
    justify-content: center; /* Horizontally centers the content if the container has extra space */
    text-align: center; /* Ensures the text itself is centered if it wraps to a new line */
    width: 100%;
}

.navbar-ml-title {
    color: white;
    font: bold 35px arial;
    font-size: clamp(30px, 3vw, 35px);
}

.navbar-ml-menu {
    font-size: 2.5rem;
    color: white;
    align-items: center;
    justify-content: center;
    display: flex;
}

    .navbar-ml-menu:hover {
        font-size: 2.5rem;
        color: black;
    }

.ml-navbar-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
}


.ml-sidebar {
    width: 200px;
    /*background: #333;*/
    background-color: darkslategrey;
    color: white;
    opacity: 1;
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
    position: fixed;
    height: 100%;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    z-index: 999;
}

.ml-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
}

.ml-sidebar-content {
    display: flex;
}

.ml-sidebar-button {
    width: -webkit-fill-available;
    margin-left: 10px;
    margin-right: 10px;
}

@media (max-width: 1000px) {
    .ml-sidebar {
        width: 0px;
        transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
    }

    .container-ml {
        margin-left: 10px;
        transition: margin-left ease 0.3s;
    }

    .navbar-ml-right-search:focus {
        width: 100px;
        transition: width 0.3s ease-in-out;
    }

    .navbar-ml-right-search:not(:focus) {
        transition: width 0.3s ease-in-out;
    }
}

.ml-main {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}