*{box-sizing:border-box;margin:0;padding:0}body{letter-spacing:inherit;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:14px;line-height:25px;font-weight:400;font-style:normal;padding:20px;max-width:1200px;margin:0 auto}nav{margin-bottom:30px;text-align:center}nav ul{list-style:none;display:flex;justify-content:center;gap:15px;flex-wrap:wrap}nav button{cursor:pointer;padding:8px 20px;border-radius:25px;background-color:#f0f0f0;color:#666;transition:all .3s ease;display:block;border:none;font-size:1rem;font-family:inherit}nav button:hover{background-color:#e0e0e0;color:#333}nav button.active{background-color:#97bf13;color:#fff}.work{display:flex;flex-wrap:wrap;gap:25px;position:relative;width:100%}figure{width:calc(50% - 12.5px);margin:0;box-shadow:0 2px 8px #0000001a;border-radius:5px;overflow:hidden;transition:all .5s ease;height:auto}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}figure.filtered-in{display:block;animation:fadeIn .5s forwards}figure.filtered-out{animation:fadeOut .5s forwards;display:none}figcaption{padding:15px;background-color:#f5f5f5;height:100%;min-height:150px;display:flex;flex-direction:column}.date{color:#666;font-size:.9rem;margin-bottom:5px}h3{text-transform:none!important;font-size:20px;font-weight:500;line-height:26px;font-family:Verdana,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;font-style:normal;color:#000;margin-bottom:8px}figcaption p{line-height:1.4;color:#333;flex-grow:1}@media (max-width: 720px){figure{width:100%}}