body {
    width: 75%;
    margin: 0px auto;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: black;
    font-weight: 400;
    line-height: 1.5; 
    background-color: #f8f9fa;
    filter: contrast(100.00001%);
}

#outer-div {
    background-color: white;
    margin: 0px;
}

h1, h2, h3, h4, h5, h6  {
  font-family: "Roboto", sans-serif;
  color: #237128;
  font-weight: 700;
}

/* Page Heading */

    #project-heading {
        height: 50px;
        align-content: center;
        background-color: #333333;   
        padding: 5px 20px; 
    }

    #project-heading h1 {    
        color: white;
        font-size: 32px;
        margin: 0px !important;
    }

/* Banner */

    #top-banner {
        display: block;
        height: 160px;
        background-image: url('images/forest.jpg');
        background-repeat:no-repeat;
        background-position: center center;
        background-size: 100% auto;
    }


/* Navbar Style */

    #navbar {
        list-style-type: none;
        margin: 0px 0px 8px 0px;
        padding: 0;
        overflow: hidden;
        background-color: #333333;
        position: sticky;
        top: 0;
        display: flex;
    }


    #navbar li a {
        display: block;
        color: #f8f9fa;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    #navbar li a:hover {
        background-color: #237128;
        color: #f8f9fa !important;
    }

    #selected {
        display: block;
        background-color: #ffb31a;
        color: #333333 !important;
        padding: 14px 16px;
        text-align: center;
        text-decoration: none;
    }


/* Main content */

    /* Page Title */
        h1 {
            margin: 30px auto 20px auto;
            padding-left: 20px;
        }

        #main-content {
            margin: 8px;
            margin-bottom: 0px !important;   
        }

    /* Content Divs */

        .content-div {
            padding: 10px 20px;
            border-top: 3px solid black;
            background-color: white;
        }

        .content-div h2 {
            border-bottom: 2px solid #c8c8c8;
        }

        .content-div h4 {
            text-indent: 1.5em;
        }

    /* Image Rules */

        img {
            max-width: 100%;
            display: block;
            margin: 10px auto;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border-radius: 5px;
            max-height: 100%
        }

        figure {
            max-width: 55%;
            align-content: center;
            margin: 10px auto;
        }

        .content-div figcaption{
            display: block;
            width: 100%;
            align-content: center;
            margin: 2px auto;
            font-weight: 600;
            font-size: 10pt;
        }

        .content-div a {
            color: blue !important;
            text-decoration: none !important;
            font-size: 8pt;
            font-weight: bold;
        }

    /* Table Style */

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 0.95rem;
            
        }

        th, td {
            padding: 10px 12px;
            text-align: left;
            border: 1px solid #ddd;
            
        }

        th {
            background-color: #f3f4f6;
            font-weight: 600;
        }


    /* Meeting the Brief Specifics */

        video {
            max-width: 90%;
            margin: auto;
            display: block;
            align-content: center;
        }
    /* Investigation Specifics */

        .two_photos {
            display: flex;
            justify-content: center;
            gap: 2.5vw;
            align-items: flex-start;
        }

        .two_photos figure {
            max-width: 50%;
            height: 20% !important;
            object-fit: contain;
            vertical-align: middle;
        }

        #dji {
            max-width: 80% !important; 
        }

    /* Plan & Design Specifics */

        #hardware-design figure {
            max-width: 45%;
        }

        #bill-materials a {
            color: #0000EE !important;
            font-size: 0.95em;;
            font-weight: 400;
        }

        #bill-materials th{
            font-weight: bold;
            border-bottom: 2px solid black;
        }

    /* Create Specifics */

        #breadboard {
            max-width: 75% !important;
        }
    /* Evaluation Specifics */
    /* References Specifics */

        .citations {
            list-style: none;
            counter-reset: ref;
            padding-left: 0;
        }

        .citations li {
            counter-increment: ref;
            margin-bottom: 0.5em;
        }

        .citations li::before {
            content: "[" counter(ref) "] - ";
        }

        .citations li:target {
        background-color: #fff3cd;
        border-left: 4px solid #ffb31a;
        padding-left: 8px;
        }

        .citations a {
            color: #0000EE !important;
            font-size: 12pt;
            font-weight: 400;
        }

        #word-count {
            max-width: 60%;
            justify-content: center;
            margin: auto;
        }

        #word-count th{
            text-align: center !important;
            font-weight: bold;
            border-bottom: 2px solid black;
        }

        #total td {
            font-weight: bold;
        }

/* Footer Box */

footer {
    display: flex;
    min-height: 50px;
    background-color: #333333;
    color: white !important;
    padding: 30px 40px;
    font-size: 10pt;
    justify-content: center;
    text-align: center;
}