body {
  background-image: url(https://adoniska.neocities.org/black-paper-texture-6.webp);
    background-attachment: fixed;
    overflow: hidden;
}

html {
scroll-behavior: smooth;
}


/* =========================================
   TEMPORARILY HIDDEN CONTENT
========================================= */
.temporarily-hidden {
    display: none !important;
}

/* =========================================
   HYPERLINKS COLOR
========================================= */
.little-things a:link,
.diary-entry a:link {
    color: #984a96;
    background-color: transparent;
    text-decoration: underline;
}

.little-things a:visited,
.diary-entry a:visited {
    color: #984a96;
    background-color: transparent;
    text-decoration: underline;
}

.little-things a:hover,
.diary-entry a:hover {
    color: #984a96;
    background-color: transparent;
    text-decoration: underline;
}

.little-things a:active,
.diary-entry a:active {
    color: #984a96;
    background-color: transparent;
    text-decoration: underline;
}


/* =========================================
   FONTS
========================================= */
@font-face {
    font-family: "heinwriting";
    src: url("https://dl.dropboxusercontent.com/s/fzvsupawravj32h/HeinWriting.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "futurahandwritten";
    src: url('https://dl.dropboxusercontent.com/s/uy168jlhhq57qnz/futurahandwritten.ttf?dl=0'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "beriberusweetie";
    src: url('https://dl.dropboxusercontent.com/s/di7un706lz031uf/BeriberuSweetie-Normal.ttf?dl=0'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "adabelle";
    src: url(https://dl.dropbox.com/s/kp4x66rhekt1fz5/AdabelleHandwriting-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "magicretro";
    src: url(https://dl.dropbox.com/s/8ofl6fpskqqkmq7/Magic%20Retro.ttf?);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "hearts";
    src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "sant joan despi";
    src: url(https://dl.dropbox.com/s/sw0dp7szdorexg9/SantJoanDespi-Regular.otf);
}

/* =========================================
   TEXT STYLES (HEADINGS)
========================================= */
/* Heading for sub tabs */
h1 {
    font-family: "hearts";
    font-size: 1.8em;
    color: black;
    padding-left: 25px;
    margin-bottom: -5px;
}

/* Home page heading */
h2 {
    font-family: "hearts";
    font-size: 1.8em;
    color: black;
    padding-left: 25px;
}

/* Stamps etc. heading */
h3 {
    font-family: "hearts";
    font-size: 1.8em;
    color: black;
    padding-left: 25px;
    padding-top: 25px;
    margin-bottom: -2px;
}

/* Citations right */
h4 {
font-family: Courier New;
    font-size: 0.8em;
    text-align-last: right;
     padding-right: 5px;
   margin-top: -40px;
    padding-bottom: 15px;
}

/* Smaller heading for Notepad-1 */
h5 {
    font-family: "hearts";
    font-size: 1.2em;
    color: white;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Smaller heading for text */
h6 {
    font-family: "hearts";
    font-size: 1.6em;
    color: #1e1e1e;
    margin-bottom: 10px;
}

/* Smaller heading for text without weird margin */
.h7 {
    font-family: "hearts";
    font-size: 1.6em;
    color: #1e1e1e;
    font-weight: bold;
    margin-bottom: 10px;
}

/* =========================================
   TEXT DIVIDERS STYLING
========================================= */
.watching-page-text img.text-divider,
.book-page-text img.text-divider,
.game-page-text img.text-divider,
.music-page-text img.text-divider,
.other-page-text img.text-divider{
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 25px auto;
}


/* =========================================
   INDIVIDUAL IMAGES ACROSS WEBSITE THAT NEED 
THEIR OWN STYLING FOR SOME REASON
========================================= */

.book-page-text img.loon {
    display: block;
    width: auto;
    max-width: 80px;
    margin-top: 30px;
}

.book-page-text img.wolfbird {
    display: block;
    width: auto;
    max-width: 300px;
    margin-bottom: 30px;
    margin-top: 15px;
}

.book-page-text img.pills {
    display: block;
    width: auto;
    max-width: 180px;
    margin-bottom: 30px;
    margin-top: 15px;
}

.playlist-image {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    gap: 30px;
    justify-content: center;
    margin-top: -10px;
}

.playlist-image a {
    display: block;
    text-align: center;
}

.playlist-image img {
    width: 180px;
    height: auto;
    display: block;
}

.playlist-image {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    gap: 35px;
    justify-content: center;
    margin-top: 25px;
}

.playlist-image a {
    display: block;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.playlist-image img {
    display: block;
    width: 180px;
    height: auto;
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* HOVER EFFECT */
.playlist-image a:hover {
    transform: translateY(-10px) rotate(-2deg);
}

.playlist-image a:hover img {
    filter: drop-shadow(5px 8px 5px rgba(0, 0, 0, 0.35));
}

.bunny-sticker {
    width: 90px;
    margin: 0 auto;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
}

.bunny-sticker img {
    width: 80px;
    filter: drop-shadow(4px 5px 3px rgba(0, 0, 0, 0.5));
}

/* =========================================
   WEBSITE CONTAINER
========================================= */
/* Make sure html and body allow scrolling */
html, body {
    width: 100%;
    height: auto;        /* grow with content */
    margin: 0;
    padding: 0;
    overflow: auto;      /* allow page scroll */
}
/* Your desktop container */
.desktop {
    position: relative;
    width: 95vw;        /* full width */
    min-height: 1600px;
    background: transparent;
    overflow: visible;
}

/* =========================================
   HEADER IMAGE (LOGO)
========================================= */
.outer-header {
    position: absolute;
    top: 75px;
    left: 450px;
    height: 200px;
    width: 300px;
}
.header {
    background-image: url(https://adoniska.neocities.org/Adoniska%20logo-07.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

/* =========================================
   MAIN NAV
========================================= */
.outer-nav {
    position: relative;
    top: 130px;
    left: 55px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 340px;
    width: 250px;
}
.nav {
    background-image: url(https://adoniska.neocities.org/menu_background_black_softer.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 340px;
    border-radius: 10px 10px 10px 10px;
    font-family: monospace;
    font-size: large;
    font-weight: bold;
    color: #984a96;
    position: relative;
}
.nav ul {
  list-style: none;      
  padding: 0;            
  margin: 0; 
  position: absolute;
  top: 20px;
  left: 70px;
}
.nav li {
  margin: 10px 0;       
}
.nav a {
  background-color: rgb(30, 30, 30);
  color: #ffffff;
  text-decoration: none;
  font-size: 1.0rem;
  letter-spacing: 1px;
}
.nav a:hover {
  color: #c05ac0;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* =========================================
   SMALL NAV (BLINKIES, STAMPS, RECOURCES)
========================================= */
.outer-small-nav {
    position: relative;
    top: 275px;
    left: 1050px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 180px;
    width: 243px;
}
.small-nav {
    background-image: url(https://adoniska.neocities.org/photoshop.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 175px;
    width: auto;
    border-radius: 10px 10px 10px 10px;
    font-family: monospace;
    font-size: large;
    font-weight: bold;
    color: #984a96;
    position: relative;
}
.small-nav ul {
  list-style: none;                 
  margin: 0; 
  position: absolute;
  top: 20px;
    left: -3px;
}
.small-nav li {
  margin: 10px 0;       
}
.small-nav a {
  background-color: rgb(30, 30, 30);
  color: #ffffff;
  text-decoration: none;
  font-size: 1.0rem;
  letter-spacing: 1px;
}
.small-nav a:hover {
  color: #c05ac0;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* =========================================
   MINI NAV (BAG, DESKTOP)
========================================= */
.outer-mini-nav {
    position: relative;
    top: 43px;
    left: 1350px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 130px;
    width: 130px;
}
.mini-nav {
    background-image: url(https://adoniska.neocities.org/ps.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 130px;
    width: auto;
    border-radius: 10px 10px 10px 10px;
    font-family: monospace;
    font-size: large;
    font-weight: bold;
    color: #984a96;
    position: relative;
}
.mini-nav ul {
  list-style: none;                 
  margin: 0; 
  position: absolute;
  top: 30px;
    left: -30px;
}t
.mini-nav li {
  margin: 10px 0;       
}
.mini-nav a {
  background-color: rgb(30, 30, 30);
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
    line-height: 3px;
}
.mini-nav a:hover {
  color: #c05ac0;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* =========================================
   MAIN CONTENT
========================================= */
.main {
    position: absolute;
    margin-bottom: 50px;
    top: 265px;
    left: 362px;
    height: 700px;
    width: 650px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Courier New', Courier, monospace;
    font-size: medium;
    box-sizing: border-box;
    color: black;
    text-wrap: pretty;
}

/* SCROLLBAR */
.main::-webkit-scrollbar {
  width: 10px;
    padding: 5px;
}
.main::-webkit-scrollbar-thumb {
  background-color: #eed1e6;
  border-radius: 10px;
}

/* COLUMNS */
.columns {
  display: flex;
  gap: 8px;
    width: 100%;           /* take full width of parent */
}
.column {
  flex: 1 1 0;              /* 50 / 50 split */
  min-width: 0; 
  box-sizing: border-box;
}
.column * {
  max-width: 100%;
}
.column.left {
    /* default block layout */
     flex: 3 1 0;
    flex-direction: column;   /* STACK vertically */
    align-items: center;      
    padding-bottom: 10px;
}
.column.right {
    flex: 2 1 0;         /* needed for justify/align */
    flex-direction: column;   /* STACK vertically */
    padding-top: 20px;
    padding-bottom: 10px;
}

.column.left img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* FULL-WIDTH (NO COLUMNS) */
.full-width-content {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    color: black;
}
.full-width-content h1,
.full-width-content h2,
.full-width-content h3,
.full-width-content h4,
.full-width-content h5,
.full-width-content h6 {
    padding-left: 25px;
}
.full-width-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
}

/* =========================================
   IMAGE ON HOME
========================================= */
.home-image {
    max-width: 90%;
    height: auto;
    max-height: 300px;
    display: block;
    margin: 0 auto 20px auto;
    object-fit: contain;
}

#home img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   ABOUT ME
========================================= */
.about {
  max-width: 350px;
  padding: 20px 25px;
    display: flex;
  flex-direction: column;
  gap: 10px; /* controls space between rows */
}
.row {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 5px;
  overflow-wrap: break-word;
align-content: center;
}

.label {
font-family: "sant joan despi";
font-size: 0.9em;
  color: #984a96;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left; 
    align-content: center;
}
.value {
    background-color: #1e1e1e;
    border-radius: 5px;
    padding: 8px;
    opacity: 1;
    font-size: 0.9em;
  color: #eed1e6;
  text-align: left; /* ensures value text is left-aligned */
}

/* =========================================
   ABOUT ME IMAGE
========================================= */
.hello {
    display: flex;
}
.hello img {
    height: 48px;
    width: auto;
    padding-top: 30px;
    padding-bottom: 20px;
}


/* TABS BACKGROUND COLORS */
#home,  
#resources {
  background-color: #f0f0f0;
}


#about-me{
    background-color: #eed1e6;
}

/* =========================================
   TRANSPARENT TABS
========================================= */
#other,
#watching,
#artsy-stuff,
#diary,
#blinkies,
#stamps {
    background: transparent !important;
    background-color: transparent !important;
}


/* =========================================
   TAB SECTIONS HEADERS
========================================= */
.section-header {
    display: flex;
    gap: 25px;
    height: 55px;
    width: auto;
    padding-top: 25px;
}
.section-title {
    font-family: "sant joan despi";
    font-size: 1.5em;
    color: black;
    padding-left: 30px;

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

    text-align: center;
    height: 50px;
}

/* =========================================
   TAB CONTENT SPECIFICATIONS (TEXT)
========================================= */
.tab-content {
  display: none;
    box-sizing: border-box;
}
.tab-content.active {
  display: block;
}
/* MAIN TAB FONT STYLING */
.tab-content p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    color: black;
     padding: 25px;      /* add same padding for all tab-content */
    margin: 0;  
    text-wrap: pretty;
}
/* MAIN TAB BOLD FONT STYLING */
.tab-content p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: 1.1em;
}

.resources {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    color: black;
    margin-top: -20px;  
    padding: 1px;
    text-wrap: pretty;
    text-align-last: center;
}



/* =========================================
   CONTENT VISIBILITY
========================================= */
.watching-content,
.full-width-content,
.book-content,
.music-content,
.game-content,
.other-content {
    display: none;
}

.watching-content.active-watching-content,
.full-width-content.active-watching-content,
.game-content.active-game-content,
.full-width-content.active-game-content,
.other-content.active-other-content,
.full-width-content.active-other-content {
    display: block;
}

.watching-content-right,
.game-content-right,
.other-content-right {
    display: none;
}

.watching-content-right.active-watching-content,
.game-content-right.active-game-content,
.other-content-right.active-other-content {
    display: block;
}


/* =========================================
   HOVER IMAGE BUTTONS
========================================= */
.subnav a::after {
    content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:-1;
}
.subnav a:hover::after {
    opacity:1;
}
.subnav a.active-show::after,
.subnav a.active-game::after,
.subnav a.active-fanfictions::after,
.subnav a.active-other::after {
    opacity: 1;
}


/* =========================================
   WATCHING GRID
========================================= */
.watching-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(155px, max-content));

    gap: 35px;

    justify-content: center;
    justify-items: center;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;
    padding: 15px 0;

    box-sizing: border-box;
}


/* =========================================
   WATCHING POPUP PAGES
========================================= */
.watching-page {
    display: none;
}

.watching-page.active-watching-page {
    display: block;
}

/* =========================================
   WATCHING LIBRARY
========================================= */
.watching-library {
    width: 100%;
    padding: 20px 10px 20px;
    box-sizing: border-box;
}


/* =========================================
   WATCHING CATEGORY
========================================= */
.watching-category {
    margin-bottom: 30px;
}


/* =========================================
   MOVIES — FILM STRIP FRAMES
========================================= */
.movies .watching-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, 180px);

    gap: 35px;

    justify-content: center;
    justify-items: center;

    width: 100%;
    max-width: 850px;

    margin: 0 auto;
    padding: 20px 0;

    box-sizing: border-box;
}


/* =========================================
   INDIVIDUAL MOVIE FRAME
========================================= */
.movies .watching-item {
    display: block;
    text-decoration: none;
    width: 180px;
}

.movies .watching-case {
    position: relative;

    width: 180px;
    height: 125px;

    background: #111;

    padding: 10px;

    box-sizing: border-box;

    box-shadow:
        4px 6px 12px rgba(0, 0, 0, 0.4);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================
   FILM PERFORATIONS
========================================= */
.movies .watching-case::before,
.movies .watching-case::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;

    width: 9px;

    background:
        repeating-linear-gradient(
            to bottom,
            #eed1e6 0px,
            #c58fb6 7px,
            transparent 7px,
            transparent 13px
        );

    z-index: 3;
}

/* LEFT SIDE */
.movies .watching-case::before {
    left: 2px;
}

/* RIGHT SIDE */
.movies .watching-case::after {
    right: 2px;
}

/* =========================================
   MOVIE IMAGE / FILM FRAME
======================================== */
.movies .watching-cover {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.movies .watching-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   MOVIE TITLE
========================================= */
.movies .watching-case-label {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.78);
    text-align: center;
    box-sizing: border-box;

    opacity: 0;

    transform: translateY(5px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

    z-index: 4;
}

.movies .watching-case-label span {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    font-weight: bold;
    color: #eed1e6;
}

/* =========================================
   HOVER
========================================= */
.movies .watching-item:hover .watching-case {
    transform: translateY(-5px) rotate(-1deg);

    box-shadow:
        6px 10px 16px rgba(0, 0, 0, 0.5);
}

.movies .watching-item:hover .watching-case-label {
    opacity: 1;

    transform: translateY(0);
}

/* =========================================
   TV SHOW — ARCHIVE CARD
========================================= */
.watching-boxset {
    position: relative;
    width: 175px;
    height: 210px;
    background: #eed1e6;
    border: 1px solid #1e1e1e;
    box-sizing: border-box;
    overflow: hidden;

    box-shadow:
        5px 6px 10px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* =========================================
   ARCHIVE CARD — TOP INFORMATION
========================================= */
.watching-boxset::before {
    content: "TV SERIES";
    position: absolute;
    top: 8px;
    left: 10px;
    font-family:
        "Courier New",
        monospace;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #1e1e1e;
    z-index: 5;
}

/* =========================================
   ARCHIVE NUMBER
========================================= */
.watching-boxset::after {
    content: "XXX";

    position: absolute;

    top: 8px;
    right: 10px;

    font-family:
        "Courier New",
        monospace;

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

    letter-spacing: 1px;

    color: #1e1e1e;

    z-index: 5;
}


/* =========================================
   REMOVE OLD SPINE
========================================= */
.watching-boxset-spine {
    display: none;
}


/* =========================================
   TV SHOW IMAGE
========================================= */
.watching-boxset .watching-cover {
    position: absolute;
    top: 25px;
    left: 10px;
    right: 10px;
    height: 135px;
    overflow: hidden;
    border:
        1px solid #1e1e1e;
    box-sizing: border-box;
}

.watching-boxset .watching-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* =========================================
   ARCHIVE CARD LABEL
========================================= */
.watching-boxset .watching-case-label {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 10px;

    height: 32px;

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

    padding: 0 7px;

    box-sizing: border-box;

    border-top: 1px solid #1e1e1e;

    background: transparent;

    opacity: 1;
}

.watching-boxset .watching-case-label span {
    font-family:
        "Courier New",
        monospace;

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

    letter-spacing: 0.5px;

    color: #1e1e1e;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================
   HOVER
========================================= */
.watching-item.tv-show:hover .watching-boxset {
    transform:
        translateY(-7px)
        rotate(-1deg);

    box-shadow:
        7px 11px 17px rgba(0, 0, 0, 0.32);
}

/* =========================================
   YOUTUBE VIDEO OBJECT
========================================= */
.youtube-object {
    position: relative;

    width: 175px;
    height: 125px;

    background: #1e1e1e;

    border:
        2px solid #1e1e1e;

    box-shadow:
        5px 6px 10px rgba(0, 0, 0, 0.30);

    overflow: hidden;

    transform:
        rotate(-1deg);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* =========================================
   YOUTUBE SCREEN
======================================== */
.youtube-screen {
    position: relative;
    width: 175px;
    height: 100px;

    background: #000;

    overflow: hidden;
}

.youtube-screen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

/* =========================================
   YOUTUBE INFO BAR
========================================= */
.youtube-object-info {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 28px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 0 8px;

    box-sizing: border-box;

    background: #eed1e6;

    color: #1e1e1e;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    font-weight: bold;
    justify-content: center;

    white-space: nowrap;
    overflow: hidden;
}


/* =========================================
   YOUTUBE PLAY ICON
======================================== */
.youtube-play {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    flex-shrink: 0;

    background: #1e1e1e;
    color: #f0f0f0;

    font-size: 8px;
}

/* =========================================
   YOUTUBE HOVER
========================================= */
.watching-item.youtube-video:hover .youtube-object {
    transform:
        translateY(-7px)
        rotate(0deg)
        scale(1.04);

    box-shadow:
        7px 12px 18px rgba(0, 0, 0, 0.35);
}

/* =========================================
   WATCHING POPUP WINDOW
========================================= */
.watching-window {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    width: 800px;
    height: 720px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    overflow: hidden;
}

.watching-window.active {
    display: block;
}


/* =========================================
   WATCHING TITLE BAR
========================================= */
.watching-titlebar {
    height: 32px;
    background: #eed1e6;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

#watching-window-title {
    font-family:
        'Courier New',
        monospace;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

/* =========================================
   WATCHING PAGE TEXT
========================================= */
.watching-page-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 15px;
    color: #1e1e1e;
}

.watching-page-text p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: 1.1em;
}

.watching-page-text h1 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: -10px;
    margin-bottom: 25px;
    margin-left: -28px;
    color: #1e1e1e;
}

.watching-page-text h2 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: 25px;
    margin-bottom: 20px;
    margin-left: -25px;
    color: #1e1e1e;
}

/* =========================================
   WATCHING PAGE IMAGES
========================================= */
.watching-page-text img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
}

/* =========================================
   CLOSE BUTTON
========================================= */
.watching-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.watching-close:hover {
    background: #000;
    color: white;
}


/* =========================================
   WINDOW BODY
========================================= */
.watching-window-body {
    height: calc(100% - 32px);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #f0f0f0;
}

/* =========================================
   INDIVIDUAL WATCHING PAGES
========================================= */
.watching-page {
    display: none;
}

.watching-page.active {
    display: block;
}

/* =========================================
   WATCHING INNER SUB-NAV
========================================= */
.watching-inner-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    gap: 12px;

    width: 100%;

    margin: 15px;
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left: -10px;
    padding: 0 10px 0px 0px;

    border-bottom: 1px solid #1e1e1e;
}

/* =========================================
   WATCHING INNER TABS
========================================= */
.watching-inner-subnav a {
    position: relative;

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

    min-height: 27px;

    padding: 5px 11px;

    box-sizing: border-box;

    background: #eed1e6;
    color: #1e1e1e;

    border: 1px solid #1e1e1e;
    border-bottom: none;

    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: bold;

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

/* =========================================
   HOVER
========================================= */
.watching-inner-subnav a:hover {
    background: #eed1e6;

    transform: translateY(-2px);
}


/* =========================================
   ACTIVE WATCHING TAB
========================================= */
.watching-inner-subnav a.active-watching-tab {
    background: #ffffff;
    color: #1e1e1e;

    transform: translateY(1px);

    z-index: 2;
}

/* =========================================
   WATCHING INNER CONTENT
========================================= */
.watching-inner-content {
    display: none;
}

.watching-inner-content.active-watching-inner-content {
    display: block;
}

/* =========================================
   MOVIE INFO
========================================= */
.movie-info {
    width: 100%;
    box-sizing: border-box;

    margin-top: -10px;
    margin-bottom: 20px;
    padding: 10px;
    margin-left: -10px;

    background: #eed1e6;
    border: 1px solid #1e1e1e;

    font-family: "Courier New", monospace;
    font-size: 12px;
}

/* EACH INFORMATION ROW */
.movie-info-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}

/* LABEL */
.movie-info-label {
    width: 90px;
    flex-shrink: 0;
    font-weight: bold;
}

/* VALUE */
.movie-info-value {
    flex: 1;
}


/* =========================================
   MUSIC ALBUM GRID
========================================= */
.music-album-grid {
    display: grid;
    grid-template-columns: repeat(3, 150px);
    gap: 25px;
    justify-content: center;
    align-items: start;
}

/* =========================================
   MUSIC ALBUM — CD / ALBUM COVER
======================================== */
.music-album {
    position: relative;

    width: 158px;
    height: 150px;

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

    margin: 20px 20px 20px 20px;

    background: #222;
    color: white;

    text-decoration: none;

    overflow: hidden;
    isolation: isolate;

    border: 1px solid #111;

    box-sizing: border-box;

    box-shadow:
        5px 6px 0 rgba(0,0,0,0.18),
        8px 10px 18px rgba(0,0,0,0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* =========================================
   CD CASE — ALBUM ART
========================================= */
.music-album::before {
    content: "";
    position: absolute;

    top: 7px;
    left: 13px;
    right: 7px;
    bottom: 7px;

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

    z-index: 0;
    border: 1px solid rgba(0,0,0,0.45);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.25);
    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

/* =========================================
   CD CASE — PLASTIC FRAME
========================================= */
.music-album::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0.32) 0px,
            rgba(255,255,255,0.08) 4px,
            transparent 7px,
            transparent calc(100% - 7px),
            rgba(0,0,0,0.18) calc(100% - 4px),
            rgba(0,0,0,0.35) 100%
        );

    pointer-events: none;
    z-index: 2;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.35),
        inset 0 -4px 0 rgba(0,0,0,0.18);
}

/* =========================================
   ALBUM TITLE
========================================= */
.music-album span {
    position: relative;
    width: 100%;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
    text-align: center;
    font-family: "hearts";
    font-size: 1.2rem;
    line-height: 1.05;
    color: white;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.82),
            rgba(0,0,0,0)
        );
    text-shadow:
        2px 2px 4px black;

    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    z-index: 3;
}

/* =========================================
   LITTLE ALBUM CORNER MARK
========================================= */
.music-album {
    --corner-size: 8px;
}

.music-album:hover {
    transform:
        translateY(-7px)
        rotate(-1.5deg);
    box-shadow:
        7px 9px 0 rgba(0,0,0,0.20),
        10px 16px 25px rgba(0,0,0,0.28);
}

.music-album:hover::before {
    transform: scale(1.015);
    filter:
        brightness(0.85)
        saturate(1.08);
}

.music-album:hover span {
    opacity: 1;
    transform: translateY(0);

}


/* =========================================
   CD CASE OUTER EDGE
========================================= */
.music-album {
    border: 1px solid #111;
    border-left: 3px solid rgba(255,255,255,0.45);
    border-top: 2px solid rgba(255,255,255,0.30);
    border-right: 3px solid rgba(0,0,0,0.40);
    border-bottom: 3px solid rgba(0,0,0,0.45);
}

/* =========================================
   CD CASE — LEFT SPINE / HINGE
========================================= */

.music-album .cd-spine {
    position: absolute;
    top: 0;
    left: 0;
    width: 13px;
    height: 100%;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0.38),
            rgba(255,255,255,0.14) 35%,
            rgba(0,0,0,0.12) 75%,
            rgba(0,0,0,0.22)
        );

    border-right: 1px solid rgba(0,0,0,0.35);
    box-shadow:
        inset 1px 0 rgba(255,255,255,0.3),
        2px 0 3px rgba(0,0,0,0.15);
    z-index: 4;
    pointer-events: none;
}

/* =========================================
   ALBUM IMAGES
======================================== */
.music-album.default-tab::before {
    background-image: url("http://dl.glitter-graphics.net/pub/974/974051kwkmujp3uo.jpg");
}

.music-album.onedirection::before {
    background-image: url("https://www.musicrecords.cz/upload/catalogue/image/original//big/a13836756821169385014.jpg");
}

.music-album.falling::before {
    background-image: url("https://cdn-images.dzcdn.net/images/cover/255346c64515bac9c0f16fcf6a051737/0x1900-000000-80-0-0.jpg");
}

.music-album.conan::before {
    background-image: url("https://upload.wikimedia.org/wikipedia/en/6/6a/Conan_Gray_-_Wishbone.png?utm_source=en.wikipedia.org&utm_campaign=index&utm_content=original");
}

.music-album.wetleg::before {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjCfCB5OUx1aE932o2X03IBUwUW_bfhOCOttYcrreMoTUL2eefIpR_Y0Ke&s=10");
}

.music-album.lana::before {
    background-image: url("https://cdn-images.dzcdn.net/images/cover/de9496f611d6d7391fa57401bac99d5b/1900x1900-000000-80-0-0.jpg");
}

.music-album.recoil::before {
    background-image: url("https://mutebank.co.uk/cdn/shop/products/Recoil_Liquid_vinylcover_1080_grande.jpg?v=1660740679");
}

.music-album.fav-playlist::before {
    background-image: url("https://img1.picmix.com/output/stamp/normal/4/8/3/5/1435384_54f6a.gif");
}


/* =========================================
   MUSIC ALBUM WINDOW
========================================= */
.music-window {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    width: 750px;
    height: 700px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    
    z-index: 9999;
    overflow: hidden;
}

.music-window.active {
    display: block;
}

/* =========================================
   TITLE BAR
========================================= */
.music-titlebar {
    height: 32px;
    background: #eed1e6;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

.music-window-title {
    font-family: 'Courier New';
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

/* =========================================
   CLOSE BUTTON
========================================= */
.music-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.music-close:hover {
    background: #000;
    color: white;
}

/* =========================================
   WINDOW BODY
========================================= */
.music-window-body {
    height: calc(100% - 32px);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #f0f0f0;
}

/* =========================================
   ALBUM PAGE
========================================= */
.music-album-page {
    display: none;
    min-height: 100%;
}

.music-album-page.active {
    display: grid;
}

.music-page-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 15px;
    color: #1e1e1e;
}

.music-page-text p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: 1.1em;
}

.music-page-text h1 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: -15px;
    margin-bottom: 35px;
    margin-left: -28px;
    color: #1e1e1e;
}

.music-page-text img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
}


/* =========================================
HR WATCHING CONTENT
========================================= */
.hr-content {
    display: none;
}
.hr-content.active-hr-content {
    display: block;
}
.hr-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 25px;
    justify-content: center;
}
.hr-subnav a {
    background-color: #ced8f0;
    color: black;

    text-decoration: none;
    font-family: "futurahandwritten";
    font-size: 0.9rem;

    min-height: 15px;
    padding: 8px;

    text-align: center;
    align-content: center;

    box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
    transition: all 0.3s ease;

    border-radius: 5px;

    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.hr-subnav a.active-hr {
    background-color: #f0f0f0;
    color: black;
}
    
/* =========================================
DANNY CONTENT
========================================= */
.danny-content {
    display: none;
}
.danny-content.active-danny-content {
    display: block;
}
.danny-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 25px;
    justify-content: center;
}
.danny-subnav a {
    background-color: #eed1e6;
    color: black;

    text-decoration: none;
    font-family: "futurahandwritten";
    font-size: 0.8rem;

    min-height: 15px;
    padding: 8px;

    text-align: center;
    align-content: center;

    box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
    transition: all 0.3s ease;

    border-radius: 5px;

    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.danny-subnav a.active-danny {
    background-color: #984a96;
    color: white;
}


/* =========================================
   BOOK COVER TILES
========================================= */
.book-subnav {
    display: grid;
    grid-template-columns: repeat(4, 110px);
    gap: 25px;
    justify-content: center;
    padding: 25px 25px 25px;
}

/* =========================================
   INDIVIDUAL BOOK COVER
========================================= */
.book-cover {
    position: relative;
    width: 120px;
    height: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    background-color: #1e1e1e;
    color: white;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        4px 6px 18px rgba(0,0,0,0.20);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
}

.book-cover.default-tab {
    width: 120px;
    height: 200px;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    border: none;
}

/* =========================================
   BOOK COVER IMAGE
========================================= */
.book-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

/* =========================================
   DARK GRADIENT
========================================= */
.book-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.75),
            rgba(0,0,0,0.05) 65%
        );
    z-index: -1;
}

/* =========================================
   DEFAULT TAB — NO DARK GRADIENT
========================================= */
.book-cover.default-tab::after {
    background: none;
}

/* =========================================
   BOOK TITLE
========================================= */
.book-cover span {
    width: 100%;
    padding: 35px 10px 15px;
    box-sizing: border-box;
    text-align: center;
    font-family: "hearts";
    font-size: 1.2rem;
    line-height: 1.1;
    color: white;
    text-shadow:
        2px 2px 5px black;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}
/* =========================================
   HOVER
========================================= */
.book-cover:hover {
    transform:
        translateY(-8px)
        rotate(-1deg);
    box-shadow:
        6px 10px 25px rgba(0,0,0,0.25);
}

.book-cover:hover span {
    opacity: 1;
    transform: translateY(-3px);
    text-shadow:
        2px 2px 5px black,
        0 0 8px rgba(255,255,255,0.4);
}

.book-cover.default-tab {
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.book-cover.default-tab:hover {
    transform: translateY(-3px);
    box-shadow: none;
}

.book-cover.default-tab::after {
    background: none;
}

/* =========================================
   BOOK COVER IMAGES
========================================= */
.book-cover.default-tab {
    border: none;
    box-shadow: none;
}

.book-cover.default-tab::before {
    background-image: url("https://adoniska.neocities.org/stack_of_books.webp");
    background-size: 115% auto;
    background-repeat: no-repeat;
    background-position: bottom;
}

.book-cover.default-tab::after {
    background: none;
}

.book-cover.default-tab span {
    display: none;
}

.book-cover.heatedrivalry::before {
    background-image:
        url("https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1764956889i/220966494.jpg");
}

.book-cover.sunrise::before {
    background-image:
        url("https://www.knihydobrovsky.cz/thumbs/book-detail/mod_eshop/produkty/802999811/sunrise-on-the-reaping-collector-s-edition.jpg");
}

.book-cover.twillight::before {
    background-image:
        url("https://m.media-amazon.com/images/I/61sW9OBNRxL.jpg");
}

.book-cover.hunger::before {
    background-image:
        url("https://m.media-amazon.com/images/I/71un2hI4mcL._AC_UF1000,1000_QL80_.jpg");
}

.book-cover.materials::before {
    background-image:
        url("https://m.media-amazon.com/images/I/71Qai1pg4dL._AC_UF1000,1000_QL80_.jpg");
}

.book-cover.callmeby::before {
    background-image:
        url("https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1519203520i/36336078.jpg");
}

.book-cover.achilles::before {
    background-image:
        url("https://libris.to/media/jacket/15828748o.jpg");
}

.book-cover.fanfictions::before {
    background-image:
        url("https://shopbibliophile.com/cdn/shop/files/PRODUCTPHOTOS_fictionaddiction-07.png?v=1755202495&width=600");
}


/* =========================================
   BOOK POP-UP WINDOW
========================================= */
.book-window {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    width: 750px;
    height: 700px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4);
    z-index: 9999;
    overflow: hidden;
}

/* OPEN WINDOW */
.book-window.active {
    display: block;
}

.book-page-text img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   BOOK TITLE BAR
========================================= */
.book-titlebar {
    height: 32px;
    background: #eed1e6;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

/* ========================================
   BOOK WINDOW TITLE
========================================= */
.book-window-title {
    font-family:
        'Courier New',
        monospace;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

/* =========================================
   CLOSE BUTTON
========================================= */
.book-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.book-close:hover {
    background: #000;
    color: white;
}

/* =========================================
   BOOK WINDOW BODY
========================================= */
.book-window-body {
    height: calc(100% - 32px);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #f0f0f0;
}

/* =========================================
   OUTER BOOK PAGES
========================================= */
.book-page {
    display: none;
}

/* SHOW SELECTED BOOK
========================================= */
.book-page.active-book-page {
    display: block;
}

/* =========================================
   BOOK PAGE TEXT
========================================= */
.book-page-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 15px 15px 1px 15px;
    color: #1e1e1e;
}

.book-page-text p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: 1.1em;
}

.book-page-text h1 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: -5px;
    margin-bottom: 25px;
    margin-left: -28px;
    color: #1e1e1e;
}

.binds-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #1e1e1e;
    text-align: center;
}

.fav-lines-text {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1rem;
    padding: 15px;
    color: #1e1e1e;
}

.fav-lines-text p b {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1rem;
    font-style: oblique;
}

.book-citation-text {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1rem;
    color: #1e1e1e;
    padding-left: 35px;
    padding-right: 15px;
    margin-top: -10px;
    margin-bottom: -10px;
}

.book-citation-text p b {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.1rem;
    color: #1e1e1e;
    font-weight: bold;
}

/* =========================================
   WATCHING PAGE IMAGES
========================================= */
.book-page-text img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 450px;
}


/* =========================================
   BOOK INTERNAL SUB-NAV
========================================= */
.book-inner-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    gap: 12px;

    width: 100%;

    margin: 15px;
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left: -10px;
    padding: 0 10px 0px 0px;

    border-bottom: 1px solid #1e1e1e;
}

/* =========================================
   INTERNAL SUB-NAV BUTTONS
========================================= */
.book-inner-subnav a {
    position: relative;

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

    min-height: 27px;

    padding: 5px 11px;

    box-sizing: border-box;

    background: #eed1e6;
    color: #1e1e1e;

    border: 1px solid #1e1e1e;
    border-bottom: none;

    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: bold;

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

/* =========================================
   INTERNAL SUB-NAV HOVER
========================================= */
.book-inner-subnav a:hover {
    background: #eed1e6;

    transform: translateY(-2px);
}

/* =========================================
   ACTIVE INTERNAL TAB
========================================= */
.book-inner-subnav a.active-book-tab {
    background: #ffffff;
    color: #1e1e1e;

    transform: translateY(1px);

    z-index: 2;
}

/* =========================================
   INNER BOOK CONTENT
========================================= */
.book-inner-content {
    display: none;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 20px;
}

/* SHOW ACTIVE INNER CONTENT
========================================= */
.book-inner-content.active-book-inner-content {
    display: block;
}

/* =========================================
   BOOK WINDOW IMAGES
========================================= */
.book-window-body img {
    max-width: 100%;

    height: auto;
}

/* =========================================
   BOOK WINDOW HEADINGS
========================================= */
.book-window-body h1,
.book-window-body h2,
.book-window-body h3,
.book-window-body h4 {
    margin-top: 0;
}


/* =========================================
   FANFICTIONS WINDOW-STYLE SUB-NAV
========================================= */
.fanfictions-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    gap: 12px;

    width: 100%;

    margin: 15px;
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left: -10px;
    padding: 0 10px 0px 0px;

    border-bottom: 1px solid #1e1e1e;
}

/* =========================================
   FANFICTION TABS
========================================= */
.fanfictions-subnav a {
    position: relative;

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

    min-height: 27px;

    padding: 5px 11px;

    box-sizing: border-box;

    background: #eed1e6;
    color: #1e1e1e;

    border: 1px solid #1e1e1e;
    border-bottom: none;

    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: bold;

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

/* =========================================
   HOVER
========================================= */
.fanfictions-subnav a:hover {
    background: #eed1e6;

    transform: translateY(-2px);
}


/* =========================================
   ACTIVE TAB
========================================= */
.fanfictions-subnav a.active-fanfictions {
    background: #ffffff;
    color: #1e1e1e;

    transform: translateY(1px);

    z-index: 2;
}

/* =========================================
   FANFICTION CONTENT
========================================= */
.fanfictions-content,
.wolfbird-content,
.chernobog-content,
.hey-content {
    display: none;
}

.fanfictions-content.active-fanfictions-content,
.wolfbird-content.active-wolfbird-content,
.chernobog-content.active-chernobog-content,
.hey-content.active-hey-content {
    display: block;
}

/* =========================================
   WOLFBIRD AND CHERNOBOG WINDOW-STYLE SUB-NAV
========================================= */
.wolfbird-subnav,
.chernobog-subnav,
.hey-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    gap: 12px;

    width: 100%;

    margin: 15px;
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left: -5px;
    padding: 0 10px 0px 0px;

    border-bottom: 1px solid #1e1e1e;
}

.wolfbird-subnav a,
.chernobog-subnav a,
.hey-subnav a{
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;

    padding: 5px 11px;

    box-sizing: border-box;

    background: #f0f0f0;
    color: #1e1e1e;

    border: 1px solid #1e1e1e;
    border-bottom: none;

    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 12px;

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

.wolfbird-subnav a:hover,
.chernobog-subnav a:hover,
.hey-subnav a:hover{
    background: #1e1e1e;
    color: #f0f0f0;

    transform: translateY(-2px);
}


.wolfbird-subnav a.active-wolfbird, 
.chernobog-subnav a.active-chernobog,
.hey-subnav a.active-hey {
    background: #1e1e1e;
    color: #f0f0f0;

    transform: translateY(1px);

    z-index: 2;
}


/* =========================================
MASONRY-STYLE MOODBOARD (BOOKS)
========================================= */
.hr-masonry,
.wolfbird-masonry,
.chernobog-masonry,
.sunrise-masonry,
.twillight-masonry,
.hunger-masonry,
.materials-masonry,
.callmeby-masonry,
.tomb-masonry,
.spyro-masonry,
.zoo-masonry,
.dread-masonry,
.until-masonry,
.nightmares-masonry,
.detroit-masonry,
.guardian-masonry,
.achilles-masonry,
.charmed-masonry,
.dr-masonry,
.penny-masonry,
.shadowhunters-masonry,
.arcane-masonry,
.gambit-masonry,
.traitors-masonry,
.armageddon-masonry,
.moulin-masonry,
.tres-masonry,
.hey-masonry,
.leviticus-mansory {
    columns: 3;
    column-gap: 15px;
    width: 90%;
    margin: 0 auto;
}

.hr-masonry img,
.wolfbird-masonry img,
.chernobog-masonry img,
.sunrise-masonry img,
.twillight-masonry img,
.hunger-masonry img,
.materials-masonry img,
.callmeby-masonry img,
.tomb-masonry img,
.spyro-masonry img,
.zoo-masonry img,
.dread-masonry img,
.until-masonry img,
.nightmares-masonry img,
.detroit-masonry img,
.guardian-masonry img,
.achilles-masonry img,
.charmed-masonry img,
.dr-masonry img,
.penny-masonry img,
.shadowhunters-masonry img,
.arcane-masonry img,
.gambit-masonry img,
.traitors-masonry img,
.armageddon-masonry img,
.moulin-masonry img,
.tres-masonry img,
.hey-masonry img,
.leviticus-mansory img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;

    break-inside: avoid;
}


/* =========================================
   PLAYING — GAME CASE COLLECTION
========================================= */
.games-subnav {
    position: relative;
    width: 105%;
    min-height: 430px;
    padding: 25px 25px 25px 45px;
    box-sizing: border-box;

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

    gap: 0;

    box-shadow:
        inset 0 0 30px rgba(0,0,0,.06),
        0 8px 20px rgba(0,0,0,.12);
    perspective: 1000px;
}

/* =========================================
   BASIC GAME CASE
========================================= */
.game-object {
    position: relative;
    display: block;

    width: 135px;
    height: 190px;

    margin: 10px -4px;

    box-sizing: border-box;
    overflow: hidden;

    color: white;
    text-decoration: none;
    background: #222;
    border: 3px solid rgba(20,20,20,.9);
    border-radius: 2px;

    box-shadow:
        5px 8px 12px rgba(0,0,0,.30),
        inset 2px 0 rgba(255,255,255,.18);
    transform-style: preserve-3d;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
    z-index: 1;
}

/* Plastic case reflection */

.game-object::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,.20) 0%,
            rgba(255,255,255,.05) 20%,
            transparent 38%,
            transparent 75%,
            rgba(255,255,255,.10) 100%
        );
    border: 1px solid rgba(255,255,255,.35);
}

/* Plastic edge */
.game-object::after {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 7px;
    height: 100%;

    z-index: 21;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.28),
            rgba(255,255,255,.08),
            transparent
        );
}

/* =========================================
   HOVER
========================================= */
.game-object:hover {
    z-index: 50;

    transform:
        translateY(-18px)
        rotate(0deg)
        scale(1.04);

    box-shadow:
        8px 18px 25px rgba(0,0,0,.35),
        0 0 0 2px rgba(255,255,255,.5);

    filter: brightness(1.08);
}

/* =========================================
   GAME CASE INTERNAL ELEMENTS
========================================= */
.case-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px 8px;
    box-sizing: border-box;
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(0,0,0,.55);
    z-index: 10;
}

.case-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 6px 7px;
    box-sizing: border-box;
    z-index: 10;
    
    font-size: 7px;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: rgba(0,0,0,.7);
}

/* =========================================
   GAME COVER IMAGE
========================================= */

.game-cover {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;

    overflow: hidden;

    z-index: 2;
}


/* =========================================
   GAME COVER IMAGE
========================================= */

.game-cover img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform .4s ease,
        filter .4s ease;
}


/* =========================================
   COVER DARKENING
========================================= */

.game-cover::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.15),
            transparent 35%,
            rgba(0,0,0,.15)
        );

    pointer-events: none;
}


/* =========================================
   HOVER
========================================= */
.game-object:hover .game-cover img {
    transform: scale(1.04);
    filter: brightness(1.08);
}



/* =========================================
   INDIVIDUAL CASE POSITIONS
========================================= */
.tomb {
    transform: rotate(-4deg);
    background:
        linear-gradient(
            145deg,
            #526e70,
            #26393a 50%,
            #15191b
        );
    z-index: 3;
}

.spyro {
    transform: rotate(2deg);
    margin-left: -8px;
    background:
        radial-gradient(
            circle at 70% 30%,
            #f6a33a 0 5%,
            transparent 6%
        ),
        linear-gradient(
            145deg,
            #7542a8,
            #43206e 55%,
            #21132f
        );
    z-index: 5;
}

.zoo {
    transform: rotate(-2deg);
    margin-left: -9px;
    background:
        radial-gradient(
            circle at 25% 25%,
            #d7a85c 0 4%,
            transparent 5%
        ),
        linear-gradient(
            145deg,
            #6b8b45,
            #315132 55%,
            #1b2d20
        );
    z-index: 4;
}

.dread {
    transform: rotate(4deg);
    margin-left: -7px;
    background:
        linear-gradient(
            155deg,
            #aabdc3,
            #415b65 42%,
            #18252c 100%
        );
    z-index: 2;
}

.until {
    transform: rotate(-3deg);
    margin-left: 3px;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(255,255,255,.25),
            transparent 20%
        ),
        linear-gradient(
            150deg,
            #3c5361,
            #20282d 55%,
            #090c0e
        );
    z-index: 6;
}

.nightmares {
    transform: rotate(3deg);
    margin-left: -8px;
    background:
        linear-gradient(
            155deg,
            #77736b,
            #292826 55%,
            #11100f
        );
    z-index: 5;
}

.detroit {
    transform: rotate(-2deg);
    margin-left: -6px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.25),
            transparent 15%
        ),
        linear-gradient(
            145deg,
            #89b6c4,
            #426b7a 50%,
            #1b343e
        );
    z-index: 4;
}

.guardian {
    transform: rotate(4deg);
    margin-left: -8px;
    background:
        linear-gradient(
            150deg,
            #b6b1a0,
            #67665e 45%,
            #252723
        );
    z-index: 3;
}

.forza {
    transform: rotate(-3deg);
    margin-left: -5px;
    background:
        repeating-linear-gradient(
            145deg,
            #292929 0px,
            #292929 12px,
            #444 13px,
            #444 15px
        );
    z-index: 5;
}

.palia {
    transform: rotate(-2deg);
    margin-left: -6px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255,255,255,.25),
            transparent 15%
        ),
        linear-gradient(
            145deg,
            #89b6c4,
            #426b7a 50%,
            #1b343e
        );
    z-index: 4;
}


/* =========================================
   SPECIAL INTRO / CONTROLLER
========================================= */
.game-intro {
    width: 185px;
    height: 125px;

    margin-right: 20px;
    align-self: center;

    transform: rotate(-3deg);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #f5e6f0,
            #eed1e6 45%,
            #c9aabd
        );

    border: 3px solid #1e1e1e;

    box-shadow:
        7px 10px 15px rgba(0,0,0,.25),
        inset 3px 3px 8px rgba(255,255,255,.7);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.game-intro:hover {
    transform:
        translateY(-18px)
        rotate(0deg)
        scale(1.05);

    box-shadow:
        9px 18px 25px rgba(0,0,0,.3),
        inset 3px 3px 8px rgba(255,255,255,.7);
}

/* =========================================
   CONTROLLER SCREEN
========================================= */
.game-intro-screen {
    position: absolute;

    left: 45px;
    top: 17px;

    width: 95px;
    height: 48px;

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

    text-align: center;

    box-sizing: border-box;

    color: #eed1e6;

    font-family: monospace;
    font-size: 11px;
    line-height: 1.05;

    background:
        linear-gradient(
            145deg,
            #3a2937,
            #1e1e1e 65%,
            #151515
        );

    border:
        3px solid #1e1e1e;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.8),
        0 1px 0 rgba(255,255,255,.35);
}

/* =========================================
   CONTROLLER BUTTONS
======================================== */
.game-intro-controls {
    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 13px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* D-PAD */
.dpad {
    font-size: 25px;

    color: #1e1e1e;

    text-shadow:
        1px 1px 0 rgba(255,255,255,.65),
        -1px -1px 0 rgba(0,0,0,.15);
}

/* BUTTONS */
.buttons {
    font-size: 17px;

    letter-spacing: 5px;

    color: #8e526f;

    text-shadow:
        1px 1px 0 rgba(255,255,255,.5);
}

/* =========================================
   CONTROLLER LABEL
========================================= */
.game-intro-label {
    position: absolute;

    top: 3px;
    left: 8px;

    font-size: 7px;
    letter-spacing: 2px;

    color: #1e1e1e;

    text-transform: uppercase;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 700px) {
    .games-subnav {
        justify-content: center;
        padding: 25px 15px 35px;
    }
    .game-object {
        width: 120px;
        height: 170px;
    }
    .game-intro {
        width: 170px;
        height: 115px;
        margin-bottom: 20px;
    }
}

/* =========================================
   STEAM REVIEWS — SUBNAV BUTTON
========================================= */
.steam-reviews-button {
    position: relative;

    width: 120px;
    height: 70px;

    margin-left: 5px;
    margin-right: 20px;

    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    box-sizing: border-box;

    text-decoration: none;

    color: #1e1e1e;

    background:
        linear-gradient(
            145deg,
            #eed1e6,
            #d8b6d0 55%,
            #b991b0
        );

    border: 3px solid #1e1e1e;
    border-radius: 8px;

    box-shadow:
        6px 8px 12px rgba(0,0,0,.25),
        inset 2px 2px 5px rgba(255,255,255,.7);

    transform: rotate(-2deg);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;

    z-index: 10;
}

/* little decorative edge */
.steam-reviews-button::before {
    content: "";

    position: absolute;

    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;

    border: 1px dashed rgba(30,30,30,.35);

    pointer-events: none;
}

/* ICON */
.steam-icon {
    font-size: 25px;

    line-height: 1;

    color: #8e526f;

    text-shadow:
        1px 1px 0 rgba(255,255,255,.7);
}

/* TEXT */
.steam-reviews-text {
    font-family: "Courier New", monospace;

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

    line-height: 1.15;

    letter-spacing: 1px;

    text-align: left;
}

/* HOVER */
.steam-reviews-button:hover {
    transform:
        translateY(-12px)
        rotate(0deg)
        scale(1.05);

    box-shadow:
        8px 15px 20px rgba(0,0,0,.3),
        inset 2px 2px 6px rgba(255,255,255,.8);

    filter: brightness(1.06);

    z-index: 50;
}


/* =========================================
   GAME POPUP WINDOW
========================================= */
.game-window {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    width: 750px;
    height: 700px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    overflow: hidden;
}

.game-window.active {
    display: block;
}

/* =========================================
   GAME TITLE BAR
========================================= */
.game-titlebar {
    height: 32px;
    background: #eed1e6;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}


.game-window-title {
    font-family:
        'Courier New',
        monospace;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

/* =========================================
   GAME PAGE TEXT
========================================= */
.game-page-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 15px;
    color: #1e1e1e;
}

.game-page-text p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: 1.1em;
}

.game-page-text h1 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: -5px;
    margin-bottom: 25px;
    margin-left: -28px;
    color: #1e1e1e;
}

.game-page-text h6 {
    font-family: "hearts";
    font-size: 1.6em;
    color: #1e1e1e;
    margin-bottom: 25px;
    margin-top: -1px;
}


/* =========================================
   CLOSE BUTTON
========================================= */
.game-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.game-close:hover {
    background: #000;
    color: white;
}

/* =========================================
   WINDOW BODY
========================================= */
.game-window-body {
    height: calc(100% - 32px);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #f0f0f0;
}

/* =========================================
   INDIVIDUAL GAME PAGES
========================================= */
.game-page {
    display: none;
}

.game-page.active {
    display: block;
}

/* =========================================
   GAME WINDOW-STYLE INNER SUB-NAV
========================================= */
.game-inner-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;

    gap: 12px;

    width: 100%;

    margin: 15px;
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left: -10px;
    padding: 0 10px 0px 0px;

    border-bottom: 1px solid #1e1e1e;
}

/* =========================================
   GAME INNER TABS
========================================= */
.game-inner-subnav a {
    position: relative;

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

    min-height: 27px;

    padding: 5px 11px;

    box-sizing: border-box;

    background: #eed1e6;
    color: #1e1e1e;

    border: 1px solid #1e1e1e;
    border-bottom: none;

    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: bold;

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

/* =========================================
   HOVER
========================================= */
.game-inner-subnav a:hover {
    background: #eed1e6;

    transform: translateY(-2px);
}

/* =========================================
   ACTIVE GAME TAB
========================================= */
.game-inner-subnav a.active-game-tab {
    background: #ffffff;
    color: #1e1e1e;

    transform: translateY(1px);

    z-index: 2;
}

/* =========================================
   GAME INNER CONTENT
========================================= */
.game-inner-content {
    display: none;
}

/* SHOW ACTIVE GAME CONTENT */
.game-inner-content.active-game-inner-content {
    display: block;
}
.game-page-text img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}




/* =========================================
   LYRICS WINDOW
========================================= */
.lyrics-window {
    display: none;
    position: fixed;
    top: 170px;
    left: 69%;

    width: 550px;
    height: 720px;

    transform: translateX(-50%);

    background: #1e1e1e;
    border: 2px solid #eed1e6;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4);

    z-index: 9999;
    overflow: hidden;
}

/* OPEN WINDOW */
.lyrics-window.active {
    display: block;
}


/* =========================================
   TITLE BAR
========================================= */
.lyrics-titlebar {
    height: 32px;

    background: #545353;
    color: #f0f0f0;

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

    padding: 0 6px;

    box-sizing: border-box;

    cursor: grab;
    user-select: none;
}

/* =========================================
   WINDOW TITLE
========================================= */
.lyrics-window-title {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 5px;
}
.lyrics-window-title img {
    max-height: 24px;
    width: auto;
}

/* =========================================
   CLOSE BUTTON
========================================= */
.lyrics-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}
.lyrics-close:hover {
    background: #000;
    color: white;
}


/* =========================================
   WINDOW BODY
========================================= */

.lyrics-window-body {
    height: calc(100% - 32px);
    padding: 25px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #1e1e1e;
}

/* =========================================
   LYRICS PAGE
========================================= */
.lyrics-page {
    display: none;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================
   PAGE TEXT
========================================= */
.lyrics-page-text {
    width: 100%;
    box-sizing: border-box;
    font-family:
        'Courier New',
        monospace;
    color: #f0f0f0;
}

/* =========================================
   PAGE HEADING
========================================= */
.lyrics-page-text h1 {
    font-family: "hearts";
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 25px;
    margin-left: -28px;
    color: #f0f0f0;
    text-align-last: center;
}

/* =========================================
   PAGE PARAGRAPHS
========================================= */
.lyrics-page-text p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* =========================================
   SHRINE BUTTON
========================================= */
.lyrics-apparatus {
    display: grid;
    grid-template-columns: repeat(5, 120px);
    gap: 20px;
    justify-content: center;
}

.lyrics-apparatus a {
    display: block;
    text-decoration: none;
}

.lyrics-apparatus img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.lyrics-apparatus img:hover {
    transform: scale(1.05) rotate(-1deg);
}



/* =========================================
   OTHER OBSESSIONS — COLLAGE
========================================= */
.other-subnav {
    position: relative;
    width: 100%;
    min-height: 450px;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 35px;
    overflow: hidden;
}

/* =========================================
   COLLAGE ITEM
========================================= */
.other-collage-item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 155px;
    padding: 8px 8px 14px;
    box-sizing: border-box;
    background: #fff;
    color: #1e1e1e;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow:
        3px 5px 12px rgba(0,0,0,.18);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
    cursor: pointer;
}

/* =========================================
   IMAGE
========================================= */
.other-collage-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: #ddd;
}

.other-collage-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .4s ease,
        filter .4s ease;
}

/* =========================================
   TITLE
========================================= */
.other-collage-item span {
    display: block;
    padding-top: 10px;
    text-align: center;
    font-family: "hearts";
    font-size: 1.2rem;
    line-height: 1.1;
    color: #1e1e1e;
}

/* =========================================
   HOVER
========================================= */
.other-collage-item:hover {
    z-index: 20;

    box-shadow:
        6px 12px 22px rgba(0,0,0,.25);
}

.other-collage-item.rhea:hover {
    transform: rotate(-5deg) translateY(-10px) scale(1.03);
}

.other-collage-item.people:hover {
    transform: rotate(3deg) translateY(-10px) scale(1.03);
}

.other-collage-item.everythingart:hover {
    transform: rotate(-2deg) translateY(-10px) scale(1.03);
}

.other-collage-item.fanfic:hover {
    transform: rotate(5deg) translateY(-10px) scale(1.03);
}

.other-collage-item.eva:hover {
    transform: rotate(-4deg) translateY(-10px) scale(1.03);
}

.other-collage-item.larry:hover {
    transform: rotate(2deg) translateY(-10px) scale(1.03);
}

.other-collage-item:hover img {
    transform: scale(1.03);
    filter: brightness(.9);
}

/* =========================================
   INDIVIDUAL COLLAGE POSITIONS
========================================= */
.other-collage-item.rhea{
    transform: rotate(-5deg);
    margin-top: 15px;
}

.other-collage-item.people {
    transform: rotate(3deg);
    margin-top: -25px;
}

.other-collage-item.everythingart {
    transform: rotate(-2deg);
    margin-top: 30px;
}

.other-collage-item.fanfic {
    transform: rotate(5deg);
    margin-top: -15px;
}

.other-collage-item.eva {
    transform: rotate(-4deg);
    margin-top: 25px;
}

.other-collage-item.larry {
    transform: rotate(2deg);
    margin-top: -30px;
}

/* =========================================
   OTHER OBSESSIONS POPUP WINDOW
========================================= */
.other-window {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    width: 750px;
    height: 700px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4);
    z-index: 9999;
    overflow: hidden;
}

/* =========================================
   OPEN WINDOW
========================================= */
.other-window.active {
    display: block;
}

/* =========================================
   TITLE BAR
========================================= */
.other-titlebar {
    height: 32px;
    background: #eed1e6;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

/* =========================================
   WINDOW TITLE
========================================= */
.other-window-title {
    font-family:
        'Courier New',
        monospace;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

/* =========================================
   CLOSE BUTTON
========================================= */
.other-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.other-close:hover {
    background: #000;
    color: white;
}

/* =========================================
   WINDOW BODY
========================================= */
.other-window-body {
    height: calc(100% - 32px);
    padding: 25px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #f0f0f0;
}

/* =========================================
   INDIVIDUAL PAGES
========================================= */
.other-page {
    display: none;
}

.other-page.active-other-page {
    display: block;
}

/* =========================================
   PAGE TEXT
========================================= */
.other-page-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 15px;
    color: #1e1e1e;
}

.other-page-text p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: 1.1em;
}

.other-page-text h1 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: -5px;
    margin-bottom: 25px;
    margin-left: -28px;
    color: #1e1e1e;
}

/* =========================================
   IMAGES
========================================= */
.other-page-text img {
    display: block;
    width: 450px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}



/* =========================================
   BAG POP-UP WINDOW
========================================= */
.my-bag-window {
    display: none;
    position: fixed;
    top: 80px;
    left: 50%;
    width: 1300px;
    height: 780px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 9999;
    overflow: hidden;
}

.my-bag-window.active {
    display: block;
}

/* =========================================
   BAG WINDOW CONTENT
======================================== */
.my-bag-window-content {
    height: calc(100% - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 20px 20px 20px 20px;
}

/* =========================================
   TITLE BAR
========================================= */
.my-bag-titlebar {
    height: 32px;
    background: #eed1e6;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

/* =========================================
   MY BAG CLOSE BUTTON
========================================= */
.my-bag-close {
    width: 24px;
    height: 24px;
    padding: 0;

    background: #1e1e1e;
    color: #f0f0f0;

    border: 1px solid #000;

    font-family: "Courier New", monospace;
    font-size: 18px;
    line-height: 18px;

    cursor: pointer;
}

.my-bag-close:hover {
    background: #000;
    color: white;
}

/* =========================================
   WINDOW TITLE
========================================= */
#my-bag-window-title {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    margin-left: 15px;
}

/* =========================================
   MY BAG
========================================= */
.bag-content {
    width: 100%;
    padding: 20px 20px 20px 20px;
    box-sizing: border-box;
}

.bag-container {
    position: relative;
    width: 100%;
    margin: 0 auto 20px;
}

.bag-image {
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto;
}

.bag-items-container .bag-image {
    width: 80%;
}

.on-me-container .bag-image {
    width: 55%;
}

/* =========================================
   MY BAG TEXT
========================================= */
.bag-page-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 15px;
    color: #f0f0f0;
}

.bag-page-text p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: medium;
    color: #f0f0f0;
}

.bag-page-text h1 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: -5px;
    margin-bottom: 25px;
    margin-left: -28px;
    color: #eed1e6;
}
/* =========================================
   INVISIBLE HOTSPOTS
========================================= */
.bag-hotspot {
    position: absolute;
    cursor: help;
}


/* =========================================
   TOOLTIP
========================================= */
.bag-tooltip {
    position: absolute;
    width: 220px;
    padding: 15px;
    background: #1e1e1e;
    color: #eed1e6;
    border: 1px solid #eed1e6;
    box-shadow:
        4px 5px 10px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;

    transform: translateY(5px);
    z-index: 20;
    pointer-events: none;
}

/* TITLE */
.bag-tooltip strong {
    display: block;
    font-family: "hearts";
    color: #eed1e6;
    font-size: 1.2em;
    margin-bottom: 5px;
}

/* TEXT */
.bag-tooltip p {
    display: block;
    font-family: "Courier New", monospace;
    color: #eed1e6;
    font-size: 0.8em;
    line-height: 1.4;
    margin: 0;
}

/* SHOW */
.bag-hotspot:hover .bag-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================
   SHOPPING BAG
========================================= */
.shopping-bag {
    left: 15%;
    top: 5%;
    width: 30%;
    height: 55%;
}

.shopping-bag .bag-tooltip {
    top: -30px;
    right: 290px;
}


/* =========================================
   WALLET
========================================= */
.bag-wallet {
    left: 53%;
    top: 1%;
    width: 15%;
    height: 28%;
}

.bag-wallet .bag-tooltip {
    top: -35px;
    right: 210px;
}

/* =========================================
   MASKS
========================================= */
.bag-mask {
    left: 47%;
    top: 32%;
    width: 15%;
    height: 30%;
}

.bag-mask .bag-tooltip {
    top: 30px;
    right: -190px;
}

/* =========================================
   TISSUES
========================================= */
.bag-tissues {
    left: 67%;
    top: 14%;
    width: 8%;
    height: 25%;
}

.bag-tissues .bag-tooltip {
    top: -50px;
    right: -240px;
}

/* =========================================
   GUM
========================================= */
.bag-gum {
    left: 65%;
    top: 44%;
    width: 22%;
    height: 19%;
}

.bag-gum .bag-tooltip {
    bottom: 30px;
    left: 170px;
}

/* =========================================
   COMB
========================================= */
.bag-comb {
    left: 64%;
    top: 65%;
    width: 5%;
    height: 30%;
}

.bag-comb .bag-tooltip {
    bottom: 50px;
    left: 70px;
}

/* =========================================
   USB
========================================= */
.bag-usb {
    left: 70%;
    top: 75%;
    width: 8%;
    height: 20%;
}

.bag-usb .bag-tooltip {
    bottom: 90px;
    right: -205px;
}

/* =========================================
   MIRROR
========================================= */
.bag-mirror {
    left: 78%;
    top: 75%;
    width: 10%;
    height: 20%;
}

.bag-mirror .bag-tooltip {
    bottom: 120px;
    right: -100px;
}

/* =========================================
   EYE-LINERS
========================================= */
.bag-eye {
    left: 59%;
    top: 65%;
    width: 4%;
    height: 25%;
}

.bag-eye .bag-tooltip {
    bottom: 78px;
    left: 80px;
}

/* =========================================
   LIPS
========================================= */
.bag-lips {
    left: 54%;
    top: 67%;
    width: 3%;
    height: 21%;
}

.bag-lips .bag-tooltip {
    bottom: 135px;
    left: 25px;
}

/* =========================================
   PARFUME
========================================= */
.bag-parfume {
    left: 50%;
    top: 66%;
    width: 3%;
    height: 21%;
}

.bag-parfume .bag-tooltip {
    bottom: 130px;
    left: 15px;
}

/* =========================================
   PILLS
========================================= */
.bag-pills {
    left: 42%;
    top: 65%;
    width: 8%;
    height: 19%;
}

.bag-pills .bag-tooltip {
    bottom: 150px;
    left: -80px;
}

/* =========================================
   PAD
========================================= */
.bag-pad {
    left: 29%;
    top: 65%;
    width: 10%;
    height: 26%;
}

.bag-pad .bag-tooltip {
    bottom: 150px;
    left: -30px;
}


/* =========================================
   KEYS
========================================= */
.bag-keys {
    left: 45%;
    top: 10%;
    width: 18%;
    height: 25%;
}

.bag-keys .bag-tooltip {
    top: -35px;
    left: -230px;
}

/* =========================================
   KEYS
========================================= */
.bag-balm {
    left: 65%;
    top: 15%;
    width: 9%;
    height: 35%;
}

.bag-balm .bag-tooltip {
    top: -25px;
    left: 120px;
}

/* =========================================
   HEADPHONES
========================================= */
.bag-headphones {
    left: 27%;
    top: 28%;
    width: 12%;
    height: 35%;
}

.bag-headphones .bag-tooltip {
    top: -50px;
    left: -250px;
}

/* =========================================
   RINGS
========================================= */
.bag-rings {
    left: 54%;
    top: 58%;
    width: 15%;
    height: 13%;
}

.bag-rings .bag-tooltip {
    bottom: -120px;
    left: 200px;
}

/* =========================================
   WATCHES
========================================= */
.bag-watches {
    left: 32%;
    top: 80%;
    width: 40%;
    height: 13%;
}

.bag-watches .bag-tooltip {
    bottom: 120px;
    left: -180px;
}

/* =========================================
   ESSENTIALS / DESKTOP POP-UP WINDOW
========================================= */
.essentials-window {
    display: none;
    position: fixed;
    top: 120px;
    left: 50%;
    width: 1000px;
    height: 700px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 9999;
    overflow: hidden;
}

.essentials-window.active {
    display: block;
}

/* =========================================
   TITLE BAR
========================================= */
.essentials-titlebar {
    height: 32px;
    background: #eed1e6;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

/* =========================================
   WINDOW TITLE
========================================= */
#essentials-window-title {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    margin-left: 15px;
}


/* =========================================
   ESSENTIALS TEXT SPECS
========================================= */
.essentials-page-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 15px;
    color: #1e1e1e;
}

.essentials-page-text p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: medium;
}

.essentials-page-text h1 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: -5px;
    margin-bottom: 25px;
    margin-left: -28px;
    color: #1e1e1e;
}

/* =========================================
   BAG IMAGES SPECS
========================================= */
.bag-main-image,
.bag-items-image,
.bag-onme-image{
    width: 400px;
    height: auto;
    display: block;
    margin: 20px auto;
}

/* =========================================
   DESKTOP IMAGES SPECS
========================================= */
.desktop-main-image img {
    width: 850px;
    height: auto;
    display: block;
    margin: 20px auto;
}


/* =========================================
   CLOSE BUTTON
========================================= */
.essentials-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.essentials-close:hover {
    background: #000;
    color: white;
}

/* =========================================
   WINDOW CONTENT
========================================= */
.essentials-window-content {
    height: calc(100% - 32px);
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f0f0f0;
}

.essentials-smalltext {
    font-family: 'Courier New';
    font-size: 0.8em;
    text-align: center;
    margin-top: 35px;
}


/* =========================================
   ESSENTIALS PRODUCTS GRID
========================================= */
.essentials-grid {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    gap: 35px;
    padding: 5px;
    margin-top: 25px;
    justify-content: center;
}

/* PRODUCT TILE */
.essential-item {
    position: relative;
    background: #1e1e1e;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        4px 5px 10px rgba(0, 0, 0, 0.20);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

/* HOVER */
.essential-item:hover {
    transform: translateY(-4px);
    box-shadow:
        6px 8px 14px rgba(0, 0, 0, 0.25);
}

/* IMAGE */
.essential-image {
    width: 100%;
    height: 230px;
    background: #e8dfe5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 15px;
}

.essential-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.essential-item:hover .essential-image img {
    transform: scale(1.04);
}

/* TEXT AREA */
.essential-info {
    flex: 1;
    padding: 20px;
    color: #f0f0f0;

    display: flex;
    flex-direction: column;
}

/* CENTERED TEXT */
.essential-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* CATEGORY */
.essential-category {
    display: block;
    text-align: center;
    margin-top: 5px;
    margin-bottom: -30px;

    font-family: "futurahandwritten";
    font-size: 0.7em;
    font-style: bold;
    letter-spacing: 1.5px;
    color: #eed1e6;
}

/* PRODUCT NAME */
.essential-info h3 {
    margin-bottom: 20px;
    margin-left: -25px;

    font-size: 1.6em;
    font-weight: bold;
    color: #f0f0f0;
    text-align: center;
}

/* DESCRIPTION */
.essential-info p {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #f0f0f0;
    text-align: center;
}

/* BOTTOM ROW */
.essential-bottom {
    flex-shrink: 0;

    display: flex;
    justify-content: center;

    margin-top: 15px;
}

/* PRICE BUTTON */
.essential-price {
    display: inline-block;
    padding: 6px 10px;

    font-size: 0.9em;
    font-weight: bold;
    color: #1e1e1e;
    background: #eed1e6;

    border-radius: 20px;
    text-align: center;
}

.essential-price:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

@media (max-width: 800px) {
    .essentials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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


/* =========================================
   DESKTOP DESCRIPTION POPUP
========================================= */

.desktop-description-window {
    display: none;

    position: fixed;
    top: 230px;
    left: 75%;

    width: 500px;
    height: 600px;

    transform: translateX(-50%);

    background: #1e1e1e;
    border: 2px solid #eed1e6;

    z-index: 99999;
}

/* Show popup */
.desktop-description-window.active {
    display: block;
}


/* =========================================
   TITLE BAR
========================================= */

.desktop-description-titlebar {
    height: 32px;

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

    padding: 0 8px;

    background: #eed1e6;
    color: #1e1e1e;

    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;

    box-sizing: border-box;
}


.desktop-description-titlebar button {
    border: none;
    background: transparent;

    color: #1e1e1e;

    font-family: inherit;
    font-size: 18px;

    cursor: pointer;

    padding: 0 4px;
}

.desktop-description-titlebar button:hover {
    color: #984a96;
}


/* =========================================
   CONTENT
========================================= */

.desktop-description-content {
    height: calc(100% - 32px);
    overflow-y: auto;
    padding: 30px;
    box-sizing: border-box;
    color: #f0f0f0;
    font-family: 'Courier New', monospace;
    font-size: 16px;
}

.desktop-description-content p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    color: #f0f0f0;
    margin-top: -8px;
    padding: 10px;
}

.desktop-description-content p b {
    font-family: "sant joan despi";
    font-weight: normal;
    font-size: medium;
}

.desktop-description-content h5 {
    font-family: "hearts";
    font-size: 1.2em;
    color: white;
    margin-top: -5pxpx;
    margin-bottom: 10px;
}

.desktop-description-content img {
    vertical-align: middle;
    max-height: 22px;
    width: auto;
}




/* =========================================
   ZINES POPUP WINDOW
========================================= */
.zine-window {
    display: none;
    position: fixed;
    top: 100px;
    left: 60%;
    width: 770px;
    height: 650px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.4);
    z-index: 9999;
    overflow: hidden;
}

/* =========================================
   OPEN WINDOW
========================================= */
.zine-window.active {
    display: block;
}

/* =========================================
   TITLE BAR
========================================= */
.zine-titlebar {
    height: 32px;
    background: #eed1e6;
    color: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

/* =========================================
   WINDOW TITLE
========================================= */
.zine-window-title {
    font-family:
        'Courier New',
        monospace;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}

/* =========================================
   CLOSE BUTTON
========================================= */
.zine-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.zine-close:hover {
    background: #000;
    color: white;
}


/* =========================================
   INDIVIDUAL PAGES
========================================= */
.zine-page {
    display: none;
}

.zine-page.active-other-page {
    display: block;
}


/* =========================================
   ZINE
========================================= */
.zine {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px auto;
}

/* =========================================
   BOOK
========================================= */
.zine-book {
    position: relative;

    width: 700px;
    height: 497px;

    perspective: 1800px;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

/* =========================================
   PHYSICAL SHEET
========================================= */
.zine-sheet {
    position: absolute;

    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    transform-origin: left center;
    transform-style: preserve-3d;

    transition:
        transform 0.9s cubic-bezier(.65,.05,.36,1);

    cursor: pointer;
}

/* =========================================
   TURN PAGE
======================================= */
.zine-sheet.zine-turned {
    transform: rotateY(-180deg);
}

/* =========================================
   PAGE FACES
========================================= */
.zine-face {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #f5f0f2;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-sizing: border-box;

    overflow: hidden;

    border-top: 1px solid #ccc;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #ccc;

    box-shadow:
        3px 4px 8px rgba(0,0,0,0.18);
}


/* =========================================
   FRONT / BACK
========================================= */
.zine-front {
    transform: rotateY(0deg);
}

.zine-back {
    transform: rotateY(180deg);
}


/* =========================================
   ZINE PAGE IMAGE
========================================= */
.zine-face img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* =========================================
   PAGE SHADOW / INNER EDGE
========================================= */
.zine-front::after,
.zine-back::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 20px;

    pointer-events: none;
}

/* FRONT SPINE */
.zine-front::after {
    left: 0;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,0.10),
            transparent
        );
}

/* BACK SPINE */
.zine-back::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            rgba(0,0,0,0.10),
            transparent
        );
}

/* =========================================
   CONTROLS
========================================= */
.zine-controls {
    display: flex;

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

    gap: 20px;

    margin-top: 20px;
}

.zine-button {
    width: 38px;
    height: 30px;

    border: 1px solid #1e1e1e;

    border-radius: 4px;

    background: #eed1e6;

    color: #1e1e1e;

    font-family: "Courier New", monospace;

    font-size: 18px;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

.zine-button:hover {
    background: #f0f0f0;

    transform: scale(1.08);
}

#zine-counter {
    font-size: 12px;
    min-width: 55px;
    text-align: center;
    color: #f0f0f0
}

@media (max-width: 750px) {

    .zine-book {
        width: 90vw;
        height: 65vw;
    }

    .zine-page-content {
        padding: 20px;
    }

    .zine-page-content h2 {
        font-size: 1.4em;
    }

    .zine-page-content p {
        font-size: 11px;
    }

    .zine-cover h1 {
        font-size: 2em;
    }

}




/* =========================================



/* =========================================
   ARTY (CURRENTLY NOT USED)
========================================= */
.artsy-subnav {
  display: flex;
  flex-wrap: wrap;  /* <-- allows new rows */
  gap: 10px;
  padding: 20px 25px 35px 25px;
}
.artsy-subnav a {
  background-color: #1e1e1e;
  color: #f0f0f0;
  text-decoration: none;
  font-family: "futurahandwritten";
  font-size: 1rem;

  flex: 1 1 80px;                 /* grow | shrink | minimum width */
  min-width: 80px;
  text-align: center;
  align-content: center;
  padding: 8px 10px;

  box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
    border-radius: 5px;
}
.artsy-subnav a:hover {
  transform: translateY(-2px);
  background-color: #984a96;
}
.artsy-subnav a.active-artsy {
  background-color: #984a96;
  color: white;
}
.artsy-content {
  display: none;
}
.artsy-content.active-artsy-content {
  display: block;
}




/* =========================================
   DIARY IMAGES (NOT USED)
========================================= */
.diary-images {
    justify-content: center;
    align-items: center;
}
.diary-images img {
    height: 50px;
    width: auto;
    padding-top: 10px;
    padding-left: 30px;
}

/* =========================================
   KEYCHAINS
========================================= */
.keychain-image-1 {
    position: absolute;
    top: 650px;       
    left: 1185px;
    width: 150px;
    height: 150px;
    transform: rotate(8deg);
}
.keychain-image-2 {
    position: absolute;
    top: 580px;       
    left: 1280px;
    width: 150px;
    height: 150px;
    transform: rotate(-10deg);
}

/* =========================================
   QUIZES
========================================= */
.cheese {
    position: absolute;
    top: 1420px;       
    left: 350px;
    width: auto;
}

.donut {
    position: absolute;
    top: 1420px;       
    left: 600px;
    width: auto;
}

/* =========================================
   PIXELS ON TOP (LITTLE THINGS)
========================================= */
.little-things {
    position: relative;
    top: 10px;
    left: 30px;
    width: 1800px;
    display: flex;
    flex-direction: column;   /* icons above text */
    align-items: flex-start; 
    gap: 10px;
    margin-top: 5px;
}

/* ICON ROW */
.little-icons {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: auto;
    height: 20px;
    align-items: center;
}

.little-icons img {
    width: auto;
    height: 20px;
    max-width: 40px;
    object-fit: contain;
    display: block;
}

/* TEXT ROW */
.little-things p {
    margin: 0;
    font-family: "adabelle";
    font-size: 20px;
    line-height: 1.3;
    color: #eed1e6;
    width: 85%;
    text-align: center;
    margin-top: 3px;
}


/* =========================================
   COLOR GIF ON MAIN-NAV
========================================= */
.outer-colors-gif {
    position: absolute;
    top: 585px;
    left: 55px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 40px;
    width: 245px;
}
.colors-gif {
    background-image: url(https://adoniska.neocities.org/54352049.gif);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}


/* =========================================
   MY BAG
========================================= */

#my-bag ul {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95em;
    color: black;
    padding: 0 25px 25px 45px; /* left padding keeps bullets aligned */
    margin: 0;
}
/* MY BAG – pixel heart list only */
#my-bag ul {
    list-style: none;
    padding: 0 25px 25px 45px;
}
#my-bag ul li {
    position: relative;
    margin-bottom: 8px;
}
#my-bag ul li::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 3px;
    width: 15px;
    height: 15px;
    background-image: url("https://file.garden/Ze88s1ucmRDZDhMX/pixels/396.gif");
    background-size: contain;
    background-repeat: no-repeat;
}


/* =========================================
    STAMPS
========================================= */
.stamps-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 30px;
    margin-top: 30px;
}

.stamps-images img {
    object-fit: contain;
}


/* =========================================
    BLINKIES
========================================= */
.blinkies-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 30px;
    margin-top: 30px;
}

.blinkies-images img {
    object-fit: contain;
}


/* =========================================
   PHONE FOR MESSAGES
========================================= */
/* PHONE BODY */
.outer-mobile-chat {
  position: absolute;
  top: 260px;
  left: 1045px;

  width: 250px;
  height: 420px;

  background-image: url("https://adoniska.neocities.org/mobile.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* PHONE SCREEN */
.mobile-chat {
  position: absolute;
  top: 70px;
  left: 46px;

  width: 158px;
  height: 190px;

  padding: 2px 5px 3px 7px; 

  box-sizing: border-box;

  background-color: rgb(30, 30, 30);
  border-radius: 6px;

  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bubble {
  max-width: 96%;
  padding: 8px 8px;
  border-radius: 14px;

  font-family: "futurahandwritten";
  font-size: 0.9rem;
  line-height: 1.3;

  box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
}
.bubble.me .time {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  opacity: 0.65;
  text-align: right;
  line-height: 1;
}
/* SENT-ONLY MESSAGE BUBBLES */
.bubble.me {
  max-width: 100%;
  padding: 8px 5px 6px 10px;

  align-self: flex-end;

  background-color: #eed1e6;
  color: #333;

  border-bottom-right-radius: 3px;

  font-family: "futurahandwritten";
  font-size: 0.9rem;
  line-height: 1.3;

  box-shadow: 
       0 1px 4px rgba(0,0,0,0.3),
    inset 0 0 3px rgba(255,255,255,0.2);
  word-wrap: break-word;
}
/* SCROLLBAR */
.mobile-chat::-webkit-scrollbar {
  width: 5px;
    padding: 5px;
}
.mobile-chat::-webkit-scrollbar-thumb {
  background-color: #eed1e6;
  border-radius: 10px;
}
.bubble.image-bubble {
  max-width: 96%;
  padding: 8px 8px;
  border-radius: 14px;
  box-sizing: border-box;
  align-self: flex-end;
}
.bubble.image-bubble img {
  display: block;
  width: 120px;
  max-width: none;
  object-fit: contain;
  border-radius: 10px;
}


/* =========================================
   CAMERA FOR PICTURES
========================================= */
        <div class="outer-camera">

        <div class="camera-screen">
            
        <img class="camera-photo"
         src="https://i.pinimg.com/736x/99/b4/6e/99b46e05acbe4c3509872a576b3a6129.jpg"
         alt="">

        <img class="camera-photo"
         src="https://i.pinimg.com/736x/db/d6/e0/dbd6e044dfe98b06c5c6581dd8c8a693.jpg"
         alt="">

        <img class="camera-photo"
         src="https://i.pinimg.com/736x/11/43/26/1143262a071d309c515d9c0bfb5c6247.jpg"
         alt="">

         

/* CAMERA BODY */
.outer-camera {
  position: absolute;
  top: 325px;
  left: 1560px;

  width: 220px;
  height: 360px;

  background-image: url("https://adoniska.neocities.org/sony%20cam.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* CAMERA DISPLAY / PHOTO AREA */
.camera-screen {
  position: absolute;
  top: 35px;
  left: 24px;

  width: 156px;
  height: 199px;

  box-sizing: border-box;

  background-color: black;

  overflow-y: auto;

  display: flex;
  flex-direction: column;
}
/* SCROLLBAR */
.camera-screen::-webkit-scrollbar {
  width: 5px;
}
.camera-screen::-webkit-scrollbar-thumb {
  background-color: #f0f0f0;
  border-radius: 10px;
}
/* INDIVIDUAL PHOTOS */
.camera-photo {
  display: block;
  width: 140px;
  object-fit: contain;
  border-radius: 8px;
}

/* =========================================
   PICTURES
========================================= */
.outer-picture-one {
    position: absolute;
    top: 100px;
    left: 1020px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 128px;
    width: 289px;
}
.picture-one {
    background-image: url(https://adoniska.neocities.org/moya_zvzdochka_2.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.outer-picture-two {
    position: absolute;
    top: 265px;
    left: 1350px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 250px;
    width: 185px;
}
.picture-two {
    background-image: url(https://adoniska.neocities.org/807043c1d508a70032f5f8f705db86de.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}


/* =========================================
   LINKS TO OTHERS
========================================= */

.outer-links {
    position: absolute;       /* So it can be dragged anywhere */
    top: 1020px;               /* initial position */
    left: 345px;
    width: 522px;
    height: 348px;
    background-image: url(https://adoniska.neocities.org/notepad_thingy.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
    overflow: hidden;       
}
.links {
    position: absolute; 
    top: 45px;      /* below menu bar */
    left: 8px;     /* inside left frame */
    right: 8px;    /* inside right frame (accounts for fake scrollbar area) */
    bottom: 23px;   /* above bottom bar */
    overflow-y: scroll;
    padding: 10px;
}

/* =========================================
   CAN'T WAIT BUTTON
========================================= */
.cant-wait-tab {
    position: absolute;
    width: 100%;
    top: 630px;
    left: 1430px;
}

.cant-wait-tab img {
    width: 100px;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* =========================================
   CAN'T WAIT WINDOW
========================================= */
.cant-wait-window {
    display: none;
    position: fixed;
    top: 130px;
    left: 50%;
    width: 700px;
    height: 650px;
    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
    z-index: 99999;
}

/* =========================================
   TITLE BAR
========================================= */
.cant-wait-titlebar {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box;
    background: #eed1e6;
    color: #1e1e1e;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: move;
}

/* CLOSE BUTTON */
.cant-wait-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.cant-wait-close:hover {
    color: #eed1e6;
}

/* =========================================
   CONTENT
======================================== */
.cant-wait-content {
    height: calc(100% - 32px);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #1e1e1e;
}

/* =========================================
   CAN'T WAIT TIMELINE
========================================= */
.cant-wait-page-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 15px 15px 20px 15px;
    color: #f0f0f0;
}

/* =========================================
   TITLE
========================================= */
.cant-wait-page-text h1 {
    font-family: "hearts";
    font-size: 2rem;
    margin-top: -5px;
    margin-bottom: 5px;
    margin-left: -28px;
    color: #f0f0f0;
}

/* =========================================
   INTRO
========================================= */
.cant-wait-intro {
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 35px;
    margin-top: -5px;
    color: #eed1e6;
}

/* =========================================
   MONTH
========================================= */
.cant-wait-month {
    margin-bottom: 35px;
    margin-top: 15px;
}

.cant-wait-month-title {
    font-family: "sant joan despi";
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
    color: #eed1e6;
}

/* =========================================
   TIMELINE
========================================= */
.cant-wait-timeline {
    position: relative;
    margin-left: 30px;
    padding-left: 30px;
    border-left: 1px solid #eed1e6;
}

/* =========================================
   TIMELINE ITEM
========================================= */
.cant-wait-item {
    position: relative;
    margin-bottom: 35px;
}

/* little star / dot */
.cant-wait-dot {
    position: absolute;
    left: -38px;
    top: 2px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #eed1e6;
    font-size: 15px;
}

/* =========================================
   ITEM CONTENT
======================================== */
.cant-wait-item-content {
    margin-bottom: 10px;
}

/* =========================================
   CATEGORY
========================================= */
.cant-wait-category {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cant-wait-category img {
    width: auto;
    height: auto;
    max-width: 25px;
}

/* =========================================
   ITEM TITLE
========================================= */
.cant-wait-item-content h2 {
    font-family: "sant joan despi";
    font-size: 1.15rem;
    font-weight: normal;
    margin-bottom: 8px;
    margin-left: -25px;
    color: #f0f0f0;
}


/* =========================================
   DATE
========================================= */
.cant-wait-date {
    font-size: 0.75rem;
    color: #eed1e6;
    margin-bottom: 6px;
}

/* =========================================
   PERSONAL COMMENT
========================================= */
.cant-wait-item-content p {
    margin-top: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #f0f0f0;
    padding-right: 10px;
}

.cant-wait-content img {
    max-width: 100%;
    height: auto;
}


/* =========================================
   OPTIONAL ITEM IMAGE
========================================= */
.cant-wait-item {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-left: 20px;
}

.cant-wait-item-content {
    flex: 1;
    min-width: 0;
}

.cant-wait-item-image {
    flex: 0 0 150px;
    max-width: 150px;
}

.cant-wait-item-image img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
}

/* =========================================
   RELEASED STATUS
========================================= */
.cant-wait-status {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 5px;

    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: bold;

    color: #1e1e1e;
    background: #eed1e6;
    border: 1px solid #eed1e6;

    vertical-align: middle;
    white-space: nowrap;
}



/* =========================================
   ZINES BUTTON
========================================= */
.zines-tab {
    position: absolute;
    width: 65px;
    top: 756px;
    left: 149px;
}

.zines-tab img {
    width: 65px;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease;
}



/* =========================================
   MY GRAPHICS BUTTON
========================================= */
.mygraphics-tab {
    position: absolute;
    width: 65px;
    top: 738px;
    left: 250px;
}

.mygraphics-tab img {
    width: 65px;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease;
}


/* =========================================
   MY GRAPHICS WINDOW
========================================= */
.mygraphics-window {
    display: none;

    position: fixed;
    top: 145px;
    left: 50%;

    width: 950px;
    height: 650px;

    transform: translateX(-50%);

    background: #1e1e1e;

    border: 2px solid #eed1e6;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4);

    z-index: 9999;

    overflow: hidden;
}

/* OPEN WINDOW */
.mygraphics-window.active {
    display: block;
}

/* =========================================
   TITLE BAR
========================================= */
.mygraphics-titlebar {
    height: 32px;

    background: #eed1e6;
    color: #1e1e1e;

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

    padding: 0 6px;

    box-sizing: border-box;

    cursor: grab;
    user-select: none;
}

/* =========================================
   WINDOW TITLE
========================================= */
.mygraphics-window-title {
    font-family:
        "Courier New",
        monospace;

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

    margin-left: 10px;
}

/* =========================================
   CLOSE BUTTON
========================================= */
.mygraphics-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #f0f0f0;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.mygraphics-close:hover {
    background: #000;
    color: white;
}


/* =========================================
   WINDOW BODY
========================================= */
.mygraphics-window-body {
    height: calc(100% - 32px);
    padding: 25px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #1e1e1e;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.graphics-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: white;
    padding: 15px;
    margin-left: -20px;
    margin-top: -20px;
    margin-bottom: 20px;
    text-wrap: pretty;
    text-align-last: center;
}

/* =========================================
   STAMPS
========================================= */
.graphics-stamps {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.graphics-stamps img {
    display: block;
    width: auto;
    height: auto;
}

/* =========================================
   TUTORIAL LINK
========================================= */
.tutorial-text {
    margin-top: auto;
    padding-top: 30px;
    padding-bottom: 5px;
    text-align: center;
}

.tutorial-text a {
    color: #984a96;
    text-decoration: none;
}

.tutorial-text a:hover {
    color: #eed1e6;
    text-decoration: underline;
}
    
    
/* =========================================
   CODING SHRINE BUTTON
========================================= */
.coding-shrine {
    position: absolute;
    width: 150px;
    top: 550px;
    left: 1430px;
}

.open-shrine-image {
    width: 150px;
    
    cursor: pointer;
    transition: transform 0.2s ease;
}

.open-shrine-image:hover {
    transform: scale(1.05);
}


/* =========================================
   SHRINE WINDOW
========================================= */
.shrine-window {
    display: none;
    position: fixed;

    top: 100px;
    left: 50%;

    width: 950px;
    height: 650px;

    transform: translateX(-50%);
    background: #1e1e1e;
    border: 2px solid #eed1e6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    
    z-index: 9999;
    overflow: hidden;
}

.shrine-window.active {
    display: block;
}


/* =========================================
   TITLE BAR
========================================= */
.shrine-titlebar {
    height: 32px;

    background: #eed1e6;
    color: #1e1e1e;

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

    padding: 0 6px;

    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

.shrine-titlebar:active {
    cursor: grabbing;
}

.shrine-title {
    font-family: 'Courier New';
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
}
/* =========================================
   CLOSE BUTTON
========================================= */
.shrine-close {
    width: 24px;
    height: 24px;

    padding: 0;

    background: #1e1e1e;
    color: #f0f0f0;

    border: 1px solid #000;

    font-size: 18px;
    line-height: 18px;

    cursor: pointer;
}

.shrine-close:hover {
    background: #000;
    color: white;
}

/* =========================================
   SHRINE CONTENT
========================================= */
.shrine-body {
    height: calc(100% - 32px);
    padding: 25px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #1e1e1e;
}

/* =========================================
   SHRINE MASONRY
========================================= */
.coding-shrine-masonry {
    columns: 3;
    column-gap: 15px;
    width: 100%;
    margin: 0 auto;
}

.coding-shrine-masonry img {
    width: 100%;
    height: auto;
    display: block;

    break-inside: avoid;
    margin-bottom: 15px;
}

/* =========================================
   GUEST BOOK
========================================= */
.outer-guest-book {
    position: absolute;       /* So it can be dragged anywhere */
    top: 1020px;               /* initial position */
    left: 920px;
    width: 522px;
    height: 348px;
    background-image: url(https://adoniska.neocities.org/notepad_thingy.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);     
}
.guest-book {
    position: absolute; 
    top: 40px;      /* below menu bar */
    left: 1px;     /* inside left frame */
    right: 8px;    /* inside right frame (accounts for fake scrollbar area) */
    bottom: 23px;   /* above bottom bar */
    overflow-y: auto;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: medium;
    color: white;
}


/* =========================================
   CHANGE-LOG
========================================= */
.outer-changelog {
    position: absolute;       /* So it can be dragged anywhere */
    top: 720px;               /* initial position */
    left: 1420px;
    width: 255px;
    height: 265px;
    background-image: url(https://adoniska.neocities.org/e0af1d9be9979a43b9bdc81843f6ff14.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
    overflow: hidden;       
}
.changelog {
    position: absolute; 
    background-color: #eed1e6;
     /* adjust these values visually */
    top: 24px;      /* below menu bar */
    left: 12px;     /* inside left frame */
    right: 12px;    /* inside right frame (accounts for fake scrollbar area) */
    bottom: 12px;   /* above bottom bar */
    overflow-y: scroll;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: small;
    color: black;
}
.changelog b{
font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    color: #984a96;
}


/* =========================================
   STICKY NOTES
========================================= */
.sticky-note-one {
    position: absolute;
    top: 90px;       /* position on page */
    left: 790px;
    width: 150px;
    height: 150px;
    background-color: #eed1e6;  
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4); /* shadow */
    
    transform: rotate(-7deg);   /* make it slightly crooked */
    padding: 10px;
    box-sizing: border-box;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sticky-note-one-text {
    font-family: "futurahandwritten";
    font-size: 1.0rem;
    font-weight: normal;
    color: #333;
    margin: 0;
}
.sticky-note-two {
    position: absolute;
    top: 115px;       /* position on page */
    left: 260px;
    width: 150px;
    height: 150px;
    background-color: #eef5fc;  
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4); /* shadow */
    
    transform: rotate(8deg);   /* make it slightly crooked */
    padding: 10px;
    box-sizing: border-box;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sticky-note-two-text {
    font-family: "futurahandwritten";
    font-size: 1.0rem;
    font-weight: normal;
    color: #323232;
    margin: 0;
}
.sticky-note-three {
    position: absolute;
    top: 565px;       /* position on page */
    left: 180px;
    width: 150px;
    height: 150px;
    background-color: #ced8f0;  
    box-shadow: 5px 5px 15px rgba(0,0,0,0.4); /* shadow */
    
    transform: rotate(-12deg);   /* make it slightly crooked */
    padding: 10px;
    box-sizing: border-box;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sticky-note-three-text {
    font-family: "futurahandwritten";
    font-size: 1.0rem;
    font-weight: normal;
    color: #333;
    margin: 0;
}


/* =========================================
   TAMAGOTCHI
========================================= */
.tamagotchi {
    position: absolute; 
    top: -2px;
    left: 1550px;
}
.tamagotchi img {
    height: 250px;
    width: auto;
}
.tamagotchi-screen {
    position: absolute;

    top: 101px;
    left: 51px;

    width: 89px;
    height: 85px;

    background: #ff99cc;

    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.6),
        inset 0 0 12px rgba(0,0,0,0.4);
    
    /* flicker animation */
    animation: lcd-flicker 1.5s infinite alternate;
}
.tamagotchi-text {
    position: absolute;

    top: 111px;
    left: 62px;

    width: 89px;

    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    line-height: 1.5;

    color: #660033;

    z-index: 2;
}
.tamagotchi-screen {
    animation: lcd-flicker 1.5s infinite alternate;
}
@keyframes lcd-flicker {
    0%   { background-color: #ff99cc; }
    25%  { background-color: #ff88bb; }
    50%  { background-color: #ff77aa; }
    75%  { background-color: #ff88bb; }
    100% { background-color: #ff99cc; }
}
.tamagotchi-text {
    animation: text-flicker 1.5s infinite alternate;
}
@keyframes text-flicker {
    0%   { opacity: 1; }
    25%  { opacity: 0.95; }
    50%  { opacity: 0.9; }
    75%  { opacity: 0.95; }
    100% { opacity: 1; }
}

/* =========================================
   WEBSITE COLOR PALLETE
========================================= */
.outer-palette {
    position: absolute;
    top: 85px;
    left: 40px;
    height: auto;
    width: 200px;
    padding: 10px;
    box-sizing: border-box;
}
.palette-header {
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    font-weight: bolder;
    color: white;
    margin-bottom: 5px;
}
.palette {
  display: grid;
  grid-template-columns: repeat(4, 70px); /* 4 columns */
  grid-template-rows: repeat(2, 70px); /* 2 rows, 150px height each */
  gap: 10px; /* spacing between cells */
  width: 100%; /* full width container */
  margin: 5px auto; /* center on page */
  padding: 5px;
  box-sizing: border-box;
}
.palette-cell {
  border-radius: 6px;
  display: flex; /* center content */
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
    font-weight: bold;
  font-size: 0.8rem;
  color: #333;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1); /* subtle shadow */
}
.cell-1 { background-color: #984a96; color: #fff; }
.cell-2 { background-color: #eed1e6; color: #000; }
.cell-3 { background-color: #1e1e1e; color: #fff; }
.cell-4 { background-color: #545353; color: #fff; }
.cell-5 { background-color: #f0f0f0; color: #000; }
.cell-6 { background-color: #eef5fc; color: #000; }
.cell-7 { background-color: #ced8f0; color: #000; }



/* =========================================
   DIARY BUTTON
========================================= */
.diary-tab {
    position: absolute;
    width: 65px;
    top: 766px;
    left: 55px;
}

.diary-tab img {
    width: 65px;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease;
}



/* =========================================
   DIARY WINDOW
========================================= */
.diary-window {
    display: none;
    position: fixed;
    top: 138px;
    left: 40%;
    width: 750px;
    height: 650px;
    transform: translateX(-50%);
    background-image: url("https://adoniska.neocities.org/pink-paper.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    border: 2px solid #eed1e6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    overflow: hidden;
}

/* OPEN WINDOW */
.diary-window.active {
    display: block;
}

/* =========================================
   TITLE BAR
========================================= */
.diary-titlebar {
    height: 32px;
    background: #1e1e1e;
    color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
}

/* =========================================
   WINDOW TITLE
========================================= */
.diary-window-title {
    display: flex;
    align-items: center;
    height: 100%;
}
.diary-window-title img {
    max-height: 24px;
    width: auto;
}

/* =========================================
   CLOSE BUTTON
========================================= */
.diary-close {
    width: 24px;
    height: 24px;
    padding: 0;
    background: #1e1e1e;
    color: #eed1e6;
    border: 1px solid #000;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}

.diary-close:hover {
    background: #000;
    color: white;
}

/* =========================================
   WINDOW BODY
========================================= */
.diary-window-body {
    background: transparent;
    height: calc(100% - 32px);
    padding: 25px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* =========================================
   DIARY PAGE
========================================= */
.diary-page {
    background: transparent;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================
   DIARY ENTRY
========================================= */
.diary-entry {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 45px;
}

/* =========================================
   DIARY ENTRY TITLE
========================================= */
.diary-entry h1 {
    font-family: "beriberusweetie";
    font-size: 1.6rem;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: -28px;
    color: #984a96;
}

/* =========================================
   DIARY DATE
========================================= */
.diary-date {
    font-family: "beriberusweetie";
    font-size: 0.8rem;
    color: #1e1e1e;
    margin-bottom: 10px;
}

/* =========================================
   DIARY DIVIDER
========================================= */
.diary-divider {
    font-family: "Courier New", monospace;
    font-size: 0.75rem;
    color: #984a96;
    margin-bottom: 10px;
}

/* =========================================
   DIARY TEXT
========================================= */
.diary-entry p {
    font-family:"adabelle";
    font-size: 1.3rem;
    line-height: 1.3;
    color: #1e1e1e;
    margin-top: 0;
    margin-bottom: 10px;
}

.diary-entry p b {
    font-family:"adabelle";
    font-size: 1.3rem;
    line-height: 1.3;
    color: #984a96;
    margin-top: 0;
    margin-bottom: 10px;
}

/* =========================================
   DIARY IMAGE
========================================= */
.diary-entry img {
    width: 700px;
    align-content: center;
}





/* =========================================
    MUSIC PLAYER
========================================= */
.title-bar {
        background:linear-gradient(90deg, purple, orchid, pink);
    }
 
    .player {
        width:fit-content;
        border: black solid 1px;
        border-width: 1px px px 1px;
        top: 140px;
        left: 50px;
    }
 
    .controlimg:hover {
        cursor:help;
    }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}
 
input[type="range"]:focus {
  outline: none;
}
 
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 21px;
  width: 11px;
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform: translateY(-8px);
  box-shadow: none;
  border: none;
}
 
input[type="range"].has-box-indicator::-webkit-slider-thumb {
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform: translateY(-10px);
}
 
input[type="range"]::-moz-range-thumb {
  height: 21px;
  width: 11px;
  border: 0;
  border-radius: 0;
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  transform: translateY(2px);
}
 
input[type="range"]::-moz-range-thumb {
  background: url("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-horizontal.svg");
  border: 0;
  border-radius: 0;
  height: 21px;
  transform: translateY(2px);
  width: 11px;
  }
 
input[type="range"].has-box-indicator::-moz-range-thumb {
  background: svg-load("https://raw.githubusercontent.com/jdan/98.css/main/icon/indicator-rectangle-horizontal.svg");
  transform: translateY(0px);
}
 
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
 
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
    -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}
 
button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit]{background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}.vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}}
 
.title-bar-controls button {border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}
 
.title-bar-controls button {background:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf}
 
.title-bar-controls button:not(:disabled):active {box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}
 
@media (not(hover)){
	button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}
 
.title-bar-controls button:focus {outline:1px dotted #000; outline-offset:-4px}
.title-bar-controls button::-moz-focus-inner {border:0}
 
 
@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/1za99g.woff") format("woff");
  src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
 
@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("https://files.catbox.moe/z7csle.woff") format("woff");
  src: url("https://files.catbox.moe/moqhx6.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
 
 
.window, .title-bar {
  font-family: "Pixelated MS Sans Serif", Arial;
  -webkit-font-smoothing: none;
  font-size: 11px;
}
 
.window {
  box-shadow: inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf, inset -2px -2px #808080,
    inset 2px 2px #ffffff;
  background: #c0c0c0;
  padding: 3px;
  width:260px;
}
 
.title-bar {
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.title-bar-text {
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}
 
.title-bar-controls {
  display: flex;
}
 
.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}
 
.title-bar-controls button:active {
  padding: 0;
}
 
.title-bar-controls button:focus {
  outline: none;
}
 
.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat}
 
.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat}
 
.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px}
 
.window-body { margin:0px; height:98px; }
 
 
 
input[type=range] {
        -webkit-appearance: none;
        appearance:none;
        width: 100%;
    }
 
    input[type=range]:focus {
        outline: none;
    }
 
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: help;
    }
 
 
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: help;
    }
 
    .flex {display: flex;}
 
    .titlebaricon { height:14px; width:14px;}
 
 
    .songtitlewindow {
        background-color:#fff;
        box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
    }
 
    #musicplayer {
        border:2px solid silver; /* border around player */
        border-width: 2px 0px 0px 0px;
        width:160px; /* width of the player */
    }
 
    #imagestyle {
        background:silver; /* background color of player */
        border:2px solid silver; /* border around player */
        width:95px; /* width of the player */
        height:95px;
        box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;
    }
 
    .ic {
    	width:90px;
        position:relative;
        bottom:1px;
        right:1px;
        overflow:hidden;
        padding:2px;
        border:2px solid transparent;
    }
 
    .songtitlearrow {
        background-size:100%;
        background-repeat:no-repeat;
        background-image:url(https://files.catbox.moe/f5e8np.png);
        height:21px;
        width:21px;
        position:relative;
        top:2px;
        left:-2px;
        border:0px solid transparent;
        border-width:0px 0px 0px 0px;
    }
 
    .songtitle {
        padding:5px; /* padding around song title */
        border-bottom:0px; /* border under song title */
        display:block;
        font-family:Pixelated MS Sans Serif;
    }
 
    .controls {
        font-size:18px !important; /* size of controls */
        text-align:center;
        width:100%;
        position:relative;
        bottom:10px;
    }
 
    .controls td {
        padding:8px 5px 0px 5px; /* padding around controls */
    }
 
    button {
        min-width:40px;
    }
 
    .seeking {
        background-color:#c0c0c0; /* background color of seeking bar */
        display:flex;
        justify-content: space-evenly;
        padding:14px; /* padding around seeking bar */
    }
 
    .current-time {
        padding-right:5px;
    }
 
    .total-duration {
        padding-left:5px;
    }
 
    .controlimg {
    height:15px;
    width:15px;
    }



/* =========================================
   TEXT SIZES OVERRIDES
========================================= */
h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 0.9rem;
}