.body {
    background-color: rgb(147, 147, 147);
    min-width:160px;
}

.topnav {
    position: relative; /* Create a positioning context */
    z-index: 10; /* Ensure the topnav is above other elements */
}
    .topnav nav {
        width: 100%; /* Ensure it spans the full width */
        text-align: center;
        background: rgb(167, 167, 167);
        border: 3px groove;
        border-radius: 16px;
        border-color:rgb(64, 114, 196);
        box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65);
        box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.8);
        padding-top: 12px;
        padding-bottom: 12px;
        margin: 5px -3px;
    }
    .topnav a {
        color: black; 
    }
    .topnav nav ul {
        list-style: none;
        padding: 0;
        margin: 1px 0;
    }
    
    .topnav nav li {
        padding-right: 1rem;
        padding-left: 1rem;
        text-decoration: none;
        
    }
    
    .topnav button {
        background-color: rgb(145, 145, 145);
        font-size: 15px;
        font-family: 'andale mono',consolas,'courier new', monospace;
        font-weight: 600;
        border-radius: 11px;
        padding: 1px 1px;
        cursor: pointer;
        border: 2px solid;
        border-color: rgb(64, 114, 196);
        margin: 2px 2px;
        transition-duration: 0.7s;
        box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.8);
        text-decoration: none;
        text-shadow: 2px 2px 3px rgba(219, 219, 219, 0.617);
       
    }
    .topnav button:hover {
        background-color: rgb(255, 255, 255); /* Change background color on hover */
        border-color: rgb(97, 223, 245);
        box-shadow: 0 0 7px rgba(255, 255, 0, 0.8), 0 0 20px rgba(255, 255, 0, 0.6), 0 0 25px rgba(255, 255, 0, 0.4); /* Glowing light yellow effect */
        color: black;
        
    }
    
    .topnav nav a {
        display: flex;
        justify-content: center;
        text-decoration: none;
        height: 100%; /* Ensure the anchor takes the full height of the li */
    }

.topnav .topnav-graphicbutton:hover {
    background-color:rgb(159, 159, 159);
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);

}
  
.graphicdesignnav {
    position: relative; /* Create a positioning context */
    z-index: 5; /* Ensure the topnav is above other elements */
    display: flex; /* Flexbox for layout */
    flex-wrap: wrap; /* Allow the nav to wrap around the buttons */
    justify-content: center; /* Center the buttons */
    background: rgb(147, 147, 147);
    border: none;
    border-radius: 0 0 16px 16px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65);
    box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.8);
    padding-top: 25px;
    padding-bottom: 5px;
    margin: -17px 3px 0px 3px;
}  

.graphicdesignnav nav {
    width: 100%; /* Ensure it spans the full width */
    text-align: center;
    border: none;
}

.graphicdesignnav a {
    color: black; 
}
.graphicdesignnav nav ul {
    list-style: none;
    padding: 0;
    margin: 1px 0;
    display: flex;
    flex-wrap: wrap; /* allow items to be wrapped within the container */
    justify-content: center; /* Center the items */
}

.graphicdesignnav nav li {
    padding-right: 1rem;
    padding-left: 1rem;
    text-decoration: none;
    
}

.graphicdesignnav button {
    background-color: rgb(142, 142, 142);
    font-size: 14px;
    font-family: 'andale mono',consolas,'courier new', monospace;
    font-weight: 550;
    border-radius: 11px;
    padding: 2.5px 1px;
    cursor: pointer;
    border: none;
    margin: 2px 2px;
    transition-duration: 0.7s;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    
    
}
.graphicdesignnav button:hover {
    background-color: rgba(255, 255, 255, 0.5); /* Change background color on hover */
    box-shadow: 0 0 9px rgba(255, 255, 0, 0.8), 0 0 20px rgba(255, 255, 0, 0.6), 0 0 25px rgba(255, 255, 0, 0.4); /* Glowing light yellow effect */
    color: black;
}
.graphicdesignnav .logos-button:hover {
    box-shadow: 0 0 9px rgba(255, 255, 0, 0.8), 0 0 20px rgba(255, 255, 0, 0.6), 0 0 25px rgba(255, 255, 0, 0.4);
}
/* Apply box-shadow to logos button when hovering over the dropdown content */
#myDropdown a:hover .logos-button {
    box-shadow: 0 0 9px rgba(255, 255, 0, 0.8), 0 0 20px rgba(255, 255, 0, 0.6), 0 0 25px rgba(255, 255, 0, 0.4);
}

.graphicdesignnav nav a {
    display: flex;
    justify-content: center;
    text-decoration: none;
    height: 100%; /* Ensure the anchor takes the full height of the li */
}





.websitefooter {
    position: fixed;
    bottom: 0px;
    width: 100%;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block; 
    border-radius: 14px; 
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color:rgb(147, 147, 147);
    border-radius: 14px;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color:white;
    border-radius: 14px;
}

/* Show the dropdown content when hovering over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}