@charset "UTF-8";
/* CSS Document */

/*====================================================基本設定===============================================*/

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

body {
  font-family: sans-serif;
  background: #fafafa;
  margin: 0;
  padding: 0;
  
}



/* ================================== ナビ ================================== */
nav {
  background: #333;
}
nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 8px 16px;
}
nav li {
  margin-right: 20px;
}
nav a {
  color: #fff;
  text-decoration: none;
}
nav a:hover {
  text-decoration: underline;
}

/* ============= タイトル ================== */
h1 {
  text-align: center;
  margin: 20px 0;
}

/* ===== コンテナ ===== */
.container {
  display: grid;
  padding: 0 20px 40px;
}

/* ===== カード ===== */

.card {
  padding: 1.5em;
  margin: 2em 0;
  border-radius: 12px;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff; /* デフォルトは白 */
  position: relative;
}

/*========= 見出し ================*/
.card h2 {
  margin-top: 0;
  padding: 0.5em 0.8em;
  font-size: 1.3em;
  border-left: 6px solid #666;
  background: rgba(0,0,0,0.04);
  font-weight: bold;
}

/* =========説明リスト============= */
.card dl {
  margin: 1em 0;
}

.card dt {
  font-weight: bold;
  background: rgba(0,0,0,0.06);
  padding: 0.3em 0.6em;
  border-radius: 6px;
  display: inline-block;
  margin-top: 0.6em;
  font-family: "Courier New", monospace; /* コードっぽい雰囲気 */
}

.card dd {
  margin-left: 1em;
  margin-bottom: 0.8em;
  line-height: 1.5;
}

/* ==== 淡色背景 ==== */
.card.yellow {
  background: #fffdf0; /* 淡い黄色 */
}

.card.green {
  background: #f6fff6; /* 淡い緑 */
}

.card.blue {
  background: #f6faff; /* 淡い青 */
}

.card.orange {
  background: #fff8f2; /* 淡いオレンジ */
}

.card.pink {
  background: #fff6fa; /* 淡いピンク */
}



/* ==== HTMLチートシート用 ==== */
.html-cheatsheet .card.yellow { background: #fff9cc; }
.html-cheatsheet .card.blue   { background: #e8f4ff; }
.html-cheatsheet .card.green  { background: #e8ffe8; }
.html-cheatsheet .card.orange { background: #ffeedd; }

.html-cheatsheet .card h2 {
  border-left: 6px solid #666;
  background: rgba(0,0,0,0.04);
  padding: 0.4em 0.6em;
}




/*======= CSSチートシート全体：黒ベース======== */
.css-cheatsheet .card {
  background: #2d2d2d;
  color: #f5f5f5;
  border: 1px solid #444;
}

/* ===========見出し（h2）================ */
.css-cheatsheet .card h2 {
  border-bottom: 2px solid #666;
  background: #1e1e1e;
  color: #66ccff; /* デフォルトは青系 */
  padding: 0.4em 0.6em;
  margin: 0 0 0.8em;
}

/* ===== 見出しの色分け ===== */
.css-cheatsheet .card.orange h2 { color: #ff9966; border-color: #ff9966; }
.css-cheatsheet .card.yellow h2 { color: #ffcc66; border-color: #ffcc66; }
.css-cheatsheet .card.green h2  { color: #99cc66; border-color: #99cc66; }
.css-cheatsheet .card.pink h2   { color: #ff99cc; border-color: #ff99cc; }
.css-cheatsheet .card.blue h2   { color: #66ccff; border-color: #66ccff; }

/* ===== dt（プロパティ名）も色付け ===== */
.css-cheatsheet .card dt {
  font-weight: bold;
  background: #1e1e1e;
  padding: 0.3em 0.6em;
  border-radius: 5px;
  display: inline-block;
  margin-top: 0.6em;
  font-family: "Courier New", monospace;
}

/* カテゴリごとに文字色を変える */
.css-cheatsheet .card.orange dt { color: #ff9966; }
.css-cheatsheet .card.yellow dt { color: #ffcc66; }
.css-cheatsheet .card.green dt  { color: #99cc66; }
.css-cheatsheet .card.pink dt   { color: #ff99cc; }
.css-cheatsheet .card.blue dt   { color: #66ccff; }