html - 창 축소시 겹치는 버튼

브라우저의 창 크기를 조정할 때 버튼이 겹치는 문제가 있습니다. 이 동일한 문제에 대한 다른 게시물을 많이 보았지만 제공된 솔루션이 작동하지 않는 것 같습니다.

나는 절대 위치 결정을 시도했지만 다른 솔루션을 시도했지만 실제로 작동하는 것 같지는 않습니다. 가능한 해결책 중 하나는 창에 따라 단추 크기가 조정되지만 이것이 어떻게 수행되는지 잘 모르겠습니다. 라이브 버전 https://dragonknightleo.github.io/freelance.github .io/

HTML
<div class="btn">
        <button id="button-1" type="button"><h5>Andrew Carney</h5></button>
        <a href="portfolio.html"><button id="button-2" type="button"><h5 id="portfolio-home">Portfolio</h5></button></a>
        <a href="about.html"><button id="button-3" type="button"><h5 id="aboutme-home">About Me</h5></button></a>
        <a href="contact.html"><button id="button-4" type="button"><h5 id="contact-home">Contact</h5></button></a>
      </div>

CSS
#button-1 {
  position: absolute;
  top: 7.5%;
  left: 10%;
  font-family: 'Cinzel', serif;
  z-index: 2;
  background: none;
  color: #ccc;
  width: 110px;
  height: 110px;
  border: 3px solid white;
  font-style: 18px;
  transform: rotate(45deg);
  overflow-x: hidden;
  overflow-y: hidden;
}