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

:root {
  --kawaii-radius: 12px;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea {
  font-family: Arial, Helvetica, sans-serif;
}


body {
  background:#D8BFD8;
  color:#000;
}

.main-container {
  max-width:600px;
  margin:0 auto;
  padding:1rem;
  background:transparent;
}

header,
nav {
  margin-bottom:1rem;
  text-align:center;
}

main > * {
  margin-bottom:1rem;
}

#posts > * {
  margin-bottom:3rem;
}

#archive > div,
#reviews-list > div {
  margin:2rem 0;
}

a,
a:visited,
a:hover,
a:active {

  color:#000;
  text-decoration:underline;
}

nav a {
  margin:0 0.5rem;
}

header h1,
nav.top-nav {
  background:none;
}

  .hexangel-img {
    width:100%;
    height:auto;
    display:block;
    margin:0 auto 2rem;
    border:none;
    border-radius:var(--kawaii-radius);
    box-shadow:
      0 0 4px rgba(255, 255, 255, 1),
      0 0 8px rgba(255, 255, 255, 1),
      0 0 12px rgba(255, 255, 255, 1),
      0 0 16px rgba(255, 255, 255, 1);
  }

input,
textarea,
select {
  border:2px inset #fff;
  background:#ffb3ff;
  color:inherit;
  font-family:inherit;
  width:100%;
  display:block;
  padding:0.5rem;
}

textarea {
  resize:none;
}

input:focus,
textarea:focus,
select:focus {
  outline:none;
  background:#ffb3ff;
}

button,
.btn {
  background:#c0c0c0;
  border:2px outset #fff;
  padding:0.25rem 0.5rem;
  cursor:pointer;
  color:inherit;
  border-radius:var(--kawaii-radius);

  font-weight:normal;
  width:120px;
  text-align:center;
  display:inline-block;
}

button:hover,
.btn:hover {
  background:#c0c0c0;
}

button:active,
.btn:active {
  border-style:inset;

}

img,
.photo img {
  width:100%;
  height:auto;
  display:block;
  border:4px solid #4B0082;
  border-radius:var(--kawaii-radius);

}

.photos {
  display:grid;
  gap:2px;
}

.photos.count-1 { grid-template-columns:1fr; }
.photos.count-2 { grid-template-columns:repeat(2,1fr); }
.photos.count-3,
.photos.count-4 { grid-template-columns:repeat(2,1fr); }

.photos .photo {
  position:relative;
}

.photos .more {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.6);
  color:#000;
}

embed,
iframe,
object,
video {
  width:100%;
  height:auto;
  display:block;
}

.video-wrapper iframe {
  width:100%;
  aspect-ratio:16/9;
}

.audio-wrapper iframe,
.embed-full img {
  width:100%;
  height:auto;
  display:block;
}

#top-link {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  display:none;
  background:transparent;
  text-decoration:none;
}

footer {
  max-width:600px;
  margin:0 auto 2rem;
  text-align:center;
  border:none;
  padding-bottom:1rem;
  color:#000;
}

.post-body {
  text-align:justify;
}

.post-body > * + * {
  margin-top:1rem;
}

.card {
  background: transparent;
  border: none;
}

.card .meta {
  margin-bottom:0.5rem;
}

.card h2 {
  margin-bottom:0.5rem;
}

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:0.5rem;
}

.gallery-grid .tile {
  aspect-ratio:1/1;
  overflow:hidden;
}


.gallery-grid .tile img {
  width:100%;
  height:100%;
  object-fit:cover;
}

#sortbar {
  text-align:center;
  margin:1rem 0;

}

#sortbar a {
  margin:0 0.5rem;
}

#sortbar a.active {
  font-weight:bold;
}

.comment .replies {
  margin-left:1rem;
  margin-top:0.5rem;
}

.comment .actions {
  margin-top:0.5rem;
}

.comment .actions .btn {
  margin-right:0.5rem;
}

.hp {
  display:none;
}

#comment-form textarea {
  width:100%;
  min-height:120px;
  padding:0.5rem;
}

.stack > * + * {
  margin-top:0.5rem;
}

.row {
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}

.row > div {
  flex:1;
}

.grow {
  flex:1;
}

#lightbox {
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.8);

  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
}

#lightbox.show {
  opacity:1;
  pointer-events:auto;
}

#lightbox figure {
  text-align:center;
  margin:0;
}

#lightbox img {
  max-width:90%;
  max-height:80vh;
  display:block;
  margin:auto;
}

#lightbox figcaption {
  margin-top:0.5rem;
  color:#000;

}