/*  nav */
.sidenav {
    padding: 1rem 0.5rem;    
    position: fixed;
    height: auto;
    z-index: 2;
    overflow: hidden; 
}

/*  flex container */
.sidenav,
.container-btn {
    align-items: flex-start;
}

/* flex items */
.sidenav h2,
.container-btn {
    flex: 1;
}

.sidenav h2 {
    padding: 0 0 1rem .5rem;
    width: 100%;
}

[target="_top"] {
    font-size: 21px;
    width: 230px;
    padding: 0.5rem;
    color: var(--White);
    border: 4px groove cornsilk;
    text-decoration: none;
    margin: -4px 0 4px 0;
    cursor: pointer;
}

.selectArticleBtn {
    background-color: darkslategray;
}

/* home */
.active {
    background-color: darkgoldenrod;
}

.selectArticleBtn:visited{
    color: var(--White);
    background-color: darkslategray;
}

.active:hover,
.selectArticleBtn:hover {
    color: var(--Ivory);
    background-color: darkkhaki;
    box-shadow: 2px 2px var(--Gainsboro);
}

/*  dialog tag 
=================*/
/*  button */
[id$="modal"] {
    display: none;
    position: absolute;
    font-size: 30px;
    padding: 1rem;
    background-color: transparent;
    cursor: pointer;
}

/*
#open-modal {
    display: none;
}
*/
/*  Modal (background) 
=======================*/
#containerMenu {
    display: none;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: auto; /* Enable scroll if needed */
    background-color: hsla(0, 0%, 0%, 0.4); /* Black w/ opacity */
}

/*  Modal content */
/* nav within the modal */
.positioned {
    padding: 213px 16px 16px 16px;
}

@media screen and (max-width: 1400px) {
    #sidenav {
        position: relative;
        display: none;
    }

    [id$="modal"] {
        display: block;
    }

    #open-modal {
        color: black;
        z-index: 1;
        top: 0;
        right: 0;
    }

    #close-modal {
        color: var(--White);
        top:2rem;
        right: 0;
    }

}