.top-nav { display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 700; color: #020203; height: 50px; padding: 1em; }
.menu { display: flex; flex-direction: row; list-style-type: none; margin: 0; padding: 0; }
.menu > li { margin: 0 1rem;overflow: hidden;}
.menu > li a { color: #ffffff;cursor:pointer;text-decoration:none; }
.menu > li a:hover { color: #ddc9c9; }
.menu-button-container { display: none;height: 100%;width: 30px;cursor: pointer;flex-direction: column;justify-content: center;align-items: center; }
#menu-toggle {display: none;}
.menu-button,
.menu-button::before,
.menu-button::after { display: block;background-color: #FFD400;position: absolute;height: 4px;width: 30px;transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);border-radius: 2px; }
.menu-button::before { content: "";margin-top: -8px; }
.menu-button::after { content: ""; margin-top: 8px; }
#menu-toggle:checked + .menu-button-container .menu-button::before { margin-top: 0px; transform: rotate(405deg); }
#menu-toggle:checked + .menu-button-container .menu-button { background: rgba(255, 255, 255, 0); }
#menu-toggle:checked + .menu-button-container .menu-button::after { margin-top: 0px; transform: rotate(-405deg); }
.menu-button-container { display: flex; }
.menu { position: absolute;top: 0;margin-top: 50px;left: 0;flex-direction: column;width: 100%;justify-content: center;align-items: center;z-index:888;background: linear-gradient(to bottom, #000, #999);opacity: 0.95; }
#menu-toggle ~ .menu li { height: 0;margin: 0;padding: 0 1.5em;border: 0;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); }
#menu-toggle ~ .menu li a { display: inline-block; color: #FFFFFF; font-size: 19px; min-height: 3.5em; font-weight: 100; }
#menu-toggle:checked ~ .menu li { padding: 1em 1.5em; height: 3.5em;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); }
.menu > li { text-align: right; justify-content: center;margin: 0;padding: 0;width: 100%;color: white;background-color: #222; }
.menu > li:not(:last-child) { }