i kinda fw this 

kinda debating this 


  <meta name="viewport" content="width=900" ,="" initial-scale="0.99&quot;">
  <title>diary</title>
  
  <style>
    /* BASIC PAGE SETUP */
    body {
      background: url('https://c.tenor.com/_EbNsejinp4AAAAd/tenor.gif') no-repeat center center fixed;
      background-size: cover;
      font-family: 'MS UI Gothic', Arial, sans-serif;
      color: #5e5e5e;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }

    /* LOADING SCREEN */
    .loading-screen {
      position: fixed;
      width: 100%;
      height: 100%;
      background: url('https://c.tenor.com/_XPI_9MmfF8AAAAd/tenor.gif') center center / cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 1s ease-in-out;
    }

    /* Loading text animation */
    .loading-text {
      font-size: 24px;
      color: white;
      font-weight: bold;
      font-family: 'MS UI Gothic', Arial, sans-serif;
      text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
      animation: blink 1.5s infinite alternate;
    }

    @keyframes blink {
      0% { opacity: 1; }
      100% { opacity: 0.6; }
    }

    /* HIDE CONTENT BEFORE LOADING */
    .content {
      display: none;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    
content="width=device-width, initial-scale=1.0">
  <title> portofolio.exe </title>
  <style>
    /* BASIC PAGE SETUP */
    body {
      background: url('https://c.tenor.com/_EbNsejinp4AAAAd/tenor.gif') no-repeat center center fixed;
      background-size: cover;
      font-family: 'MS UI Gothic', Arial, sans-serif;
      color: #5e5e5e;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }
    a { text-decoration: none; }
      }
      80% {
        transform: translate(-50%, -50%) rotate(360deg);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
        opacity: 0;
      }
    }
    
    /* TOP NAVIGATION (Lucky-style) */
    .top-nav {
      width: 100%;
      background: #FFCCD5; /* soft pink */
      padding: 8px 0;
      text-align: center;
      border-bottom: 2px solid pink;
      font-size: 16px;
    }
    .top-nav a {
      color: #F0A2C7;
      margin: 0 12px;
      font-weight: bold;
      transition: color 0.3s;
    }
    .top-nav a:hover { color: hotpink; }
    
    /* MAIN LINKS (Big clickable links) */
    .main-links {
      text-align: center;
      margin: 10px 0;
    }
    .main-links a {
      display: inline-block;
      background: #fff;
      color: #F0A2C7;
      font-size: 18px;
      font-weight: bold;
      padding: 8px 14px;
      margin: 5px 8px;
      border: 2px solid pink;
      border-radius: 10px;
      transition: all 0.3s;
    }
    .main-links a:hover {
      background: #F0A2C7;
      color: #fff;
      border-color: hotpink;
    }
    
.banner {
  background: linear-gradient(to right, #5e041c, #b56b72, #9e728d); /* Deep wine to soft dusty pink */
  color: #f8f0f2; /* Soft pearl lace white */
  font-family: 'Georgia', serif;
  text-transform: lowercase;
  font-style: italic;
  text-align: center;
  padding: 14px 44px;
  border-radius: 15px;
  border: 3px solid #4f0e19;
  box-shadow: 0px 0px 12px rgba(255, 218, 224, 0.5);
  position: relative;
  z-index: 2;
}
   .banner h1 {
      font-size: 28px;
      font-family: Verdana, sans-serif;
      color:#ffab24;
      text-shadow: 2px 2px white;
      margin: 0;
    }
    .banner img {
      position: relative;
      right: 10px;
      height: 30px;
  
    }
    
/* 🌸 LACE OVERLAY EFFECT */
.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://as1.ftcdn.net/jpg/00/57/43/36/1000_F_57433677_YzgRJK9xSraobQgdGvn5p0ksSZfH8EUW.webp'); /* Replace with your uploaded URL */
  background-size: cover;
  opacity: 0.2; /* Adjust for subtle effect */
  border-radius: 15px;
  z-index: -3; /* Lace stays below text */
}

    /* STAMP CONTAINER - ORGANIZED IN ROWS */
    .stamps {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      margin-top: 20px;
    }
    .stamp-row {
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    .stamp-row img {
      border-radius: 5px;
    }
    .stamp-row.large img {
      width: 120px;
    }
    .stamp-row.medium img {
      width: 100px;
    }
    .stamp-row.small img {
      width: 75px;
    }
    .stamp-row.tiny img {
      width: 50px;
    }
    /* MAIN LAYOUT GRID */
    .layout {
      display: grid;
      grid-template-columns: 250px 1fr 250px;
      gap: 15px;
      width: 850px;
      margin: 20px auto;
    }
       /* IMAGE CONTAINER (Ensures Centering) */
.image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

/* COMPUTER SCREEN IMAGE (Make it Bigger) */
.computer-screen {
	position: relative;
    width: 500%; /* Make sure it fills the column */
    max-width: 500px; /* Adjust this if you want it even bigger */
    border-radius: 10px;
    margin-left: -350px
}

/* STAMPS OVERLAY (Perfectly Aligned on Screen) */
.stamps-overlay {
    position: absolute;
    top: 37%; /* Adjust to position on the screen */
    left: 42%;
    transform: translate(-90%, -20%);
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Two rows of 3 */
    gap: 5px;
}

/* STAMP SIZE */
.stamps-overlay img {
    width: 30px; /* Adjust stamp size */
    height: auto;
    transition: transform 0.2s ease-in-out;
}

.stamps-overlay img:hover {
    transform: scale(1.1);
}
/* Floating Stamps (Align Between Middle Column & Right Column) */
.floating-stamps {
    position: absolute;
    top: 83%; /* Move it further down */
    right: 39%; /* Adjust horizontal position */
    transform: translate(0, -50%); /* Reduce upward pull */
    display: flex;
    flex-direction: column; /* Stamps are stacked */
    gap: 8px; /* Adds space between stamps */
}

.floating-stamps img {
    width: 100px; /* Adjust stamp size */
    height: 87px;
    transition: transform 0.2s ease-in-out;
    margin: -9px;
}

.floating-stamps img:hover {
    transform: scale(1.1); /* Slight hover effect */
}
       /* Stamp Under Computer Screen */
.stamp-under-screen {
    display: block;
    margin: 8px auto 0 auto; /* Adjust spacing */
    width: 50px; /* Adjust size as needed */
    height: auto;
    border-radius: 5px;
}

    /* LEFT COLUMN */
    .left-column {
      display: flex;
      height: 435px;
      width: 40px:
      flex-direction: column;
      gap: 10px;
    }
    .polaroid {
      background: #fff;
      padding: 10px;
      border: 10px solid #fff;
      border-bottom-width: 60px;
      border-radius: 10px;
      box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
      text-align: center;
    }
    .polaroid img {
      width: 100%;
      border-radius: 5px;
    }
    .nav-box {
      background: #fff;
      padding: 10px;
      border: 2px solid pink;
      border-radius: 10px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
    }
    .nav-box a {
      color: #F0A2C7;
      margin: 5px 0;
      display: block;
    }
    
.middle-column {
    background: rgba(50, 50, 50, 0.5);
    padding: 5px 15px; /* Minimal padding */
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    height: auto; /* Allows dynamic height based on content */
    max-height: 400px; /* Set a strict maximum height */
  

}
/* 🎮 RPG PROFILE - TEXT NOW SPARKLES */
.rpg-profile p,
.rpg-profile span {
  color: #ffffff !important; /* PURE WHITE */
  font-weight: bold;
  text-shadow: 
    0px 0px 5px rgba(255, 255, 255, 1), 
    0px 0px 10px rgba(255, 255, 255, 0.9), 
    0px 0px 15px rgba(255, 255, 255, 0.7), 
    2px 2px 20px rgba(255, 255, 255, 0.5); /* Soft glow */
  font-size: 14px;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 10 !important; /* Keeps it above overlays */

  /* ✨ SPARKLE ANIMATION */
  animation: sparkle 2s infinite alternate;
}

/* ✨ SPARKLE EFFECT */
@keyframes sparkle {
  0% {
    text-shadow: 
      0px 0px 5px rgba(255, 255, 255, 1), 
      0px 0px 10px rgba(255, 255, 255, 0.9), 
      0px 0px 15px rgba(255, 255, 255, 0.7), 
      2px 2px 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    text-shadow: 
      0px 0px 8px rgba(255, 255, 255, 1), 
      0px 0px 14px rgba(255, 255, 255, 0.9), 
      0px 0px 20px rgba(255, 255, 255, 0.8), 
      3px 3px 25px rgba(255, 255, 255, 0.6);
  }
}

/* 🌟 EXTRA: MAKES USERNAME + LVL STAND OUT EVEN MORE */
.rpg-profile p:nth-child(1), /* User */
.rpg-profile p:nth-child(2), /* Lvl */
.rpg-profile p:nth-child(4)  /* HP */
{
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 
    0px 0px 10px rgba(255, 255, 255, 1), 
    0px 0px 15px rgba(255, 255, 255, 0.9), 
    0px 0px 20px rgba(255, 255, 255, 0.8), 
    4px 4px 25px rgba(255, 255, 255, 0.7);
}

/* ✦ Status Text - Even Brighter Glow */
.rpg-profile-status {
  font-size: 12px;
  color: #ffffff !important;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
  position: relative;
  z-index: 10 !important;
}

/* 🎀 RPG PROFILE OVERLAY - TEXT STAYS CLEAR */
.rpg-profile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://i.pinimg.com/originals/e3/23/fb/e323fbc000cc352f0bda350701e9ee49.gif");
  background-size: cover;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}

/* 🏆 XP BAR - FIXED CENTERING */
.xp-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
  width: 100%;
}

/* 📜 INVENTORY - KEEPS IT INSIDE RPG BOX */
.inventory {
  background: rgba(245, 240, 245, 0.9); /* Pale pink-grey */
  padding: 10px 15px;
  border: 2px solid #d3a6b0; /* Soft mauve */
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  color: #36010b;
  text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.7);
  width: 90%; /* 🔥 Ensures it fits in RPG box */
  margin: 15px auto 0 auto; /* 🔥 Pushes it down while staying centered */
  z-index: 11;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.2), 
              0px 0px 10px rgba(255, 219, 172, 0.2);
  position: relative; /* 🔥 Keeps it inside RPG profile */
}

/* 🔗 INVENTORY ITEMS */
.inventory-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  transition: all 0.2s ease-in-out;
  width: 100%;
  justify-content: center;
}

.inventory-item a {
  text-decoration: none;
  color: #36010b;
  font-weight: bold;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease-in-out;
}

.inventory-item a:hover {
  color: #ff75a0;
  transform: scale(1.02);
}

/* 📌 TINY ICONS FOR INVENTORY */
.inventory-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
    
    /* NEKO CAT (Floating Cat Icon) */
    .neko {
      position: fixed;
      bottom: 10px;
      right: 10px;
      width: 50px;
      z-index: 1000;
    }
    
    /* RESPONSIVE STYLES */
    @media (max-width: 768px) {
      .layout {
        grid-template-columns: 1fr;
        width: 90%;
      }
      .banner {
        width: 90%;
      }
      .top-nav, .main-links {
        font-size: 14px;
    
    }
   /* Make Everything Scale Down on Smaller Screens */
@media (max-width: 768px) {
    body {
        transform: scale(0.8); /* Shrinks everything to 80% */
        transform-origin: top center;
        width: 125%; /* Prevents layout breaking */
        overflow-x: hidden;
    }

    .layout {
        transform: scale(0.9); /* Slightly zooms out layout */
        width: 120%; /* Ensures content doesn’t break */
    }

    .middle-column,
    .left-column,
    .right-column {
        transform: scale(0.85); /* Keeps the columns looking the same */
        transform-origin: top center;
    }

    .banner {
        transform: scale(0.9);
    }

    .computer-screen {
        max-width: 90%; /* Adjusts screen size */

    }

    .stamps-overlay img {
        width: 80%; /* Ensures stamps don’t overflow */
    }

    .floating-stamps {
        transform: scale(0.9); /* Shrinks the floating stamps but keeps them positioned */
        right: 35%; /* Adjusts for mobile */
    }

    .rpg-profile {
        transform: scale(0.9);
    }

    /* Ensure nothing overflows */
    html, body {
        overflow-x: hidden;
    }

    
  </style>


  <!-- LUCKY THEME BANNER -->
  <div class="banner">
    <h1>welcome to my digital archive! ☆</h1>
    <img src="https://files.catbox.moe/moqz40.gif" alt="Lucky Icon">
  </div>

  <!-- MAIN LINKS -->
  <div class="main-links">
    <a href="artgallery.html">♥ Art Archive.doc</a>
    <a href="pages/snapshots.html">♥ Snapshots.mov</a>
    <a href="pages/diary.html">♥ Diary Log.exe</a>
    <a href="pages/dressup.html">♥ Dress Up.exe</a>
  </div>

  <!-- MAIN LAYOUT GRID -->
<div class="layout">
  
    <!-- LEFT COLUMN: Memory Card & Top Picks (Neatly Combined) -->
    <div class="left-column">
        <div class="polaroid">
            <a href="pages/photos.html">
                <img src="https://64.media.tumblr.com/ec9a373127d6fae3771b19fc343b6845/19ad5a379349e848-10/s1280x1920/21bcee96e5849f14e821b8ab3cdbea62f7b0830d.jpg" alt="Photo Log">
            </a>
            <p><b>my digital camera sd card </b></p>

            <!-- Top Picks (Inside Memory Card Bubble) -->
            <div class="nav-box">
                <p><b>My Top Picks</b></p>
                <a href="artgallery.html">♥ My Favorite Piece</a>
                <a href="#">Other Curation</a>
            </div>
        </div>
    </div>
    
   <!-- MIDDLE COLUMN: Welcome Box (Cute but Clean) -->
    <div class="middle-column">
        <img src="https://files.catbox.moe/cj0vmu.webp" style="display: block; margin: 0 auto 10px auto; max-width: 90px;" alt="Decorative">
        <p style="text-align: center; font-size: 16px; line-height: 1.6; color: #ffcfec; font-family: 'MS UI Gothic', sans-serif;">
            <b style="font-size: 18px; color: #ffffff;">hello! &lt;3 Welcome to my website! 🎀</b> <br>
            this is my little corner of the internet - a curation of everything i love, feel free to look around :) ✧₊˚♡ <br>
        </p>

        <p style="text-align: center; font-size: 14px; font-style: italic; color: #666;">
            (⸝⸝&gt; ᴗ•)
        </p>
<div class="floating-stamps">
    <img src="https://64.media.tumblr.com/4cc368220882244d2ab7cdf27f20092d/f961cbb49008614e-23/s540x810/fabecb1f933b6216dcf020d055133b46c91cc787.pnj" alt="Stamp 1">
    <img src="https://64.media.tumblr.com/99dc7030f2c7cdd98162d0dc3fab55c5/21439244baecd0dc-b3/s400x600/5c7eb5acd3748edbce8bede146e9b93f52da2062.pnj" alt="Stamp 2">
    <img src="https://64.media.tumblr.com/acb130551ef193a2d479f58007b7bfd9/21439244baecd0dc-f4/s540x810/9fa7ef67a61a627bc7be605672ec97980eff26d2.pnj" alt="Stamp 6">
    <img src="https://64.media.tumblr.com/f0968f7f527615c53bc6d9113454c80c/21439244baecd0dc-67/s400x600/dd30cab8154f6d8c9df47b20439c694b3477c54d.pnj" alt="Stamp 7">
    <img src="https://64.media.tumblr.com/e4cc6a24c3207814fb80c03214c70b82/21439244baecd0dc-6e/s540x810/2c3451d3985112cce19905c0247f41f8389b7125.pnj" alt="Stamp 8">
</div>
      
        <p style="text-align: center; margin-top: 4px;">
            <a href="pages/selfie.html" style="color: #fff; font: italic; text-decoration: none; border-bottom: 2px dashed #fff;">
                /saycheese
            </a>
           <!-- COMPUTER SCREEN IMAGE WITH STAMPS OVERLAY -->
    </p><div class="image-container">
        <img src="https://64.media.tumblr.com/00a76240b92afcd3ba3e32faa75d51b7/34edd5adfa942f47-8c/s500x750/cfa402c19dda927e4c92ab4d1829203c7db98d66.jpg" alt="Decorative Image" class="computer-screen">
        
        <!-- STAMPS OVERLAY (On the Screen) -->
        <div class="stamps-overlay">
            <img src="8fce4765480f9.pnj" alt="Stamp 1">
            <img src="https://64.media.tumblr.com/8e8318f5d641ef6af6e2cc573dc76123/2348a1176d29f30f-8d/s400x600/6836ecf74f40f397727788ec9ec226f207c55854.pnj" alt="Stamp 2">
            <img src="https://64.media.tumblr.com/974880b30d665e09866f13c58ec70079/2348a1176d29f30f-ec/s400x600/9fbf3eb4a077cb63ad87c2dee29bd0d030750f3b.pnj" alt="Stamp 3">
            <img src="https://64.media.tumblr.com/e845aab33a279b3be84579c6b20b4af9/2348a1176d29f30f-ad/s400x600/f05a5486be11732f6981058a9b5876d43b749e0a.pnj" alt="Stamp 4">
            <img src="https://64.media.tumblr.com/e192832dabb1bf3a713d00f1b8154a63/2348a1176d29f30f-70/s400x600/0d876ce5b276553722f916aa6782404e0d6822e3.pnj" alt="Stamp 5">
            <img src="https://64.media.tumblr.com/ca7070658de30051bcf2fced76508037/2348a1176d29f30f-09/s400x600/b9e989666e1cb167a0155d8114d8bc519cda9f29.pnj" alt="Stamp 6">
        </div>
    </div>
</div>
       
    
    <!-- STAMP SECTION - Organized by size and category -->
<div class="stamps">
    <!-- Large Favorites Row -->
    <div class="stamp-row large">
        <img src="https://64.media.tumblr.com/9553a23270b2fea42380382c6da19c5d/d75be76f682b65ab-6c/s250x400/9b4b9a9cbbc4caef8c31a462cc999e779035ad76.pnj">
        <img src="https://64.media.tumblr.com/52f300a6c10df13ea187ab402db6b18c/d75be76f682b65ab-d0/s250x400/bd18f4f1ddb1d6120d388259e902a9467a41524b.pnj">

    </div>

    <!-- Medium-Sized Stamps Row -->
    <div class="stamp-row medium">
        <img src="https://64.media.tumblr.com/a93b20899dcfe4d4543764d80e42e3c8/d75be76f682b65ab-a9/s250x400/60130ffc0ba5161d17025550d9a6c0b5adbbcb0e.pnj">
        <img src="https://64.media.tumblr.com/74869174ec41d6b55ff81aaba6ebbc9a/d75be76f682b65ab-9b/s250x400/f336cd71d6bbfcc9a92ee327a1b942526994f853.pnj">
    </div>


  <!-- 📜 RPG PROFILE - Inventory Now Stays Inside -->
<div class="rpg-profile">
    <img src="https://64.media.tumblr.com/709fa1852043a9436d4f8ef783e4905d/c56da754bb72dd66-f0/s2048x3072/318cf56ec3930c6bbe09e31716f9ca145bfcec29.jpg" width="178" alt="RPG Profile">
    
    <p style="font-size: 13px; color: #444; font-weight: bold;">user: <span style="color: #222;">Irina Ratiu</span></p>
    <p style="font-size: 12px; color: #666; text-transform: uppercase;">lvl <span style="color: #c44; font-weight: bold;">18</span></p>

    <p style="font-size: 11px; color: #888; border-top: 1px solid #ddd; padding-top: 4px;">
        HP: <span style="color: #c44; font-weight: bold;"> ♥︎ ♥︎ ♥︎ ♥︎</span>
    </p>

    <!-- 🏆 XP BAR -->
    <div class="xp-container">
      <div class="xp-bar">
        <div class="xp-fill" style="width: 50%;"></div> 
      </div>
    </div>

    <!-- 🎀 INVENTORY - NOW INSIDE RPG BOX -->
    <div class="inventory">
        <p class="inventory-title">Inventory</p>

        <div class="inventory-item">
            <a href="artgallery.html">
                <img src="https://i.pinimg.com/originals/7e/2f/48/7e2f4866e4c367be0f5a6bcfd91612a6.png" class="inventory-icon">  
                Sketchbook
            </a>
        </div>

        <div class="inventory-item">
            <a href="filmroll.html">
                <img src="https://i.pinimg.com/originals/81/1b/8f/811b8fa27823930c90f3bb20efaa18a4.png" class="inventory-icon">  
                Film Roll
            </a>
        </div>

        <div class="inventory-item">
            <a href="diary.html">
                <img src="https://i.pinimg.com/originals/d5/56/56/d55656dc71b3f8859f984c5dff2b00cb.png" class="inventory-icon">  
                Diary
            </a>
        </div>

        <div class="inventory-item">
            <a href="luckycharm.html">
                <img src="https://i.pinimg.com/originals/61/09/d9/6109d9393cfb2cb4146dbafe2df6d856.png" class="inventory-icon">  
                Lucky Charm
            </a>
        </div>
    </div>
</div>
<!-- Small Cute Stamps Row -->
    <div class="stamp-row small">
        <img src="https://64.media.tumblr.com/1305b40bb615981563bed58346f2ae34/4ffca3aa48f34f3a-c7/s100x200/c69a8c6d909b6996e3142a5c3b535113a34eb610.pnj">
        <img src="https://64.media.tumblr.com/e5974dd590ef452bf932d143076d6db6/d593c4acb119b463-91/s100x200/fbc9ac3bf52f3edf74bf51363b8ae558a6fc8c29.pnj">
        <img src="https://64.media.tumblr.com/5bae6309c35ecc65de5044de07c935fb/d593c4acb119b463-83/s100x200/203de8023c3321049caf05c90e0b45ef6ff1acd5.pnj">
    </div>

    <!-- Tiny Text and Extra Stamps Row -->
    <div class="stamp-row tiny">
        <img src="https://64.media.tumblr.com/ea451294fea435bb2ad19d5ebddb7e28/22d0b2d726f99165-02/s100x200/3a7ef31959a4bb4a8004bee85d496f6fba3c04e9.jpg">
        <img src="https://64.media.tumblr.com/51db8b01700c08ff2ec8a18a7bcd8f9a/aa233c22e409450d-23/s75x75_c1/996c32901fa8804d87d6b838600f731a5ed18ddd.gifv">
        <img src="https://64.media.tumblr.com/885689ea299142febe82663b572c8d05/0849fa6899c3a334-6e/s100x200/3d1c5fc1606ffe4c6bd1ecb6d85e35ce7269ec7b.pnj">
        <img src="https://64.media.tumblr.com/ec35dd11b5da7a0b4612617728219e38/bd072ba75273a7ff-fc/s100x200/89e974d6e7b9c93a93a52abbea522f43ccf4bbd1.gifv">
        <img src="https://64.media.tumblr.com/0060da4b4fbedbd687338919a14954a5/e1bd423b1425f262-3d/s100x200/f920aeec912acf6f5e6a519808f6c63ef9adfeea.gifv">
    </div>
</div>

  <!-- NEKO CAT (Cute floating cat icon) -->
  <img class="neko" src="https://webneko.net/img/neko_silver.png" alt="Neko Cat">
  <script src="https://webneko.net/n20171213.js"></script><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style><style type="text/css">#nl{display:none;}</style>
<style>

/* Basic Reset & Cozy Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Courier New', monospace;
}

/* Keeps both sections parallel */
.carousel-box, .youtube-grid {
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ✨ Softer wine red for titles */
.carousel-box h2, .youtube-grid h2 {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 4px;
}

.carousel-box {
   border: 2px solid #904a57;/* Softer pastel wine red border */
  border-radius: 15px;
  padding: 10px;
background: linear-gradient(to right, #9f82b5, #bf7581);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 200%;
  min-height: 100px;
  min-width: 100px;
  position: relative;
  top: -60px;

}
/* 🌸 Soft pastel wine red gradient background */
.carousel-container {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 8px;
  scroll-behavior: smooth;
  max-width: 200%;
  position: relative;
  background: #e8fcff;
}

/* ✅ Moves Next & Prev buttons into the correct column */
.carousel-container {
  display: flex;
  overflow-x: auto;
  gap: ;
  padding: 8px;
  scroll-behavior: smooth;
  max-width: 200%;
  position: relative;
}

/* Ensures images stay inside */
.carousel-container img {
  height: 90px;
  width: 100px;
  flex-shrink: 0;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

/* Soft Scrollbar Styling */
.carousel-container::-webkit-scrollbar {
  height: 6px;
}

.carousel-container::-webkit-scrollbar-track {
  background: #f09ea0;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: #a80a30;
  border-radius: 4px;
}

/* ✅ FIX: Aligns Next & Prev buttons properly */
.prev, .next {
  background: #a34958;
  border: none;
  cursor: pointer;
  font-size: 16px; /* 🔥 Makes them slightly smaller */
  padding: 5px 8px; /* Shrinks button size */
  border-radius: 50%;
  transition: background 0.3s ease-in-out;
  position: absolute;
  top: 50%; /* Centered on images */
  transform: translateY(-50%);
  z-index: 10;
}

/* Moves buttons inside the correct column */
.prev {
  left: -65px; /* 🔥 Adjust this to move left */
}

.next {
  right: -35px; /* 🔥 Adjust this to move right */
}

/* YouTube List with Deep Dark Wine Red Gradient */
.youtube-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 20px 90px -40px;
  width: 120%;
  max-width: 592px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1px;
  box-sizing: border-box;

  background: linear-gradient(to bottom, #1e0f12, #4a2025); /* Deep dark wine red */
  border: 2px solid #3a151a; /* Dark wine red border */
  border-radius: 10px;
}

/* YouTube Video Container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  border: 2px solid #3a151a; /* Dark wine red border */
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(to bottom, #1e0f12, #4a2025); /* Deep wine red */
}
  </style>
  

    
    <div class="row">
    <div class="carousel-box">
      <h2>Latest Art  Art Archive.doc</h2>
      <div class="carousel-container">
        <img src="art1.jpg" alt="Dreamy Art 1">
        <img src="art2.jpg" alt="Dreamy Art 2">
        <img src="art3.jpg" alt="Dreamy Art 3">
        <img src="art4.jpg" alt="Dreamy Art 4">
      </div>
      <button class="prev">❮</button>
      <button class="next">❯</button>
    </div>
    <div class="carousel-box">
      <h2> Latest Pictures, Snapshots.mov</h2>
      <div class="carousel-container">
        <img src="pic1.jpg" alt="Dreamy Pic 1">
        <img src="pic2.jpg" alt="Dreamy Pic 2">
        <img src="pic3.jpg" alt="Dreamy Pic 3">
        <img src="pic4.jpg" alt="Dreamy Pic 4">
      </div>
      <button class="prev">❮</button>
      <button class="next">❯</button>
    </div>
  </div>
  
<h1>                                                   .</h1>

  <div class="youtube-list">
    <!-- Video 1 -->
    <div class="video-container">
      <iframe src="https://www.youtube.com/embed/uoPTQ1Cw_ZI" allowfullscreen="">
      </iframe>
    </div>

    <!-- Video 2 -->
    <div class="video-container">
      <iframe src="https://www.youtube.com/embed/jGmFtmmuGd0" allowfullscreen="">
      </iframe>
    </div>

    <!-- Video 3 -->
    <div class="video-container">
      <iframe src="https://www.youtube.com/embed/BiH8DAVdKME" allowfullscreen="">
      </iframe>
    </div>
</div>

  <!-- JAVASCRIPT TO REMOVE LOADING SCREEN -->
  <script>
    window.addEventListener("load", function () {
      const loadingScreen = document.querySelector(".loading-screen");
      const content = document.querySelector(".content");

      if (loadingScreen && content) {
        setTimeout(() => {
          loadingScreen.style.opacity = "0";
          
          setTimeout(() => {
            loadingScreen.style.display = "none";
            content.style.display = "block";
            content.style.opacity = "1";
          }, 1000);
          
        }, 3000); // Adjust time if needed
      }
    });
   
    <script>
        window.addEventListener("load", function () {
            const loadingScreen = document.querySelector(".loading-screen");
            const content = document.querySelector(".content");

            setTimeout(() => {
                loadingScreen.style.opacity = "0";
                setTimeout(() => {
                    loadingScreen.style.display = "none";
                    content.style.display = "block";
                    content.style.opacity = "1";
                }, 1000);
            }, 2000);
        });
    <script>
  document.addEventListener("DOMContentLoaded", function () {
    const carousel = document.querySelector(".carousel-container");
    const prev = document.querySelector(".prev");
    const next = document.querySelector(".next");

    next.addEventListener("click", function () {
      carousel.scrollBy({ left: 200, behavior: "smooth" }); // Scroll right
    });

    prev.addEventListener("click", function () {
      carousel.scrollBy({ left: -200, behavior: "smooth" }); // Scroll left
    });
  });
</script>


</div><div><div id="layerNeko0" style="position: absolute; clip: rect(0px, 32px, 32px, 0px); visibility: visible; left: 0px; top: 0px; z-index: 1000;"><a ondblclick="document.location.href=&quot;https://webneko.net&quot;" href="https://webneko.net" onmouseover="aNekos[0].message();return true" onmouseout="window.status = &quot;&quot;" onclick="aNekos[0].active = !aNekos[0].active;return false;" onfocus="this.blur()"><img border="0" name="imageNeko0" src="https://webneko.net/i/sleep1.gif"></a></div></div>




<div><div id="layerNeko0" style="position:absolute">&nbsp;</div></div><div id="rm-highlighter-container" class="rm-reset-flex no-print">
	<div id="rm-highlighter-menu">
		<!--
			<div data-rm-action="clear-all" style="display:">Clear all</div>
		-->
	</div>
</body></html>