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

html {
    font-size: 85%;
}
.intro-text p{
    margin-bottom: 6px;
      line-height: 1.4;
      
   
    color:#d95a97;
}

.intro-flex{
    display:flex;
    gap:20px;
    align-items:flex-start;
}


body{

    background:
    repeating-linear-gradient(
        90deg,
        #ffe8f1 0px,
        #ffe8f1 14px,
        #fff 14px,
        #fff 18px
    );

    font-family:Verdana,sans-serif;
    color:#6c5f5f;

    padding:20px;
}

.intro-top-img {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto 10px 0;
}

/* OUTER FRAME */

.site{

    max-width:1000px;
    width:100%;
    margin:auto;

    background:#fffafc;
    border:4px solid #d8c7cf;

    box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #efd6df;
}

.main-flower {
  max-width: 100%;
    width: 320px;
    height: auto;
    display: block;
    margin-right: auto;
}

/* HEADER */

.banner{

    height:170px;

    background-image:
    url("https://i.pinimg.com/736x/1b/9f/d3/1b9fd3cc6ad628ca648e9d1ba2f1c817.jpg");

    background-size:cover;
    background-position:center 5%;

    position:relative;

    border-bottom:none;
}

.banner-overlay{

    width:100%;
    height:100%;

    display:flex;
    align-items:flex-end;

    padding-left:55px;
    padding-bottom:28px;

    background:
    linear-gradient(
        to top,
        rgba(255,245,250,.25),
        rgba(255,245,250,0)
    );
}

.banner h1{

    font-family:
    Georgia,
    "Times New Roman",
    serif;

    font-size:72px;

    font-weight:normal;

    color:#f4a4c4;

    letter-spacing:1px;

    text-shadow:
    2px 2px 0 #ffffff,
    4px 4px 8px rgba(0,0,0,.08);
}

.lace-divider{

    height:35px;

    background-image:
    url("https://i.pinimg.com/736x/01/5b/80/015b808d281aa6e8e06545d246716375.jpg");

    background-repeat:repeat-x;

    background-size:auto 30px;

    border-top:
    2px solid #f5d8e4;

    border-bottom:
    1px solid #f5d8e4;
}
.logo{
    margin:0;
}

.logo img{
    height:10px;
}
.logo-stack{
    display:flex;
    justify-content:center;
    margin-top:10px;
}
.main-logo {
    max-width: 100%;
    width: 200px;
    height: auto;
    display: block;

}

/* TOP STRIP */

.topbar{

    height:35;

    background:
    linear-gradient(
        #f7d8e7,
        #f0cddd
    );

    border-bottom:1px solid #d7c6ce;
}

/* MAIN LAYOUT */

.layout{

    display:grid;

    grid-template-columns:
    180px
    1fr
    180px;

    gap:10px;

    padding:10px;

}


.center {
    min-width: 0;
}

/* SIDEBARS */

.section-title{

    background:#ffe1eb;

    color:#ff84b7;

    text-align:center;

    font-size:17px;
    font-weight:bold;

    padding:8px;

    border:1px solid #decfd6;
}

.green{
    background:#edf6e5;
}

.menu{

    border:
    1px solid #decfd6;

    margin-bottom:15px;
}

.menu a {
    display:block;
    padding:12px 14px;
    text-decoration:none;
    color:#5f8fdb;
    border-bottom:1px solid #d8d0b5;
}

.menu a:nth-child(odd){
    background:#dff0d8;
}

.menu a:nth-child(even){
    background:#eaf7e5;
}
.greenmenu a{

    background:#dff0d8;
}
.menu {
    overflow: hidden;
    border-radius: 6px;
}

.greenmenu a:nth-child(even){

    background:#eaf7e5;
}

/* CONTENT */

.content-box{

    background:#fff;

    border:1px solid #d9cdd2;

    border-radius:12px;

    overflow:hidden;

    margin-bottom:12px;
}

.content-title{

    background:
    linear-gradient(
        to right,
        #ffe6ef,
        #f7edf9
    );

    color:#ff83b7;

    font-weight:bold;

    padding:10px 14px;

    border-bottom:
    1px solid #ddd;
}

.content-body {
    padding:15px;
    display:flex;
    justify-content:space-between;
    gap:15px;
     align-items: flex-start;
}
     .intro-text {
    flex: 1;
    max-width: 420px;
}


/* THIS is the important fix */
.content-body.single {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #d89ca4;
}
  .lily {
    color: #9bbf8f;


}

.seapool {
    color: #ffd700;
}
.senpai {
   color:  #d88a8a;
    text-shadow: 0 0 3px rgba(216, 138, 138, 0.4);
}
.content-body h2{

    font-size:80px;

    color:#ef89ba;

    font-family:Georgia,serif;

    margin-bottom:10px;
}

.pudding { width: 90px; height: 90px; border-radius: 10%; object-fit: cover; } 

.pudding-text { font-size: 10px; color: #ff7aa8; text-align: center; font-family: Verdana, sans-serif; }

.pudding-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
     width: 130px;
    flex-shrink: 0;
}


/* LOVE BANNER */

.love-banner {
    height: 100px;
    

    background-image: url("https://i.pinimg.com/736x/1b/db/a3/1bdba3f5a6a29d4b0b30d900c48c0d4d.jpg"); /* upload it to Neocities */
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #d9cdd2;
    border-radius: 10px;

    margin-bottom: 12px;
    
     position: relative;
    overflow: hidden;
}
    
   .love-banner::before {
    content: "";
    position: absolute;
    inset: 0;

}

.love-banner-text {
    background: rgba(255,255,255,0.0);
    padding: 12px 18px;
    border-radius: 10px;

    color: #FFA1B1;
    font-size: 15px;
}


/* WIDGETS */

.widget{

    background:#fff;

    border:1px solid #d9cdd2;

    border-radius:12px;

    overflow:hidden;

    margin-bottom:10px;
}

.widget-title{

    background:#f8efc7;

    text-align:center;
    
    font-size: 13px;

    padding:10px;

    color:#f19cc1;

    font-weight:bold;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    padding: 10px;
}

/* cells */
.calendar div {
    text-align: center;
    padding: 6px;
    font-size: 10px;

    background: #fff;
    border: 1px solid #f3cfe0;
    border-radius: 4px;

    transition: 0.2s;
}

/* hover effect */
.calendar div:hover {
    transform: scale(1.1);
    background: #ffeaf3;
}

/* weekday labels */
.day-name {
    background: #ffe6ef;
    font-weight: bold;
    color: #ff7aa8;
}

/* today */
.calendar .today {
    background: #ffd1e6;
    border: 2px solid #ff7aa8;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(255, 122, 168, 0.5);
}

/* weekends */
.calendar .weekend {
    color: #ff7aa8;
    position: relative;
}

/* tiny heart for weekends */

.profile{

    text-align:center;

    padding:15px;
}

.profile img{

    width:140px;

    border:4px solid #ffe0eb;

    margin-bottom:10px;
}

.profile button{

    border:none;

    background:#cfe5f4;

    color:white;

    padding:12px 24px;

    border-radius:10px;

    cursor:pointer;
}
.tiny-box{
  margin-top: 10px; 
    width:150px;
    margin-left: auto;
    margin-right: auto;
}

.tiny-content{
    padding:10px;
    text-align:center;
    font-size:12px;
    color:#d95a97;
}
::selection {
  background-color: #f7d0e6; /* highlight color */
  color:#ed8cc1;           /* selected text color */
}

/* Firefox support */
::-moz-selection {
  background-color: #f7d0e6;
  color: #ed8cc1;
}

.diary-link-wrap {
   height: 40px;
    display: flex;
    align-items: center;
    gap: 3px;

    padding: 0px 10px;
     box-sizing: border-box;

    background: #dff0d8; /* same as menu green */
    border-bottom: 1px solid #d8d0b5;

    color:#5f8fdb;

}

.diary-sticker {
    width: 25px;
    height: 25px;

}
body {
    cursor: url("https://www.rw-designer.com/cursor-view/94013.png"), auto;
}

a:hover {
    cursor: url("https://www.rw-designer.com/cursor-view/94011.png"), pointer;
}
/* 🎀 MUSIC BOX */
.music-box {
    position: fixed;
    bottom: 18px;
    right: 18px;

    width: 160px;

    background: #fffafc;
    border: 2px solid #d8c7cf;
    border-radius: 14px;

    box-shadow:
        0 0 0 2px #fff,
        0 0 10px rgba(255, 170, 200, 0.3);

    padding: 10px;

    font-family: Verdana, sans-serif;
    z-index: 9999;
}

.music-title {
    font-size: 11px;
    color: #ff7aa8;
    text-align: center;
    margin-bottom: 6px;
    font-weight: bold;
}

.music-track {
    font-size: 10px;
    color: #d95a97;
    text-align: center;
    margin-bottom: 8px;
}

.music-btn {
    width: 100%;
    padding: 6px;

    background: linear-gradient(#ffe1eb, #f8d6e6);
    border: 1px solid #d9cdd2;
    border-radius: 10px;

    cursor: pointer;

    color: #ff7aa8;
    font-size: 12px;
    font-family: Verdana;

    transition: 0.2s;
}

.music-btn:hover {
    transform: scale(1.05);
    background: #ffeaf3;
}