.side-menu {
    display: none;
}
.hamb{
    display: none;
}
@media (max-width: 690px){
nav{
    max-height: 0px;
    transition: max-height .3s ease-out;
}

.side-menu:checked ~ nav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}
.hamb{
    cursor: pointer;
    padding: 40px 20px;
    display: block;
}
.hamb-line {
    background: var(--dg);
    display: block;
    height: 2px;
    position: relative;
    width: 2em;
}
.hamb-line::before,
.hamb-line::after{
    background: var(--dg);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 10px;
}
.hamb-line::after{
    top: -10px;
}
/* Define the slide animation */
@keyframes slideIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Apply the animation to the menu items */
.side-menu:checked~nav .menu a {
  animation: slideIn 0.5s forwards;
}
}

/* body:has(.side-menu:checked) {
  overflow: hidden;
}*/