@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Noto Sans JP', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'Yu Gothic', YuGothic, Arial, Helvetica, sans-serif; 
  font-size: 16px;
  background-color: #fefefe;
}

/* for Markdown */
.gist {
  margin: 1em 0;
}

.gist-file {
  padding: 1em 0;
}

li a {
  color: #4183c4;
}

.bg-site-green {
  background-color: #3c803c;
}

.color-site-green {
  color: #3c803c;
}

.color-link {
 color: #4183c4 
}

.site-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  box-shadow: 2px 2px 4px #e5e5e5;
}

.diary p {
  margin-top: 10px;
  line-height: 1.7em;
  max-width: 1024px;
}

.diary a {
  color: #4183c4
}

.color-link {
  color: #4183c4
}

.max-h-3xl {
  max-height: 768px;
}

.max-h-xs {
  max-height: 180px;
}

.max-h-sm {
  max-height: 320px;
}

.max-h-xl {
  max-height: 576px;
}

.example-photo {
  max-height: 220px;
}

.section-title-box-shadow {
  box-shadow: 2px 2px 4px #e5e5e5;
}

/* index */
.index p {
  margin-top: 10px;
  line-height: 1.7em;
}

.index h5 {
  margin-top: 24px;
  padding-left: 6px;
  font-weight: bold;
  border-left: 6px solid #666;
}

.index .section-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 20px; /* 例外的な下マージン */
  position: relative;
  padding: 15px 20px 0px 25px;
  color: #4c4c4c;
}

.index .section-title::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  border-left: 18px solid #b2e5b2;
  /* border-left: 18px solid #e5e5e5; */
}

.index .section-title::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  border-left: solid 3px #090;
  /* border-left: solid 2px #999; */
}

.index h4 {
  position: relative;
  margin: 30px 0 0 0;
  color: #333;
  font-size: 20px;
  font-weight: bold;
}

/* article */
.article p {
  margin-top: 10px;
  line-height: 1.7em;
  max-width: 1024px;
}

.article h5 {
  font-weight: bold;
}

.article .subtitle {
  margin-top: 10px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #4c4c4c;
  font-size: 16px;
  border: none;
  padding: 0;
  background-color: #fff;
  box-shadow: none;
}

.article .subtitle:before {
  content: "";
  margin-right: 0;
}

.article .section-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 20px; /* 例外的な下マージン */
  position: relative;
  padding: 15px 20px 0px 25px;
  color: #4c4c4c;
}

.article .section-title::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  border-left: 18px solid #b2e5b2;
  /* border-left: 18px solid #e5e5e5; */
}

.article .section-title::after{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  border-left: solid 3px #090;
  /* border-left: solid 2px #999; */
}

.article h4 {
  position: relative;
  margin: 30px 0 0 0;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  padding: 0;
}

.article h5 {
  margin: 25px 0 0 0;
  padding: 0px 6px;
  color: #333;
  border-left: 6px solid #999;
  font-size: 16px;
}


th {
  padding: 4px 16px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-align: left;
}

td {
  padding: 4px 16px;
  border: 1px solid #ccc;
  text-align: right;
}

/* TODO: リスト */

/* type scale
30px h2
24px h3
20px h4
16px h5 h3.subtitle 通常のテキスト
14px 注釈などある程度読ませたい補助的なテキスト
12px タグやスペックの値など読みたい人だけ読めばいいくらいの補助的なテキスト
10px ラベルなどあまり目立たなくていいテキスト 装飾的な
*/
/* colors
<style>
ul.color-pallete {
    overflow: hidden;
    padding-inline-start: 0;
}

ul.color-pallete li {
    margin: 3px 3px 0 0;
    text-align: center;
    list-style: none;
    height: 20px;
    width: 20px;
    float: left;
    color: #f9f9f9;
    border-radius: 2px;
    font-size: 10px;
}
</style>

<ul class="color-pallete gray">
  <li style="background-color: #191919;"></li>
  <li style="background-color: #333;"></li>
  <li style="background-color: #4C4C4C;"></li>
  <li style="background-color: #666;"></li>
  <li style="background-color: #7F7F7F;">M</li>
  <li style="background-color: #999;"></li>
  <li style="background-color: #B2B2B2;"></li>
  <li style="background-color: #CCC;"></li>
  <li style="background-color: #E5E5E5;"></li>
  <li style="background-color: #f2f2f2;"></li>
</ul>

TODO: グリーンはもうちょっとくすんだ色相にしたい
<ul class="color-pallete green">
  <li style="background-color: #0C260C;"></li>
  <li style="background-color: #194C19;"></li>
  <li style="background-color: #267226;"></li> => 3c803c
  <li style="background-color: #339933;"></li>
  <li style="background-color: #3FBF3F;">M</li>
  <li style="background-color: #65CC65;"></li>
  <li style="background-color: #8CD88C;"></li>
  <li style="background-color: #B2E5B2;"></li>
  <li style="background-color: #EBF8EB;"></li>
</ul>

<ul class="color-pallete red">
  <li style="background-color: #600;"></li>
  <li style="background-color: #900;"></li>
  <li style="background-color: #b20000;"></li>
  <li style="background-color: #c00;"></li>
  <li style="background-color: #f00;">M</li>
  <li style="background-color: #FF3232;"></li>
  <li style="background-color: #FF6565;"></li>
  <li style="background-color: #f99;;"></li>
  <li style="background-color: #FFE5E5;"></li>
</ul>

<ul class="color-pallete blue">
  <li style="background-color: #0C0C26;"></li>
  <li style="background-color: #19194C;"></li>
  <li style="background-color: #262672;"></li>
  <li style="background-color: #333399;"></li>
  <li style="background-color: #3F3FBF;">M</li>
  <li style="background-color: #6565CC;"></li>
  <li style="background-color: #8C8CD8;"></li>
  <li style="background-color: #B2B2E5;"></li>
  <li style="background-color: #D8D8F2;"></li>
</ul>
*/