* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    --nav-color-menuContainer-bg: rgba(147, 195, 174, 0.2);
    --nav-color-bg: #94D6B9;
    --nav-color-text-hover: #519477;
    --nav-color-text: #fff;
    --nav-font-text: 'Muthea';
}

/* Menu */
#menuContainer {
width: 100%;
height: 60px;
top: 0px;
position: fixed;
font-size: 15px;
background-color: var(--nav-color-menuContainer-bg);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 0px solid rgba(255, 255, 255, 0.8);
z-index: 20;
justify-content: center;
align-items: center;
display: -webkit-flex;
}
#menuIcon {
    width: 60px;
    height: 60px;
    top: 0px;
    right: 0px;
    position: absolute;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: 1s;
    transition-timing-function: ease;
}

.icon-burger:after {
    content: '☰';
    font-size: 50px;
    color: var(--nav-color-bg);
    line-height: 40px;
  }
.icon-X:after {
    content: '×';
    font-size: 50px;
    color: var(--nav-color-bg);
    line-height: 50px;
  }
.menuLogo {
    width: auto;
    height: 40px;
    top: 10px;
    transition: 2s;
    transition-timing-function: ease;
}
.menuLogo:hover {
    transform: rotate(360deg);
    transition: 2s;
    transition-timing-function: ease;
}
#navigation {
width: 100%;
/*height: calc(100vh - 60px);*/
top: 60px;
position: fixed;
font-size: 15px;
background-color: var(--nav-color-bg);
/*-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);*/
border: 0px solid rgba(255, 255, 255, 0.8);
z-index: 20;
justify-content: center;
align-items: center;
text-align: center;
transition: 1s;
transition-timing-function: ease;
overflow: hidden;
display: grid;
}
.navigationCenter {
    width: 100%;
    height: auto;
    transition: 1s;
    transition-timing-function: ease;
}
.navClosed {
    height: calc(0vh - 60px);
    transition: 1s;
    transition-timing-function: ease;
}
.navOpen {
    height: calc(100vh - 60px);
    transition: 1s;
    transition-timing-function: ease;
}
#navigation .navigationCenter a {
    width: 100%;
    font-size: 30px;
    font-family: var(--nav-font-text);
    color: var(--nav-color-text);
    display: grid;
    /*line-height: 60px;*/
    margin-top: 20px;
    transition: 1s;
    transition-timing-function: ease;
}
#navigation a:hover {
    color: var(--nav-color-text-hover);
}