:root{
    background-attachment: fixed;
    font-size:12pt;
    font-family: 'Nunito', sans-serif;
    margin:0;
    /*Defaults: */
    --default-background: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
    --default-menuButton-background: linear-gradient(to bottom, #37ecba 0%, #72afd3 100%);
    --default-sideNav-color: rgba(255,255,255,0.95);
    --default-tile-color:rgba(255,255,255,1);
    --default-text-color:rgba(0,0,0,1);
    --default-corner-radius:12px;
}
@media (prefers-color-scheme: dark){
    :root{
        --default-background: radial-gradient(circle at 50% 104%,#de6c6c, rgba(107,109,236,1));
        --default-menuButton-background: radial-gradient(circle at 50% 104%,rgba(107,109,236,1),#de6c6c);
        --default-sideNav-color: black;
        --default-text-color: rgba(200,200,200,1);
        --default-tile-color:rgba(25,25,25,1);
      }
}

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400&family=Nunito&display=swap');

#menuNav{
    display:none;
    padding:0;
    transition:0.5s;
}
#menuNav_ul{
    padding:0;
    list-style-type:none;
}
.menuNav_li{
    list-style:none;
    display: block;
    text-align:center;
}
#menufelder{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    padding:0 0;

}
h1{
    font-family: 'Comfortaa', cursive;
    font-weight: 300;
    font-size: 3rem;
    margin: 0.5rem 1rem;
}
h2{
  font-weight: 200;
}
.menufeld{
    background-color:var(--default-tile-color);
    border-radius:var(--default-corner-radius);
    align-items: center;
    display: flex;
    margin: 2.5% 1.25%;
    flex-direction: column;
    min-height: 8rem;
}
.menuFieldTitle{
    text-align:center;
    color:var(--default-text-color);
    height: 5rem;
    width: 100%;
    text-decoration: none;
    display: block;
    line-height: 5rem;  /* Muss noch mit Variable gelöst werden*/
    font-size: 2rem;
    font-family: 'Comfortaa', cursive;
}
.menuFieldSubmenu{
    text-align: left;
    color: var(--default-text-color);
    height: 3rem;
    line-height: 3rem; /* Muss noch mit Variable gelöst werden*/
    display: block;
    margin: 0.1 rem;
    text-decoration: none;
    padding-left: 0.5rem;
}
.menuFieldSubmenuWrapper{
    border-radius: var(--default-corner-radius);
    background-color: #333333;
    width: 95%;
    margin-bottom: 1rem;
}
.separator{
    width: 100%;
    height: 2px;
    background-color: var(--default-tile-color);
    display: block;
}
.menuImg{
    height: 14rem;
    object-fit: contain;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
footer{
    z-index: -1;
    bottom: 0;
    position: fixed;
    width: 100%;
}
#footerWrapper{
    position:relative;
    background-color:var(--default-tile-color);
    color:var(--default-text-color);
    padding:1.5rem;
    text-align:center;
}
body{
    margin:0;
    top: 0;
}
html{
    background-color: var(--default-tile-color);
}
#mainNav{
    background-attachment: fixed;
    z-index: 1;
    background-image: var(--default-background);
    border-radius: var(--default-corner-radius);
    padding: 2px 4px 2px 4px;
    margin: 10rem 0 12rem 0;
}
header{
    z-index: -1;
    top: 0;
    position: fixed;
    width: 100%;
    color: white;
    margin: 0rem 0rem 3rem 0rem;
    text-align:center;
    background-color: var(--default-tile-color);
    background: var(--default-tile-color);
    border-radius: var(--default-corner-radius);
    border-top-right-radius: 0;
    border-top-left-radius: 0;

}
#menuButton{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: -3.5rem;
    top: 55vh;
    height: 7rem;
    width: 7rem;
    background-image: var(--default-menuButton-background);
    border-radius: 50%;
    transition: 0.5s;
    box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.4);
}
.menuButton_arrows{
    display: inline-block;
    font-size: 2rem;
    margin: auto 1.25rem;
    text-align: center;
}
#sidenav{
    height:90vh;
    width: 0%;
    position: fixed;
    z-index: 2;
    top: 0;
    right: -10vw;
    overflow-x:hidden;
    /*background-image: var(--default-menuButton-background);*/
    background-color: rgba(0, 0, 0, 0.1);
    padding: 1px 0 1px 1px;
    transition: 0.3s;
    border-radius: var(--default-corner-radius);
}
#sideNavWrapperWrapper{
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0rem 0.5rem 3rem 0.5rem;
}
#sideNavWrapper{
    background-image: var(--default-background);
    border-radius: var(--default-corner-radius);
    width: 100%;
    height: 100%;
}
.sideNavTextBeam{
    align-self: center;
    height: 3.2rem;
    width: 0.5rem;
    margin: 0 0.5rem;
    background-image: var(--default-background);
    border-radius: var(--default-corner-radius);

}
.sideNavTextWrapper{
    display: flex;
    --sideNavMenuButton-height: 4rem;
    height: var(--sideNavMenuButton-height);
    line-height: var(--sideNavMenuButton-height);
    align-content: center;
    width: 80%;
    user-select: none;
    margin: 0.5rem 0 0 0.5rem;
    background-color: var(--default-tile-color);
    border-radius: var(--default-corner-radius);
}
.sideNavMenuButton{
    text-align: left;
    color: white;
    font-size: 1rem;
}
.active{
    display: block;
}