:root {
     --dk-color:#bf776b;
     --mid-color:#f2b1a4;
     --lt-color:#ffe8e3;
     --dkest-color:#8e534a;
      --accent:#ff0000;
     --pixel-font:'8bitOperatorJVE', 'Jersey 20', 'Courier New', monospace;
}
@font-face {
     font-family:'8bitOperatorJVE';
     src:url('8bitoperator_jve.woff') format('woff'),
         url('8bitoperator_jve.ttf') format('truetype');
     font-weight:normal;
     font-style:normal;
     font-display:swap;
}
 html, body {
     margin:0;
     padding:0;
     height:100%;
     font-family:var(--pixel-font);
     font-size:19px;
     background-color:#000000;
     color:var(--dkest-color);
     overflow-y:hidden;
}
body a {
  color:var(--accent);
  font-weight:bold;
  }
 #container {
     max-width:900px;
     margin:0 auto;
     height:100vh;
     display:flex;
     flex-direction:column;
     box-sizing:border-box;
     padding:8px 0;
}
 h1, h3, h5 {
     color:#ffffff;
     font-family:var(--pixel-font);
}
 h2, h4, h6 {
     color:var(--accent);
     font-family:var(--pixel-font);
  }
 #header {
     max-width:850px;
     width:100%;
     box-sizing:border-box;
     margin:0 auto;
     background-color:#000000;
     border:none;
     flex:0 0 auto;
     padding-bottom:6px;
}
 .title {
     font-size:30px;
     text-align:center;
     font-style:normal;
     line-height:1.3;
     letter-spacing:2px;
     padding-top:10px;
     margin:0;
}
 .site-nav {
     display:flex;
     justify-content:center;
     gap:8px;
     font-family:var(--pixel-font);
     font-size:18px;
     margin-top:8px;
     text-transform:lowercase;
}
 .site-nav a {
     color:#ffffff;
     text-decoration:none;
}
 .site-nav a:hover {
     color:var(--accent);
}
 .site-nav span {
     color:var(--dkest-color);
}
 #wrapper {
     margin:0 auto;
     max-width:860px;
     width:100%;
     box-sizing:border-box;
     flex:1 1 auto;
     display:flex;
     flex-direction:column;
     min-height:0;
}
.content {
  padding:10px;
  }
 #two-boxes {
     display:flex;
     flex-wrap:nowrap;
     max-width:900px;
     flex:1 1 0;
     min-height:0;
}
 .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
     border:1px solid #ffffff;
     background-color:#000000;
     color:#ffffff;
     overflow:auto;
     min-height:0;
}
 .box-one, .box-two {
     flex:1 1 0;
     margin-left:5px;
}
 .box-one {
     margin-top:5px;
     margin-right:5px;
}
 .box-two {
     margin-top:5px;
     margin-right:5px;
}
 .box-three {
     margin-left:5px;
     margin-top:5px;
     flex:0 0 31%;
}
 .box-four {
     margin-top:5px;
     margin-left:5px;
     flex:1 1 0;
}
 .section-title {
     position:sticky;
     top:0;
     z-index:2;
     text-align:center;
     font-weight:bold;
     padding-top:8px;
     padding-bottom:8px;
     background-color:#ffffff;
     color:#000000;
     font-size:20px;
     font-family:var(--pixel-font);
     letter-spacing:0.5px;
}
 .nav-wrapper {
     display:flex;
     flex-wrap:wrap;
     width:400px;
     height:50px;
     margin:0 auto;
     justify-content:space-evenly;
     margin-top:5px;
}
 .view-all-btn {
     display:block;
     text-align:center;
     margin-top:10px;
     padding:6px;
     border:1px solid #ffffff;
     color:#ffffff;
     text-decoration:none;
     font-family:var(--pixel-font);
     font-size:16px;
     background-color:#000000;
     transition:background-color 0.15s, color 0.15s;
     position:sticky;
     bottom:0;
     z-index:2;
}
 .view-all-btn:hover {
     background-color:#ffffff;
     color:#000000;
}
 .gallery-grid {
     display:grid;
     grid-template-columns:repeat(4, 1fr);
     gap:6px;
}
 .gallery-thumb {
     aspect-ratio:1;
     border:1px solid #ffffff;
     display:flex;
     align-items:center;
     justify-content:center;
     font-family:var(--pixel-font);
     font-size:32px;
     color:#ffffff;
     cursor:pointer;
     position:relative;
     overflow:hidden;
     padding:0;
}
 .gallery-thumb img {
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit:cover;
     display:none;
}
 .gallery-thumb img.loaded {
     display:block;
}
 .about-content {
     display:flex;
     align-items:flex-start;
     gap:10px;
}
 .about-text {
     flex:1 1 0;
     min-width:0;
}
 .about-gif {
     flex:0 0 auto;
     width:clamp(80px, 30%, 180px);
     height:auto;
     border:1px solid #ffffff;
     image-rendering:pixelated;
     cursor:pointer;
}
 .echo-entry {
     border-bottom:1px dashed var(--accent);
     padding-bottom:6px;
     margin-bottom:6px;
}
 .echo-meta {
     font-family:var(--pixel-font);
     font-size:18px;
     color:var(--accent);
     margin-bottom:3px;
}
 .blog-cards-row {
     display:flex;
     gap:8px;
     flex-wrap:wrap;
}
 .blog-card-mini {
     flex:1;
     min-width:220px;
     border:1px solid #ffffff;
     padding:8px;
     color:#ffffff;
     text-decoration:none;
     display:block;
     transition:background-color 0.15s, color 0.15s;
}
 .blog-card-mini:hover {
     background-color:#ffffff;
     color:#000000;
}
 .blog-card-mini:hover .blog-card-date {
     color:#000000;
}
 .blog-card-title {
     font-family:var(--pixel-font);
     font-size:21px;
     margin-bottom:4px;
}
 .blog-card-date {
     font-family:var(--pixel-font);
     font-size:18px;
     color:var(--accent);
     margin-bottom:6px;
}
 button {
     width:190px;
     height:35px;
     background-color:#000000;
     color:#ffffff;
     font-weight:bold;
     font-family:var(--pixel-font);
     border:1px solid #ffffff;
     margin-top:5px;
     margin-right:5px;
     cursor:pointer;
     transition:background-color 0.15s, color 0.15s;
}
  button:hover {
    background-color:#ffffff;
    color:#000000;
  }
  button:hover a {
    color:#000000;
  }
  button a {
    color:#ffffff;
    font-weight:bold;
  }
  p {
     padding:5px;
}
 p a {
  color:var(--accent);
  font-weight:bold;
  }
 .scroll::-webkit-scrollbar-track {
     background-color: #000000;
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #000000;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: #ffffff;
     border:1px solid #000000;
}
 #footer {
     text-align:center;
     padding-top:14px;
     margin-bottom:5px;
     border-top:1px solid var(--accent);
     margin-top:10px;
}
 .footer-nav {
     display:flex;
     justify-content:center;
     gap:8px;
     font-family:var(--pixel-font);
     font-size:15px;
     margin-top:10px;
     text-transform:lowercase;
}
 .footer-nav a {
     color:#ffffff;
     text-decoration:none;
}
 .footer-nav a:hover {
     color:var(--accent);
}
 .footer-nav span {
     color:var(--accent);
}
 .footer-text {
     font-family:var(--pixel-font);
     font-size:16px;
     color:var(--accent);
     margin-top:6px;
     margin-bottom:6px;
}
#corner-image {
     position:fixed;
     bottom:10px;
     right:10px;
     max-width:100px;
     max-height:100px;
     z-index:1000;
     pointer-events:none;
     transition:transform 0.15s;
}
#corner-image:hover {
     transform:scale(1.08);
}
#lightbox-overlay {
     display:none;
     position:fixed;
     inset:0;
     background-color:rgba(0,0,0,0.88);
     z-index:2000;
     align-items:center;
     justify-content:center;
     cursor:pointer;
     padding:30px;
     box-sizing:border-box;
}
#lightbox-overlay.open {
     display:flex;
}
#lightbox-overlay img {
     max-width:90vw;
     max-height:90vh;
     border:2px solid #ffffff;
     image-rendering:pixelated;
     cursor:default;
}
#lightbox-close {
     display:none;
     position:fixed;
     top:16px;
     right:24px;
     color:#ffffff;
     font-family:var(--pixel-font);
     font-size:22px;
     cursor:pointer;
     z-index:2001;
}
#lightbox-close:hover {
     color:var(--accent);
}
textarea {
  background-color:var(--dkest-color);
  color:var(--lt-color);
  font-family:var(--pixel-font);
  font-size:16px;
  }
 body.page-mode {
     overflow-y:auto;
     height:auto;
     min-height:100%;
     padding-bottom:20px;
}
 .back-link {
     display:inline-block;
     margin:12px 5px 0 5px;
     font-family:var(--pixel-font);
     font-size:18px;
     color:#ffffff;
     text-decoration:none;
}
 .back-link:hover {
     color:var(--accent);
}
 .page-box {
     max-width:850px;
     margin:10px auto 0 auto;
     border:1px solid #ffffff;
     background-color:#000000;
     color:#ffffff;
}
 .page-box .content {
     padding:15px;
}
 .full-gallery-grid {
     display:grid;
     grid-template-columns:repeat(3, 1fr);
     gap:14px;
}
 .full-gallery-grid .gallery-thumb {
     font-size:72px;
}
 .echoes-feed .echo-entry {
     border-bottom:1px dashed var(--accent);
     padding-bottom:10px;
     margin-bottom:10px;
}
 .blogs-list {
     display:flex;
     flex-direction:column;
     gap:10px;
}
 .blog-card {
     display:block;
     border:1px solid #ffffff;
     padding:12px;
     color:#ffffff;
     text-decoration:none;
     transition:background-color 0.15s, color 0.15s;
}
 .blog-card:hover {
     background-color:#ffffff;
     color:#000000;
}
 .blog-card:hover .blog-card-date {
     color:#000000;
}
 .blog-post-body {
     line-height:1.7;
}
 .blog-post-body p {
     padding:0 0 10px 0;
}
 .guestbook-content {
     text-align:center;
     padding:20px 15px;
}
 .guestbook-frame {
     width:100%;
     max-width:800px;
     height:600px;
     border:1px solid #ffffff;
     background-color:#ffffff;
     display:block;
     margin:14px auto 0 auto;
}
 .guestbook-frame-preview {
     height:220px;
     margin-top:6px;
}
 .guestbook-note {
     font-size:14px;
     color:var(--dk-color);
     margin-top:10px;
}
 .box-five {
     flex:1 1 0;
     margin-left:5px;
     margin-right:5px;
     margin-top:5px;
}
 .guestbook-preview {
     text-align:center;
     padding:10px 8px 4px 8px;
}
 @media only screen and (max-width: 860px) {
     html, body {
         overflow:visible;
    }
    #container {
        height:auto;
        display:block;
        width:100%;
        padding:0;
    }
    #wrapper {
        display:block;
        flex:none;
        min-height:0;
        width:100%;
    }
    #two-boxes {
        flex:none;
        flex-wrap:wrap;
        min-height:0;
    }
    .box-one, .box-two, .box-three, .box-four, .box-five, .box-six {
        flex:none;
        height:200px;
        width:100%;
    }
    #corner-image {
      display:none;
    }
    .about-content {
      flex-direction:column;
      align-items:center;
    }
    .about-gif {
      order:-1;
      width:clamp(100px, 45%, 190px);
    }
    .full-gallery-grid {
      grid-template-columns:repeat(2, 1fr);
      gap:10px;
    }
    .page-box {
      width:97.6%;
    }
    #header {
      width:97.6%;
    }
    .box-two {
      order:1;
    }
    .box-one {
      order:2;
    }
     .box-three {
         width:98%;
    }
     .three-boxes {
         width:98%;
    }
     .two-boxes {
         width:100%;
    }
     .wrapper {
         width:100%;
    }
}