:root {
    --cor: #022;
    --2cor: turquoise;
    --marg: 32px;
  }
html {
    font-family: 'IBM Plex Sans Condensed',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 300;
    line-height: 1.4;
    scroll-behavior: smooth;
}

nav a {
    color: var(--off);
    text-decoration: none;
}
nav a:hover {
    color: var(--2cor);
}
.menu {
    padding: 0;
    margin: 0;
}
.menu-logo {
    flex: 1 1 auto;
    margin: var(--marg);
    font-size: 2.4em;
    font-weight: 600;
}
ul li {
    display: flex;
    align-content: stretch;
}
@media screen and (orientation:portrait) {
    .menu {
        padding: 0;
        margin: 0;
        position: fixed;
        left: -100vw;
        }
    .menu li {
        margin: 0;
        padding: 1em var(--marg);
        transform: translateX(200vw);
        transition: all .1s ease-in;
        opacity: 0;
        width: 100vw;
        box-shadow: 0 0 0.2em 0 rgb(0 0 0 / 50%);
    }
    .menu li:first-child {
        padding-top: calc(3 * var(--marg));
    }
    .nav-bar.ativo .menu li {
        transform: translateX(100vw);
        transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);;
        opacity: 1;
    }
    .nav-bar.ativo .menu > li:first-child, .nav-bar .menu > li:last-child {
        transition-delay: .01s;
    }
    .nav-bar.ativo .menu > li:nth-child(2), .nav-bar .menu > li:nth-child(7) {
        transition-delay: .08s;
    }
    .nav-bar.ativo .menu > li:nth-child(3), .nav-bar .menu > li:nth-child(6) {
        transition-delay: .16s;
    }
    .nav-bar.ativo .menu > li:nth-child(4), .nav-bar .menu > li:nth-child(5) {
        transition-delay: .24s;
    }
    .nav-bar.ativo .menu > li:nth-child(5), .nav-bar .menu > li:nth-child(4) {
        transition-delay: .32s;
    }
    .nav-bar.ativo .menu > li:nth-child(6), .nav-bar .menu > li:nth-child(3) {
        transition-delay: .40s;
    }
    .nav-bar.ativo .menu > li:nth-child(7), .nav-bar .menu > li:nth-child(2) {
        transition-delay: .48s;
    }
    .nav-bar.ativo .menu > li:nth-child(8), .nav-bar .menu > li:nth-child(1) {
        transition-delay: .56s;
    }
    .line {
        height: 4px;
        width: 32px;
        background: var(--2cor);
        margin: 5px auto;
        border-radius: 2px;
        -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .menu-button {
        padding: calc(var(--marg)/2);
        border-radius: 50%;
        box-shadow: 0 0 0.2em 0 rgb(0 0 0 / 70%);
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: calc(var(--marg) / 2);
        position: fixed;
        z-index: 999;

    }
    .menu-button > .hamburger {
        width: 32px;
        height: 32px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .nav-bar.ativo .menu-button > div {
        outline: none;
    }
    .nav-bar.ativo .menu-button > .hamburger > .line:nth-child(1), .nav-bar.ativo .menu-button > .hamburger > .line:nth-child(1) {
        -webkit-transform: rotate(45deg) translate(5px, 6px);
        transform: rotate(45deg) translate(5px, 6px);
    }
    .nav-bar.ativo .menu-button > .hamburger > .line:nth-child(2), .nav-bar.ativo .menu-button > .hamburger > .line:nth-child(2) {
        -webkit-transform: rotate(-45deg) translate(5px, -6px);
        transform: rotate(-45deg) translate(5px, -6px);
    }
}
@media screen and (orientation:landscape) {
    .nav-bar {
        display: flex;
        justify-content: center;
        padding: 0 var(--marg);
        top: 0;
        width: 100vw;
        box-shadow: 0 0 0.2em 0 rgb(0 0 0 / 70%);
        background-color: var(--cor);
        z-index: 9999;
    }
    .menu {
        display: flex;
        overflow-x: auto;
    }
    .menu-button {
        display: none;
    }
    .menu li {
        margin: var(--marg);
    }
}