@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

/* 화면 한가운데에 로고 배치 */
.macbook-pro {
  background-color: #000000;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 로고 글자만 흰색으로 남기고 배경 박스는 지워버리는 핵심 코드 */
.macbook-pro .vector {
  width: 300px; /* 로고 크기 */
  height: auto;
  /* 핵심 1: 'screen' 모드로 흰 박스를 투명하게 만들고 글자만 남깁니다. */
  transform: translateY(-30px); /* 이 줄을 추가 (숫자가 커질수록 위로 올라감) */
  mix-blend-mode: screen; 
  /* 핵심 2: 'invert(1)'로 검은 글자를 흰색으로 반전시킵니다. (screen 모드와 결합되어 완벽해짐) */
  filter: invert(1) !important; 
  animation: blink 2.5s infinite ease-in-out;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.1; }
  100% { opacity: 1; }
}