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>
	<div id="rm-highlighter-menu-update">
	</div>

	<div id="rm-highlighter-menu-list" style="display:none;">
		<div class="rm-highlighter-menu-li rm-m-t-1" data-menu="highlight" data-menu-details="#rm-highlight-form">
			<div id="rm-highlight-color-selected" class="rm-highlight-color" data-highlight-color="red" data-rm-action="select-color"></div>
		</div>
		<div class="rm-highlighter-menu-li" data-rm-action="view-selection" data-menu="view-selection">		
			<div data-rm-img="view-selection" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/view-selection.svg"></div> 
		</div>
		<div class="rm-highlighter-menu-li" data-rm-action="tts-toggle-start-hm" data-menu="tts">
			<div data-rm-img="play-round" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/play-round.svg"></div> 
		</div>
		<div class="rm-highlighter-menu-li" data-rm-action="google-translate" data-menu="google-translate">		
			<div data-rm-img="google-translate" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/google-translate.svg"></div> 
		</div>
		<div class="rm-highlighter-menu-li" data-rm-action="tweet" data-menu="tweet">
			<div data-rm-img="twitter" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/twitter.svg"></div> 
		</div>	
		<div class="rm-highlighter-menu-li" data-rm-action="open-page" data-page-name="options" data-menu="settings">
			<div data-rm-img="settings" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/settings.svg"></div> 
		</div>	
	</div>

	<div id="rm-highlighter-menu-details" style="display:none">
		<div id="rm-highlight-form" class="rm-highlighter-menu-details" data-position-bottom="-200px" style="display:none">
			<div class="rm-p-7 rm-p-b-1i">
				<textarea id="rm-highlight-note" placeholder="Take a note..." autocomplete="off" spellcheck="false"></textarea>

				<div id="rm-highlighter-colors" class="rm-m-t-4 rm-m-l-0">
					<div class="rm-highlight-color rm-m-l-3i" data-rm-img="pencil" data-rm-img-ext="svg" data-rm-action="toggle-highlight-settings-iframe"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/pencil.svg"></div>
				</div>
			</div>

			<div id="rm-highlight-form-footer" class="p-7">
				<div id="rm-highlight-folder" data-rm-action="toggle-bookmark-iframe">
					<div class="rm-display-inline-block" data-rm-img="folder" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/folder.svg"></div> 
					<div class="rm-highlight-folder-name">Everything</div>
				</div> 
				<div class="btn-update btn-xs rm-btn rm-btn-light" data-rm-action="update" style="display:none">Update</div>
			</div>	
		</div>		
	</div>	
</div><div><div id="layerNeko0" style="position:absolute">&nbsp;</div></div><div id="rm-toolbar" class="rm-toolbar rm-toolbar-dark rm-toolbar-expand rm-fixed-top no-print" style="display: none;">
	<div class="rm-toolbar-nav rm-mr-auto no-print">
		<div class="rm-toolbar-nav-logo rm-cursor-pointer" data-rm-img="icon" data-rm-img-ext="png" data-rm-action="redirect-to-home"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/png/icon.png"></div>

      	<div class="rm-btn-group" role="group" style="display:none">
			<div class="rm-btn rm-btn-sm btn-secondary" data-rm-action="tts-start">
				<i class="fas fa-play"></i>
			</div>
			<div class="rm-btn rm-btn-sm btn-secondary" data-rm-action="tts-stop">
				<i class="fas fa-stop"></i>
			</div>
		</div>
    </div>

	<div class="rm-ul rm-toolbar-nav rm-ml-auto">
		<div class="rm-li tlite-tooltip" title="Listen">
			<button type="button" class="rm-btn-nav rm-img-22 rm-m-t--1i" data-rm-img="headphones" data-rm-img-ext="svg" data-rm-action="tts-toggle-start"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/headphones.svg"></button>		
		</div>		
		<div class="rm-li tlite-tooltip" title="Edit">
		  <button type="button" class="rm-btn-nav rm-img-20" data-rm-img="edit-text-file-2" data-rm-img-ext="svg" data-rm-action="editing-mode-start"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/edit-text-file-2.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Delete items">
		  <button type="button" class="rm-btn-nav rm-img-21" data-rm-img="erase" data-rm-img-ext="svg" data-rm-action="deletion-mode-start"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/erase.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Translate" id="rm-translate-toggle" data-toggle="true" data-target="#rm-translate">
		  <button type="button" class="rm-btn-nav" data-rm-img="translation" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/translation.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Print">
		  <button type="button" class="rm-btn-nav" data-rm-img="print" data-rm-img-ext="svg" data-rm-action="print"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/print.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Scroll">
		  <button type="button" class="rm-btn-nav rm-img" data-rm-img="scroll-down" data-rm-img-ext="svg" data-rm-action="autoscroll"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/scroll-down.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Settings" id="rm-main-settings-toggle" data-toggle="true" data-target="#rm-main-settings">
		    <button type="button" class="rm-btn-nav" data-rm-img="tune" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/tune.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Save Bookmark">
		  <button type="button" class="rm-btn-nav" data-rm-img="bookmark-2" data-rm-img-ext="svg" data-rm-job="toggle-iframe" data-rm-params="{&quot;iframe_name&quot;:&quot;bookmark&quot;}"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/bookmark-2.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Fullscreen">
		  <button type="button" class="rm-btn-nav" data-rm-action="fullscreen-toggle" data-rm-img="expand" data-rm-img-ext="svg"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/expand.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Close">
		  <button type="button" class="rm-btn-nav" data-rm-img="close" data-rm-img-ext="svg" data-rm-job="hide-iframe" data-rm-params="{&quot;iframe_name&quot;:&quot;reader&quot;}"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/close.svg"></button>
		</div>
	</div>

	<div id="rm-toolbar-toggle" class="rm-cursor-pointer">
		<i class="fas fa-chevron-up"></i>
	</div>	
</div>

<div id="rm-toolbar-tts" class="rm-toolbar rm-toolbar-dark rm-toolbar-expand rm-fixed-top no-print" style="display:none">
	<div class="rm-toolbar-nav rm-mr-auto no-print">
		<div class="rm-tts-wave" style="display:">
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		</div>

		<div class="rm-tts-wave-active" style="display:none">
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		    <span class="rm-tts-wave-stroke"></span>
		</div>
	</div>
		
	<div class="rm-ul rm-toolbar-nav rm-toolbar-nav-center rm-ml-auto">
		<div class="rm-li tlite-tooltip" title="Previous">
			<button type="button" class="rm-btn-nav rm-img-20" data-rm-img="skip-to-start" data-rm-img-ext="svg" data-rm-action="tts-previous"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/skip-to-start.svg"></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Play/Pause">
			<button type="button" class="rm-btn-nav rm-img-20" data-rm-img="play" data-rm-img-ext="svg" data-rm-action="tts-start"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/play.svg"></button>
			<button type="button" class="rm-btn-nav rm-img-20" data-rm-img="pause" data-rm-img-ext="svg" data-rm-action="tts-stop" style="display:none"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/pause.svg"></button>
		</div>	
		<div class="rm-li tlite-tooltip" title="Forward">
			<button type="button" class="rm-btn-nav rm-img-20" data-rm-img="end" data-rm-img-ext="svg" data-rm-action="tts-forward"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/end.svg"></button>
		</div>	
	</div>	

	<div class="rm-ul rm-toolbar-nav rm-ml-auto">
		<div class="rm-li">
			<button type="button" class="rm-btn-nav rm-img-20" data-rm-img="audio" data-rm-img-ext="svg" data-rm-img-classes="rm-float-left rm-m-t-2 rm-m-r-2" data-rm-action="tts-settings"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/audio.svg" class="rm-float-left rm-m-t-2 rm-m-r-2"><span class="rm-m-l-5 rm-btn-nav-text rm-display-inline-block rm-float-left">Voice options</span></button>
		</div>
		<div class="rm-li tlite-tooltip" title="Close TTS">
		  <button type="button" class="rm-btn-nav" data-rm-img="close" data-rm-img-ext="svg" data-rm-action="tts-toggle-stop"><img src="chrome-extension://llimhhconnjiflfimocjggfjdlmlhblm/img/svg/close.svg"></button>
		</div>
	</div>	
</div>	

<div id="rm-main-settings" class="rm-toolbar-aside" data-toggle-target="true" data-parent="#rm-main-settings-toggle" style="display:none">
	<div class="rm-accordion">
	  	<div class="rm-card">
		    <div class="rm-card-header rm-hover-brightness" data-target="#rm-text-settings">
		    	<span class="rm-m-l--3 rm-m-r-3"><b>Aa</b></span> TYPOGRAPHY
		    </div>
		    <div id="rm-text-settings" class="rm-card-body show" data-parent="#rm-main-settings">
				<label class="rm-label">Font</label>
				<select class="custom-select rm-custom-select rm-border-0i" name="font_family" data-css="true" data-css-elem="*">
					<option value="arial">Arial</option>
					<option value="arial black">Arial Black</option>
					<option value="athelas">Athelas</option>
					<option value="comic sans ms">Comic Sans MS</option>
					<option value="courier new">Courier New</option>
					<option value="courier">Courier</option>
					<option value="didot">Didot</option>
					<option value="georgia">Georgia</option>
					<option value="gill sans">Gill Sans</option>
					<option value="helvetica" selected="">Helvetica</option>
					<option value="impact">Impact</option>
					<option value="iowan old style">Iowan Old Style</option>
					<option value="palatino">Palatino</option>
					<option value="optima">Optima</option>
					<option value="sans-serif">Sans-serif</option>
					<option value="sassoon-primary">Sassoon Primary</option>
					<option value="seravek">Seravek</option>
					<option value="serif">Serif</option>
					<option value="times new roman">Times New Roman</option>
					<option value="trebuchet ms">Trebuchet MS</option>
					<option value="opendyslexic">OpenDyslexic</option>
					<option value="opendyslexic-mono">OpenDyslexic Mono</option>
					<option value="opendyslexic-bold">OpenDyslexic Bold</option>
					<option value="opendyslexic-italic">OpenDyslexic Italic</option>
					<option value="opendyslexic-bold-italic">OpenDyslexic BoldItalic</option>
					<option value="lexend-deca">LexendDeca</option>
					<option value="lexend-exa">Lexend Exa</option>
					<option value="lexend-giga">Lexend Giga</option>
					<option value="lexend-mega">Lexend Mega</option>
					<option value="lexend-peta">Lexend Peta</option>
					<option value="lexend-tera">Lexend Tera</option>
					<option value="lexend-zetta">Lexend Zetta</option>
					<option value="lexie-readable">LexieReadable</option>
					<option value="lexie-readable-bold">LexieReadable Bold</option>
					<option value="lora">Lora</option>
					<option value="lora-bold">Lora Bold</option>
					<option value="lora-italic">Lora Italic</option>
					<option value="lora-bold-italic">Lora BoldItalic</option>
					<option value="verdana">Verdana</option>
				</select>

				<label class="rm-label rm-m-t-22 rm-m-b-12">Text Align</label>
				<table id="rm-text-align" class="rm-full-width">
					<tbody><tr>
						<td class="rm-width-15 active">
							<i class="fas fa-align-left"></i> <br>
							<input type="radio" name="text_align" data-css="true" data-css-elem="*" value="left" checked="checked" style="display:none">
						</td>
						<td class="rm-width-15">
							<i class="fas fa-align-center"></i> <br>
							<input type="radio" name="text_align" data-css="true" data-css-elem="*" value="center" style="display:none">
						</td>	
						<td class="rm-width-15">
							<i class="fas fa-align-right"></i> <br>
							<input type="radio" name="text_align" data-css="true" data-css-elem="*" value="right" style="display:none">
						</td>	
						<td>
							<i class="fas fa-align-justify"></i> <br>
							<input type="radio" name="text_align" data-css="true" data-css-elem="*" value="justify" style="display:none">
						</td>	
					</tr>		
				</tbody></table>	

				<label class="rm-label rm-m-t-22 rm-m-b-12">Text Size</label>
				<div class="rm-range-control">
				    <input type="range" name="font_size" data-css="true" data-css-elem="*" data-css-postfix="px" min="12" max="100" step="1" value="19" data-thumbwidth="19">
				    <output name="rangeVal">19</output>
			  	</div>

			  	<label class="rm-label rm-m-t-22 rm-m-b-12">Line Height</label>
				<div class="rm-range-control">
				    <input type="range" name="line_height" data-css="true" data-css-elem="*" data-css-postfix="px" min="10" max="100" step="1" value="30" data-thumbwidth="30">
				    <output name="rangeVal">30</output>
			  	</div>

			  	<label class="rm-label rm-m-t-25 rm-m-b-12">Letter Spacing</label>
				<div class="rm-range-control">
				    <input type="range" name="letter_spacing" data-css="true" data-css-elem="*" data-css-postfix="px" min="0" max="10" step="0.1" value="0.2" data-thumbwidth="0.2">
				    <output name="rangeVal">0.2</output>
			  	</div>

			  	<label class="rm-label rm-m-t-25 rm-m-b-12">Width</label>
				<div class="rm-range-control">
				    <input type="range" name="width" data-elem="#rm-article" data-css="true" data-css-postfix="px" min="100" max="1280" step="10" value="680" data-thumbwidth="100">
			  	</div>	

			  	<div class="rm-m-t-25 rm-m-b-10">
		        	<button class="rm-btn rm-btn-primary rm-btn-save rm-btn-xs" data-rm-action="save" data-rm-loading="Saving" data-rm-alert="Saved!">Save</button>
		    	</div>
		    </div>
	  	</div>
	  	<div class="rm-card">
		    <div class="rm-card-header rm-hover-brightness" data-target="#rm-themes-settings">
		        <i class="fas fa-swatchbook rm-m-r-5"></i> THEMES
		    </div>
			<div id="rm-themes-settings" class="rm-card-body rm-p-b-7i" data-parent="#rm-main-settings">
			  	<label class="rm-label rm-m-t-10">Current Theme <button class="rm-btn rm-btn-light btn-delete rm-btn-xxs rm-m-t--1 rm-m-l-3" style="display:none;">Delete</button></label>
			  	<!--<input type="text" name="themes" class="form-control"/>-->
			  	<div class="rm-ul rm-list-unstyled rm-list-inline rm-m-b-15">
			  		<div name="theme" data-value="custom" class="rm-li rm-list-inline-item tooltip-s" title="Add custom theme" data-toggle="true" data-target="#rm-new-theme"></div>
			  	</div>

			  	<div id="test">
			  	</div>	

			  	

			  	<p>
		        	<small>
		        		To change the extension and app theme, go to the
		        		<a href="#/" data-rm-action="open-page" data-page-name="options" class="rm-color-primary-i">
		        			<b>Settings page <i class="fas fa-external-link-square-alt"></i></b>
		        		</a> 
		        	</small>
		        </p> 						
			</div>
	  	</div>
	 	<div class="rm-card">
		    <div class="rm-card-header rm-hover-brightness" data-target="#rm-display-settings">
		        <i class="fas fa-toggle-on rm-m-r-5"></i> DISPLAY
		    </div>
			<div id="rm-display-settings" class="rm-card-body" data-parent="#rm-main-settings">
				<label class="rm-label rm-label-isolate">
					<input type="checkbox" class="rm-m-r-3" name="rm_article_outline" data-toggle="true" data-elem-prefix="#"> 
					<span>Outline</span>
				</label>
				<label class="rm-label rm-label-isolate">
					<input type="checkbox" class="rm-m-r-3" name="img" data-toggle="true" checked=""> 
					<span>Images</span>
				</label>
				<label class="rm-label rm-label-isolate">
					<input type="checkbox" class="rm-m-r-3" name="rm_article_meta" data-toggle="true" data-elem-prefix="#" checked=""> 
					<span>Meta</span> 
				</label>
				<label class="rm-label rm-label-isolate">
					<input type="checkbox" class="rm-m-r-3" name="rm_article_author" data-toggle="true" data-elem-prefix="#" checked=""> 
					<span>Author</span> 
				</label>
				<label class="rm-label rm-label-isolate">
					<input type="checkbox" class="rm-m-r-3" name="rm_article_reading_time" data-toggle="true" data-elem-prefix="#" checked=""> 
					<span>Reading Time</span> 
				</label>
				<label class="rm-label rm-label-isolate">
					<input type="checkbox" class="rm-m-r-3" name="rm_article_source" data-toggle="true" data-elem-prefix="#" checked=""> 
					<span>Source URL</span> 
				</label>

				<div class="rm-m-t-10 rm-m-b-10 rm-m-l-6">
		        	<div class="rm-btn rm-btn-primary rm-btn-save rm-btn-xs" data-rm-action="save" data-rm-loading="Saving" data-rm-alert="Saved!">Save</div>
		    	</div>
			</div>
	  	</div>
		<div class="rm-card">
		    <div class="rm-card-header rm-hover-brightness" data-target="#rm-dyslexia-ruler-settings">
		    	<i class="fas fa-ruler-horizontal rm-m-r-5"></i> READING RULER
		    </div>
		    <div id="rm-dyslexia-ruler-settings" class="rm-card-body" data-parent="#rm-main-settings">
		        <label class="rm-label rm-label-isolate">
	      			<input type="checkbox" class="rm-m-r-3" name="rm_reading_ruler" data-toggle="true" data-elem-prefix="#"> 
	      			<span>Display Ruler</span>
	      		</label>

	      		<table class="rm-m-t-10">
			  		<tbody><tr>
			  			<td class="rm-p-r-10">Color</td>
			  			<td>
			  				<input type="color" name="reading_ruler_bg_color" data-css="true" data-css-attr="background-color" data-elem="#rm-reading-ruler" value="#ADADAD">
			  			</td>
			  		</tr>	
			  	</tbody></table>

			  	<label class="rm-label rm-m-t-20">Opacity</label>
				<div class="rm-range-control rm-m-b-10">
				    <input type="range" name="reading_ruler_opacity" data-elem="#rm-reading-ruler" data-css="true" data-css-attr="opacity" min="0.1" max="1" step="0.1" value="0.5" data-thumbwidth="0.5">
				    <output name="rangeVal">0.5</output>
			  	</div>

				<label class="rm-label rm-m-t-15">Height</label>
				<div class="rm-range-control">
				    <input type="range" name="reading_ruler_height" data-elem="#rm-reading-ruler" data-css="true" data-css-attr="height" data-css-postfix="px" min="10" max="250" step="2" value="40" data-thumbwidth="40">
				    <output name="rangeVal">40</output>
			  	</div>

			  	<label class="rm-label rm-m-t-20">Position</label>
				<div class="rm-range-control rm-m-b-10">
				    <input type="range" name="reading_ruler_top" data-elem="#rm-reading-ruler" data-css="true" data-css-attr="top" data-css-postfix="%" min="10" max="90" step="5" value="45" data-thumbwidth="45">
				    <output name="rangeVal">45</output>
			  	</div>

			  	<div class="rm-m-t-25 rm-m-b-10">
		        	<div class="rm-btn rm-btn-primary rm-btn-save rm-btn-xs" data-rm-action="save" data-rm-loading="Saving" data-rm-alert="Saved!">Save</div>
		    	</div>
		    </div>
		</div>
	  	<div class="rm-card">
		    <div class="rm-card-header rm-hover-brightness" data-target="#rm-auto-run-rules">
		    	<span class="rm-m-r-5"><i class="fas fa-globe rm-m-r-1"></i></span> AUTO-RUN RULES 
		    	<span class="rm-pill rm-pill-premium rm-m-l-5" data-rm-action="upgrade"><small>PREMIUM</small></span>
		    </div>
		    <div id="rm-auto-run-rules" class="rm-card-body" data-parent="#rm-main-settings">
		        <textarea name="auto_run_rules" class="rm-form-control rm-textarea rm-m-b-10i" rows="5" spellcheck="false" placeholder="Add regex expressions here (seperated by commas)" readonly=""></textarea>

		        <p>
		        	<small>
		        		Automatically activate Reader Mode on specific websites by using regex. 
		        		<a href="https://readermode.io/features/auto-run" target="_blank" class="rm-color-primary-i">
		        			<b>Learn more <i class="fas fa-external-link-square-alt"></i></b>
		        		</a> 
		        	</small>
		        </p> 

		        <div class="rm-m-t-10 rm-m-b-10">
		        	<div class="rm-btn rm-btn-primary rm-btn-save rm-btn-xs" data-rm-action="save" data-rm-loading="Saving">Save</div>
		    	</div>
		    </div>
	  	</div>		
	  	<div class="rm-card">
		    <div class="rm-card-header rm-hover-brightness" data-target="#rm-custom-css-settings">
		    	<span class="rm-m-r-5">{ }</span> CUSTOM CSS 
		    	<span class="rm-pill rm-pill-premium rm-m-l-5" data-rm-action="upgrade"><small>PREMIUM</small></span>
		    </div>
		    <div id="rm-custom-css-settings" class="rm-card-body" data-parent="#rm-main-settings">
		        <textarea name="custom_css" class="rm-form-control rm-textarea rm-m-b-10i" rows="5" spellcheck="false" placeholder="Add your custom css..." readonly=""></textarea>
		        <div>
		        	<input type="checkbox" class="rm-m-r-3" name="use_custom_css" checked="" disabled=""> Use custom css
		    	</div>

		        <p>
		        	<small>
		        		Add your own CSS to customize the article's layout or design
		        		<a href="https://help.readermode.io/using-reader-mode/custom-css" target="_blank" class="rm-color-primary-i">
		        			<b>Learn more <i class="fas fa-external-link-square-alt"></i></b>
		        		</a> 
		        	</small>
		        </p> 

		        <div class="rm-m-t-10 rm-m-b-10">
		        	<div class="rm-btn rm-btn-primary rm-btn-save rm-btn-xs" data-rm-action="save" data-rm-loading="Saving">Save</div>
		    	</div>
		    </div>
	  	</div>
	</div>
</div>

<div id="rm-translate" class="rm-toolbar-aside" data-toggle-target="true" data-parent="#rm-translate-toggle" style="display:none">
	<div class="rm-card">
	    <div class="rm-card-header">
	    	<i class="fas fa-language rm-m-r-5"></i> TRANSLATE
	    </div>
	    <div class="rm-card-body">
			<label class="rm-label rm-display-block rm-m-b-10">Default translation language:</label>
			<select class="custom-select rm-custom-select rm-border-0i" name="default_translation_language">
				<option value="af">🇿🇦 Afrikaans</option>
				<option value="sq">🇦🇱 Albanian</option>
				<option value="ar">🇸🇦 Arabic</option>
				<option value="az">🇦🇿 Azerbaijani</option>
				<option value="eu">🏴󠁥󠁳󠁰󠁶󠁿 Basque</option>
				<option value="bn">🇧🇩 Bengali</option>
				<option value="be">🇧🇾 Belarusian</option>
				<option value="bg">🇧🇬 Bulgarian</option>
				<option value="ca">🏴󠁥󠁳󠁰󠁶󠁿 Catalan</option>
				<option value="zh-CN">🇨🇳 Chinese Simplified</option>
				<option value="zh-TW">🇨🇳 Chinese Traditional</option>
				<option value="hr">🇭🇷 Croatian</option>
				<option value="cs">🇨🇿 Czech</option>
				<option value="da">🇩🇰 Danish</option>
				<option value="nl">🇳🇱 Dutch</option>
				<option value="en" selected="">🇬🇧 English</option>
				<option value="eo">🏴󠁥󠁳󠁰󠁶󠁿 Esperanto</option>
				<option value="et">🇪🇪 Estonian</option>
				<option value="tl">🇵🇭 Filipino</option>
				<option value="fi">🇫🇮 Finnish</option>
				<option value="fr">🇫🇷 French</option>
				<option value="gl">🇪🇸 Galician</option>
				<option value="ka">🇬🇪 Georgian</option>
				<option value="de">🇩🇪 German</option>
				<option value="el">🇬🇷 Greek</option>
				<option value="gu">🇮🇳 Gujarati</option>
				<option value="ht">🇭🇹 Haitian Creole</option>
				<option value="iw">🇮🇱 Hebrew</option>
				<option value="hi">🇮🇳 Hindi</option>
				<option value="hu">🇭🇺 Hungarian</option>
				<option value="is">🇮🇸 Icelandic</option>
				<option value="id">🇮🇩 Indonesian</option>
				<option value="ga">🇮🇪 Irish</option>
				<option value="it">🇮🇹 Italian</option>
				<option value="ja">🇯🇵 Japanese</option>
				<option value="kn">🇮🇳 Kannada</option>
				<option value="ko">🇰🇷 Korean</option>
				<option value="la">🏴󠁥󠁳󠁰󠁶󠁿 Latin</option>
				<option value="lv">🇱🇻 Latvian</option>
				<option value="lt">🇱🇹 Lithuanian</option>
				<option value="mk">🇲🇰 Macedonian</option>
				<option value="ms">🇲🇾 Malay</option>
				<option value="mt">🇲🇹 Maltese</option>
				<option value="no">🇳🇴 Norwegian</option>
				<option value="fa">🇮🇷 Persian</option>
				<option value="pl">🇵🇱 Polish</option>
				<option value="pt">🇵🇹 Portuguese</option>
				<option value="ro">🇷🇴 Romanian</option>
				<option value="ru">🇷🇺 Russian</option>
				<option value="sr">🇷🇸 Serbian</option>
				<option value="sk">🇸🇰 Slovak</option>
				<option value="sl">🇸🇮 Slovenian</option>
				<option value="es">🇪🇸 Spanish</option>
				<option value="sw">🏴󠁥󠁳󠁰󠁶󠁿 Swahili</option>
				<option value="sv">🇸🇪 Swedish</option>
				<option value="ta">🇮🇳 Tamil</option>
				<option value="te">🇮🇳 Telugu</option>
				<option value="th">🇹🇭 Thai</option>
				<option value="tr">🇹🇷 Turkish</option>
				<option value="uk">🇺🇦 Ukrainian</option>
				<option value="ur">🇵🇰 Urdu</option>
				<option value="vi">🇻🇳 Vietnamese</option>
				<option value="cy">🇬🇧 Welsh</option>
				<option value="yi">🇮🇱 Yiddish</option>
			</select>	

			<div class="rm-m-t-10 rm-m-b-10">
				<div class="rm-btn rm-btn-light rm-btn-save rm-btn-xs rm-m-r-5 rm-p-l-10i rm-p-r-10i" data-rm-loading="Setting" data-rm-alert="Set!">Set</div>
				<div class="rm-btn rm-btn-primary rm-btn-save rm-btn-xs" data-rm-action="translate">Translate</div>
			</div>
	    </div>
	</div>	
</div>

<div id="rm-deletion-mode" class="rm-toolbar-aside" style="display:none">
	<div class="rm-card">
	    <div class="rm-card-body text-center rm-p-0i rm-p-t-5i rm-p-b-5i">
	   		<center>
	   			<a href="#/" class="rm-deletion-mode-undo rm-m-r-10" title="Undo" style="display:none">
	        		<i class="fas fa-undo"></i> 
	        	</a>

		        <div class="rm-btn rm-btn-xs rm-btn-light rm-p-l-25i rm-p-r-25i rm-m-r-3">Cancel</div>
		        <div class="rm-btn rm-btn-xs rm-btn-primary rm-p-l-30i rm-p-r-30i">Save</div>
	    	</center>
	    </div>
	</div>	
</div>

<div id="rm-editing-mode" class="rm-toolbar-aside" style="display:none">
	<div class="rm-card">
	    <div class="rm-card-body text-center rm-p-0i rm-p-t-5i rm-p-b-5i">
	    	<center>
		        <div class="rm-btn rm-btn-xs rm-btn-light rm-p-l-25i rm-p-r-25i rm-m-r-3">Cancel</div>
		        <div class="rm-btn rm-btn-xs rm-btn-primary rm-p-l-30i rm-p-r-30i">Save</div>
	    	</center>
	    </div>
	</div>	
</div>

<div id="rm-reading-ruler" class="no-print" style="display:none">
</div>

<div id="rm-article-outline" class="rm-toolbar-aside" style="display:none">
	<div class="rm-card">
	    <div class="rm-card-header">
	    	<i class="fas fa-list-ul rm-m-r-5"></i> OUTLINE
	    	<i class="fas fa-chevron-up rm-card-body-toggle rm-float-right rm-m-t-1"></i>
	    </div>
	    <div class="rm-card-body">
	        <div class="rm-ul rm-list-unstyled rm-m-b-5">
	        </div>	
	    </div>
	</div>	
</div>

</body></html>