/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: #fcfdfc url(https://dollarchive.neocities.org/bgs/marigold/340_viridian.png);
  padding: 32px;
  font-size: 13px;
  color: #888;
  letter-spacing: 1px;
  line-height: 1.2;
}

a { color: #7f907f; text-decoration: none; }
a:hover { color: #6f826f; text-decoration: underline; }

.container {
  max-width: 660px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  position: relative;
  background: rgba(252, 253, 252, 0.96);
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55);
}
  

.header {
  position: relative;
  overflow: hidden;
  padding: 40px 10px 30px;
  text-align: center;
  border: 1px dashed #d5e0d1;
  border-radius: 4px;
  background:linear-gradient(rgba(255, 255, 255, 0.65), rgba(248, 251, 248, 0.85)), url("https://dollarchive.neocities.org/bgs/kirbymassattack1.png");
  background-size: cover;
  background-position: center;
}

.header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 70%);
  pointer-events: none;
}

.header-inner {
  position: relative;
  z-index: 2;
}

.site-name {
  margin-bottom: 4px;
  color: #8fa18f;
  letter-spacing: 2px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  font: italic 20px georgia, serif;
}

.sub-title, h2 {
  color: #9aa79a;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.navi {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.navi a {
  display: block;
  padding: 3px 5px;
  text-align: center;
  text-transform: lowercase;
  color: #f8fbf7;
  background: #c7d8c4;
  border: 1px solid #c7d8c4;
  border-radius: 4px;
  transition: 0.2s ease;
  font: italic 13px georgia, serif;
}

.navi a:hover {
    color:#888;
  background: #eef5ee;
  transform: translateY(-1px);
}

.intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
}

.top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2px;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.note,
.now,
.box {
  padding: 8px;
  border-radius: 4px;
}

.note,
.box { 
  text-align: justify;
  background: #fff;
  border: 1px dashed #c7d8c4;
}

.now {
  background: #fbfcfa;
  border: 1px dashed #c7d8c4;
}

.soft {
  background: #fbfcfa;
}

.title, h1 {
  margin-bottom: 6px;
  color: #8fa18f;
  text-transform: lowercase;
  font: italic 14px georgia, serif;
}

.row {
  padding: 2px 0;
  border-bottom: 1px dotted #e5ece3;
}

.row:last-child {
  border-bottom: none;
}

.list {
  list-style: none;
}

.list li {
  padding: 2px 0;
  border-bottom: 1px dotted #e7eee5;
}

.list li:last-child {
  border-bottom: none;
}

.full {
  grid-column: span 2;
}

.quote {
  padding: 12px 10px;
  text-align: center;
  color: #8f9e8f;
  background: #fafcf9;
  border: 1px dashed #d5dfd2;
  font: italic 14px georgia, serif;
}

.footer {
  padding: 8px;
  text-align: center;
  color: #96a396;
  background: #f9fbf9;
  border: 1px solid #e3ebe2;
  border-radius: 4px;
}

.icon {
  opacity: 0.6;
}
.icon2 {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .navi {
    grid-template-columns: repeat(2, 1fr);
  }

  .intro,
  .top,
  .main {
    grid-template-columns: 1fr;
  }

  .full {
    grid-column: span 1;
  }
}