@import url('https://fonts.googleapis.com/css2?family=Klee+One&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
    --clp-base: rgb(240,233,217);
    --clp-r-5 : rgb(144,169,190);
    --clp-r-4 : rgb(91,181,119);
    --clp-r-1 : rgb(233,93,94);
    --clp-r-3 : rgb(251,158,78);
    --clp-r-2 : rgb(232,142,142);
    --clp-main-ppl: rgb(171,59,143);
    --rainbow : linear-gradient(135deg,
        var(--clp-r-1),var(--clp-r-2),var(--clp-r-3),
        var(--clp-r-4),var(--clp-r-5)
    );
}

html {
    font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    text-align: center;
}
.left {
    text-align: left;
}

body {
    background-color: var(--clp-base);
    padding: 0 20px;
}

img {
    max-width: 90vw;
    max-height: 90vh;
}

pre {
    font-size: larger;
}
pre a {
    text-decoration: none;
}

div.frame {
    display: inline-block;
    margin: auto;
    max-width: fit-content;
}

a, a:visited {
    color: inherit;
}

.rainbow {
    font-weight: bold;
    background: var(--rainbow);
}
.noDot {
    list-style: none;
    padding-left: 0;
}

/* ページ間共通 */
.bdrRbwFt {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-image: var(--rainbow) 1;
}

/* ヘッダ */
header.ftrHeader {

}
header.ftrHeader p.ftrTitle {
    font-size: xx-large;
    margin-bottom: 0;
    font-weight: bold;
    color: var(--clp-main-ppl);
}
header.ftrHeader p.ftrGoal::before,
header.ftrHeader p.ftrGoal::after {
    content: '～'
}
header.ftrHeader p.ftrGoal {
    color: var(--clp-main-ppl);
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 2em;
}
header.ftrHeader ul {
    list-style: none;
}
header.ftrHeader ul li {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 20px;
    margin-right: 20px;
}
header.ftrHeader ul li.current {
    background: var(--rainbow);
}

/* メイン */
main {
    margin: auto;
    max-width: 800px;
}
main h1 {
    font-size: x-large;
    font-weight: normal;
}

pre#pre_hashtag {
    color: blue;
}
li#link_inst p::before, li#link_inst p::after {
    content: '～';
}
li#link_inst a {
    display: inline-block;
}
span#s_goal {
    font-weight: bold;
    font-size: large;
}

/* フッタ　*/
footer.ftrFooter {
    text-align: left;
    font-size: small;
}
footer.ftrFooter a {
    color: inherit;
}