/* ==========================================================
HOMEPAGE.CSS
========================================================== */
@font-face{
font-family:"Eleanora";
src:url("homepage-graphics/Eleanora.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
@font-face{
font-family:"Ancient Medium";
src:url("homepage-graphics/Ancient Medium.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}
html,
body{
cursor:url("homepage-graphics/cursor/too379.cur"), auto;
min-width:1300px;
}
#welcomeOverlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
display:flex;
justify-content:center;
align-items:center;
z-index:999999999;
backdrop-filter:blur(7px);
}
#welcomePopup{
width:340px;
}
.welcome-content{
padding:22px 26px;
text-align:center;
color:black;
}
.welcome-sonic{
display:block;
width:70px;
margin:4px auto 18px auto;
image-rendering:pixelated;
}
.welcome-content p{
margin-bottom:14px;
line-height:1.5;
}
#enterRoom{
margin-top:10px;
padding:8px 22px;
border:2px outset white;
background:#ececec;
font-family:"Courier New", monospace;
font-size:14px;
cursor:pointer;
}
#enterRoom:hover{
background:white;
}
#enterRoom:active{
border-style:inset;
}
#welcomeOverlay{
transition:opacity .3s ease;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,
body{
margin:0;
padding:0;
width:100%;
min-height:100vh;
overflow-x:hidden;
font-family:"Courier New", monospace;
color:white;
}/* ==========================================================
BACKGROUND
========================================================== */
body{
background:black;
}
/* boot overlay — full-screen blurred veil that covers the homepage while
assets initialize, then disappears when the visitor clicks. Starts
visible via CSS so nothing assembles in view before JS runs. */
.home-entry-fade{
position:fixed;
inset:0;
background:rgba(0,0,0,.5);
backdrop-filter:blur(8px);
z-index:999999998;
opacity:1;
pointer-events:none;
}
.home-entry-fade.boot-hidden{
display:none;
}
.background{
position:fixed;
inset:0;
background-image:url("homepage-graphics/sonicocean.gif");
background-repeat:repeat-y;
background-size:100% auto;
animation:oceanScroll 40s linear infinite;
z-index:-5;
}
@keyframes oceanScroll{
from{
background-position:0 0;
}
to{
background-position:0 1400px;
}
}
/* ==========================================================
DESKTOP
========================================================== */
.desktop{
position:relative;
width:1500px;
margin:0 auto;
min-height:2960px;
padding-bottom:0;
}
/* ==========================================================
WINDOWS
========================================================== */
.window{
position:absolute;
background:#dadada;
color:black;
border:2px solid black;
box-shadow:10px 10px 22px rgba(0,0,0,.42);
will-change:left, top;
user-select:none;
overflow:hidden;
}
.titlebar{
background:linear-gradient(to right,#18459c,#7ca8ff);
color:white;
padding:8px 12px;
font-weight:bold;
cursor:grab;
user-select:none;
}
.titlebar:active{
cursor:grabbing;
}
.window .content{
padding:18px;
}
/* LIVE LISTENING BANNER — wide centered status box built into the
music window, directly beneath the titlebar. Mirrors the .ml-status
box from music_library.html. Flows in normal layout (not absolute),
so the album grid sits naturally below it. */
.music-live{
width:92%;
margin:0 auto 14px;
background:rgba(245,243,240,.97);
border:1px solid #a8a4a0;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,.18);
padding:9px 14px;
font-family:"Courier New", monospace;
font-size:11px;
color:#333;
line-height:1.5;
}
.music-live-title{
font-weight:bold;
font-size:10px;
letter-spacing:.5px;
color:#4068b8;
text-transform:uppercase;
margin-bottom:4px;
padding-bottom:4px;
border-bottom:1px dashed #bbb;
display:flex;
align-items:center;
gap:6px;
line-height:1.2;
flex-wrap:wrap;
}
.music-live-prefix{
color:#4068b8;
}
.music-live-symbols{
color:#4068b8;
font-family:Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
}
.music-live-label{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.music-live-track{
display:block;
color:#222;
font-size:12px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.music-live-track a{
color:#222;
text-decoration:none;
}
.music-live-track a:hover{
text-decoration:underline;
}
.music-live-dot{
display:inline-block;
width:7px;
height:7px;
border-radius:50%;
background:#2a8a2a;
flex-shrink:0;
animation:musicLiveBlink 1.4s steps(2,end) infinite;
}
.music-live.music-live-stopped .music-live-dot{
background:#888;
animation:none;
}
@keyframes musicLiveBlink{
0% { opacity:1; }
50% { opacity:.25; }
100% { opacity:1; }
}
@media (prefers-reduced-motion: reduce){
.music-live-dot{ animation:none; }
}
/* ==========================================================
WINDOW POSITIONS
========================================================== */
.music{
top:60px;
left:982px;
width:450px;
transform:rotate(0.3deg);
z-index:100;
}
.socials{
top:340px;
left:520px;
width:280px;
z-index:150;
}
.photography{
top:560px;
left:60px;
width:370px;
}
.art{
top:620px;
left:540px;
width:380px;
}
.twitch-preview{
display:block;
width:calc(100% + 16px);
margin:-8px;
border:2px solid black;
cursor:pointer;
transition:.15s;
}
.twitch-preview:hover{
animation:twitchShake .28s ease-in-out;
}
@keyframes twitchShake{
0%{transform:rotate(0deg);}
20%{transform:rotate(-1.2deg);}
40%{transform:rotate(1.2deg);}
60%{transform:rotate(-.8deg);}
80%{transform:rotate(.8deg);}
100%{transform:rotate(0deg);}
}
.twitch-content a{
display:block;
position:relative;
text-decoration:none;
}
.twitch-click{
position:absolute;
left:50%;
top:62%;
transform:translate(-50%,-50%);
padding:10px 22px;
background:#d4d0c8;
border:2px outset white;
color:black;
font-family:"Courier New", monospace;
font-size:16px;
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
pointer-events:none;
box-shadow:2px 2px 0 rgba(0,0,0,.25);
animation:blinkButton .8s steps(2,end) infinite;
}
@keyframes blinkButton{
50%{
opacity:0;
}
}
.outfits{
top:1280px;
left:250px;
width:320px;
}
.chatroom{
top:900px;
left:1070px;
width:360px;
z-index:1000;
}
/* ==========================================
PHILADELPHIA CLOCK
========================================== */
.clock{
position:absolute;
top:720px;
left:980px;
width:400px;
background:transparent;
border:none;
box-shadow:none;
transform:rotate(-0.3deg);
}
.clock .titlebar{
display:none;
}
.clock-content{
position:relative;
overflow:visible;
background:#111;
border:2px solid #555;
padding:20px;
text-align:center;
color:#e8e8e8;
line-height:1.2;
}
/* Force the widget to inherit our colors */
.clock-content *{
color:#e8e8e8 !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
}
/* Stretch the widget */
.clock iframe,
.clock canvas,
.clock div{
width:100% !important;
max-width:100% !important;
}
/* Make text centered */
.clock p,
.clock span{
text-align:center !important;
}
/* Remove any weird margins */
.clock-content *{
margin:0 auto !important;
}
.clock-runner{
position:absolute;
bottom:6px;
left:8px;
width:78px;
image-rendering:pixelated;
z-index:9999;
pointer-events:none;
animation:runClock 8s linear infinite;
}
@keyframes runClock{
0%{
left:8px;
transform:scaleX(-1);
}
49%{
left:calc(100% - 60px);
transform:scaleX(-1);
}
50%{
left:calc(100% - 60px);
transform:scaleX(1);
}
99%{
left:8px;
transform:scaleX(1);
}
100%{
left:8px;
transform:scaleX(-1);
}
}
/* ==========================================================
WEBAMP
========================================================== */
#webamp{
position:absolute;
top:210px;
left:120px;
z-index:500;
}
#musicBlinkie{
position:absolute;
top:585px;
left:145px;
z-index:0;
transform:rotate(-2deg);
}
#musicBlinkie img{
display:block;
image-rendering:pixelated;
}
/* ==========================================================
WINDOW ROTATION
========================================================== */
.art{
transform:rotate(-0.2deg);
}
.photography{
transform:rotate(0.5deg);
}
.socials{
transform:rotate(-0.2deg);
}
.twitch{
top:1260px;
left:610px;
width:360px;
}
.outfits{
transform:rotate(0.4deg);
}
.paint{
transform:none;
}
/* ==========================================================
PHOTOGRAPHY
========================================================== */
.photo-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-bottom:18px;
}
.photo-thumb{
text-align:center;
cursor:pointer;
}
.photo-thumb img{
width:160px;
height:160px;
object-fit:cover;
display:block;
margin:0 auto;
border:2px solid black;
background:white;
transition:.15s;
}
.photo-thumb img:hover{
transform:scale(1.03);
box-shadow:4px 4px 0px rgba(0,0,0,.35);
}
.photo-thumb p{
margin-top:6px;
font-size:12px;
font-family:"Courier New", monospace;
word-break:break-word;
}
.recent{
margin-top:12px;
font-size:13px;
color:#555;
}
.archive{
margin-top:10px;
padding:6px 10px;
font-family:"Courier New", monospace;
border:2px solid black;
background:#efefef;
cursor:pointer;
}
.archive:hover{
background:white;
}
.pixel-camera{
position:absolute;
bottom:12px;
right:12px;
width:70px;
image-rendering:pixelated;
pointer-events:none;
opacity:.95;
}
.photography .content{
position:relative;
}
/* ==========================================
PHOTO VIEWER
========================================== */
.photo-viewer{
display:none;
position:absolute;
width:650px;
left:450px;
top:220px;
z-index:99999;
}
#viewerImage{
width:100%;
display:block;
border:2px solid black;
}
#viewerCaption{
margin-top:12px;
font-size:13px;
color:#555;
}
/* ==========================================
PHOTO VIEWER TITLEBAR
========================================== */
#photoViewer .titlebar{
position:relative;
height:32px;
padding:0 8px;
display:block;
line-height:32px;
}
#viewerTitle{
display:block;
padding-right:30px;
}
#closePhotoViewer{
position:absolute;
top:5px;
right:6px;
width:20px;
height:20px;
border:1px solid #555;
background:#dcdcdc;
cursor:pointer;
font-family:Arial, sans-serif;
font-size:12px;
font-weight:bold;
line-height:18px;
padding:0;
}
#closePhotoViewer:hover{
background:#ff5555;
color:white;
}
/* ==========================================
MUSIC LIBRARY BUTTON
========================================== */
.music-library-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
text-decoration:none;
color:#4068b8;
width:92%;
margin:14px auto 0;
padding:8px 14px;
font-family:"Courier New", monospace;
font-size:10px;
font-weight:bold;
letter-spacing:.5px;
background:rgba(245,243,240,.97);
border:1px solid #a8a4a0;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,.18);
cursor:pointer;
transition:background .15s, box-shadow .15s;
position:relative;
}
.music-library-btn:hover{
background:rgba(255,255,255,1);
box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.music-library-cd{
width:28px;
height:28px;
object-fit:contain;
flex-shrink:0;
display:block;
}
.music-library-label{
font-size:10px;
font-weight:bold;
line-height:1.3;
color:#4068b8;
}
/* ---- NEW ENTRY button inside the music library button ---- */
.music-new-entry-btn{
position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
display:inline-block;
padding:3px 8px;
font-family:"Courier New", monospace;
font-size:8px;
font-weight:bold;
letter-spacing:.5px;
color:#fff;
background:linear-gradient(to bottom, #2a4a8e, #18459c);
border:1px outset #4068b8;
border-radius:3px;
text-shadow:0 1px 1px rgba(0,0,0,.4);
cursor:pointer;
white-space:nowrap;
flex-shrink:0;
line-height:1.3;
}
.music-new-entry-btn.music-new-blink{
animation:musicNewBlinkSlow 1.2s infinite;
}
.music-new-entry-btn.music-new-hide{
display:none;
}
@keyframes musicNewBlinkSlow{
0%,55% { opacity:1; }
56%,100% { opacity:0; }
}
.music-new-entry-btn:hover{
background:linear-gradient(to bottom, #3a5a9e, #2855ac);
}
.music-new-entry-btn:active{
transform:translateY(0);
}
.music-library-main{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}
/* ==========================================
DRAGGING
========================================== */
.dragging{
opacity:.96;
box-shadow:14px 14px 28px rgba(0,0,0,.45);
}
/* ==========================================
CHATROOM
========================================== */
.chat-window{
background:#ffffff;
color:#111;
padding:12px;
font-family:"Courier New", monospace;
}
/* ---------- Header ---------- */
.chat-header{
font-size:13px;
line-height:1.5;
color:#222;
margin-bottom:14px;
}
.chat-divider{
border:0;
border-top:1px solid #555;
margin:12px 0;
}
.chat-system{
font-size:12px;
line-height:1.6;
color:#006600;
margin-bottom:8px;
}
/* ---------- Messages ---------- */
.chat-messages{
height:240px;
overflow-y:auto;
overflow-x:hidden;
border:2px inset #cfcfcf;
background:#ffffff;
padding:12px;
margin-bottom:14px;
}
.chat-message{
margin-bottom:10px;
line-height:1.5;
word-break:break-word;
font-size:13px;
color:#000;
}
.username{
font-weight:bold;
margin-right:4px;
cursor:default;
}
.username:hover{
text-decoration:underline;
}
.timestamp{
color:#999;
font-size:10px;
margin-right:5px;
}
/* ---------- Input ---------- */
.chat-input{
border-top:1px solid #b8b8b8;
padding-top:12px;
}
.chat-nick{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
font-size:13px;
}
.chat-nick input{
flex:1;
border:2px inset #d5d5d5;
background:white;
padding:6px;
font-family:"Courier New", monospace;
font-size:13px;
}
.chat-command{
display:flex;
align-items:center;
gap:10px;
}
.chat-command span{
font-size:18px;
font-weight:bold;
color:#214a91;
}
.chat-command input{
flex:1;
border:2px inset #d5d5d5;
background:white;
padding:6px;
font-family:"Courier New", monospace;
font-size:13px;
}
.chat-command button{
width:72px;
height:30px;
border:2px outset #ececec;
background:#dadada;
font-family:"Courier New", monospace;
font-size:13px;
cursor:pointer;
}
.chat-command button:hover{
background:#e5e5e5;
}
.chat-command button:active{
border-style:inset;
}
/* ==========================================
PAINT
========================================== */
.paint{
position:absolute;
top:2150px;
left:170px;
width:1200px;
z-index:9999999;
}
/* maximized paint window — covers the viewport */
.paint.paint-maximized{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:999999999;
box-sizing:border-box;
}
.paint.paint-maximized .paint-content{
height:calc(100vh - 80px);
box-sizing:border-box;
overflow:hidden;
}
.paint.paint-maximized .canvas-frame{
height:calc(100vh - 240px);
width:100%;
}
.paint-titlebar-btn{
background:#dcdcdc;
color:#000;
width:18px;
height:18px;
line-height:14px;
font-size:14px;
font-weight:bold;
text-align:center;
border:1px solid #555;
cursor:pointer;
padding:0;
}
.paint-titlebar-btn:hover{
background:#fff;
}
.paint .titlebar{
display:flex;
justify-content:space-between;
align-items:center;
}
.paint-content{
background:#d4d0c8;
padding:12px;
}
/* ---- info dialogue box ---- */
.paint-infobox{
display:flex;
align-items:flex-start;
gap:12px;
background:#ece9e1;
border:2px inset #b5b5b5;
padding:12px 14px;
margin-bottom:14px;
}
.paint-infobox-icon{
flex-shrink:0;
width:38px;
height:38px;
}
.paint-infobox-text{
font-family:"Courier New", monospace;
font-size:12px;
line-height:1.6;
color:#222;
}
/* ---- tool + size bar ---- */
.paint-toolwrap{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:12px;
background:#ece9e1;
border:2px inset #b5b5b5;
padding:6px 10px;
}
.paint-tools,
.paint-sizes{
display:flex;
gap:4px;
}
.paint-tool-sep{
width:2px;
height:24px;
background:#808080;
margin:0 4px;
}
.paint-tools button,
.paint-sizes button,
.brush-size{
width:28px;
height:28px;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
background:#cfcfcf;
cursor:pointer;
font-family:inherit;
font-size:14px;
line-height:1;
padding:0;
display:flex;
align-items:center;
justify-content:center;
}
.paint-tools button:active,
.paint-sizes button:active,
.brush-size:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
}
.paint-tools button.active,
.paint-sizes button.active,
.brush-size.active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
background:#b5b5b5;
}
/* ---- canvas workspace (scrollable viewport) ---- */
.paint-workspace{
margin-bottom:12px;
}
.canvas-frame{
position:relative;
background:#ffffff;
border:2px inset #b5b5b5;
padding:6px;
width:100%;
height:480px;
overflow:auto;
overflow-x:auto;
overflow-y:auto;
}
#communityCanvas{
display:block;
position:relative;
z-index:1;
background:#fff;
cursor:crosshair;
}
#localCanvas{
display:block;
position:absolute;
top:6px;
left:6px;
z-index:2;
background:transparent;
cursor:crosshair;
}
/* ---- bottom bar ---- */
.paint-bottom{
display:flex;
justify-content:space-between;
align-items:center;
background:#ece9e1;
border:2px inset #b5b5b5;
padding:8px 10px;
}
.paint-colors{
display:flex;
gap:5px;
}
.color{
width:22px;
height:22px;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
cursor:pointer;
padding:0;
}
.color:active,
.color.active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
.black{ background:#000000; }
.white{ background:#ffffff; }
.red{ background:#d32f2f; }
.orange{ background:#ff8800; }
.yellow{ background:#ffd600; }
.green{ background:#2e7d32; }
.blue{ background:#1565c0; }
.purple{ background:#7b1fa2; }
.pink{ background:#e91e8c; }
.brown{ background:#795548; }
.paint-buttons{
display:flex;
gap:8px;
}
#saveCanvas,
#clearCanvas,
#undoCanvas{
padding:5px 16px;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
background:#cfcfcf;
cursor:pointer;
font-family:inherit;
font-size:12px;
}
#saveCanvas:active,
#clearCanvas:active,
#undoCanvas:active,
#openPaintArchive:active,
.paint-archive-btn-top:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
/* archive button in the paint toolbar */
.paint-archive-btn-top{
margin-left:auto;
padding:4px 10px;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
background:#cfcfcf;
cursor:pointer;
font-family:"Courier New", monospace;
font-size:11px;
color:#222;
white-space:nowrap;
line-height:1.4;
}
.paint-archive-btn-top:hover{
background:#e0e0e0;
}
/* ---- paint archive popup (hidden by default, floats above desktop) ---- */
.paint-archive-overlay{
display:none;
position:fixed;
inset:0;
z-index:999999990;
background:rgba(0,0,0,.45);
align-items:center;
justify-content:center;
}
.paint-archive-overlay.open{
display:flex;
}
.paint-archive{
position:relative;
width:400px;
max-height:85vh;
z-index:999999991;
top:auto;
left:auto;
}
.paint-archive .titlebar{
display:flex;
justify-content:space-between;
align-items:center;
}
.paint-archive-close{
background:#dcdcdc;
color:#000;
width:18px;
height:18px;
line-height:14px;
font-size:14px;
font-weight:bold;
text-align:center;
border:1px solid #555;
cursor:pointer;
padding:0;
}
.paint-archive-close:hover{
background:#ff5555;
color:#fff;
}
.paint-archive-content{
background:#ece9e1;
padding:12px;
text-align:center;
max-height:calc(85vh - 40px);
overflow-y:auto;
}
.paint-archive-label{
font-family:"Courier New", monospace;
font-size:13px;
font-weight:bold;
color:#222;
margin-bottom:10px;
}
.paint-archive-viewer{
border:2px inset #b5b5b5;
background:#fff;
padding:6px;
margin-bottom:10px;
}
.paint-archive-viewer img{
display:block;
width:100%;
height:auto;
cursor:pointer;
transition:transform .15s ease;
}
.paint-archive-viewer img:hover{
transform:scale(1.02);
}
.paint-archive-nav{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
}
.paint-archive-btn{
padding:4px 12px;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
background:#cfcfcf;
font-family:"Courier New", monospace;
font-size:12px;
cursor:pointer;
}
.paint-archive-btn:hover{
background:#e0e0e0;
}
.paint-archive-btn:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
.paint-archive-counter{
font-family:"Courier New", monospace;
font-size:12px;
color:#555;
min-width:50px;
}
/* ==========================================
WEATHER TICKER
========================================== */
.weather-ticker{
position:relative;
margin-top:1px;
margin-bottom:0;
padding:0;
z-index:300;
}
/* Force weather widget full width */
#ww_ebaae8205d3a8{
width:100% !important;
max-width:none !important;
}
#ww_ebaae8205d3a8 iframe{
width:100% !important;
}
/* ==========================================
CONSTRUCTION TICKER
========================================== */
.construction-ticker{
width:100%;
background:#000;
overflow:hidden;
white-space:nowrap;
margin:0;
z-index:300;
position:relative;
display:block;
}
.construction-ticker-bottom{
position:absolute;
left:50%;
transform:translateX(-50%);
width:1500px;
bottom:0;
margin:0;
border-top:1px solid #222;
}
.construction-ticker-track{
display:inline-block;
white-space:nowrap;
animation:constructionScroll 30s linear infinite;
}
.construction-ticker-track span{
font-family:Arial, Helvetica, sans-serif;
color:#fff;
font-size:13px;
letter-spacing:.3px;
}
@keyframes constructionScroll{
from{ transform:translateX(0); }
to { transform:translateX(-33.3333%); }
}
/* ==========================================
JOURNAL
========================================== */
.journal{
position:absolute;
top:30px;
left:460px;
z-index:140;
transform:rotate(-8deg);
}
.journal-link{
display:block;
text-decoration:none;
text-align:center;
color:black;
}
.journal-img{
width:290px;
display:block;
cursor:pointer;
transition:transform .18s ease;
}
.journal-title{
margin-top:10px;
font-family:"Courier New", monospace;
font-size:18px;
color:#222;
}
.journal-link:hover .journal-title{
color:white;
background:#0a246a;
display:inline-block;
padding:2px 6px;
}
.journal-img:hover{
animation:journalShake .28s ease-in-out;
}
@keyframes journalShake{
0%{
transform:rotate(0deg);
}
20%{
transform:rotate(-1.3deg);
}
40%{
transform:rotate(1.3deg);
}
60%{
transform:rotate(-0.9deg);
}
80%{
transform:rotate(.8deg);
}
100%{
transform:rotate(0deg);
}
}
/* ---- NEW ENTRIES homepage button (sits on top edge of Journal window) ---- */
.journal-new-bubble{
position:absolute;
top:14px;
right:0;
z-index:150;
background:#0a246a;
border:2px outset #2a4a9a;
color:#fff;
font-family:"Courier New", Courier, monospace;
font-size:11px;
font-weight:bold;
letter-spacing:.5px;
padding:2px 8px;
white-space:nowrap;
pointer-events:none;
opacity:0;
transition:opacity .3s ease;
text-align:center;
line-height:1.2;
}
.journal-new-bubble.journal-new-show{
opacity:1;
animation:journalNewBlinkSlow 1.2s steps(1) infinite;
}
.journal-new-bubble.journal-new-hide{
opacity:0 !important;
animation:none;
}
.journal-new-bubble-star{
display:none;
}
@keyframes journalNewWiggle{
0%,100%{ transform:translateX(-50%) translateY(0); }
50% { transform:translateX(-50%) translateY(-1px); }
}
@keyframes journalNewBlink{
0%,100%{ opacity:1; }
}
@keyframes journalNewBlinkSlow{
0%,55% { opacity:1; }
56%,100% { opacity:0; }
}
/* ---- NEW ENTRIES tab indicator (inside notebook) ---- */
.journal-tab-new{
display:inline-block;
margin-left:8px;
padding:1px 5px;
background:#0a246a;
color:#fff;
font-family:"Courier New", Courier, monospace;
font-size:9px;
line-height:1.3;
font-weight:bold;
letter-spacing:.5px;
vertical-align:middle;
border:1px outset #2a4a9a;
white-space:nowrap;
}
@keyframes journalNewTabBlink{
0%,100%{ opacity:1; }
}
.journal-tab-hasnew{
/* hook available if stronger emphasis is ever wanted */
}
/* ==========================================
JOURNAL NOTEBOOK OVERLAY
========================================== */
/* ==========================================
JOURNAL NOTEBOOK OVERLAY — complete reset
pages.png is the expanded notebook. The entire
notebook (image + all contents) rotates 2.5°
together so everything stays perfectly aligned.
========================================== */
.journal-overlay{
position:fixed;
inset:0;
z-index:999999990;
background:rgba(0,0,0,0);
pointer-events:none;
transition:background .5s ease;
display:flex;
align-items:center;
justify-content:center;
}
.journal-overlay.open{
background:rgba(0,0,0,.55);
pointer-events:auto;
}
.journal-notebook{
position:relative;
width:80vw;
max-width:1400px;
aspect-ratio:1923 / 1486;
transform:scale(.15) rotate(-6deg);
opacity:0;
transition:transform .7s cubic-bezier(.22,1,.36,1),
opacity .5s ease;
transform-origin:center center;
}
.journal-overlay.open .journal-notebook{
transform:scale(1) rotate(2.5deg);
opacity:1;
}
.journal-notebook-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:fill;
user-select:none;
pointer-events:none;
border-radius:6px;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}
/* ---- LEFT PAGE: scrollable writing area ---- */
.journal-pages{
position:absolute;
top:14%;
left:4%;
width:44%;
height:78%;
overflow-y:auto;
overflow-x:hidden;
z-index:20;
padding:32px 40px 60px 36px;
scroll-behavior:smooth;
background:rgba(255,255,255,.3);
border-radius:4px;
}
/* custom scrollbar */
.journal-pages::-webkit-scrollbar{
width:12px;
}
.journal-pages::-webkit-scrollbar-track{
background:rgba(0,0,0,.1);
border-radius:6px;
}
.journal-pages::-webkit-scrollbar-thumb{
background:rgba(60,60,60,.5);
border-radius:6px;
border:2px solid rgba(255,255,255,.3);
}
.journal-pages::-webkit-scrollbar-thumb:hover{
background:rgba(60,60,60,.75);
}
.journal-pages{
scrollbar-width:thin;
scrollbar-color:rgba(60,60,60,.5) rgba(0,0,0,.1);
}
/* panes (one per tab) */
.journal-pane{
display:none;
}
.journal-pane.active{
display:block;
animation:journalPageFade .4s ease;
}
@keyframes journalPageFade{
from{ opacity:0; transform:translateY(8px); }
to { opacity:1; transform:translateY(0); }
}
/* entries */
.journal-entry{
margin-bottom:36px;
padding-bottom:26px;
border-bottom:1px dashed rgba(0,0,0,.12);
position:relative;
}
.journal-entry:last-child{
border-bottom:none;
}
.journal-date{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#333;
margin-bottom:14px;
font-weight:bold;
letter-spacing:.3px;
}
.journal-entry p{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.9;
color:#444;
margin-bottom:12px;
text-align:left;
}
.journal-list{
margin-bottom:10px !important;
padding-left:22px;
position:relative;
}
.journal-list::before{
content:'◦';
position:absolute;
left:4px;
color:#888;
}
/* doodles & margin notes */
.journal-doodle{
position:absolute;
right:-8px;
bottom:30px;
font-size:24px;
color:rgba(80,80,80,.3);
transform:rotate(-12deg);
pointer-events:none;
}
.journal-margin-note{
position:absolute;
left:-4px;
margin-top:6px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#777;
font-style:italic;
transform:rotate(-2deg);
opacity:.7;
white-space:nowrap;
}
/* photo strip inside a journal entry */
.journal-photo-strip{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:18px 0 22px;
}
.journal-photo-strip .jp-thumb{
width:220px;
height:auto;
max-width:100%;
object-fit:cover;
border:2px solid #000;
cursor:pointer;
background:#fff;
transition:transform .15s ease;
}
.journal-photo-strip .jp-thumb:hover{
transform:scale(1.04);
}
/* journal photo lightbox — above the journal overlay */
.jp-lightbox{
position:fixed;
inset:0;
z-index:999999995;
background:rgba(0,0,0,.85);
display:none;
align-items:center;
justify-content:center;
flex-direction:column;
padding:30px;
box-sizing:border-box;
}
.jp-lightbox.jp-open{
display:flex;
animation:jpFade .2s ease;
}
@keyframes jpFade{
from{ opacity:0; }
to { opacity:1; }
}
.jp-lightbox img{
max-width:90vw;
max-height:80vh;
object-fit:contain;
border:3px solid #fff;
box-shadow:0 6px 30px rgba(0,0,0,.6);
background:#fff;
}
.jp-lightbox-caption{
margin-top:14px;
text-align:center;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.6;
text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.jp-lightbox-caption #jpLightboxName{
display:block;
font-weight:bold;
margin-bottom:2px;
}
.jp-lightbox-caption #jpLightboxCaption{
display:block;
opacity:.85;
}
.jp-lightbox-close{
position:fixed;
top:18px;
right:24px;
width:38px;
height:38px;
border:2px solid #fff;
background:rgba(0,0,0,.4);
color:#fff;
font-size:22px;
line-height:1;
cursor:pointer;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:background .15s ease;
}
.jp-lightbox-close:hover{
background:rgba(255,255,255,.25);
}
/* youtube embed inside a journal entry */
.journal-video{
margin:14px 0 6px;
max-width:420px;
}
.journal-video iframe{
width:100%;
aspect-ratio:16/9;
border:2px solid #000;
display:block;
}
/* "watch on youtube" fallback link — replaces an unavailable embed.
Matches the journal's typography, borders, and spacing. */
.journal-watch-link{
display:inline-block;
margin-top:14px;
padding:7px 14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#444;
background:#fff;
border:1px solid #c8c8c8;
border-radius:4px;
text-decoration:none;
letter-spacing:.2px;
box-shadow:0 1px 2px rgba(0,0,0,.10);
transition:background .18s ease, transform .18s ease, color .18s ease;
}
.journal-watch-link:hover{
background:#f5f5f5;
transform:translateY(-1px);
color:#222;
}
.journal-watch-link:active{
transform:translateY(0);
}
/* scroll hint — at the bottom right of the text box */
.journal-scroll-hint{
position:sticky;
bottom:0;
float:right;
margin-right:-10px;
z-index:21;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:rgba(80,80,80,.4);
pointer-events:none;
user-select:none;
letter-spacing:.5px;
}
/* ---- RIGHT PAGE: navigation (centered) ---- */
.journal-tabs{
position:absolute;
top:50%;
left:71%;
transform:translate(-50%, -50%);
z-index:25;
display:flex;
flex-direction:column;
gap:12px;
width:240px;
}
.journal-tab{
width:240px;
padding:14px 22px;
background:#fff;
border:1px solid #c8c8c8;
border-radius:4px;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#555;
cursor:pointer;
user-select:none;
white-space:nowrap;
box-shadow:
0 1px 3px rgba(0,0,0,.12),
0 1px 1px rgba(0,0,0,.06);
transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
letter-spacing:.2px;
text-align:center;
}
.journal-tab:hover{
background:#fafafa;
transform:translateY(-2px);
box-shadow:
0 3px 6px rgba(0,0,0,.14),
0 1px 2px rgba(0,0,0,.08);
}
.journal-tab.active{
background:#f0f0f0;
color:#222;
font-weight:bold;
box-shadow:
0 2px 5px rgba(0,0,0,.14),
0 1px 2px rgba(0,0,0,.08);
}
/* close button — part of the tab stack */
.journal-close{
width:240px;
padding:12px 22px;
background:#fff;
border:1px solid #c8c8c8;
border-radius:4px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
cursor:pointer;
box-shadow:
0 1px 3px rgba(0,0,0,.12),
0 1px 1px rgba(0,0,0,.06);
transition:background .18s ease, transform .18s ease, color .18s ease;
text-align:center;
letter-spacing:.2px;
margin-top:8px;
}
.journal-close:hover{
background:#f5f5f5;
transform:translateY(-2px);
color:#333;
}
.journal-close:active{
transform:translateY(0);
}
/* "open music_diary.log" link — mirrors .journal-close so it feels
like another piece of the notebook interface. Jumps to music_library.exe
with ?tab=log so the MUSIC LOG tab is auto-activated. */
.journal-music-link{
display:block;
width:240px;
box-sizing:border-box;
padding:12px 22px;
background:#fff;
border:1px solid #c8c8c8;
border-radius:4px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
cursor:pointer;
text-decoration:none;
box-shadow:
0 1px 3px rgba(0,0,0,.12),
0 1px 1px rgba(0,0,0,.06);
transition:background .18s ease, transform .18s ease, color .18s ease;
text-align:center;
letter-spacing:.2px;
margin-top:8px;
}
.journal-music-link:hover{
background:#f5f5f5;
transform:translateY(-2px);
color:#333;
}
.journal-music-link:active{
transform:translateY(0);
}
@media (max-width: 900px){
.journal-notebook{
width:92vw;
}
.journal-pages{
width:42%;
padding:16px 20px 40px 16px;
}
.journal-tabs{
width:180px;
left:74%;
}
.journal-tab,
.journal-close{
width:180px;
font-size:13px;
padding:12px 16px;
}
}
/* ==========================================
MUSIC CD (decorative)
========================================== */
.music-cd{
position:absolute;
top:115px;
left:865px;
z-index:5;
pointer-events:none;
transform:rotate(-6deg);
}
.music-cd img{
width:260px;
display:block;
}
/* ==========================================
GUESTBOOK ICON
========================================== */
.guestbook-icon{
position:absolute;
top:1595px;
left:585px;
z-index:220;
transform:rotate(-8deg);
}
.guestbook-link{
display:block;
text-decoration:none;
text-align:center;
color:black;
}
.guestbook-img{
width:370px;
display:block;
cursor:pointer;
transition:transform .18s ease;
}
.guestbook-title{
margin-top:12px;
position:relative;
left:8px;
z-index:2;
text-align:center;
font-family:"Courier New", monospace;
font-size:18px;
color:#222;
}
.guestbook-link:hover .guestbook-title{
color:white;
background:#0a246a;
display:inline-block;
padding:2px 6px;
}
.guestbook-img:hover{
animation:guestbookShake .28s ease-in-out;
}
@keyframes guestbookShake{
0%{transform:rotate(0deg);}
20%{transform:rotate(-1.2deg);}
40%{transform:rotate(1.2deg);}
60%{transform:rotate(-.8deg);}
80%{transform:rotate(.8deg);}
100%{transform:rotate(0deg);}
}
/* ==========================================
ABOUT ME
========================================== */
.about-me{
position:absolute;
top:300px;
left:455px;
z-index:150;
transform:rotate(-2deg);
}
.about-link{
display:block;
text-decoration:none;
text-align:center;
color:black;
}
.about-img{
width:500px;
display:block;
cursor:pointer;
transition:transform .18s ease;
}
.about-title{
margin-top:-40px;
font-family:"Courier New", monospace;
font-size:18px;
color:#222;
position:relative;
z-index:2;
}
.about-link:hover .about-title{
color:white;
background:#0a246a;
display:inline-block;
padding:2px 6px;
}
.about-img:hover{
animation:aboutShake .28s ease-in-out;
}
@keyframes aboutShake{
0%{transform:rotate(0deg);}
20%{transform:rotate(-1.2deg);}
40%{transform:rotate(1.2deg);}
60%{transform:rotate(-.8deg);}
80%{transform:rotate(.8deg);}
100%{transform:rotate(0deg);}
}
/* ==========================================
GLEP
========================================== */
.glep{
position:absolute;
top:760px;
left:810px;
z-index:120;
pointer-events:auto;
transform:rotate(12deg);
}
.glep img{
width:240px;
display:block;
image-rendering:auto;
cursor:pointer;
transition:transform .18s ease;
}
.glep:hover img{
animation:glepJiggle .12s linear infinite;
}
@keyframes glepJiggle{
0% { transform:rotate(0deg) translate(0,0); }
20% { transform:rotate(-15deg) translate(-3px,-2px); }
40% { transform:rotate(14deg) translate(3px,1px); }
60% { transform:rotate(-12deg) translate(-2px,2px); }
80% { transform:rotate(10deg) translate(2px,-1px); }
100% { transform:rotate(0deg) translate(0,0); }
}
/* ==========================================
SPOCK
========================================== */
.spock{
position:absolute;
top:1060px;
left:870px;
z-index:1;
transform:rotate(-3deg);
pointer-events:none;
}
.spock img{
width:220px;
display:block;
}
/* ==========================================
COFFEE MUG
========================================== */
.coffee-mug{
position:absolute;
top:1560px;
left:1080px;
z-index:120;
cursor:pointer;
user-select:none;
transform:rotate(-6deg);
transition:transform .25s cubic-bezier(.34,1.56,.64,1),
filter .25s ease;
}
.coffee-img{
height:157px;
display:block;
position:relative;
z-index:2;
}
.coffee-mug::after{
content:'';
position:absolute;
bottom:-6px;
left:50%;
transform:translateX(-50%);
width:80px;
height:14px;
background:rgba(0,0,0,.18);
border-radius:50%;
filter:blur(6px);
z-index:0;
opacity:.5;
transition:opacity .25s ease, width .25s ease;
}
.coffee-ring-text{
position:absolute;
top:50%;
left:50%;
width:260px;
height:260px;
margin:-130px 0 0 -130px;
z-index:1;
pointer-events:none;
animation:coffeeSpin 22s linear infinite;
}
.coffee-mug:hover .coffee-ring-text{
animation-duration:8s;
}
@keyframes coffeeSpin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.coffee-ring-text span{
position:absolute;
left:50%;
transform-origin:0 130px;
font-family:Arial, sans-serif;
font-size:20px;
font-weight:bold;
color:#ffffff;
white-space:nowrap;
letter-spacing:1px;
text-shadow:
-1px -1px 0 #0a246a,
1px -1px 0 #0a246a,
-1px 1px 0 #0a246a,
1px 1px 0 #0a246a,
0 0 4px #0a246a;
}
.coffee-mug:hover{
transform:rotate(12deg) translateY(-4px);
}
.coffee-mug:hover::after{
opacity:.7;
width:95px;
}
.coffee-mug.clicked{
animation:coffeeBounce .3s ease;
}
@keyframes coffeeBounce{
0%{
transform:rotate(-6deg) scale(1);
}
40%{
transform:rotate(15deg) scale(.92) translateY(-6px);
}
70%{
transform:rotate(-10deg) scale(1.05);
}
100%{
transform:rotate(-6deg) scale(1);
}
}
/* ==========================================
REMINDER WINDOW
========================================== */
.reminder-window{
position:absolute;
top:1850px;
left:1080px;
width:380px;
z-index:120;
transform:rotate(-2deg);
}
.reminder-window .titlebar{
display:flex;
justify-content:space-between;
align-items:center;
}
.reminder-close{
background:#dcdcdc;
color:#000;
width:18px;
height:18px;
line-height:14px;
font-size:14px;
font-weight:bold;
text-align:center;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
cursor:pointer;
padding:0;
}
.reminder-close:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
.reminder-close:hover{
background:#ff5555;
color:#fff;
}
.reminder-content{
padding:8px;
background:#ece9e1;
}
.reminder-img{
width:100%;
height:auto;
display:block;
}
/* ==========================================
VISITOR COUNTER
========================================== */
.visitor-counter{
position:absolute;
top:35px;
left:805px;
width:165px;
padding:12px 10px;
background:#ece9e1;
border:2px solid black;
box-shadow:5px 5px 10px rgba(0,0,0,.25);
text-align:center;
transform:rotate(-2deg);
z-index:145;
overflow:hidden;
}
.visitor-globe{
width:62px;
display:block;
margin:0 auto -6px auto;
position:relative;
z-index:2;
image-rendering:pixelated;
}
.visitor-text{
font-family:"Courier New", monospace;
font-size:11px;
color:#444;
line-height:1.3;
}
#visitorCount{
display:block;
margin:6px 0;
font-family:"Courier New", monospace;
font-size:32px;
font-weight:bold;
color:#0a246a;
letter-spacing:2px;
}
.visitor-trees{
position:absolute;
top:6px;
left:50%;
transform:translateX(-50%);
width:150px;
opacity:.9;
z-index:1;
pointer-events:none;
}
/* ==========================================
WHERE ARE YOU
========================================== */
.guestmap{
position:absolute;
top:1380px;
left:35px;
width:470px;
z-index:220;
transform:rotate(.3deg);
}
.guestmap h3{
text-align:center;
margin-bottom:6px;
font-size:18px;
}
.guest-subtitle{
text-align:center;
font-size:12px;
color:#666;
margin-bottom:14px;
}
.map-container{
position:relative;
width:100%;
margin-bottom:15px;
}
#worldMap{
width:100%;
display:block;
border:2px inset #777;
background:black;
}
#pinLayer{
position:absolute;
inset:0;
pointer-events:none;
}
.map-star{
position:absolute;
color:white;
font-size:13px;
transform:translate(-50%,-50%);
text-shadow:
0 0 4px white,
0 0 8px white;
animation:twinkle 2s infinite;
}
@keyframes twinkle{
0%{
opacity:.45;
transform:translate(-50%,-50%) scale(.9);
}
50%{
opacity:1;
transform:translate(-50%,-50%) scale(1.2);
}
100%{
opacity:.45;
transform:translate(-50%,-50%) scale(.9);
}
}
.guestmap label{
display:block;
margin-top:10px;
margin-bottom:4px;
font-size:12px;
}
.guestmap select,
.guestmap input{
width:100%;
padding:6px;
font-family:"Courier New", monospace;
margin-bottom:8px;
}
.enlarge-map-btn{
width:100%;
height:34px;
margin-top:4px;
}
.recent-arrivals{
margin-top:15px;
font-size:12px;
}
#recentVisitors{
margin-top:8px;
line-height:1.6;
height:180px;
overflow-y:auto;
overflow-x:hidden;
padding-right:6px;
}
/* ==========================================
GUESTBOOK WINDOW
========================================== */
.guestbook-window{
display:none;
position:absolute;
width:620px;
height:700px;
left:250px;
top:220px;
z-index:999999;
}
.guestbook-window .content{
height:655px;
overflow-y:auto;
padding:16px;
background:white;
}
.guestbook-window pre{
font-family:"Courier New", monospace;
line-height:1.6;
white-space:pre-wrap;
}
.guestbook-window label{
display:block;
margin-top:12px;
}
.guestbook-window input{
width:100%;
margin-top:5px;
margin-bottom:10px;
padding:6px;
font-family:"Courier New", monospace;
}
#signGuestbook{
width:100%;
height:34px;
margin-top:8px;
}
.guestbook-credit{
margin-top:25px;
text-align:center;
font-size:12px;
color:#666;
}
.guestbook-credit a{
color:#214a91;
text-decoration:none;
}
.guestbook-credit a:hover{
text-decoration:underline;
}
#closeGuestbook{
position:absolute;
top:5px;
right:6px;
width:20px;
height:20px;
border:1px solid #555;
background:#dcdcdc;
cursor:pointer;
}
#closeGuestbook:hover{
background:#ff5555;
color:white;
}
/* ==========================================
GUESTBOOK HEADER
========================================== */
.guestbook-header{
text-align:center;
margin:18px 0 28px;
}
.guestbook-garf{
display:block;
width:430px;
max-width:100%;
margin:0 auto 14px auto;
animation:garfHover 3s ease-in-out infinite;
}
@keyframes garfHover{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-5px);
}
}
.guestbook-intro{
font-family:"Courier New", monospace;
font-size:18px;
color:#222;
}
.gb-req{
color:#c0392b;
}
.gb-opt{
font-size:11px;
color:#888;
}
.guest-site{
color:#214a91;
text-decoration:none;
font-weight:bold;
}
.guest-site:hover{
text-decoration:underline;
}
/* ==========================================
HEADER
========================================== */
.site-header{
position:relative;
width:100%;
margin:0;
z-index:1000;
}
.header-bg{
display:block;
width:100%;
height:auto;
}
.header-btn{
position:absolute;
width:110px;
transition:.18s ease;
}
.header-btn:hover{
animation:headerWiggle .35s ease;
transform:translateY(-2px) scale(1.05);
cursor:pointer;
}
@keyframes headerWiggle{
0%{transform:rotate(0deg) scale(1.08);}
25%{transform:rotate(-5deg) scale(1.08);}
50%{transform:rotate(5deg) scale(1.08);}
75%{transform:rotate(-3deg) scale(1.08);}
100%{transform:rotate(0deg) scale(1.08);}
}
/* Temporary positioning */
.instagram{
top:48px;
right:415px;
}
.spotify{
top:48px;
right:285px;
}
.twitter{
top:48px;
right:155px;
}
.header-btn.twitch{
top:48px;
right:25px;
left:auto;
width:110px;
}
/* ==========================================
WIN98 SCROLLBARS (global — all scrollable areas)
========================================== */
::-webkit-scrollbar{
width:16px;
height:16px;
}
::-webkit-scrollbar-track{
background:#dfdfdf;
background-image:linear-gradient(45deg,#cfcfcf 25%,transparent 25%,transparent 75%,#cfcfcf 75%),
linear-gradient(45deg,#cfcfcf 25%,transparent 25%,transparent 75%,#cfcfcf 75%);
background-size:2px 2px;
background-position:0 0,1px 1px;
border:1px outset #fff;
}
::-webkit-scrollbar-thumb{
background:#cfcfcf;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
}
::-webkit-scrollbar-thumb:hover{
background:#dcdcdc;
}
::-webkit-scrollbar-thumb:active{
background:#dfdfdf;
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
::-webkit-scrollbar-corner{
background:#dfdfdf;
}
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:decrement,
::-webkit-scrollbar-button:horizontal:increment{
background:#cfcfcf;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
display:block;
height:16px;
width:16px;
background-repeat:no-repeat;
background-position:center;
}
::-webkit-scrollbar-button:vertical:decrement{
background-image:url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar-button:vertical:increment{
background-image:url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar-button:horizontal:decrement{
background-image:url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar-button:horizontal:increment{
background-image:url("data:image/svg+xml;utf8,");
}
::-webkit-scrollbar-button:vertical:decrement:active,
::-webkit-scrollbar-button:vertical:increment:active,
::-webkit-scrollbar-button:horizontal:decrement:active,
::-webkit-scrollbar-button:horizontal:increment:active{
background:#dfdfdf;
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
/* IE fallback colors */
*{
scrollbar-base-color:#cfcfcf;
scrollbar-face-color:#cfcfcf;
scrollbar-track-color:#dfdfdf;
scrollbar-arrow-color:#000;
scrollbar-shadow-color:#808080;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#dfdfdf;
scrollbar-darkshadow-color:#808080;
}
/* ==========================================
INTERNET IS DOWN (alert + game)
========================================== */
/* --- small alert window, sits just left of glep --- */
/* ==========================================
MONKEY GAME LAUNCHER
========================================== */
.monkey-launcher{
position:absolute;
top:905px;
left:560px;
width:230px;
z-index:215;
transform:rotate(-1.2deg);
}
.monkey-launcher-content{
padding:16px 14px 14px 14px !important;
background:#ece9e1;
text-align:center;
}
.monkey-img-wrap{
display:flex;
justify-content:center;
margin-bottom:10px;
}
.monkey-img{
width:130px;
height:auto;
display:block;
animation:monkeyBob 2.4s ease-in-out infinite;
transition:transform .3s ease;
}
@keyframes monkeyBob{
0%,100%{
transform:translateY(0) scale(1);
}
50%{
transform:translateY(-6px) scale(1.02);
}
}
.monkey-launcher:hover .monkey-img,
.monkey-launch-btn:hover ~ .monkey-img-wrap .monkey-img,
.monkey-img-wrap:hover .monkey-img{
animation:monkeyBounce 0.7s ease-in-out infinite;
}
@keyframes monkeyBounce{
0%,100%{
transform:translateY(0) scale(1.05);
}
50%{
transform:translateY(-14px) scale(1.08);
}
}
.monkey-launcher-text{
font-family:"Courier New", monospace;
font-size:13px;
color:#222;
margin-bottom:14px;
}
.monkey-launch-btn{
display:inline-block;
font-family:"Courier New", monospace;
font-size:13px;
font-weight:bold;
padding:6px 22px;
background:#cfcfcf;
color:#000;
border-top:2px solid #ffffff;
border-left:2px solid #ffffff;
border-right:2px solid #808080;
border-bottom:2px solid #808080;
cursor:pointer;
text-decoration:none;
letter-spacing:1px;
}
.monkey-launch-btn:hover{
background:#e0e0e0;
}
.monkey-launch-btn:active{
border-top:2px solid #808080;
border-left:2px solid #808080;
border-right:2px solid #ffffff;
border-bottom:2px solid #ffffff;
}
/* ==========================================
CRT + YOUTUBE COMPOSITION
========================================== */
.crt-composition{
position:absolute;
top:1140px;
left:20px;
width:280px;
height:auto;
z-index:200;
pointer-events:none;
}
.crt-composition .crt-video-wrap{
position:absolute;
top:10%;
left:14%;
width:72%;
height:68%;
overflow:hidden;
z-index:1;
border-radius:6px;
}
.crt-composition .crt-video-iframe{
position:absolute;
top:-12%;
left:-8%;
width:116%;
height:124%;
border:0;
pointer-events:none;
}
.crt-composition .crt-img{
position:relative;
width:100%;
height:auto;
display:block;
z-index:2;
pointer-events:none;
}
.map-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}
.map-overlay[hidden]{
display:none !important;
}
.map-bigwindow{
position:relative;
width:90vw;
max-width:1100px;
max-height:92vh;
overflow:auto;
z-index:10000;
}
.map-bigwindow .titlebar{
display:flex;
justify-content:space-between;
align-items:center;
}
.map-close-btn{
background:#cfcfcf;
color:#000;
width:18px;
height:18px;
line-height:14px;
font-family:"Courier New", monospace;
font-size:14px;
font-weight:bold;
text-align:center;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
cursor:pointer;
padding:0;
}
.map-close-btn:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
}
.map-bigcontent{
background:#ece9e1;
}
.map-instruct{
text-align:center;
font-size:13px;
color:#333;
margin-bottom:10px;
}
.map-big-container{
position:relative;
width:100%;
margin-bottom:15px;
cursor:crosshair;
}
#worldMapBig{
width:100%;
display:block;
border:2px inset #777;
background:black;
}
#bigPinLayer{
position:absolute;
inset:0;
pointer-events:none;
}
.map-big-container .map-star{
font-size:22px;
color:#00ffff;
text-shadow:0 0 6px #00ffff, 0 0 14px #00ffff;
}
.map-bigcontent label{
display:block;
margin-top:10px;
margin-bottom:4px;
font-size:12px;
}
.map-bigcontent input{
width:100%;
padding:6px;
font-family:"Courier New", monospace;
margin-bottom:8px;
box-sizing:border-box;
}
#leavePin{
width:100%;
height:34px;
margin-top:8px;
}
#leavePin:disabled{
opacity:.5;
cursor:not-allowed;
}
/* ==========================================
CONFESSION ANGEL
========================================== */
.confession-angel{
position:absolute;
top:1090px;
left:330px;
z-index:200;
cursor:pointer;
user-select:none;
text-align:center;
transition:opacity 2s ease, transform 3s ease;
}
.angel-img{
width:165px;
display:block;
margin:0 auto;
image-rendering:auto;
animation:angelIdle 4s ease-in-out infinite;
transition:transform .4s ease, filter .4s ease;
}
.confession-angel:hover .angel-img{
transform:scale(1.06);
filter:brightness(1.15);
}
.confession-angel-label{
margin-top:8px;
font-family:"Courier New", monospace;
font-size:18px;
color:#222;
position:relative;
z-index:2;
transition:color .2s ease, background .2s ease;
}
.confession-angel:hover .confession-angel-label{
color:white;
background:#0a246a;
display:inline-block;
padding:2px 6px;
}
@keyframes angelIdle{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}
/* "bring music back" button — appears where the music player was after the
angel closes it, so the visitor can reopen the webamp on their own terms. */
#angelMusicReturnBtn{
position:fixed;
left:120px;
top:180px;
z-index:999999980;
width:200px;
padding:14px 18px;
background:#cfcfcf;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
font-family:"Courier New", monospace;
font-size:13px;
color:#222;
text-align:center;
cursor:pointer;
line-height:1.4;
opacity:0;
transition:opacity .6s ease;
animation:musicReturnFadeIn .8s ease forwards;
}
#angelMusicReturnBtn:hover{
background:#dcdcdc;
}
#angelMusicReturnBtn:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
@keyframes musicReturnFadeIn{
from{ opacity:0; transform:translateY(8px); }
to { opacity:1; transform:translateY(0); }
}
/* dark overlay */
.angel-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.7);
z-index:999999990;
opacity:0;
transition:opacity 2s ease;
pointer-events:none;
}
.angel-overlay.active{
opacity:1;
pointer-events:auto;
}
/* angel at center */
.angel-center{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:999999991;
opacity:0;
transition:opacity 2.5s ease;
}
.angel-center.visible{
opacity:1;
}
.angel-center .angel-img{
width:180px;
animation:angelCenterIdle 5s ease-in-out infinite;
}
@keyframes angelCenterIdle{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-12px); }
}
/* dialogue window */
.angel-dialogue{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:700px;
max-height:85vh;
overflow-y:auto;
margin-top:0;
background:rgba(248,243,229,.94);
border:1px solid #2a1a0a;
box-shadow:0 0 30px rgba(255,248,220,.15);
padding:28px 44px;
z-index:999999992;
opacity:0;
transition:opacity 2s ease;
pointer-events:none;
}
.angel-dialogue.visible{
opacity:1;
pointer-events:auto;
}
.angel-dialogue::before{
content:'';
position:absolute;
inset:0;
background-image:url("homepage-graphics/graph.jpeg");
opacity:.04;
pointer-events:none;
}
.angel-text{
font-family:"Eleanora", Georgia, serif;
font-size:24px;
line-height:1.15;
color:#2a1a0a;
text-align:center;
position:relative;
}
.angel-text p{
margin-bottom:3px;
}
.angel-text p:last-of-type{
margin-bottom:24px;
}
/* RPG-style menu — side-by-side */
.angel-menu{
position:relative;
display:flex;
justify-content:center;
gap:60px;
margin-top:4px;
}
.angel-choice{
display:flex;
align-items:center;
padding:6px 16px;
font-family:"Eleanora", Georgia, serif;
font-size:34px;
color:#2a1a0a;
cursor:pointer;
user-select:none;
gap:12px;
transition:color .2s ease, text-shadow .2s ease;
}
.angel-choice:hover{
color:#5a3a1a;
}
.angel-choice-arrow{
width:20px;
text-align:center;
color:#2a1a0a;
opacity:0;
transition:opacity .2s ease;
}
.angel-choice.selected .angel-choice-arrow{
opacity:1;
}
.angel-choice.selected{
color:#1a0a00;
text-shadow:0 0 8px rgba(255,220,150,.4);
}
/* particles */
.angel-particle{
position:fixed;
z-index:999999988;
pointer-events:none;
font-size:14px;
color:rgba(255,255,200,.8);
animation:particleFall linear forwards;
}
@keyframes particleFall{
from{
opacity:1;
transform:translateY(-20px);
}
to{
opacity:0;
transform:translateY(100vh);
}
}
.angel-particle.feather{
color:rgba(255,255,255,.9);
font-size:16px;
}
/* white fade */
.angel-whiteout{
position:fixed;
inset:0;
background:#fff;
z-index:999999999;
opacity:0;
pointer-events:none;
transition:opacity 1s ease;
}
.angel-whiteout.active{
opacity:1;
pointer-events:auto;
}
/* When About is open as an overlay, pause homepage animations to save CPU.
The overlay covers the page so this is invisible; it just keeps things tidy. */
body.about-open *{
animation-play-state:paused !important;
}
/* ==========================================
PHOTO ARCHIVE OVERLAY
========================================== */
.pa-overlay{
position:fixed;
top:0; left:0;
width:100%; height:100%;
background:rgba(0,0,0,.55);
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
}
.pa-window{
width:85vw;
max-width:900px;
height:80vh;
max-height:700px;
background:#dadada;
border:2px solid #000;
box-shadow:8px 8px 20px rgba(0,0,0,.5);
display:flex;
flex-direction:column;
overflow:hidden;
}
.pa-titlebar{
background:linear-gradient(to right,#18459c,#7ca8ff);
color:#fff;
padding:7px 12px;
font-weight:bold;
font-size:13px;
display:flex;
justify-content:space-between;
align-items:center;
}
.pa-close{
background:#dcdcdc;
border:1px solid #555;
width:20px; height:20px;
font-size:14px;
cursor:pointer;
padding:0;
color:#333;
line-height:1;
}
.pa-close:hover{ background:#ff5555; color:#fff; }
.pa-content{
flex:1;
overflow:hidden;
display:flex;
flex-direction:column;
background:#ece9e1;
}
/* TABS */
.pa-tabs{
display:flex;
gap:2px;
padding:6px 6px 0;
background:#ece9e1;
flex-shrink:0;
}
.pa-tab{
font-family:"Courier New",monospace;
font-size:12px;
font-weight:bold;
padding:6px 16px;
background:#c8c4be;
color:#555;
border:1px solid #888;
border-bottom:none;
border-radius:6px 6px 0 0;
cursor:pointer;
position:relative;
top:0;
}
.pa-tab:hover{ background:#d8d4ce; }
.pa-tab.pa-tab-active{
background:#ece9e1;
color:#222;
border-color:#444;
z-index:2;
}
/* FILTERS */
.pa-filters{
padding:8px 12px;
border-bottom:1px solid #999;
background:#ece9e1;
flex-shrink:0;
}
.pa-year-row, .pa-season-row{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-bottom:4px;
}
.pa-year-btn, .pa-season-btn{
font-family:"Courier New",monospace;
font-size:11px;
font-weight:bold;
padding:4px 12px;
background:#cfcfcf;
color:#000;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
cursor:pointer;
}
.pa-year-btn:hover, .pa-season-btn:hover{ background:#e0e0e0; }
.pa-year-btn:active, .pa-season-btn:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
.pa-year-btn.pa-active, .pa-season-btn.pa-active{
background:#000080;
color:#ffff00;
border-color:#000080;
}
/* GRID VIEW */
.pa-grid-view{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:10px;
}
.pa-grid-view::-webkit-scrollbar{ width:16px; }
.pa-grid-view::-webkit-scrollbar-track{ background:#d0d0d0; border-left:1px solid #999; }
.pa-grid-view::-webkit-scrollbar-thumb{ background:#888; border:2px solid #b0b0b0; border-radius:3px; }
.pa-grid-view::-webkit-scrollbar-button:vertical:decrement{ height:16px; background:#c0c0c0; border:1px solid #8a8a8a; }
.pa-grid-view::-webkit-scrollbar-button:vertical:increment{ height:16px; background:#c0c0c0; border:1px solid #8a8a8a; }
.pa-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
@media(max-width:700px){
.pa-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:500px){
.pa-grid{ grid-template-columns:repeat(2,1fr); }
}
.pa-thumb{
cursor:pointer;
overflow:hidden;
border:2px solid #000;
background:#fff;
aspect-ratio:1;
position:relative;
}
.pa-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.15s;
}
.pa-thumb:hover img{
transform:scale(1.04);
box-shadow:3px 3px 0 rgba(0,0,0,.3);
}
.pa-thumb-name{
position:absolute;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.6);
color:#fff;
font-family:"Courier New",monospace;
font-size:8px;
padding:2px 4px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
opacity:0;
transition:opacity .15s;
}
.pa-thumb:hover .pa-thumb-name{ opacity:1; }
.pa-grid-scroll-cue{
text-align:center;
font-family:"Courier New",monospace;
font-size:10px;
color:#888;
padding:8px 0 4px;
}
/* PHOTO VIEW */
.pa-photo-view{
flex:1;
overflow-y:auto;
overflow-x:hidden;
display:flex;
flex-direction:column;
align-items:center;
padding:12px;
}
.pa-photo-view::-webkit-scrollbar{ width:16px; }
.pa-photo-view::-webkit-scrollbar-track{ background:#d0d0d0; border-left:1px solid #999; }
.pa-photo-view::-webkit-scrollbar-thumb{ background:#888; border:2px solid #b0b0b0; border-radius:3px; }
.pa-back-btn{
align-self:flex-start;
margin-bottom:10px;
font-family:"Courier New",monospace;
font-size:11px;
padding:4px 12px;
background:#cfcfcf;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
cursor:pointer;
}
.pa-back-btn:hover{ background:#e0e0e0; }
.pa-back-btn:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
.pa-photo-wrap{
flex-shrink:0;
margin-bottom:10px;
}
.pa-photo-wrap img{
max-width:100%;
max-height:55vh;
object-fit:contain;
display:block;
border:2px solid #000;
background:#fff;
}
.pa-photo-info{
font-family:"Courier New",monospace;
font-size:11px;
color:#555;
text-align:center;
margin-bottom:8px;
max-width:500px;
}
.pa-photo-info > div{ margin-bottom:2px; }
.pa-photo-info .pa-info-file{ font-weight:bold; color:#222; }
.pa-photo-nav{
display:flex;
align-items:center;
gap:16px;
flex-shrink:0;
}
.pa-nav-btn{
font-family:"Courier New",monospace;
font-size:12px;
font-weight:bold;
padding:5px 16px;
background:#cfcfcf;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
cursor:pointer;
}
.pa-nav-btn:hover{ background:#e0e0e0; }
.pa-nav-btn:active{
border-top:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}
.pa-counter{
font-family:"Courier New",monospace;
font-size:12px;
color:#555;
min-width:60px;
text-align:center;
}
/* ==========================================================
MOBILE / RESPONSIVE
The homepage is a fixed 1500px desktop. On phones we
scale down and relax the min-width so it doesn't force
a massive horizontal scrollbar. Windows that are
absolutely positioned keep their layout but shrink.
========================================================== */
/* Tablet & small desktop */
@media (max-width: 1100px){
html, body{
min-width:auto;
}
.desktop{
width:100%;
min-height:auto;
margin:0;
}
.window{
transform:scale(.85);
transform-origin:top left;
}
.site-header .header-bg{
width:100%;
}
}
/* Phone — landscape & portrait */
@media (max-width: 700px){
html, body{
min-width:auto;
overflow-x:hidden;
}
.desktop{
width:100%;
min-height:auto;
}
/* Let windows flow instead of absolute positioning */
.window{
position:relative !important;
top:auto !important;
left:auto !important;
width:92vw !important;
max-width:none;
margin:12px auto !important;
transform:none !important;
}
/* Stack the desktop windows vertically */
.visitor-counter,
.crt-composition,
.guestmap,
.journal,
.music-cd,
.about-me,
.socials,
.photography,
.art,
.twitch,
.clock,
.guestbook-icon{
position:relative !important;
top:auto !important;
left:auto !important;
margin:12px auto !important;
transform:none !important;
}
.crt-composition{
width:92vw;
margin:12px auto !important;
}
.crt-video-iframe{
width:100%;
}
.crt-img{
width:100%;
}
.music-cd img{
width:160px;
}
.guestbook-img{
width:100%;
max-width:370px;
}
.journal-img{
width:100%;
max-width:290px;
}
.about-img{
width:100%;
max-width:200px;
}
.twitch-preview{
width:100%;
}
/* Header buttons smaller */
.header-btn{
width:36px;
}
/* Photo archive overlay */
.pa-window{
width:94vw;
height:88vh;
}
.pa-grid{
grid-template-columns:repeat(2,1fr);
}
/* Paint archive */
.paint-archive{
width:92vw;
}
/* Welcome popup */
#welcomePopup{
width:88vw;
}
.welcome-sonic{
width:120px;
}
/* Music window album grid */
.album-grid{
grid-template-columns:repeat(2,1fr) !important;
}
.album-grid iframe{
width:100% !important;
}
/* Music live banner */
.music-live{
width:96%;
font-size:10px;
}
.music-live-track{
max-width:100%;
}
/* Music library button */
.music-library-btn{
width:96%;
}
/* Guestbook window */
.guestbook-window{
width:92vw !important;
}
/* Journal overlay */
.journal-overlay.open .journal-notebook{
width:94vw;
max-width:none;
}
.journal-pages{
width:60%;
}
.journal-tabs{
width:35%;
left:62%;
}
.journal-tab,
.journal-close{
width:auto;
font-size:12px;
padding:10px 12px;
}
/* Photo viewer */
.photo-viewer{
width:92vw !important;
}
/* Weather + construction tickers readable */
.weather-ticker,
.construction-ticker{
font-size:10px;
}
}
/* Small phones */
@media (max-width: 420px){
.window{
width:96vw !important;
}
.album-grid{
grid-template-columns:1fr !important;
}
.album-grid iframe{
width:100% !important;
height:180px !important;
}
.pa-grid{
grid-template-columns:repeat(2,1fr);
}
.journal-pages{
width:55%;
}
.journal-tabs{
width:40%;
left:58%;
}
.header-btn{
width:28px;
}
.music-library-cd{
width:24px;
height:24px;
}
.music-library-label{
font-size:9px;
}
}