/* 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 {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, tahoma, verdana, sans-serif;
  }
  
  body {
    background: #26c957 url(https://sadhost.neocities.org/images/tiles/bck-crackle.gif);
    padding: 32px;
    text-align: center;
    font-size:11px;
    color: #26c957;
    letter-spacing: 1px;
    line-height: 1.2;
  }
  
  textarea {font:10px tahoma;color:#555;border:1px solid #ddd;}
    
  a { color: #a5f0b9; text-decoration: none; }
  a:hover { color: #29382d; }
  
  .container {
    max-width:660px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    position: relative;
    background: rgba(21, 26, 23);
    border: 1px solid #133b1f;
    border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(139, 247, 171, 0.55);
  }
  
  .header {
    position: relative;
    overflow: hidden;
    padding: 40px 10px 30px;
    text-align: center;
    border: 1px dashed #1b6e33;
    border-radius: 4px;
    background:linear-gradient(rgba(5, 51, 18, 0.65), rgba(13, 13, 13, 0.85)), url(https://media1.tenor.com/m/eb0rcNvpDc0AAAAd/desolate-building-in-prypiat-prypiat.gif);
    background-size: cover;
    background-position: center;
  }
  
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(177, 250, 198, 0.3), transparent 70%);
  pointer-events: none;
}

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

.site-name {
  margin-bottom: 4px;
  color: #84db9b;
  letter-spacing: 2px;
  text-shadow: 0 1px 3px rgba(37, 105, 55, 0.8);
  font:28px garamond, serif;
}

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

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

.navi a {
  display: block;
  padding: 3px 5px;
  text-align: center;
  color: #022107;
  background: #26a63b;
  border: 1px solid #64f57c;
  border-radius: 4px;
  transition: 0.2s ease;
  font: italic 13px courier;
}

.navi a:hover {
    color:#2d6135;
  background: #a8f7b4;
  transform: translateY(-1px);
}

/*--- Dropdown ---*/

.dropdown {
  position: relative;
}

ul.dropdown-content {
  position: absolute;
  top: 100%;
  margin-top: 0;
  left: 0;
  z-index: 1000;
}

/*.dropdown-content::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 0;
  width: 100%;
  height: 11px;
  display: none;
  margin-top: 0px;
  padding: 3px 5px;
  text-align: center;
  min-width: 120px;
  list-style: none;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}*/

.dropdown-parent-selector {
  position: relative;
}

.dropdown-content li a {
  padding: 3px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: block;
}

.dropdown-content li:last-child a {
  border-bottom: 1px solid;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*--- Main Content ---*/

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

.top {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  
}

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

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

.note,
.box {
  background: #032407;
  border: 1px dashed #c7d8c4;
}

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

.soft {
  background: #032407;
}

.title {
  margin-bottom: 6px;
  color: #8fa18f;
  font: 18px 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 13px georgia, serif;
}

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

.icon {
  opacity: 0.6;
}

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

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

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