    <style>

    /* =========================
  FONTS
========================= */

        ::selection {
            color: #ffb0ce;
            text-shadow: -1px -1px 0 #724656, 1px -1px 0 #81e1fa, -1px 1px 0 #81e1fa, 1px 1px 0 #81e1fa,
                0px 0px 5px #fff2f2, 0px 0px 5px #81e1fa, 0px 0px 5px #81e1fa;
        }


/* =========================
   INTERNAL
========================= */

.topboxes {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
    width: 100%;
}

.timebox,
.shoutbox {
    background: linear-gradient(#fffff8 30%, #fff5d7 80%);
    border: 1px solid #b1a8a4;
    border-radius: 10px;
    height: 35px;
    padding: 10px;
    color: #928375;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.timebox {
    width: 28%;
    justify-content: center;
}

.shoutbox {
    width: 72%;
}

.wrap {
            max-width: 950px;
            margin: 5px auto;
            width: 100%;
        }

        /* Container styles */
        #container, #header, #footer {
            border: 1px solid #e5cfc0;
        }

        #container {
            background-color: #fcfaf6;
            box-shadow: 0px 0px 15px rgba(255, 253, 242, 0.819);
            border-radius: 7px;
            padding: 5px;
            width: 100%;
        }
        
        #header {
            background: center / cover url('https://i.pinimg.com/originals/d9/66/92/d96692795bbaf2d3e3542564bfc9b03f.gif');
            background-repeat: no-repeat;
            height: 220px;
            margin-bottom: 5px;
            padding: 5px;
            border-radius: 7px 7px 0px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        
      .titlebar,
.marquee {
    background: linear-gradient(
        180deg,
        #fff8f8,
        #ffe7ef 45%,
        #ffd6e4 100%
    );
    border: 1px solid #d7b39f;
}

        .titlebar {
            display: flex;
            overflow: hidden;
            font-weight: bold;
            align-content: center;
            letter-spacing: 2px;
            font-style: italic;
        }
        
      .titlebar h1 {
        font-size:14px;
        font-family:'ms-gothic';
    color: white;
    text-shadow:
    -1px -1px 0 #c48da1,
    1px -1px 0 #c48da1,
    -1px 1px 0 #c48da1,
    1px 1px 0 #c48da1;
    padding:5px;
}

h1 {
           font-size:14px;
        font-family:'ms-gothic';
    color: white;
    text-shadow:
    -1px -1px 0 #c48da1,
    1px -1px 0 #c48da1,
    -1px 1px 0 #c48da1,
    1px 1px 0 #c48da1; 
}

.marquee {
            display: flex;
            gap: 5px;
            padding: 2px;
            margin: 5px 0;
            justify-content: center;
        }

        .marqueecontainer {
            width: 100%;
            overflow: hidden;
        }
        

        /* Flex containers */
        .flex {
            display: flex;
            flex-wrap: wrap;
            height: auto;
            width: 100%;
            gap: 5px;
        }

        /* Content box */
        .content {
            border-top: none;
            padding: 5px;
            height: auto;
            overflow-wrap: break-word;
        }

        .inner {
            background: linear-gradient(#fffff8 30%, #fff5d7 80%);
            height: auto;
            min-height: 530px;
        }

        /* gallery */
        .gallery {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .gallery .pic {
            position: relative;
        }
    

    
        .flex#f1 .content {
            height: 286px;
        }
        
        
        
        #webrings.content {
            overflow-x: hidden;
            border:none;
            justify-content: center;
            padding: 5px;
            font-weight: bold;
            overflow-y: hidden;
        }
        
        #webrings.content table {
            margin: auto;
        }
        
        #webrings.content div {
            text-align: center;
            margin: 5px auto;
        }

        
        #webrings.content,
        #updates.content {
            overflow-y: hidden;
        }
        
        #ncring a:hover {
        }
        
        
        .buttons {
            justify-content: center;
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

                /*music stuff*/
.music-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top:15px;
}


.np-label {
  font-weight: bold;
  color: #946f71;
}

.np-track {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ========================= */
/* EXTRA CONTENT SECTION     */
/* ========================= */

.extras {
    margin-top: 8px;
}

.extra-top {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.extra-box {
    flex: 1;
    background: rgba(255,255,255,0.45);
    border: 1px solid #e4cbbe;
}

.extra-box .titlebar {
    border-bottom: 1px solid #e4cbbe;
}

.extra-box .content {
    height: 140px;
    overflow-y: none;
}

.gallery-section {
    display: flex;
    gap: 12px;
}

.side-panel {
    width: 200px;
    min-height: 400px;
    text-align: center;
    padding:5px;
    
}

.neighbors {
     border: 1px solid #e4cbbe;
         width: 200px;
    min-height: 400px;
    text-align: center;
    padding:5px;
    
}

.main-gallery {
    flex: 1;
    min-height: 400px;
    background: rgba(255,255,255,0.25);
    padding:5px;
}

.main-gallery .titlebar {
    text-align: center;
    justify-content: center;
}

.gallery-content {
    min-height: 50px;
    padding: 10px;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.gallery-grid img {
    width:120px;
    height:120px;
    object-fit:cover;

    border:2px dotted #d7b39f;
    border-radius:10px;

    filter:
      sepia(.15)
      saturate(.9)
      brightness(1.05);

    transition:.25s;
}

.np-title {
  font-size: 14px;
  margin-bottom: 8px;
  color: #7a3f5e;
}

#track {
  font-size: 13px;

}

.album-art {
  width: 42px;
  height: 42px;
  border: 2px solid #caa792;
  filter: sepia(0.25) saturate(0.8) brightness(1.1) contrast(0.9);
}
        

/* =========================
   EXTERNAL
========================= */

        * {
            scrollbar-width: thin;
            scrollbar-color: #caa28d #fadcdd;
        }
        *::-webkit-scrollbar { width: 8px; }
        *::-webkit-scrollbar-track { background: #c3e9f8; }
        *::-webkit-scrollbar-thumb { background-color: #81e1fa; border-radius: 4px; border: 3px solid #ffffff; }

        body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image:
    radial-gradient(rgba(255, 243, 190, 0.753) 1px, transparent 1px);

  background-size: 14px 14px;
  opacity: 1;
}

        body {
            cursor:url('cursor.png');
display: grid;
    image-rendering: pixelated;
  background: repeating-linear-gradient(
    90deg,
    #fff7e8 0px,
    #fff7e8 50px,

    #ffe6e6 50px,
    #ffd2d2 100px,

    #caa792 100px,
    #caa792 150px
  );

animation: pastelScroll 14s linear infinite;
animation: stripeScroll 10s linear infinite;
    align-items: center;
    justify-items: center;
    padding: 30px;
        }

                html {
            font-family: 'ms gothic';
            font-size: 15px;
            color: #8449227b;
        }
/* =========================
 TEXT HIGHLIGHT
========================= */
                mark {
            background-image: radial-gradient(#fcfaf6, #ffc8d1);
            color: #cb7a7a;
            font-weight: 600;
        }
    
        /* Mobile-first responsive base */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


    @keyframes stripeScroll {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 240px 0;
  }
}

        .laceborder {
    border-image: url("border.png") 3 fill round;
    border-style: solid;

}

/* =========================
 NAV PANEL
========================= */
    
        #nav {
            text-align: center;
        
            font-size: 13px;
            font-family: 'ms-gothic';
            letter-spacing: 0.2px;
            text-shadow: -1px -1px 0 #bf9581, 1px -1px 0 #bf9581, -1px 1px 0 #bf9581, 1px 1px 0 #bf9581,
                -1.5px -1.5px 0 #e5bdb7, 1.5px -1.5px 0 #e5bdb7, -1.5px 1.5px 0 #e5bdb7, 1.5px 1.5px 0 #e5bdb7;
            padding: 5px;
            margin-bottom: 5px;
        }
        
        #nav a {
            text-decoration: none;
            flex: 1;
        }
        
        .navbutton {
            align-content: center;
            border-radius: 4px;
            border: 1px solid #d7b39f;
            width: 100%;
            min-height: 26px;
            color: white;
           background: linear-gradient(180deg,#fffaf8,#fff0f5 50%,#ffe4ec 100%);
            justify-content: center;
            align-items: center;
            padding: 5px 0;
        }
        
        .navbutton:hover {
                background:
    linear-gradient(
    180deg,
    #fff8fa,
    #ffdfe9,
    #ffcfdc
    );
        }
        
        #shrines {
    width: 100%;
}

        /* Dropdown menu */
        .drop {
            position: relative;
    flex: 1;
        }
        
        .drop-content {
            display: none;
            position: absolute;
            left: -0.1px;
            width: 100%;
            z-index: 1;
            border: 1px solid #caa28d;
            border-top: none;
            border-radius: 0px 0px 4px 4px;
            background: linear-gradient(0deg, #fff9f9 1%, #ffe1e1 49%, #ffe9e9 51%, #ffd2d2 90%);
        }
        
        .drop-content a {
            text-align: center;
            color: white !important;
            font-size: 12px;
            padding: 5px;
            margin: 5px;
            display: block;
            border-radius: 4px;
            background: linear-gradient(0deg, #fff9f9 1%, #ffefef 49%, #ffe4e4 51%, hsl(0, 100%, 99%) 90%);
            border: 1px solid #f3a3a3;
            text-decoration: none;
        }
        
        .drop-content a:hover {
            background: linear-gradient(180deg, rgba(195, 233, 248, 1) 1%, rgba(129, 225, 250, 1) 49%, rgba(90, 214, 250, 1) 51%, rgba(217, 242, 252, 1) 90%);
        }
        
        .drop:hover .drop-content {
            display: block;
        }





        /* Mobile responsiveness */
        @media (max-width: 768px) {
            body {
                padding: 2px;
            }
            
            .wrap {
                padding: 2px;
                margin: 2px auto;
            }
            
            #container {
                padding: 3px;
            }
            
            #header {
                height: auto;
                min-height: 150px;
                flex-direction: column;
                justify-content: center;
                padding: 10px 5px;
            }
            
            p.sub {
                position: static;
                text-align: center;
                margin-top: 10px;
                padding: 3px;
                order: 2;
            }
            
            .logo-container {
                order: 1;
            }
            
            #nav {
                flex-wrap: wrap;
                gap: 3px;
            }
            
            .navbutton {
                min-height: 30px;
                font-size: 14px;
                padding: 8px 0;
            }
            
            .flex {
                flex-direction: column;
            }
            
            .flex > div {
                width: 100% !important;
                margin-bottom: 10px;
            }
            
            .flex#f1 .content,
            .flex#f2 .content {
                height: auto;
                min-height: 200px;
            }
            
            .inner {
                height: auto;
                min-height: auto;
            }
            
            #guestbox .content {
                height: auto;
                align-content:center;
                min-height: 326px;
            }
            
            .gallery .pic img {
                height: 60px;
            }
            
            .g-text {
                position: static;
                width: 100%;
                margin-top: 5px;
            }
            
            .marquee#ads img {
                height: 50px;
            }
            
            .buttons img {
                max-height: 30px;
            }
            
            img#welcome {
                height: 50px;
                margin-top: 10px;
            }
            
            .angel {
                max-width: 40px;
            }
            
            #webrings.content {
                max-height: 300px;
            }
            
            #linkme .content {
                max-height: 200px;
            }
            
            #updates .content {
                max-height: 200px;
            }
        }

        /* Desktop specific */
        @media (min-width: 769px) {
            .wrap {
                width: 911px;
            }
            
            .flex {
                flex-wrap: nowrap;
            }
            
            #web-box {
                width: 20%;
            }
            
            #mini-abt {
                width: 60%;
                border: 1.5px solid #e4cbbe;
                                background-color:#fffff1;
            }
            
            #right1 {
                width: 20%;
            }
            
            #linkme {
                                width:40%;
                height:100%;
                background-color:#fffff1;
            }
            
            #updates {
                width:40%;
                height:100%;
                background-color:#fffff1;
            }
            
            .inner {
                height: auto;
            }
            
            p.sub {
                top: 20px;
                right: 20px;
            }
        }


.click-heart {
    position: fixed;
    pointer-events: none;
    z-index: 9999;

    font-size: 20px;
    color: #f7b7c8;

    animation: heartFloat 1s ease-out forwards;
}

@keyframes heartFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -80px) scale(1.4);
    }
}



    