/* {
    margin: 0;
    padding: 0;
}
*/

/* @import url(./mozilla_color_theme.css); */
:root {
  --color-white: #fff;
  --color-white-alpha-25: #ffffff40;
  --color-white-alpha-75: #ffffffbf;
  --color-black: #000;
  --color-black-alpha-25: #00000040;
  --color-black-alpha-75: #000000bf;
  --color-gray-90: #f7f7f8;
  --color-gray-80: #edeef0;
  --color-gray-60: #c3c7cb;
  --color-gray-40: #51565d;
  --color-gray-20: #2d3034;
  --color-gray-10: #212426;
  --color-gray-05: #18191b;
  --color-red-90: #ffe6ea;
  --color-red-80: #fc7d92;
  --color-red-50: #d31232;
  --color-red-20: #b7102c;
  --color-red-10: #4b0b16;
  --color-orange-90: #fef3eb;
  --color-orange-80: #febe8f;
  --color-orange-50: #e2782c;
  --color-orange-20: #c2570a;
  --color-orange-10: #3f220d;
  --color-yellow-90: #fef0c3;
  --color-yellow-80: #fae49e;
  --color-yellow-50: #e6b30a;
  --color-yellow-20: #97770c;
  --color-yellow-10: #574405;
  --color-green-90: #eaf6ef;
  --color-green-80: #70eba3;
  --color-green-50: #089141;
  --color-green-20: #065b29;
  --color-green-10: #0c311c;
  --color-blue-90: #ecf4fe;
  --color-blue-80: #a4cefe;
  --color-blue-50: #0a5dbd;
  --color-blue-20: #044c9f;
  --color-blue-10: #072446;
  --color-purple-90: #f7f0ff;
  --color-purple-80: #d8b8ff;
  --color-purple-50: #863ae4;
  --color-purple-20: #5f1fad;
  --color-purple-10: #260e43;
}

h1 {
  text-align: center;
}
section p {
  text-align: center;
}
/*body {
    background-color: #ccc;
}
*/
/* a:visited,
a:link {
  color: black;
}

li:hover a {
  background-color: var(--color-blue-50);
} */
.link-table a {
  transition: background-color ease-in-out 0.3s;
  font-family: Consolas, "Courier New", monospace;
  font-size: 16px;
  text-decoration: none;
  /* position: relative;
    left: 10px; */
  line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
}

@media (prefers-color-scheme: light) {
  :root {
    color: black;
  }
  body {
    background-color: var(--color-gray-90);
  }
  a:visited,
  a:link {
    color: black;
  }
  li:hover a {
    background-color: var(--color-blue-50);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color: white;
  }
  body {
    background-color: var(--color-gray-05);
  }
  a:visited,
  a:link {
    color: white;
  }
  li:hover a {
    background-color: var(--color-blue-20);
  }
}

.link-table {
  position: relative;
  /* display: inline-block; */
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  text-indent: 0;
  padding: 0;

  /* flex-wrap: wrap; */
  /* flex-direction: column; */
}

li {
  /* position: relative; */
  list-style-type: none;
  /* width: 120px; */
  /* display: flex;
    align-items: center; */
  /* padding: 4px 0; */
}

picture {
  position: relative;
  width: 16px;
  height: 16px;
  display: block;
}
picture img {
  /* display: inline-block;
  line-height: 30px; */
  position: absolute;
  left: 0;
}
#github-ico {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-ico {
  height: 16px;
  width: 16px;
  /* vertical-align: middle; */
}

.azusa {
  text-align: center;
}
.azusa img {
  min-width: 200px;
  width: 40%;
}

footer {
  text-align: center;
}