/* -- var -- */
:root{
    --pane-width: 300px;
    --main-width: 1000px;
    --min-width: 600px;
    --header-height: 120px;
}

/* @media (min-width: 1080px) {
    :root {
        --header-height: 80px;
    }
} */


/* font download ----------------*/
@font-face{
    font-family: "ricty";
    src: url("https://note.cheerppy.xyz//font/RictyDiminishedDiscord-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: "ricty";
    src: url("https://note.cheerppy.xyz//font/RictyDiminishedDiscord-Oblique.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face{
    font-family: "explex";
    src: url("https://note.cheerppy.xyz/font/Explex35Console-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: "explex";
    src: url("https://note.cheerppy.xyz/font/Explex35Console-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

html{
    font-family: 'Segoe UI', 'メイリオ', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', 'Noto Sans Japanese', 'Ariel', 'ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
    font-weight: 400;
    scroll-padding-top: var(--header-height);
    /* scroll-padding-top: 200px; */
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

/* general box-size -------------*/
html{
    display: flex;
    justify-content: center;
}
.container{
    width: 100%;
    margin-inline: 1em;
}
.flexContainer{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: fit-content;
}
body{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #ffddf4;
    width: 100%;
}
header#header{
    position: sticky;
    display: flex;
    justify-content: center;
    color: #000000;
    background: linear-gradient(-20deg, pink,white, pink); 
    /* padding-inline: 5%; */
    border-bottom: 3px solid #ffddf480;
    width: 100%;
    align-items: center;
    height: var(--header-height);
    min-width: var(--min-width);
}
header h1 {
    display: flex;
    justify-content: space-between;
    /* padding: 1rem 10%; */
}
#subtitle{
    display: inline-block;
    text-indent:1.5em;
}
footer#footer{
    margin: auto;
    padding: 2em 1em;
    width: 100%;
}
div#wrapper{
    width: 100%;
    margin-top: calc( 0 - var(--header-height));
}
body>*>*,
main#main{
    flex-grow: 1;
    max-width: var(--main-width);
    min-width: var(--min-width);
    padding: 0 30px;
}
div#leftPane,div#rightMargin{
    width: var(--pane-width);
    padding: 0px;
    margin: 0px;
}
div#rightMargin{
    order: 1;
}
a.button{
    cursor: pointer;
    color: inherit;
    text-decoration: inherit;
}
svg {fill: currentColor;}


:has(#hamburger:checked) svg.hamburger{
    fill: white;
    stroke: #f6adc6;
}
svg.hamburger {
    font-size: 48px;
    width: 48px;
    height: 48px;
    fill: #f6adc6;
    stroke: white;
}


/* nav --------------------------*/
:has(#hamburger:checked) nav#header-navigation {
        left: 0;
    }
@media screen and (min-width:1000px) {
    :has(#hamburger:checked) nav#header-navigation {
        left: calc(50% - var(--main-width) / 2);
    }
}
nav#header-navigation{
    margin: 0;
    width: 100%;
    position: fixed;
    top: var(--header-height);
    z-index: 5;
    transition: all 0.15s;
    left: 100%;
    display: flex;
    justify-content: center;
}

nav#header-navigation ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: 0;
}
nav#header-navigation a{
    flex:1 1 110px;
    display: table;
    margin: 1px;
    border: thick ridge pink;
    background-color: pink;
}
nav#header-navigation li{
    display: table-cell;
    vertical-align: middle;
    list-style-type: none;
    min-width: 100px;
    height: 3em;
    text-align: center;
}

nav#header-navigation a{
    cursor: pointer;
    color: inherit;
    text-decoration: inherit;
}


/* font size --------------------*/
html{font-size: 18px;}
p{font-size: 1em;}
h1{font-size: 2em;}
h2{font-size: 2em;}
h3{font-size: 1.5em;}
small{font-size: 0.8em;}
.small{font-size: 0.8em;}

/* width ------------------------*/
.textbox{width: auto;}

/* margin and paddings ----------*/
p{margin: 3px;line-height: 1.4em;}
h2{margin:30px 0;}
h2{border-bottom: 3px solid #f6adc6;}
h3{margin: 30px 0;}
h3{border-bottom: 1px solid #000000;}
.indented{display: block;text-indent:2em;}
span.tab{display: inline-block; padding-left: 2em;}
.noindent{display: auto;text-indent:0em;}
.leftPadding{padding-left: 2em;}
i{margin-right: 0.15em;} /* italic */

/* URI --------------------------*/
a{
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}
a[href^="http"]::after{
    content: "";
    display: inline-block;
    width:1em;
    height: 1em;
    background-image: url("https://note.cheerppy.xyz/src/img/ext.svg");
    background-repeat: no-repeat;
    background-position: 0.1em 0.25em;
    background-size: 0.8em;
}
a[href^="https://note.cheerppy.xyz/"]::after{
    background-image: none;
}
/* table ------------------------*/
table{
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.9em;
}
td,th{
    border: solid 1px #000000;
    border-style: none, solid, none;
    border-collapse: collapse;
    padding: 0.3em 3px 3px;
    white-space: nowrap;
}
    /* --- change color in every row ---*/
    tr{background-color: pink;}
    tr:nth-of-type(2n){background-color: #ffffff}


/* code block --------------------*/
    /* code: inlinecode */
    /* pre : codeblock  */
pre,code{
    /*background-color: rgb(196, 183, 142); or antique-white*/
    font-family: "explex", "ricty", monospace;
    font-size: 1em;
}
pre .terminal::before,code .terminal::before{
    content: "$ ";
}
pre .su::before,code .su::before{
    content: "# ";
}
pre{
    background-color: antiquewhite;
    padding: 10px 24px;     /*上下, 左右*/
    margin: 10px;
    border:solid 2px #616161;
    border-radius: 5px;
    white-space: nowrap;
    overflow: auto;
    tab-size: 4;
    -moz-tab-size: 4;
}

code{
    background-color: #faebd7b3;
    white-space: pre-line;
    margin: 3px;
    padding: 3px;
    font-size: 1em;
    border-radius: 6px;
    tab-size: 4; /* white-space: pre; じゃないと効かないかも -> https://developer.mozilla.org/ja/docs/Web/CSS/tab-size#comparing_to_the_default_size */
    -moz-tab-size: 4; /* white-space: pre; じゃないと効かないかも -> https://developer.mozilla.org/ja/docs/Web/CSS/tab-size#comparing_to_the_default_size */
}
.noCodeColor pre{
    background-color: transparent;
}
.noCodeColor code{
    padding: 0px;
    background-color: transparent;
}
.noCodeColor{
    background-color: transparent;
}

pre span.comment{
    color: #6ca01e;
}

/* use <i></i> tag for italic span. */

/* list -----------------------------*/
ul,ol{
    list-style-position: inside;
    line-height: 1.4em;
}
ol{
    list-style-type:decimal; /* -- 10進数 -- */
}
ul.dot{
    list-style-type: disc;
}
/*-- display --*/
.inlineBlockContainer > *{
    display: inline-block;
}

/*-- deleted line (取り消し線) --*/
.deleted {
    color: red;
    text-decoration: line-through double;
}

/*-- header --*/
header{
    position: sticky;
    top:0;
}

/*----*/
/*----*/
/*----*/