.wide_dropdown {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 3;
    background-color: var(--my-font-color);
    /* color: var(--my-bg-color); */
    margin-top: 15px; /* reduce the overlap b/w wide_dropdown_toggle & wide_dropdown */

    /* Transition setup */
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    /* each of the above 3 properties are animated below */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s;
}

.wide_dropdown_content {
    padding-top: 20px;
    padding-bottom: 20px;
    display: grid;
    justify-content: center;
    justify-items: left;
    /* color: var(--my-bg-color); */
}

.wide_dropdown h3 {
    color: var(--my-bg-color);
    margin-top: 30px;
    border-left: 1px solid var(--my-bg-color);
    padding-left: 10px;
    font-size: var(--font-size-base);
}

.wide_dropdown ul {
    list-style: none;
    text-align: left;
    padding-left: 10px;
    /* color: var(--my-bg-color); */
}

.wide_dropdown li {
    padding-top: 10px;
}

/* screens with hover: Show wide_dropdown on hover */
/* Touch screens: Show wide_dropdown when "active" class is added */
.wide_dropdown_container:hover .wide_dropdown,
.wide_dropdown_container.active .wide_dropdown {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* screens with hover: increase font-weight when hovered */
/* Touch screens: increase font-weight when menu item is active */
.wide_dropdown_container:hover .wide_dropdown_toggle,
.wide_dropdown_container:active .wide_dropdown_toggle {
    font-weight: var(--font-weight-bold);
}

.wide_dropdown_toggle {
    cursor: pointer;
    padding-bottom: 30px !important; /* reduce the overlap b/w wide_dropdown_toggle & wide_dropdown */
}