html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}
nav{
    width: 100%;
    height: 100px;
    background-color: #3e4144;
    color: white;
}
.flex_box{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
}
.flex_box a{
    text-decoration: none;
    color: white;
}
.flex_box a:hover{
    text-decoration: none;
    color: white;
}
.nav_item{
    margin-left: 10px;
    margin-right: 10px;
    background-color: red;
    height: 100px;
    width: 100px;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    color: white;
}
.content{
    width: 80%;
    margin: auto;
    margin-top: 80px;
    margin-bottom: 80px;
}
footer{
    position: fixed;
    width: 100%;
    height: 70;
    background-color: red;
    text-align: center;
    line-height: 70px;
    vertical-align: middle;
    bottom: 0;
}

<style>
/* -------- FILTER HARMONIKA -------- */
.filter-wrap{margin:14px 0 18px}
.filter-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:space-between;
  padding:10px 14px;
  border-radius:12px;
  background:#141414;
  border:1px solid rgba(255,255,255,.12);
  color:#f5f5f5;
  font-weight:800;
  cursor:pointer;
}
.filter-badge{
  font-weight:600;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#2b2b2b;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:55%;
}
.filter-arrow{opacity:.85}

.filter-panel{
  position:relative;
  max-height:0;
  overflow:hidden;
  transition:max-height .55s ease;
  border-radius:12px;
  margin-top:10px;
  background:#141414;
  border:1px solid rgba(255,255,255,.10);
  transform-origin: top; /* ✅ ukotvené hore */
}

/* záhyby (harmonika look) */
.filter-panel::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.12) 0px,
    rgba(255,255,255,.12) 2px,
    rgba(0,0,0,0) 18px,
    rgba(0,0,0,0) 34px
  );
  opacity:0;
  transition:opacity .25s ease;
  mix-blend-mode:overlay;
}

/* "fold" animácia v krokoch */
.filter-panel.open{
  max-height:900px; /* dosť veľké, aby sa tam vošlo všetko */
}
.filter-panel.open::before{
  opacity:1;
  animation: foldSteps .55s steps(6, end);
}

@keyframes foldSteps{
  from { background-position: 0 0; }
  to   { background-position: 0 36px; }
}

.filter-inner{padding:14px 14px 16px}

.filter-form{display:grid; gap:10px; margin-bottom:12px}
.filter-row{display:grid; gap:6px}
.filter-label{font-size:12px; color:#bbb}
.filter-input{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#1b1b1b;
  color:#fff;
}
.filter-actions{display:flex; gap:10px; margin-top:6px}
.filter-btn{
  padding:10px 12px;
  border-radius:10px;
  border:0;
  background:#ff5555;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.filter-btn.secondary{background:#2b2b2b}

.genre-pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  text-decoration:none;
  color:#fff;
  background:#1b1b1b;
  font-size:13px;
}
.pill.active{
  background:#ff5555;
  border-color:#ff5555;
  font-weight:800;
}
</style>