/*
  Global style settings
*/

:root {
    --menu-button-width: 150px;
    --menu-button-height: 35px;
    --menu-button-color: #d4d3de;
    --menu-button-hover-color: #adaeb8;
    --menu-gutter: 3px;
    --menu-details-color: #d4d3de;
}

/*
  Global style resets
*/

#nav {
    margin: 10px;
}

/*
  Style rules
*/

/*
nav {
    position: absolute;
    top: 10px;
    left: 10px;
}
*/
nav ul {
    list-style-type: none;
    padding: 0;
}

nav button {
    width: var(--menu-button-width);
    height: var(--menu-button-height);
    border: 1px solid black;
    border-radius: 3px;
    font-size: 1rem;
    white-space: nowrap;
    overflow: auto;
    text-align: left;
    background-color: var(--menu-button-color);
}

nav ul:first-child {
    display: grid;
}

nav button:hover {
    background-color: var(--menu-button-hover-color);
}

#menu-item-details-holder {
/*    min-height: 30vh;*/
    min-width: 40vw;
    max-height: 30vh;
    max-width: 40vw;
    overflow-y: auto;
    position: absolute;
    background-color: var(--menu-details-color);
    /*
    left: 10vw;
    top: 20vh;
*/
    left: -9999px;
    top: -9999px;
    z-index: 100;
    border: 1px solid black;
    border-radius: 1vw;
    /*
    visibility: hidden;
*/
    padding: 10px;
}

/*
  Media queries
*/

/*
  Screen <= 768px 
*/

@media only screen and (max-width: 768px) {
    :root {
        --menu-button-width: 80px;
    }
    #menu-item-details-holder {
        max-width: 20vw;
    }
}

/*
  Screen <= 1024px and > 768px
*/

@media only screen and (min-width: 768.1px) and (max-width: 1024px) {
}

/*
  Screen > 1024px
*/

@media only screen and (min-width: 1024.1px) {
}