* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.likelion-header {
  display: flex;
  justify-content: center;
  background-color: rgb(5, 5, 5);
  border-bottom: #d5a151 1px solid;
  font-family: "Lora", serif;
}

.header-link {
  display: flex;
  align-items: center;
  /*수직*/
  justify-content: center;
  /*수평*/
  text-decoration: none;
  /*링크 파란옵션 삭제*/
}

.logoimg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
  padding-right: 15px;
  height: 120px;
  object-fit: contain;
}
.go{
transform: translateY(-13px);
transition: transform 0.3s ease-out;
}
#mainLogo {
  text-decoration: none;
  color: #d5a151;
  text-shadow:-1px -1px 0 #ffeebb,3px 3px 0 rgb(149, 1, 2);/*사이에 흰색 한줄 추가*/
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-size: 50px;
}


#header-music {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 10px;
}

button {
  /*버튼 기본설정 삭제*/
  border: 0;
  outline: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}


button:hover {
  transform: scale(1.5);
}

#btnPlay svg:hover {
  fill:rgb(213, 161, 81); 
}

#btnPause svg:hover {
  fill: rgb(213, 161, 81);
}

#btnStop svg:hover {
  fill: rgb(213, 161, 81);
}

body {
  width: 100vw;
  height: 100vh;
}

/*#likelion-header {
  /*
    '>' : 직접적인 자식 요소일 때만 스타일을 적용하고 싶을 때 사용
    만약 모든 하위 요소 중에서 #header_logo를 선택하고 싶다면 >를 생략
  */
/*display: flex;
  flex-direction: column;
  border: 1px solid rgb(0, 0, 0);
  padding: 50px;

  #header_logo {
    img {
      width: 100px;
    }
  }
}*/

#likelion-banner {
  border: 1px solid blue;
  width: 100%;
  height: 20vh;
  padding: 50px;
}

#likelion-grid {
  border: 1px solid red;
  padding: 50px;
  display: flex;
  flex-direction: row;

  .member {
    border: 1px solid brown;
    border-radius: 8px;
    width: 300px;
    height: 100px;
  }

  .template {
    display: none;
  }
}


#footer {
  padding: 10px 0;
  background-color: #000000;

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  border-top: #d5a151 1px solid;
}


/* 소개 문구 */
.footer-center {
  grid-column: 2;

  text-align: center;

  color: #d5a151;
  font-size: 14px;
  font-family: "Lora", serif;
  
  a{
    text-decoration: none;
    color: #d5a151;
     transition: transform 0.2s ease;/*마우스 가져다 대면 부드럽게 hover*/
  }
}

/* SNS 아이콘 */
.footer-right {
  grid-column: 3;
  gap: 30px;

  display: flex;
  align-items: center;
  justify-content: right;
}

.footer-right img {
  width: 50px;
  height: 50px;
}

/* hover 효과 */
.footer-right img:hover {
  transform: scale(1.1);
}