:root {
    --header-h: 70px;
}

header {
    background: #FFD34E;
    position: fixed;
    height: var(--header-h);
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #000;
    z-index: 999;
}

.nav {
    height: 100%;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.nav-logo > img {
    height: 40px;
}

.nav-menu {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

.menu-links > li {
    margin: 0 20px 0 0;
}

.menu-links > li:last-of-type {
    margin-right: 0;
}

.menu-links > li > a {
    padding: 10px;
    background: linear-gradient(#000 0 0) bottom/0% 1px no-repeat;
    transition: 0.5s all;
}

.menu-links > li > a:hover,
.menu-links > li > a.active-link {
    background-size: 100% 1px;
}

.boton-contact, .boton-contact > li {
    height: 100%;
    display: flex;
    justify-content: center; 
    align-items: center;
}

.boton-contact > li > a {
    padding: 10px;
    background: #292929;
    border-radius: 5px;
    color: #fff;
}

.boton-contact > li > a:hover {
    background: #191919;
    border-bottom: none;
}

.nav-menu input {
    display: none;
}

.menu-icons {
    background: #292929;
    padding: 8px;
    height: 100%; width: 44px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    display: none;
}

.menu-icons > img {
    height: 100%; width: 100%;
    filter: invert(100%)
}

.menu-icons > img:nth-of-type(2) {
    display: none;
}

.nav-menu input:checked ~ .menu-icons {
    background: #191919;
}

.nav-menu input:checked ~ .menu-icons > img:nth-of-type(1) {
    display: none;
}

.nav-menu input:checked ~ .menu-icons > img:nth-of-type(2) {
    display: flex;
    width: 90%;
}