@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
  --color-silver: #C0C0C0;
  --color-teal: #008080;
  --color-blue: #0000FF;
  --color-purple: #800080;
  --color-black: #000000;
  --color-cyan: #00FFFF;
  --color-yellow: #FFFF00;
  --color-red: #FF0000;
  --color-white: #FFFFFF;
  --color-border-light: rgba(192, 192, 192, 0.3);
  --color-dark-blue: #003399;
  --color-green: #008000;
  --color-maroon: #800000;
  --color-olive: #808000;
  --color-lime: #00FF00;
  --color-fuchsia: #FF00FF;
  --color-off-white: #F1E7E8;
  --color-orange-light: #F0A96E;
  --color-green-pale: #86A985;
}

body {
  background-color: var(--color-dark-blue);
  color: var(--color-silver);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.6;
}

.serif {
  font-family: "Times", "Times New Roman", "Georgia", serif;
}

.sansserif {
  font-family: "Verdana", "Helvetica", "Arial", sans-serif;
}

.monospace {
  font-family: "Lucida Console", "Courier New", monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}

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

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

body.home {
  background-image: url('backg.jpg');
  background-attachment: fixed;
}

body.dark a:link {
  color: var(--color-cyan);
}

body.dark a:visited {
  color: var(--color-fuchsia);
}

body.dark {
  background-color: var(--color-black);
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 10px 0;
}

.img-frame {
  border: 5px ridge var(--color-silver);
}

.img-frame-teal {
  border: 5px ridge var(--color-teal);
}

.text-center {
  text-align: center;
}

.text-small {
  font-size: x-small;
}

.text-large {
  font-size: large;
}

.text-cyan {
  color: var(--color-cyan);
}

.text-yellow {
  color: var(--color-yellow);
}

.text-silver {
  color: var(--color-silver);
}

.text-blue {
  color: var(--color-blue);
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
}

.font-gothic {
  font-family: 'HG創英角ポップ体', 'HGSoeiKakuPop-tai', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', 'Noto Sans JP', sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.nav-section {
  margin: 30px 0;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border-light);
}

.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 1rem;
}

.text-red {
  color: var(--color-red);
}

.text-white {
  color: var(--color-white);
}

.text-green {
  color: var(--color-green);
}

.text-maroon {
  color: var(--color-maroon);
}

.text-olive {
  color: var(--color-olive);
}

.text-lime {
  color: var(--color-lime);
}

.text-fuchsia {
  color: var(--color-fuchsia);
}

h2 {
  font-weight: bold;
  font-size: 1.2em; /* Adjust size as needed */
  margin-top: 2em;
  margin-bottom: 1em;
}

.star-icon {
  width: 52px;
}

/* Spacing adjustments to replace <br> tags */
main > p.text-center:nth-of-type(2) {
    margin-bottom: 2em;
}

main > p.text-center:nth-of-type(3) {
    margin-bottom: 2em;
}

.profile-page a {
  color: var(--color-silver);
}

.profile-table {
  width: 568px;
  max-width: 100%;
  margin: 2em auto;
  border-collapse: collapse;
}

.profile-table th,
.profile-table td {
  border: 1px solid var(--color-silver);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

h1.font-gothic { margin-bottom: 2em; }

/* application.html styles */
.app-page {
  text-align: center;
}

.app-page .container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
}

.app-section {
  padding: 30px;
  margin-bottom: 2rem;
  border-radius: 12px;
  border: 1px solid var(--color-silver);
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.github-stats { margin-top: 30px; border-top: 1px solid var(--color-border-light); padding-top: 20px; }

/* ImageForNet.html styles */
.doc-page {
  padding: 50px 20px;
}

.doc-page .container {
  max-width: 600px;
  margin: auto;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid var(--color-silver);
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

.doc-page h1, .doc-page h2, .doc-page h3 {
  text-align: left;
}

.doc-page p {
  line-height: 1.6;
}

.doc-page pre {
  background-color: #2d2d2d;
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
  color: var(--color-white);
}

/* rx-7/index.html styles */
.page-nav {
  margin: 2rem 0;
}
.page-nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}
.page-nav li {
  margin-bottom: 1rem;
}