/* public/styles.css */

.btn {
  display: inline-block;
  margin: 10px;
  padding: 12px 24px;
  background-color: rgba(0, 0, 0, 0.75); /* 背景：透明感ある白 */
  color: white; /* 文字色 */
  border: 2px solid rgba(255, 255, 255, 0.2); /* 薄い白の枠線 */
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  backdrop-filter: blur(4px); /* ガラス感を少し追加（オプション） */
}

.btn:hover {
  background-color: rgba(255, 255, 255, 0.25); /* ホバー時は明るめに */
  transform: scale(1.05); /* 少し拡大 */
}

.btn-youtube {
    display: inline-block;
    margin: 10px;
    padding: 12px 24px;
    background: linear-gradient(to right, #ff0000, #660000);
    color: white;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease, transform 0.2s ease;
  }
  
  .btn-youtube:hover {
    background: linear-gradient(to right, #cc0000, #330000);
    transform: scale(1.05);
  }