@view-transition {
    navigation:auto;
}
::view-transition-group(*) {
    animation-duration:0.4s;
}
:root {
    /*company-related colors*/
    --nuvative-blue: #07b4e3;
    --nuvative-purple: #291f97;
    --nuvative-orange: #ff9e33;
    --netpay-blue: #115e8e;
    --netpay-green: #7ac280;
    --paydini-green: #016a01;
    --body-font-color: #ffffff;
    --body-background: #121212;
    --menu-background-color: var(--nuvative-orange);
}

body {
    position: relative;
    background-color: var(--body-background);
    color: color-mix(in srgb, var(--body-font-color), var(--body-background) 30%);
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
}
body, html {
    scroll-behavior: smooth;
}
strong {
    color: color-mix(in srgb, var(--body-font-color), var(--body-background) 10%);
}
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

#menu, #menu a {
    transition: all .3s, background-color .7s;
    transition-behavior: allow-discrete;
    /*transition-duration: 1s;*/
    animation-duration: 1s;
    transform-origin: left top;
}
#menu {
    margin: 0;
    padding: .5rem .5rem 0 .5rem;
    background-color: transparent;
    z-index: 11;
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    max-height:100vh;
    display:block;
    border-bottom-right-radius:1rem;
}
#menu:hover {
    background-color: color-mix(in srgb, var(--menu-background-color) 70%, transparent);
}
#menu a:not(.iconlink):hover {
    background-color: var(--menu-background-color);
}

#menu a:not(.iconlink) {
    padding: 0;
    margin: 0;
    opacity: 0;
    scale: 0;
    width: 0;
    height: 0;
    white-space: nowrap;
    display: block;
}

#menu a:not(.iconlink) {
    color: white;
    border-radius: .25em;
}

#menu:hover a:not(.iconlink) {
    opacity: 1;
    scale: 1;
    width: auto;
    height: auto;
    margin: .25em;
    padding: .25em;
}

#menu a.iconlink {
    padding: 0 0 .25em 0 !important;
    display:block;
    filter: drop-shadow(0px 0px .4rem rgba(255,255,255,.7));
}

#menu a.iconlink img {
    height: 3rem;
    filter: drop-shadow(0px 0px .4rem rgba(255,255,255,.7));
}

@media (max-width:880px) {
    html, body, table {
        font-size: .9rem !important;
    }
    #menu .iconlink img {
        height: 1.5rem;
    }
}

@media print {
}