:root{
  --bg-dark: #0A192F;
  --bg-accent: #334155;
  --bg-accent-lv2:#475569;
  --text-color:#CBD5E1;
  --text-color-index:#67E8F9;
  --text-color-footer:#475569;
  --link-color:#38BDF8;
  --link-visited-color:#7DD3FC;
  --link-active-color:#0284C7;
}

* {
  box-sizing: border-box;
  margin:0;
}

body{
  background-color:var(--bg-dark);
  color:var(--text-color);
  padding:10px;
}

a {
  color: var(--link-color);
  text-decoration:underline;
  font-weight:bold;
}

a:visited {
  color: var(--link-visited-color);
}

a:active {
  color: var(--link-active-color);
}

h1, 
h2,
h3,
h4,
h5,
h6{
  border-radius:15px;
  padding:5px;
  background-color:var(--bg-accent-lv2);
}

h2,
h3,
h4,
h5,
h6{
  margin-bottom:10px;
}

h1 > a{
  all:unset;
  cursor:pointer;
}

ul, p{
  margin-bottom:10px;
}

span.menu_profile{
  font-weight:bold;
  color:var(--text-color-index);
}

/* markdown frame -------------------------------- */

#maincontainer{
  display:flex;
  margin-top:10px;
}

/*統一形状*/
#xmf_header, #xmf_menu, #xmf_content{
  padding:10px;
  border-radius:15px;
  background-color:var(--bg-accent);
}

#xmf_header h1 small{
  font-size:0.5em;
}

#xmf_menu{
  width:250px;
  margin-top:0;
}

#xmf_content{
  width:100%;
  margin-left:10px;
}

/* content 形状 */
#xmf_content h1, 
#xmf_content h2,
#xmf_content h3,
#xmf_content h4,
#xmf_content h5,
#xmf_content h6{
  border-radius:15px;
  padding:5px;
  background-color:var(--bg-accent-lv2);
  margin-bottom:10px;
}

#xmf_content h2,
#xmf_content h3,
#xmf_content h4,
#xmf_content h5,
#xmf_content h6{
  margin-top:10px;
}

/* 見出し以外を少し内側に */

#xmf_content p,
#xmf_content table{
  margin-left:1em;
  margin-right:1em;
  width:100%;
}

#xmf_content p{
  margin-top:10px;
}

#xmf_content hr{
  border-style:solid;
  border-color:var(--bg-accent-lv2);
  margin-top:10px;
}
#xmf_content table {
  /*width: 100%;*/
  border-collapse: collapse;
  background-color: var(--bg-accent);
  margin-top:10px;
  max-width:calc(100% - 2em);
  box-sizing:border-box;
  width:fit-content;
  table-layout:auto;
}

#xmf_content th,
#xmf_content td {
  padding: 10px;
  text-align: left;
  border: 1px solid var(--bg-accent-lv2);
}

#xmf_content th {
  background-color: var(--bg-accent-lv2);
  font-weight: bold;
}

#xmf_content img{
  max-width:calc(100% - 2em);
  height:auto;
  display:block;
}

#xmf_content blockquote{
  margin-left:10px;
  font-size:small;
  background-color: var(--bg-dark);
}

#xmf_footer{
  padding:0;
  text-align:center;
}

#xmf_footer p{
  color:var(--text-color-footer);
  font-size:0.8em;
}

@media (max-width: 768px) {
  #maincontainer {
    flex-direction:column-reverse;
  }
  
  #xmf_menu, #xmf_content {
    width: 100%;
    margin: 0;
  }
  #xmf_menu{
    margin-top:10px;
  }
}

/* markdown / share */
#social-share{
  margin: 1em 0;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  text-align:right;
}