/* This styles the logo in the navbar */
#navbar #logo img {
    width: 50px;
}

/* This styles the unlisted links in the navbar */
#navbar ul {
    list-style: none;
    display: flex;
}

/* This changes the appearance of the listed links in the navbar */
#navbar ul li {
    margin: 0 20px;
    color: grey;
}

/* This styles the descriptions of the 3D object */
#content {
    text-align: center;
    background-color: white; /* Added to change background color to white */
}

/* This styles the heading in the 3D description */
#content h2 {
    color: rgb(11, 62, 173);
    font-size: 18px; /* Increase font size for better readability on mobile */
    margin-top: 10px; /* Add margin for spacing on mobile */
}

/* This styles the paragraph in the 3D description */
#content p {
    color: rgb(189, 189, 189);
    font-size: 18px; /* Adjust font size for better readability on mobile */
    margin-top: 5px; /* Add margin for spacing on mobile */
}

/* This styles the button in the 3D description */
#content button {
    width: 30%; /* Make the button wider for mobile screens */
    height: 40px;
    font-size: 14px;
    border: none;
    outline: none;
    border-radius: 20px;
    background: dodgerblue;
    color: white;
    margin: 5px 0; /* Add margin for spacing on mobile */
}

/* This adds some hover effects over the button */
#content button:hover {
    background: navy;
}


/* This styles the aside container */
#aSide {
    height: 80%;
    width: 80%;
    position: absolute;
    top: 225px;
    right: 0%;
}

/* This styles the 3D object inserted in the aside container */
#aSide model-viewer {
    height: 80%;
    width: 80%;
    position: absolute;
    top: 50px;
    left: 20px;
    border: none;
}
/* Add this CSS code to your existing style.css or in a separate CSS file */

/* Style for mobile screens */
@media (max-width: 768px) {
    /* Adjust the container for smaller screens */
    #container {
        padding: 5px;
    }

    /* Center-align the logo */
    #logo {
        text-align: center;
    }

    /* Style the navbar */
    #navbar {
        display:  block;
        justify-content: start;
        align-items: center;
        padding: 0;
    }

    /* Style the logo image */
    #logo img {
        width: 100px; /width: 50px;/
    }

    /* Remove margin from the list items */
    #navbar ul li {
        margin: 0;
    }

    /* Style for active link */
    #navbar ul .active {
        background: none;
    }

    /* Style the navigation links */
    #navbar ul {
        flex-direction: row;
        align-items: center;
    }

    /* Style each navigation link */
    #navbar ul li {
        margin-left: 5%;
        text-align: center;
    }

    /* Style the 3D object container for smaller screens */
    #aSide {
        width: 100%;
        margin: 25px 0;
    }

    /* Style the content section for smaller screens */
    #content {
        text-align: center;
    }

    /* Style the button */
    #content button {
        width: 100%;
    }

    /* Style the social media icons for smaller screens */
    #icons {
        display: none; /* You can choose to hide social media icons on mobile */
    }
}