/* 2000年代風スタイルシート */

body {
  background-image: url(/img/hayabusa.png);
  background-repeat: repeat;
  background-size: 355.5px 115.5px;
  background-color: #99ff99; /* 背景はより緑色に */
  font-family: "メイリオ", "Times New Roman", sans-serif; /* フォントはMS Pゴシック */
  line-height: 1.5;
  color: #000000;
}

a:link {
  color: #0000ff; /* リンクは青 */
  text-decoration: underline;
}

a:visited {
  color: #800080; /* 訪問済みリンクは紫 */
  text-decoration: underline;
}

a:hover {
  color: #ff0000; /* マウスオーバーで赤 */
  text-decoration: none;
}

h1, h2, h3 {
  background-color: transparent; /* 背景色を透明に */
  color: #000000; /* 文字色を黒に */
  padding: 8px; /* 内側の余白 */
  border-bottom: 2px solid #0000CD; /* 下線を濃い青に */
  border-left: 8px solid #0000CD; /* 左線を濃い青に */
}

.site-title {
  color: #006400;
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 45px;
  font-weight: bold;
  font-style: italic;
  text-shadow: 2px 2px 3px #aaaaaa, -1px -1px 1px #ffffff;
}

/* 虹色背景グラデーション */
.rainbow-font {
  background-image: linear-gradient(to right, 
    #ff0000, /* 赤 */
    #ff7f00, /* 橙 */
    #ffff00, /* 黄 */
    #00ff00, /* 緑 */
    #0000ff, /* 青 */
    #4b0082, /* 藍 */
    #9400d3  /* 紫 */
  );
  font-weight: bold; /* 文字を太くして見やすくする */
  padding: 10px 20px; /* 上下に10px、左右に20pxの余白を追加 */
  display: inline-block; /* paddingを有効にするため */
}

/* メニューのボタンスタイル */
.menu ul {
  list-style-type: disc; /* 箇条書きの丸を表示 */
  padding-left: 20px; /* 左側に余白を追加 */
}

.menu li::marker {
  color: #0000ff; /* 箇条書きの丸を青色に */
}

.menu li {
  margin-bottom: 10px; /* 各メニュー項目の間隔 */
}

.menu a {
  text-decoration: none;
}

.menu a:link, .menu a:visited {
  color: #0000ff;
}

.menu a:hover {
  color: #ff0000;
  text-decoration: underline;
}

/* プロフィールページ用の中央揃えスタイル */
.profile-body {
  text-align: center;
}

.profile-body table {
  margin: 0 auto;
  text-align: left;
}

.about-page {
  background-image: url(/img/about.png);
  background-repeat: repeat;
  background-size: 265.5px 103.5px;
}

/* アバター画像のホバーアニメーション */
img[src="/img/avatar.png"]:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* ようこそメッセージのホバーアニメーション */
#welcome-text:hover {
  transform: rotate(360deg);
  transition: transform 2s;
}

body.article-page {
    background-image: none;
    background-color: #ffffff;
}

body#links-page {
  background-image: url(/img/links.png);
  background-repeat: repeat;
  background-size: 300px;
}

body#blog-page {
  background-image: url(/img/blog.png);
  background-repeat: repeat;
  background-size: 250px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

img[src*="parrot.gif"]:hover {
  animation: spin 0.25s linear infinite;
}