.center{
display:flex; 
justify-content:center;
align-items:center;
margin:auto;
height:100vh;
}

.inner-box {
  border: 1px dashed hotpink;
  padding: 1rem;
  margin: 1rem auto;
  border-radius: 8px;
  display: block;     
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
}

.box{
 width: 450px;
  height: 50vh;
  overflow-wrap: break-word;
    }
    
.center-text{
        text-align: center;
    }
 
.dotted {
 border-top: 2px dotted;
 border-bottom: none;
 width: 100%;
}

.top-center {
  display: block;
  margin: 0px auto 0;   
  max-width: 100%;        
  height: auto;
  border-radius: 16px;
}

h1 {
  font-family: "Snell";
  font-weight: normal;
}

body {
  background-color:hsla(0,0%,100%,1);
background-image:
radial-gradient(at 0% 99%, hsla(340,100%,81%,0.5) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsla(340,100%,81%,0.5) 0px, transparent 50%),
radial-gradient(at 100% 100%, hsla(340,100%,81%,0.5) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(340,100%,81%,0.5) 0px, transparent 50%);
 background-attachment: fixed;
  color: dimgray;
  font-family: Courier New, monospace	;
}

mark {
  background-color: #FFD9E9;
  color: #000000;
}

li {
  list-style-type: "✳ ";
}

::selection {
  background-color: #FFD9E9; /* Sets the background color of the highlight */
  color: #000000; /* Sets the color of the selected text */

}

@font-face { font-family: "Snell"; src: url("/Fonts/snellroundhand_bold.otf") format("opentype");
}

#statuscafe-username {
    margin-bottom: 1rem;
}
#statuscafe-content {
    margin: 1rem auto;
}

@media only screen and (max-width: 600px) {
  .note-two {
    display: none;
  }
}/* gallery page additions */
.gallery-center {
  min-height: 100vh;
  height: auto;
  padding: 2rem 1rem;
  align-items: flex-start;
}

.gallery-box {
  width: min(700px, 92vw);
  height: auto;
  padding-bottom: 2rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem auto;
}

.gallery-card {
  border: 1px dashed hotpink;
  border-radius: 8px;
  padding: 0.75rem;
  margin: 0;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.gallery-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.gallery-card figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: dimgray;
}

.gallery-card:hover {
  background: rgba(255, 217, 233, 0.7);
  transform: rotate(-1deg);
}

@media only screen and (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 380px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* tag filter additions */
.tag-filter {
  margin: 1rem auto;
}

.tag-filter button {
  font-family: "Courier New", monospace;
  background: #ffd9e9;
  border: 1px solid hotpink;
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  margin: 0.25rem;
  cursor: pointer;
  color: dimgray;
}

.tag-filter button:hover,
.tag-filter button.active {
  background: #ffbcd9;
}

.gallery-card[hidden] {
  display: none;
}

.gallery-card figcaption span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #a66a83;
}

.no-results {
  border: 1px dashed hotpink;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}