body {
    background-color: white;
    font-family: Arial, sans-serif;
}

span.nav {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    /* background-color: #aaa; */
    align-items: center;
}

.nav a {
    text-decoration: none;
    color: black;
}

input.menustates {
    /* display: none; */
}

/* not for img */
span.menu-item {
    flex: 1;
    border-bottom: solid 10px lightgray;
    padding-top: 5px;
}

div.menu-dropdown {
    display: none;
    position: absolute;
    height: auto;
    margin-top: 10px;
    text-align: left;
}

img.menu-item {
    cursor: pointer;
}

span.menu-item {
    cursor: pointer;
    font-size: 24px;
    text-align: center;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 200px;
}

.menu-item:nth-child(2):hover, #menu1:checked ~ span .menu-item:nth-child(2), .menu-item:hover div.menu-dropdown {
    border-bottom-color: khaki;
}

/* display when hovering */
.menu-item:hover div.menu-dropdown {
    display: block;
}

div.menu-dropdown div:hover {
    background-color: khaki;
}

div.menu-dropdown {
    background-color: white;
}

#menu1:checked ~ span .menu-item:nth-child(2) div.menu-dropdown {
    display: block;
}

.menu-item:nth-child(3):hover, #menu2:checked ~ span .menu-item:nth-child(3) {
    border-bottom-color: darkorange;
}

.menu-item:nth-child(3):hover div.menu-dropdown, #menu2:checked ~ span .menu-item:nth-child(3) div.menu-dropdown {
    display: block;
}

.menu-item:nth-child(4):hover {
    border-bottom-color: cornflowerblue;
}

.menu-item:nth-child(5):hover {
    border-bottom-color: indianred;
}
.menu-item:nth-child(6):hover {
    border-bottom-color: indigo;
}
.menu-item:nth-child(7):hover {
    border-bottom-color: lightgreen;
}
.menu-item:nth-child(8):hover {
    border-bottom-color: red;
}
.menu-item:nth-child(9):hover {
    border-bottom-color: khaki;
}
.menu-item:nth-child(10):hover {
    border-bottom-color: cornflowerblue;
}


.widenav {
    display: none;
}

@media only screen and (min-width: 700px) {
    .widenav {
        display: flex;
    }
}

img.wideimg {
    width: 100%;
    /* height: auto; */
}