/* style.css */

/* 90年代の怪しいインターネット感を出すための基本スタイル */
body {
	/* 背景に宇宙の画像を敷き詰める */
	/* 黒の半透明レイヤーを重ねて背景画像を少し薄くする */
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/background.webp');
	background-repeat: no-repeat, repeat-x; /* グラデーションはリピートせず、画像は左右にリピート */
	background-size: cover, auto 100%; /* グラデーションは全体を覆い、画像は高さを100%に */
	background-position: center center, center center; /* 両方の背景を中央に配置 */
	background-attachment: fixed; /* 背景を固定 */
	/* フォントは当時のWindowsでよく使われたものを指定 */
	font-family: "MS Pゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
	/* 文字色は目に優しくないライムグリーン */
	color: lime;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* リンクは昔ながらの青色に下線 */
a {
	color: #0000FF;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	/* ヘッダーの背景はどぎつい単色 */
	background-color: #c0c0c0;
	border-bottom: 2px solid #808080;
}

header .site-title {
	font-size: 28px;
	font-weight: bold;
	color: yellow;
	text-shadow: 2px 2px 0 red;
}

header nav {
	display: flex;
	gap: 15px;
}

header nav a {
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
}

main {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	text-align: center;
}

main h1 {
	/* とにかく文字を大きく */
	font-size: 6vw;
	/* チープな影をつける */
	text-shadow: 4px 4px 0 #FF0000;
	/* 文字を点滅させるアニメーション */
	animation: blink 1s step-end infinite;
}

@keyframes blink {
	50% { color: yellow; }
}

/* 楽曲一覧ページ用のスタイル */
main.track-main {
	flex-direction: column;
	justify-content: flex-start;
	padding: 40px 20px;
}

.track-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	width: 100%;
	max-width: 1000px;
	box-sizing: border-box;
}

.track-item {
	background-color: #000080; /* Windowsのブルースクリーンっぽい濃い青 */
	padding: 15px;
	border: 5px outset #c0c0c0; /* 昔のウィンドウ風の立体枠 */
}

.track-item h2 {
	font-size: 22px;
	margin: 0 0 10px 0;
	color: yellow;
}

.track-item iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

/* はなげチャーハンとはページ用のスタイル */
main.about-main {
	overflow: hidden; /* カオスな動きが画面外に出ないようにする */
	width: 100%;
}

.crazy-text {
	font-size: 8vw;
	font-weight: 900;
	color: #ff00ff;
	text-shadow: 5px 5px 0 #00ffff, -5px -5px 0 #ffff00, 10px -10px 0 #00ff00;
	white-space: nowrap;
	animation: crazy-spin 0.3s infinite linear, blink 0.5s step-end infinite;
	display: inline-block;
}

@keyframes crazy-spin {
	0% { transform: rotate(0deg) scale(1) skewX(0deg); filter: hue-rotate(0deg); }
	50% { transform: rotate(15deg) scale(1.5) skewX(20deg); }
	100% { transform: rotate(-15deg) scale(1) skewX(-20deg); filter: hue-rotate(360deg); }
}

footer {
	text-align: center;
	padding: 20px;
	background-color: #c0c0c0;
	border-top: 2px solid #808080;
}

footer .social-links {
	margin-bottom: 15px;
}

footer .social-links a {
	display: inline-block;
	background-color: #0000FF; /* ドギツイ青 */
	color: yellow; /* 眩しい黄色 */
	border: 5px outset #8080FF; /* 昔のWindows風の立体枠 */
	padding: 5px 20px;
	margin: 0 10px;
	font-weight: 900;
	text-decoration: none;
	font-size: 24px;
	text-shadow: 2px 2px 0 #000; /* 黒い影で視認性を無理やり上げる */
}

footer .social-links a:hover {
	border-style: inset; /* 押した感じにする */
	background-color: fuchsia; /* マゼンタ */
	color: lime; /* ライムグリーン */
}

/* レスポンシブ対応: 画面幅が600px以下の場合に適用 */
@media (max-width: 600px) {
	header {
		flex-direction: column; /* ヘッダー要素を縦に並べる */
		gap: 10px; /* 各要素の間隔をあける */
	}

	header .site-title {
		font-size: 24px; /* スマホでは少し文字を小さく */
	}

	main h1 {
		font-size: 12vw; /* スマホではさらに文字を大きくしてインパクトを出す */
	}

	footer .social-links a {
		display: block; /* ボタンを縦積みにする */
		margin: 10px auto; /* 上下の間隔をあけて中央寄せ */
	}
}