:root {
  --main-color: 107.5; /* hue を黄金角（137.5 度）ずつ加算する。 */
  --sub-color: 227.5;
  --shadow-color:  hsl(var(--main-color), 100%, 20%);
  --main-border-color: hsla(var(--main-color),50%,60%,0.5);
  --sub-border-color: hsla(var(--sub-color),50%,60%,0.5);
  --main-bg-color: hsla(var(--main-color),50%,60%,0.25); 
  --main-fg-color: hsl(var(--main-color), 100%, 33%);
  --sub-fg-color:  hsl(var(--main-color), 100%, 20%);
}

body {
       margin: 0% 7.5% 0%;
}
h1 {
    text-align: center;
    color: var(--main-fg-color);
    text-shadow: 2px 2px 2px var(--shadow-color);
    background-color: var(--main-bg-color);
    border-radius: 5px;
}
h2 {
    color: var(--main-fg-color);
    text-shadow: 0.25px 0.25px 0.25px var(--shadow-color);
    background-color: var(--main-bg-color);
    border-radius: 7.5px;
    padding-left: 10px;
}
h3 { color: var(--main-fg-color); }
h4 { color: var(--sub-fg-color); }
hr { border: 1px solid var(--sub-border-color); }
div.toggle {
    border-left: 3px dashed var(--main-border-color);
    margin: 0px -10px;
    padding: 0px 10px;
}
address { font-family:'Comic Sans MS', Impact, cursive; }
a.mail {
    font-family:'Courier New', Courier, monospace;
    text-decoration:none;
}
.code {
  border-style: ridge;
  padding: 0px 10px;
}
@counter-style circled-decimal {
  system: fixed;
  symbols: ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳ ㉑ ㉒ ㉓ ㉔ ㉕ ㉖ ㉗ ㉘ ㉙ ㉚ ㉛ ㉜ ㉝ ㉞ ㉟ ㊱ ㊲ ㊳ ㊴ ㊵ ㊶ ㊷ ㊸ ㊹ ㊺ ㊻ ㊼ ㊽ ㊾ ㊿;
  suffix: " ";
}