:root{
  --gap: 16px;
  --side-min: 260px;
  --mid-min: 380px;
  --wrap-max: 1200px;
}

body::before {
  content: "";
  position: fixed;         
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.8) 0%,  
    rgba(255,255,255,0.0) 30%   
  );
  pointer-events: none;      
  z-index: -1;                
}
body{
  margin:0;
  padding: 0 20px 20px;
  background: url('/images/ripples.jpg') center / cover no-repeat;
}

p{
  font-family:'DotGothic16', sans-serif;
  font-size: 14px;
  line-height: 25px;
  color:#10011c;
  margin:0;
}


.header-box{
  position: relative;
  width: 100%;
  height: clamp(140px, 17.857vw, 360px);
  background: url('/images/flower-header.jpg') center / cover no-repeat;
  pointer-events: none; 
  z-index: 0;
}
@supports (aspect-ratio: 1 / 1){
  .header-box{ height:auto; aspect-ratio: 28 / 5; }
}

.image-gradient{
  position:absolute; 
  inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255, 255, 255, 0.866));
  z-index:1;
}

.site-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
}

.site-name {
  margin: 0;
  font-family: 'Coral Pixels', cursive;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 5vw, 56px);
  color: #37012e;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.deco {
  height: clamp(18px, 3vw, 40px);
  width: auto;
  display: block;
  object-fit: contain;
}

.deco-right {
  transform: scaleX(-1); 
}
.heading-text-container{
  position: relative;
  z-index:2;
  max-width: 1000px;
  padding-top: 80px;
  padding-left: 20%;
  display:flex;
  align-items: flex-end;   
  justify-content: flex-end; 
}


.header-image {
  width:70px;
  height:70px;
  display:block;
  object-fit:cover;
        
}


.navbar{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  height: 47px;
  max-width: max-content;

  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 0px;
  background-color: transparent;
  font-size: 14px;
  line-height: 1;
  border: 6px double #e7bed0;
  border-radius: 15px;

  position: relative;
  overflow: visible;
  z-index: 0;                  
}

.nav-inner{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 80px;
}

.decor {
  position: absolute; 
  z-index: 2;
  padding-left: -200px;    
}


.decor-1 {
  height: 128px;
  top: -40px;
  left: -19px;
  width: 100px; 
}

.decor-2 {
  height: 128px;
  top: -40px;
  right: -19px;
  width: 100px; 
}


.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 20px;
  line-height: 1;
  height: 100%;

  text-decoration: none;
  font-family: 'DotGothic16', sans-serif;
  color: rgb(255, 254, 254);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  line-height: 50px; 

  transition: transform 0.2s ease, color 0.2s ease;
}

.home-link {
  background-image: url('/images/rock3.png');
  background-size: 135%;
  padding-left: 25px;
}
.media-link {
  background-image: url('/images/rock5.png');
  background-size: 130%;
  padding-left: 25px;
}
.blog-link {
  background-image: url('/images/rock1.png');
  background-size: 170%;
}
.gallery-link {
  background-image: url('/images/rock2.png');
  background-size: 115%;
  padding-left: 25px;
}

.about-link {
  background-image: url('/images/shell1.png');
  background-size: 135%;
}

.nav-link:hover {
  color: rgba(239, 195, 230, 0.864);
  transform: scale(1.10) rotate(-1deg);
}

/******************************************************************/

.wrapper{
  max-width: var(--wrap-max);
  margin: 24px auto;
  padding: var(--gap);
}

.page{
  display:grid;
  gap: 12px;
  grid-template-columns:
    minmax(var(--side-min), 1fr)
    minmax(var(--mid-min), 2fr)
    minmax(var(--side-min), 1fr);
  grid-template-areas: "left middle right";
  align-items:start;
}

.left-container   { grid-area:left; }
.middle-container { grid-area:middle; }
.right-container  { grid-area:right; }

.left-container,.middle-container,.right-container{
  display:flex; 
  flex-direction:column; 
  align-items:center;
  gap: 8px;
  padding:12px;
  min-width:0;
}

.card{
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff9a;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  max-width: 900px; 
}



.welcome-title,.profile-link {
  display: inline-block;   
  margin-right: 0px;     
}

.profile-link {
  font-size: 1em;
  color: #c77c3e;
  text-decoration: none;
  margin-left: 38%;
}

.profile-link:hover {
  text-decoration: underline;
}

/* ----------------------------- marquee stuff -------------------------------- */
.marquee-container {
  width: 100%;            
  height: 40px;          
  overflow: hidden;       
  border-radius: 6px;     
  background: #f9f9f900;    
  display: flex;           
  align-items: center;
}

.marquee-container img {
  margin-right: 5px;
}

.marquee-container marquee {
  display: block;     
  width: 100%;
  min-width: 0;
  font-family: "DotGothic16", sans-serif;
  font-size: 1rem;
  color: #333;
  white-space: nowrap;
  margin: 0;
  box-sizing: border-box;
}

/* ----------------------------- middle card -------------------------------- */
.card-middle{
  width:100%;
  max-width:900px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:url('/images/gate-heart.jpg');
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  gap:10px;
  align-items:stretch;
}

/* ============= UPDATES COLUMN ============= */
.card-middle .update-box{
  width:50%;
  max-width:none;
  box-sizing:border-box;
  display:flex;
}
.update-text{
  display:flex;
  flex-direction:column;
  border:2px solid rgb(226,218,218);
  border-radius:10px;
  padding:10px 12px;
  flex:1;
  background-color:rgba(255,255,255,0.86);
}
.update-text h2{
  font-size:1.4rem;
  margin:0 0 8px;
  text-align:end;
  font-family:"DotGothic16", sans-serif;
  border:2px solid rgba(255,140,0,0.615);
  border-top:#0e0e0e; border-left:#0e0e0e; border-right:#0e0e0e;
}
.updates-scroll{ max-height:170px; overflow-y:auto; }
.updates-list{
  margin:0; padding-left:1.25em; line-height:1.3;
  font-family:"DotGothic16", sans-serif;
}
.updates-list li::marker{ color:#0e0e0e; font-size:1.05em; }

/* ============= CURRENTLY COLUMN ============= */
.card-middle .currently-box{
  width:50%;
  max-width:none;
  min-width:0;                    
  box-sizing:border-box;
  display:flex;
}
.currently-text{
  display:flex;
  flex-direction:column;
  border:2px solid rgb(226,218,218);
  border-radius:10px;
  padding:10px 12px;
  flex:1;
  background-color:rgba(255,255,255,0.86);

}
.currently-text h2{
  font-size:1.4rem;
  margin:0 0 8px;
  text-align:end;
  font-family:"DotGothic16", sans-serif;
  border:2px solid rgba(255,140,0,0.615);
  border-top:#0e0e0e; border-left:#0e0e0e; border-right:#0e0e0e;
}


.table{                     
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;               
}


.td-left{
  width:110px; min-width:110px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.td-right{
  padding-left:3px;                
  display:flex; align-items:flex-start; gap: 20px;
  white-space:normal; vertical-align:top;
  word-break:break-word; 
}

.td-right.td-stack{
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.td-right .song-text{
  margin:0;
  flex:1 1 auto;              
  min-width:0;                
  overflow-wrap:break-word;                  
}
#song{
  font-size: 13px;
  line-height: 1;
}

#song-art{
  flex:0 0 80px;             
  width:80px;
  height:80px;
  object-fit:cover;
  margin-left:0;
  border-radius:2px;
}



table{ font-family:'DotGothic16'; }


.third-mid-container {
  position: relative;           
  overflow: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;        
  gap: 12px;
  min-height: 280px;          
  z-index: 0;
  height: 309px;
  margin-top: -7px;
}

.third-mid-container .bg-video{
  position: absolute;
  inset: 0;                
  width: 100%;
  height: 100%;
  object-fit: cover;       
  pointer-events: none;   
  z-index: 0;        
  border-radius: 3px;       
}

.third-mid-container > *:not(.bg-video){
  position: relative;
  z-index: 1;
}
.micro-blog{
  color:#fff;
  width:100%;
  background:rgba(0,0,0,.692);
  padding:10px;
  box-sizing:border-box;
  height:50%;            
  display:flex;
  flex-direction:column;
  min-height:0;
  border: 2px inset gray;
}
.micro-blog h5{
  margin-top: -8px;
}
.post 
{ font-family: DotGothic16, sans-serif; 
}
.username { 
  font-weight: 700; margin-right: .4ch; color: #e87b22;
 }
.message {
  color: white;
   margin-right: .6ch; 
}
.ago {
  color: #f048b5;
  font-size: .85em;
}
.dots{
  display:inline-flex;
  gap:1px;               
  vertical-align:baseline; 
}
.dots span{
  display:inline-block;
  transform-origin:50% 100%;
  animation: dot-bounce 1250ms ease-in-out infinite;
  will-change: transform;
}
.dots span:nth-child(2){ animation-delay: .15s; }
.dots span:nth-child(3){ animation-delay: .30s; }

@keyframes dot-bounce{
  0%, 80%, 100% { transform: translateY(0); }
  40%          { transform: translateY(-3px); }
}


.micro-blog-body{
  flex:1 1 auto;
  min-height:0;             
  overflow-y:auto;
  margin-top: -12px;
  text-align: start;
}



.widget-section{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: -70px;
}


.widget{
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 12px;
}

.word-of-day {
  margin-top: -11px;
  text-align: center;
}

.word-of-day b {
  font-family: "DotGothic16", serif;
  font-size: 13px;
  font-weight: 600;
  color: #222;
}

.word-of-day a {
  display: inline-block;
  margin-top: 4px;
  font-size: 16px;
  color: teal;
  text-decoration: none;
}

.word-of-day a:hover {
  text-decoration: underline;
  color: rgb(229, 142, 187);
}
.widget .gallery{
background: url(/images/aquarium.jpg) center no-repeat;
}



.guestbook{
  padding-left: 7%;
  font-family: "DotGothic16";

}

.widget .gallery-scroll{
  display:flex;
  flex-direction:column;
  min-height:0;
  margin-top: 10px;

}

.widget .box-title{
  margin-top: -10px;
  font-family: "DotGothic16";

}

.widget .gallery-scroll{
  height: 100px;             
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: -17px;
  margin-bottom: -11px;
}

.widget .gallery-scroll img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;              
  object-fit:unset;       
}


/* ----------------------------- end middle card -------------------------------- */
/* ----------------------------- right card -------------------------------- */
.right-container .card{ 
  background-color:#41541b55; 
  max-width:300px; 
}
.right-container .card.gif{

   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 9px;
  width: 100%;
  max-width: 900px; 
}

#statuscafe{ 
  border-radius: 8px;
  padding:.2em; 
  background-color:#fff;
  border:2px solid #fbf9f8; 
}
#statuscafe-username{ margin-bottom:.5em; 
color: #000;
font-weight: 700;
font-family: "DotGothic16", sans-serif;
font-size: small;
}

#statuscafe-username:hover{
  cursor: pointer;  
  color: #c77c3e;
}
#statuscafe-content{ margin:0 1em .5em; }




/* ----------------------------- slideshow -------------------------------- */
.card--media{ 
  padding: 2px 12px; 
  overflow:hidden; 
  background-color:#41541b55; 
}

.note-stack{ 
  width:100%; 
  margin-inline:auto; 
}
.note-card{
  position: relative;
  width: clamp(450px, 70%, 900px);  
  margin: 0 auto;
  margin-top: -42px; 
  margin-left: -87.8px;
}
.note-bg{ 
  display:block; 
  width:100%; 
  height:auto; 
  pointer-events:none; 
}

.ss-window{
  position:absolute;
  top: 32.6%; left: 23.4%; 
  width: 53.1%; height: 46%;
  overflow:hidden; 
  border-radius:2px; 
  border:1.5px inset #dda2c7a4; 
  z-index:2;
}

.image-ss{ 
  width:100%; height:100%; 
  display:flex; 
  animation: slideX 28s 
  infinite ease-in-out; 
}

.image-ss img{ 
  flex:0 0 100%; 
  width:100%; height:100%; 
  object-fit:cover; 
  object-position:center; 
}

.note-caption{ 
  margin:12px; 
  margin-top:-50px; 
  font-size:.95rem; 
  text-align:center; 
  opacity:.85; 
  color: rgb(255, 255, 255); 
}
.note-caption-top{ 
  margin-top:12px;
  margin-bottom:8px; 
  font-size:large; 
  text-align:center; 
  font-weight:700; }

.h-box{ 
  text-align:center; 
  font-size:large; 
  font-weight:700; 
  margin-bottom:12px; 
}
/* ----------------------------- music box -------------------------------- */
.window{
  background:var(--bg);
  padding:5px;
  box-shadow:0 0 10px 1px #cfaa80cf;
  margin-bottom: 20px;
  border-radius: 10px;
  background-color: #ffffff;
}
.title-bar{
  background: #fba82b67;
  padding:3px 2px 3px 3px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius: 8px;
}
.title-bar-text{
  color:#b04600e0;
  letter-spacing:0;
  margin-right:24px;
  font-family:DotGothic16, sans-serif;
  font-size:1.0rem
}
.title-bar-controls{display:flex;}

.title-bar-controls span{
  display:block;
  min-height:12px;
  min-width:12px;
  padding:0;
  cursor:pointer;
  background:#c0c0c0c6;
  box-shadow:var(--box-normal);
  margin-right:2px
}
.title-bar-controls span:last-child{
  margin-right:0
}
.title-bar-controls span:active{
  box-shadow:inset -1px -1px #eee, 
  inset 1px 1px var(--vamp), 
  inset -2px -2px var(--soft), 
  inset 2px 2px var(--grey)
}
.window-body{
  text-align:center;
  margin:8px}
  
.flex{display:flex}

.musicplayer{
  border-width:2px 0 0 0;
  width:160px
}
.songtitlewindow{
  background-color:#eee;
  box-shadow:inset -1px -1px #eee, inset 1px 1px var(--grey),
             inset -2px -2px var(--soft), inset 2px 2px var(--vamp);
  height:22px;
  width:100%;
  overflow:hidden;
  margin-left:5px
}
.songtitle{
  font-family: "DotGothic16", sans-serif;
  padding:2px;
  width: 97%;
  display:block;
  line-height:1em
}
.controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:8px 5px 0;
  background-color:transparent;
  text-align:center;
  width:100%;
  position:relative;
  bottom:10px
}

.player-btn{
  min-width:40px;
  min-height:30px;
  border-radius: 8px;
  border:1px outset white;
  cursor: pointer;
  background-color: #62605f33;
}
.controls img{
  height:18px;
  width:18px
}

.volume-slider{
  display: flex;
  max-width: 37%;
  margin-left: -20px;

}
.volume-control{
  display:flex;
  justify-content:space-evenly;
  padding:14px;
  width:105%
}
.current-volume{
  padding-right:5px;
  font-family: "DotGothic16", sans-serif;
}
.total-volume{
  padding-left: 5px;
  font-family: "DotGothic16", sans-serif;
}

#image-style{
  background:transparent;
  width:99px;
  height:99px;
  padding:2px;
  box-shadow:inset -1px -1px #eee, inset 1px 1px var(--grey),
             inset -2px -2px var(--soft), inset 2px 2px var(--vamp);
  pointer-events:none
}
.ic{
  margin:0 auto;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
/*----------------------------- end of music box -------------------------------- */




@keyframes slideX{
  0%,14%   { transform: translateX(0%); }
  18%,32%  { transform: translateX(-100%); }
  36%,50%  { transform: translateX(-200%); }
  54%,68%  { transform: translateX(-300%); }
  72%,86%  { transform: translateX(-400%); }
  90%,100% { transform: translateX(-500%); }
}


@media (max-width: 1024px){
  .page{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "middle middle"
      "left   right";
  }
  .navbar, .nav-inner{ gap: 28px; }
}

@media (max-width: 720px){
  .page{
    grid-template-columns: 1fr;
    grid-template-areas:
      "middle"
      "left"
      "right";
  }
  .navbar, .nav-inner{ gap: 16px; }
  .right-container .card{ max-width: 100%; } 
}

@media (max-width: 640px){
  .card .update-box{ width: 100%; }
}


@media (max-width: 600px){
  .third-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .currently-box .table{
    table-layout: auto; 
  }

  .currently-box .td-left{
    width: 40%;        
    min-width: 0;
    white-space: nowrap;
    padding-right: 8px;
  }
  .currently-box .td-right{
    width: 60%;
    min-width: 0;     
  }

  .currently-box .td-right.td-stack{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  #song-art{
    width: 44px;
    height: 44px;
    flex: 0 0 auto;     
  }
}

@media (max-width: 420px){
  .deco { height: 20px; }
}


@media (max-width: 420px){
  .wrapper{ padding: 8px; }
  .navbar{ padding: 4px 8px; }
  .nav-link{ padding: 6px 12px; }
}


@media (min-width: 1200px){
  .ss-window{
    top: 32%;
    left: 23%;
    width: 54%;
    height: 46%;
  }
}

@media (max-width: 900px){
  .third-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


@media (max-width: 560px){
  .currently-text{
    max-height: 250px;            
    overflow-y: auto;           
    overflow-x: auto;        
    -webkit-overflow-scrolling: touch; 
  }
}