/*======================================================
THE BEEHIVE
VERSION 2.5
PART 1B
======================================================*/

/*==========================
GOOGLE FONTS
==========================*/

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

/*==========================
RESET
==========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:#211231;

font-family:'Share Tech Mono',monospace;

color:#f7f4ff;

overflow-x:hidden;

line-height:1.6;

}

/*==========================
BACKGROUND
==========================*/

#bg-grid{

position:fixed;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:40px 40px;

pointer-events:none;

z-index:-5;

}

#bg-stars{

position:fixed;

inset:0;

opacity:.20;

pointer-events:none;

z-index:-4;

}

#bg-honeycomb{

position:fixed;

inset:0;

opacity:.07;

pointer-events:none;

z-index:-3;

}

/*==========================
WRAPPER
==========================*/

#wrapper{

width:1800px;

margin:40px auto;

position:relative;

}

/*==========================
HEADER
==========================*/

#header{

background:#362055;

border:5px solid #000;

box-shadow:8px 8px #000;

margin-bottom:25px;

overflow:hidden;

}

.terminal-bar{

background:#1a1027;

padding:8px 15px;

display:flex;

align-items:center;

gap:8px;

border-bottom:4px solid #000;

}

.dot{

width:13px;

height:13px;

border-radius:50%;

display:block;

}

.red{

background:#ff6868;

}

.yellow{

background:#ffd447;

}

.green{

background:#79d84f;

}

.terminal-bar p{

font-size:14px;

margin-left:10px;

}

#header-content{

padding:40px;

text-align:center;

}

#header h1{

font-family:'VT323',monospace;

font-size:95px;

letter-spacing:6px;

color:#ffd447;

text-shadow:4px 4px #000;

}

#header h3{

margin-top:8px;

font-size:28px;

font-family:'VT323',monospace;

letter-spacing:3px;

}

#header p{

margin-top:18px;

font-size:18px;

}

/*==========================
NAVIGATION
==========================*/

#terminal-nav{

display:flex;

justify-content:center;

gap:18px;

margin-bottom:28px;

flex-wrap:wrap;

}

#terminal-nav a{

background:#2f1d49;

padding:12px 20px;

border:4px solid #000;

box-shadow:4px 4px #000;

color:#ffd447;

font-family:'VT323',monospace;

font-size:26px;

transition:.25s;

}

#terminal-nav a:hover{

transform:translateY(-4px);

background:#ffd447;

color:#000;

}
/*==========================
LAYOUT
==========================*/

#layout{

display:grid;

grid-template-columns:320px 1fr 320px;

gap:25px;

align-items:start;

margin-bottom:40px;

}

#left-column,
#main-column,
#right-column{

display:flex;

flex-direction:column;

gap:25px;

}

/*==========================
PANELS
==========================*/

.panel{

position:relative;

background:#312049;

border:4px solid #000;

box-shadow:6px 6px #000;

overflow:visible;

transition:.25s;

}

.panel:hover{

transform:translateY(-4px);

box-shadow:10px 10px #000;

}

.panel-top{

background:#ffd447;

border-bottom:4px solid #000;

padding:8px 15px;

position:relative;

}

.panel-top h2{

font-family:'VT323',monospace;

font-size:34px;

color:#111;

letter-spacing:2px;

}

.panel-content{

padding:18px;

}

/*==========================
PANEL DECORATIONS
==========================*/

.panel::before{

content:"";

position:absolute;

width:42px;

height:16px;

background:rgba(255,236,168,.85);

top:-8px;

left:18px;

transform:rotate(-8deg);

border:1px solid rgba(0,0,0,.25);

}

.panel::after{

content:"";

position:absolute;

width:42px;

height:16px;

background:rgba(255,236,168,.85);

top:-8px;

right:18px;

transform:rotate(8deg);

border:1px solid rgba(0,0,0,.25);

}

/*==========================
SPECIAL PANEL THEMES
==========================*/

.polaroid{

background:#faf8f2;

color:#111;

}

.polaroid .panel-content{

background:#faf8f2;

}

.notebook{

background:#f8f5ff;

color:#222;

}

.folder{

background:#e8d67d;

color:#222;

}

.folder .panel-top{

background:#f4c52f;

}

.cork{

background:#8a6543;

color:#fff8ef;

}

.crt{

background:#16231b;

color:#8dff9b;

text-shadow:0 0 4px rgba(141,255,155,.45);

}

.monitor{

background:#0f1d28;

color:#bfefff;

}

/*==========================
PROFILE IMAGE
==========================*/

.profile-image{

display:block;

width:100%;

border:4px solid #000;

margin-bottom:15px;

background:#fff;

padding:6px;

}

/*==========================
LISTS
==========================*/

.panel ul{

list-style:none;

display:flex;

flex-direction:column;

gap:8px;

}

.panel li{

padding:4px 0;

}

.panel a{

color:inherit;

}

.panel a:hover{

color:#ffef88;

}

/*==========================
STAMP GRID
==========================*/

.stamp-grid{

display:flex;

flex-wrap:wrap;

gap:8px;

justify-content:center;

min-height:80px;

}
/*==========================
FLOATING DECORATIONS
==========================*/

#float-layer,
#foreground{

pointer-events:none;

position:absolute;

inset:0;

z-index:20;

}

.float{

position:absolute;

image-rendering:pixelated;

}

/*======== BEES ========*/

.bee{

animation:floatbee 5s ease-in-out infinite;

}

.bee1{

top:130px;

left:-70px;

width:90px;

transform:rotate(-10deg);

}

.bee2{

top:500px;

right:-60px;

width:95px;

transform:rotate(12deg);

}

.bee3{

bottom:220px;

left:-45px;

width:85px;

}

.bee4{

bottom:80px;

right:-50px;

width:95px;

}

/*======== STARS ========*/

.sparkle{

animation:twinkle 2s infinite alternate;

}

.sparkle1{

top:40px;

left:250px;

width:30px;

}

.sparkle2{

top:260px;

right:220px;

width:26px;

}

.sparkle3{

bottom:320px;

left:380px;

width:28px;

}

.sparkle4{

bottom:150px;

right:310px;

width:24px;

}

/*======== LIGHTNING ========*/

.zap1{

top:180px;

right:90px;

width:55px;

animation:flicker 1.5s infinite;

}

/*==========================
SCRAPBOOK DETAILS
==========================*/

.tape{

position:absolute;

width:80px;

height:28px;

background:rgba(255,240,170,.82);

border:1px solid rgba(0,0,0,.25);

transform:rotate(-10deg);

z-index:40;

}

.tape-left{

top:-15px;

left:60px;

}

.tape-right{

top:-15px;

right:60px;

transform:rotate(10deg);

}

.paperclip{

position:absolute;

width:28px;

height:42px;

border:4px solid #cfcfcf;

border-radius:20px;

z-index:45;

}

.clip-left{

top:20px;

left:-15px;

transform:rotate(-15deg);

}

.clip-right{

top:20px;

right:-15px;

transform:rotate(15deg);

}

/*==========================
HONEYCOMB OVERLAY
==========================*/

#bg-honeycomb{

background-image:

radial-gradient(circle at 25% 25%, rgba(255,212,71,.08) 10%, transparent 11%),

radial-gradient(circle at 75% 75%, rgba(255,212,71,.08) 10%, transparent 11%);

background-size:70px 70px;

}

/*==========================
ANIMATIONS
==========================*/

@keyframes floatbee{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

@keyframes twinkle{

from{

opacity:.35;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1.15);

}

}

@keyframes flicker{

0%{

opacity:1;

}

45%{

opacity:.4;

}

60%{

opacity:1;

}

100%{

opacity:.75;

}

}
/*==========================
HEADER DETAILS
==========================*/

#header{

position:relative;

}

#header::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:14px;

background:repeating-linear-gradient(
90deg,
#ffd447 0px,
#ffd447 18px,
#f8b800 18px,
#f8b800 36px
);

border-bottom:3px solid #000;

}

#header::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;
height:8px;

background:rgba(0,0,0,.18);

}

/*==========================
CRT EFFECT
==========================*/

.crt{

position:relative;

overflow:hidden;

}

.crt::before{

content:"";

position:absolute;

inset:0;

background:

repeating-linear-gradient(

transparent 0px,
transparent 2px,

rgba(255,255,255,.03) 3px,

transparent 4px

);

pointer-events:none;

}

.crt::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle,
transparent 55%,
rgba(0,0,0,.35));

pointer-events:none;

}

/*==========================
NOTEBOOK STYLE
==========================*/

.notebook .panel-content{

background:

repeating-linear-gradient(

to bottom,

transparent 0px,

transparent 27px,

rgba(60,120,255,.15) 28px,

transparent 29px

);

}

/*==========================
CORKBOARD
==========================*/

.cork{

background:

linear-gradient(

rgba(255,255,255,.04),
rgba(255,255,255,.04)

),

#8b6541;

}

/*==========================
FOLDER TAB
==========================*/

.folder .panel-top{

position:relative;

}

.folder .panel-top::before{

content:"";

position:absolute;

top:-12px;

left:14px;

width:90px;

height:14px;

background:#f4c52f;

border:3px solid #000;

border-bottom:none;

border-radius:6px 6px 0 0;

}

/*==========================
POLAROID
==========================*/

.polaroid{

transform:rotate(-1deg);

}

.polaroid:hover{

transform:rotate(1deg) translateY(-5px);

}

/*==========================
SCRAPBOOK SHADOWS
==========================*/

.panel{

filter:drop-shadow(8px 8px 0 #000);

}

/*==========================
FOOTER
==========================*/

#footer{

margin-top:40px;

background:#2a1b40;

border:4px solid #000;

padding:20px;

text-align:center;

font-family:'VT323',monospace;

font-size:28px;

letter-spacing:2px;

box-shadow:8px 8px #000;

}

/*==========================
SCROLLBAR
==========================*/

::-webkit-scrollbar{

width:14px;

}

::-webkit-scrollbar-track{

background:#1a1027;

}

::-webkit-scrollbar-thumb{

background:#ffd447;

border:3px solid #000;

}

::-webkit-scrollbar-thumb:hover{

background:#ffe36c;

}

/*==========================
TEXT SELECTION
==========================*/

::selection{

background:#ffd447;

color:#111;

}
/*==================================================
PART 2
DESKTOP HEADER
==================================================*/

#header{

min-height:340px;

background:

linear-gradient(

180deg,

#43296b 0%,

#332053 100%

);

position:relative;

overflow:visible;

}

/*=========================
DESKTOP WINDOW
=========================*/

#header-content{

position:relative;

width:78%;

margin:45px auto;

background:#e4e0d8;

border:4px solid black;

box-shadow:8px 8px black;

padding:25px;

color:#111;

}

/* XP TITLE BAR */

#header-content::before{

content:"THE_BEEHIVE.exe";

display:block;

margin:-25px -25px 20px -25px;

padding:10px;

background:

linear-gradient(

90deg,

#0058c9,

#3d95ff

);

color:white;

font-family:Tahoma,sans-serif;

font-size:15px;

font-weight:bold;

border-bottom:3px solid black;

}

/*=========================
HEADER TITLE
=========================*/

#header h1{

font-size:110px;

margin-top:15px;

color:#ffcf2b;

text-shadow:

5px 5px black,

0 0 20px rgba(255,220,70,.35);

letter-spacing:7px;

}

#header h3{

font-size:38px;

color:#593100;

margin-bottom:12px;

}

#header p{

font-size:18px;

line-height:1.8;

}

/*=========================
HANGING SIGNS
=========================*/

.header-sign{

position:absolute;

background:#ffd447;

border:4px solid black;

padding:10px 20px;

font-family:'VT323',monospace;

font-size:34px;

box-shadow:5px 5px black;

transform:rotate(-5deg);

}

.sign-left{

left:-45px;

top:80px;

}

.sign-right{

right:-45px;

top:190px;

transform:rotate(6deg);

}

/*=========================
DESKTOP ICONS
=========================*/

.desktop-icon{

position:absolute;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

font-size:13px;

color:white;

text-shadow:2px 2px black;

width:90px;

}

.desktop-icon img{

width:48px;

image-rendering:pixelated;

}

.icon-profile{

left:45px;

top:80px;

}

.icon-gallery{

left:55px;

top:180px;

}

.icon-music{

right:60px;

top:95px;

}

.icon-shrines{

right:70px;

top:205px;

}

/*=========================
MARQUEE
=========================*/

.marquee{

margin-top:18px;

background:black;

border:3px solid #ffd447;

padding:8px;

overflow:hidden;

white-space:nowrap;

color:#8cff91;

font-family:'VT323',monospace;

font-size:26px;

}

/*=========================
HEADER BEES
=========================*/

.header-bee{

position:absolute;

width:95px;

z-index:80;

animation:headerFloat 4s ease-in-out infinite;

}

.header-bee.left{

left:-40px;

bottom:-20px;

}

.header-bee.right{

right:-35px;

top:-20px;

}

@keyframes headerFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

/*==================================================
PART 2 CONTINUED
SCRAPBOOK DECORATIONS
==================================================*/

/*=========================
STICKY NOTES
=========================*/

.sticky{

position:absolute;

width:150px;

padding:12px;

background:#fff4a8;

border:3px solid #000;

box-shadow:5px 5px #000;

font-family:'VT323',monospace;

font-size:24px;

color:#222;

transform:rotate(-4deg);

z-index:70;

}

.sticky.one{

top:480px;

left:-70px;

}

.sticky.two{

top:930px;

right:-60px;

transform:rotate(5deg);

}

/*=========================
HONEY DRIPS
=========================*/

.honey-drip{

position:absolute;

top:0;

width:28px;

height:75px;

background:linear-gradient(#ffd447,#f3ab00);

border:3px solid #000;

border-top:none;

border-radius:0 0 18px 18px;

z-index:50;

}

.drip1{

left:120px;

height:65px;

}

.drip2{

left:420px;

height:90px;

}

.drip3{

right:260px;

height:60px;

}

.drip4{

right:90px;

height:82px;

}

/*=========================
PANEL STICKERS
=========================*/

.panel .sticker{

position:absolute;

width:65px;

height:65px;

image-rendering:pixelated;

z-index:90;

pointer-events:none;

}

.panel .sticker.star{

top:-24px;

right:-18px;

transform:rotate(15deg);

}

.panel .sticker.bee{

bottom:-18px;

left:-18px;

transform:rotate(-12deg);

}

/*=========================
PANEL PINS
=========================*/

.panel-pin{

position:absolute;

width:18px;

height:18px;

background:#d83434;

border:2px solid #000;

border-radius:50%;

z-index:95;

box-shadow:2px 2px #000;

}

.pin-left{

top:10px;

left:10px;

}

.pin-right{

top:10px;

right:10px;

}

/*=========================
BEE TRAIL
=========================*/

.bee::after{

content:"";

position:absolute;

width:40px;

height:10px;

left:-35px;

top:50%;

background:
repeating-linear-gradient(
90deg,
transparent 0 6px,
rgba(255,255,255,.35) 6px 12px
);

opacity:.5;

}

/*=========================
LITTLE HIDDEN BEES
=========================*/

.hidden-bee{

position:absolute;

width:32px;

opacity:.85;

transition:.3s;

}

.hidden-bee:hover{

transform:scale(1.4) rotate(12deg);

opacity:1;

}

/*=========================
PIXEL SHADOW
=========================*/

.pixel-shadow{

filter:
drop-shadow(2px 0 black)
drop-shadow(-2px 0 black)
drop-shadow(0 2px black)
drop-shadow(0 -2px black);

}

/*=========================
PANEL HOVER
=========================*/

.panel:hover{

z-index:200;

}

.panel:hover .panel-top{

background:#ffe46c;

}

/*=========================
SCRAPBOOK BACKGROUND
=========================*/

body::before{

content:"";

position:fixed;

inset:0;

background-image:

radial-gradient(
rgba(255,255,255,.035) 1px,
transparent 1px);

background-size:18px 18px;

pointer-events:none;

z-index:-2;

}
/*==================================================
PART 3
MEDIA PLAYER
==================================================*/

/*=========================
MEDIA PLAYER
=========================*/

.monitor{

background:#c8c8c8;

border:4px solid #000;

position:relative;

overflow:hidden;

}

/* XP TITLE BAR */

.monitor .panel-top{

background:

linear-gradient(

90deg,

#0058c9,

#3d95ff

);

color:white;

}

.monitor .panel-top h2{

color:white;

}

/* SCREEN */

.monitor .panel-content{

background:#1b2620;

color:#89ff92;

font-family:'VT323',monospace;

font-size:28px;

text-shadow:0 0 6px rgba(137,255,146,.45);

position:relative;

overflow:hidden;

}

/* Scanlines */

.monitor .panel-content::before{

content:"";

position:absolute;

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


background:

repeating-linear-gradient(

transparent 0px,

transparent 3px,

rgba(255,255,255,.04) 4px,

transparent 5px

);

pointer-events:none;

}

/*=========================
PLAYER
=========================*/

.player{

margin-top:15px;

padding:12px;

border:3px solid #000;

background:#101010;

}

.song{

font-size:30px;

margin-bottom:10px;

color:#ffe35a;

}

.progress{

height:18px;

border:2px solid #000;

background:#333;

overflow:hidden;

margin:15px 0;

}

.progress span{

display:block;

width:68%;

height:100%;

background:

linear-gradient(

90deg,

#ffd447,

#ffef8f

);

animation:loading 8s linear infinite;

}

.controls{

display:flex;

justify-content:center;

gap:12px;

margin-top:12px;

}

.controls button{

background:#ffd447;

border:3px solid #000;

padding:8px 14px;

font-family:'VT323',monospace;

font-size:24px;

cursor:pointer;

transition:.2s;

}

.controls button:hover{

transform:translateY(-2px);

background:#fff089;

}

/*=========================
VISUALIZER
=========================*/

.visualizer{

display:flex;

justify-content:center;

align-items:flex-end;

gap:5px;

height:70px;

margin-top:18px;

}

.visualizer span{

width:10px;

background:#8dff9b;

animation:bounce 1s infinite;

}

.visualizer span:nth-child(1){height:20px;animation-delay:.1s;}
.visualizer span:nth-child(2){height:38px;animation-delay:.3s;}
.visualizer span:nth-child(3){height:55px;animation-delay:.5s;}
.visualizer span:nth-child(4){height:28px;animation-delay:.2s;}
.visualizer span:nth-child(5){height:62px;animation-delay:.6s;}
.visualizer span:nth-child(6){height:34px;animation-delay:.4s;}
.visualizer span:nth-child(7){height:48px;animation-delay:.7s;}
.visualizer span:nth-child(8){height:26px;animation-delay:.3s;}

/*=========================
CRT GLOW
=========================*/

.monitor{

box-shadow:

0 0 20px rgba(95,255,133,.18),

8px 8px #000;

}

/*=========================
ANIMATIONS
=========================*/

@keyframes bounce{

0%{

transform:scaleY(.4);

}

50%{

transform:scaleY(1);

}

100%{

transform:scaleY(.4);

}

}

@keyframes loading{

0%{

width:10%;

}

50%{

width:78%;

}

100%{

width:10%;

}

}

/*==================================================
PART 3 CONTINUED
CAPTCHALOGUE + DESKTOP
==================================================*/

/*=========================
CAPTCHALOGUE DECK
=========================*/

.captchalogue{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

margin-top:18px;

}

.card{

background:#f5e48c;

border:3px solid #000;

box-shadow:4px 4px #000;

padding:10px;

aspect-ratio:3/4;

position:relative;

transition:.25s;

overflow:hidden;

}

.card:hover{

transform:translateY(-6px) rotate(-2deg);

z-index:100;

}

.card::before{

content:"#CAPTCHA";

position:absolute;

top:6px;

left:8px;

font-family:'VT323',monospace;

font-size:18px;

color:#5d4200;

}

.card::after{

content:"□□□□";

position:absolute;

bottom:8px;

right:8px;

font-size:18px;

letter-spacing:2px;

}

/*=========================
DESKTOP ICONS
=========================*/

.desktop{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

margin-top:20px;

}

.desktop-item{

text-align:center;

transition:.2s;

cursor:pointer;

}

.desktop-item:hover{

transform:translateY(-5px);

}

.desktop-item img{

width:48px;

margin:auto;

image-rendering:pixelated;

}

.desktop-item span{

display:block;

margin-top:6px;

font-size:13px;

text-shadow:1px 1px #000;

}

/*=========================
BLINKIE SHELF
=========================*/

.blinkie-shelf{

margin-top:20px;

display:flex;

flex-wrap:wrap;

gap:6px;

justify-content:center;

padding:10px;

background:#221536;

border:3px dashed #ffd447;

}

.blinkie-shelf img{

width:150px;

image-rendering:pixelated;

transition:.2s;

}

.blinkie-shelf img:hover{

transform:scale(1.08);

}

/*=========================
BULLETIN PINS
=========================*/

.bulletin{

position:relative;

}

.bulletin::before{

content:"";

position:absolute;

width:16px;

height:16px;

background:#cf2d2d;

border:2px solid #000;

border-radius:50%;

top:10px;

left:12px;

box-shadow:2px 2px #000;

}

.bulletin::after{

content:"";

position:absolute;

width:16px;

height:16px;

background:#cf2d2d;

border:2px solid #000;

border-radius:50%;

top:10px;

right:12px;

box-shadow:2px 2px #000;

}

/*=========================
WINDOWS SHADOW
=========================*/

.desktop-item img{

filter:

drop-shadow(2px 2px #000);

}

/*=========================
SOFT GLOW
=========================*/

.monitor,
.crt{

transition:.3s;

}

.monitor:hover,
.crt:hover{

box-shadow:

0 0 25px rgba(118,255,151,.28),

10px 10px #000;

}

/*=========================
LITTLE SECRET BEES
=========================*/

.secret-bee{

position:absolute;

width:26px;

opacity:.9;

transition:.25s;

}

.secret-bee:hover{

transform:rotate(18deg) scale(1.4);

}
/*==================================================
PART 5
UPDATE LOG + DESKTOP
==================================================*/

/*=========================
UPDATE LOG
=========================*/

.update-entry{

background:#fffdf6;

color:#222;

border:3px solid #000;

padding:15px;

margin-bottom:18px;

box-shadow:4px 4px #000;

transform:rotate(-1deg);

transition:.25s;

}

.update-entry:hover{

transform:rotate(1deg) translateY(-4px);

}

.update-entry h3{

font-family:'VT323',monospace;

font-size:34px;

margin-bottom:8px;

color:#684000;

}

.update-entry p{

line-height:1.8;

}

/*=========================
DESKTOP
=========================*/

.desktop{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

padding:10px;

}

.desktop-item{

padding:10px;

border-radius:10px;

transition:.25s;

cursor:pointer;

}

.desktop-item:hover{

background:rgba(255,255,255,.12);

transform:translateY(-6px);

}

.desktop-item img{

display:block;

margin:auto;

width:52px;

image-rendering:pixelated;

filter:drop-shadow(2px 2px black);

}

.desktop-item span{

display:block;

margin-top:8px;

text-align:center;

font-size:13px;

color:white;

text-shadow:2px 2px black;

}

/*=========================
BLINKIE SHELF
=========================*/

.blinkie-shelf{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:8px;

padding:12px;

background:#2a1a42;

border:3px dashed #ffd447;

min-height:90px;

}

.blinkie-shelf img{

width:150px;

transition:.2s;

image-rendering:pixelated;

}

.blinkie-shelf img:hover{

transform:scale(1.08) rotate(-2deg);

}

/*=========================
NOTEBOOK PAPER
=========================*/

.notebook .panel-content{

background:

repeating-linear-gradient(

to bottom,

#fffef9 0px,

#fffef9 30px,

#dbe7ff 31px,

#fffef9 32px

);

}

/*=========================
PIXEL BORDER
=========================*/

.panel{

image-rendering:pixelated;

}

/*=========================
LITTLE STARS
=========================*/

.panel:hover::before{

transform:rotate(-12deg) scale(1.08);

}

.panel:hover::after{

transform:rotate(12deg) scale(1.08);

}

/*=========================
SMALL FLOATING EFFECT
=========================*/

@keyframes idleFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-4px);

}

100%{

transform:translateY(0px);

}

}

.desktop-item:nth-child(odd){

animation:idleFloat 4s ease-in-out infinite;

}

.desktop-item:nth-child(even){

animation:idleFloat 5s ease-in-out infinite;

}
/*==================================================
PART 7
LEFT SIDEBAR WIDGETS
==================================================*/

/*=========================
STATUS CARD
=========================*/

.status-card{

position:relative;

padding:15px;

background:#fff9dc;

border:3px solid #000;

box-shadow:4px 4px #000;

color:#222;

font-size:15px;

line-height:1.8;

transform:rotate(-1deg);

transition:.25s;

}

.status-card:hover{

transform:rotate(1deg) translateY(-4px);

}

.status-card strong{

color:#6b4700;

}

.status-bee{

position:absolute;

width:55px;

top:-18px;

right:-12px;

image-rendering:pixelated;

animation:beeBob 3s ease-in-out infinite;

}

/*=========================
CAPTCHALOGUE
=========================*/

.captchalogue{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

margin-top:8px;

}

.card{

background:#fff2a8;

border:3px solid #000;

padding:10px;

box-shadow:3px 3px #000;

text-align:center;

transition:.25s;

position:relative;

}

.card:hover{

transform:translateY(-6px) rotate(-2deg);

z-index:10;

}

.card img{

width:64px;

height:64px;

object-fit:contain;

image-rendering:pixelated;

margin-bottom:8px;

}

.card p{

font-family:'VT323',monospace;

font-size:26px;

color:#4d3500;

}

/*=========================
BEE COUNTER
=========================*/

.notebook .panel-content p:first-child{

font-family:'VT323',monospace;

color:#ffbf00;

text-shadow:2px 2px #000;

}

/*=========================
PANEL HOVER
=========================*/

#left-column .panel:hover{

margin-left:8px;

}

/*=========================
PUSH PINS
=========================*/

.cork::before{

content:"";

position:absolute;

width:14px;

height:14px;

border-radius:50%;

background:#d63a3a;

border:2px solid #000;

top:8px;

left:10px;

box-shadow:2px 2px #000;

}

.cork::after{

content:"";

position:absolute;

width:14px;

height:14px;

border-radius:50%;

background:#d63a3a;

border:2px solid #000;

top:8px;

right:10px;

box-shadow:2px 2px #000;

}

/*=========================
ANIMATION
=========================*/

@keyframes beeBob{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}
/*==================================================
PART 9
BULLETIN BOARD
==================================================*/

.bulletin-board{

position:relative;

min-height:700px;

padding:25px;

background:

linear-gradient(

rgba(255,255,255,.04),

rgba(255,255,255,.04)

),

#91633d;

border:4px solid #5d3a1b;

overflow:hidden;

}

/*=========================
STICKY NOTES
=========================*/

.sticky-note{

position:relative;

width:240px;

padding:18px;

margin:18px;

display:inline-block;

vertical-align:top;

border:3px solid #000;

box-shadow:5px 5px #000;

transition:.25s;

}

.sticky-note:hover{

transform:rotate(2deg) scale(1.03);

z-index:30;

}

.yellow{

background:#fff2a6;

color:#222;

}

.pink{

background:#ffd3e6;

color:#222;

}

.sticky-note h3{

font-family:'VT323',monospace;

font-size:34px;

margin-bottom:10px;

}

.sticky-note ul{

margin-left:18px;

}

/*=========================
POLAROIDS
=========================*/

.polaroid-photo{

display:inline-block;

background:white;

padding:10px 10px 30px;

margin:20px;

border:3px solid #000;

box-shadow:6px 6px #000;

transform:rotate(-4deg);

transition:.25s;

}

.rotate-right{

transform:rotate(5deg);

}

.polaroid-photo:hover{

transform:scale(1.05);

z-index:35;

}

.polaroid-photo img{

display:block;

width:220px;

border:2px solid #000;

}

.polaroid-photo p{

margin-top:12px;

font-family:'VT323',monospace;

font-size:28px;

text-align:center;

color:#222;

}

/*=========================
STAMPS
=========================*/

.bulletin-row{

margin:20px 0;

display:flex;

flex-wrap:wrap;

gap:8px;

justify-content:center;

}

.bulletin-row img{

image-rendering:pixelated;

transition:.2s;

}

.bulletin-row img:hover{

transform:scale(1.08);

}

/*=========================
PIXEL DOODLE
=========================*/

.pixel-doodle{

margin-top:20px;

font-family:'VT323',monospace;

font-size:38px;

text-align:center;

letter-spacing:8px;

}

/*=========================
MARQUEE
=========================*/

marquee{

margin-top:25px;

display:block;

padding:10px;

background:#1f102f;

border:3px solid #ffd447;

font-family:'VT323',monospace;

font-size:30px;

color:#8cff91;

}

/*=========================
PUSH PINS
=========================*/

.sticky-note::before,
.polaroid-photo::before{

content:"";

position:absolute;

top:-10px;

left:50%;

transform:translateX(-50%);

width:16px;

height:16px;

background:#d83a3a;

border:2px solid #000;

border-radius:50%;

box-shadow:2px 2px #000;

}

/*=========================
MASKING TAPE
=========================*/

.polaroid-photo::after{

content:"";

position:absolute;

top:-12px;

right:18px;

width:60px;

height:18px;

background:rgba(255,240,170,.8);

transform:rotate(10deg);

border:1px solid rgba(0,0,0,.25);

}

/*=========================
BULLETIN HOVER
=========================*/

.bulletin-board:hover{

box-shadow:inset 0 0 30px rgba(0,0,0,.15);

}
/*==================================================
PART 10
OVERLAPPING DECORATIONS
==================================================*/

/*=========================
FLOATING STICKERS
=========================*/

.sticker{

position:absolute;

pointer-events:none;

z-index:150;

image-rendering:pixelated;

animation:stickerFloat 5s ease-in-out infinite;

}

.sticker.bee1{

top:180px;

left:-45px;

width:80px;

transform:rotate(-12deg);

}

.sticker.bee2{

top:760px;

right:-55px;

width:90px;

transform:rotate(10deg);

}

.sticker.star1{

top:420px;

left:48%;

width:36px;

}

.sticker.lightning1{

bottom:220px;

right:24%;

width:50px;

}

/*=========================
HANGING TAG
=========================*/

.hanging-tag{

position:absolute;

top:-35px;

right:50px;

background:#ffd447;

border:3px solid #000;

padding:8px 18px;

font-family:'VT323',monospace;

font-size:28px;

color:#111;

box-shadow:4px 4px #000;

transform:rotate(4deg);

}

.hanging-tag::before{

content:"";

position:absolute;

top:-18px;

left:50%;

width:2px;

height:18px;

background:#444;

transform:translateX(-50%);

}

/*=========================
LAYERED PAPERS
=========================*/

.paper-layer{

position:absolute;

background:#fdfcf7;

border:3px solid #000;

box-shadow:5px 5px #000;

z-index:-1;

}

.paper-layer.one{

width:95%;

height:95%;

top:15px;

left:15px;

transform:rotate(-1deg);

}

.paper-layer.two{

width:94%;

height:94%;

top:28px;

left:30px;

transform:rotate(1.5deg);

}

/*=========================
PIXEL SPARKLES
=========================*/

.pixel-sparkle{

position:absolute;

font-size:22px;

animation:twinkle2 2s infinite alternate;

pointer-events:none;

}

.spark1{

top:120px;

left:30%;

}

.spark2{

top:610px;

right:20%;

}

.spark3{

bottom:180px;

left:18%;

}

/*=========================
PANEL DEPTH
=========================*/

.panel:nth-child(odd){

transform:rotate(-0.4deg);

}

.panel:nth-child(even){

transform:rotate(0.4deg);

}

.panel:hover{

transform:translateY(-6px) scale(1.01);

}

/*=========================
ANIMATIONS
=========================*/

@keyframes stickerFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}

@keyframes twinkle2{

from{

opacity:.4;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1.2);

}

}
/*==================================================
PART 12
SHRINE SHELF
==================================================*/

/*=========================
SHRINE GRID
=========================*/

.shrine-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-top:15px;

}

.shrine-box{

position:relative;

background:#fff7d2;

border:3px solid #000;

padding:14px;

box-shadow:5px 5px #000;

text-align:center;

transition:.25s;

overflow:hidden;

}

.shrine-box:hover{

transform:translateY(-6px) rotate(-1deg);

z-index:25;

}

.shrine-box img{

width:100%;

max-width:140px;

display:block;

margin:0 auto 12px;

image-rendering:pixelated;

}

.shrine-box h3{

font-family:'VT323',monospace;

font-size:34px;

color:#5d3b00;

margin-bottom:8px;

}

.shrine-box p{

font-size:15px;

line-height:1.6;

color:#222;

}

/*=========================
BUTTON WALL
=========================*/

.button-wall{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:8px;

padding:10px;

min-height:90px;

background:#2b173e;

border:3px dashed #ffd447;

}

.button-wall img{

width:88px;

height:31px;

image-rendering:pixelated;

transition:.2s;

}

.button-wall img:hover{

transform:scale(1.08);

}

/*=========================
WEB PET
=========================*/

.pet-box{

text-align:center;

padding:12px;

background:#fff6c9;

border:3px solid #000;

box-shadow:4px 4px #000;

position:relative;

}

.pet-box img{

width:90px;

image-rendering:pixelated;

animation:petBounce 2.8s ease-in-out infinite;

}

.pet-box p{

margin-top:10px;

font-family:'VT323',monospace;

font-size:26px;

color:#5a3900;

}

/*=========================
LABEL
=========================*/

.tiny-note{

font-family:'VT323',monospace;

font-size:24px;

color:#7a5200;

margin-bottom:12px;

text-align:center;

}

/*=========================
TAPE
=========================*/

.shrine-box::before{

content:"";

position:absolute;

top:-8px;

left:50%;

transform:translateX(-50%) rotate(-5deg);

width:55px;

height:16px;

background:rgba(255,245,180,.8);

border:1px solid rgba(0,0,0,.2);

}

/*=========================
PET ANIMATION
=========================*/

@keyframes petBounce{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}
/*==================================================
PART 14
FLOATING DECORATIONS
==================================================*/

.floating{

position:absolute;

pointer-events:none;

z-index:999;

image-rendering:pixelated;

}

/*======================
GIANT SOLLUX
======================*/

.sollux{

width:330px;

top:170px;

left:-150px;

animation:floatSlow 5s ease-in-out infinite;

}

/*======================
BEES
======================*/

.bee{

width:75px;

}

.bee.one{

top:620px;

right:-25px;

animation:beeFly 4s ease-in-out infinite;

}

.bee.two{

top:1400px;

left:-20px;

animation:beeFly 5s ease-in-out infinite;

}

/*======================
STARS
======================*/

.star{

width:42px;

}

.star.one{

top:480px;

left:58%;

}

.star.two{

top:1280px;

right:10%;

}

/*======================
LIGHTNING
======================*/

.lightning{

width:55px;

top:980px;

right:-18px;

}

/*======================
CASSETTE
======================*/

.cassette{

width:70px;

top:1750px;

left:-28px;

transform:rotate(-12deg);

}

/*======================
COMPUTER
======================*/

.computer{

width:85px;

top:2150px;

right:-30px;

}

/*======================
HONEY
======================*/

.honey{

width:95px;

top:320px;

right:-18px;

}

.jar{

width:90px;

top:2580px;

left:-22px;

}

/*======================
STICKER
======================*/

.sticker{

width:75px;

top:850px;

left:-30px;

transform:rotate(-15deg);

}

/*======================
ANIMATION
======================*/

@keyframes floatSlow{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

@keyframes beeFly{

0%{

transform:translate(0,0);

}

50%{

transform:translate(12px,-12px);

}

100%{

transform:translate(0,0);

}

}
/*==================================================
PART 16
FLOATING WINDOWS
==================================================*/

.mini-window{

position:absolute;

width:190px;

background:#d8d8d8;

border:3px solid #000;

box-shadow:6px 6px #000;

z-index:950;

overflow:hidden;

animation:windowFloat 6s ease-in-out infinite;

}

.window-bar{

padding:6px;

background:linear-gradient(

90deg,

#0058c9,

#4ba4ff

);

color:white;

font-family:Tahoma,sans-serif;

font-size:12px;

font-weight:bold;

}

.window-content{

padding:10px;

background:#efefef;

color:#111;

font-size:14px;

text-align:center;

}

.window-content img{

width:60px;

image-rendering:pixelated;

}

.music-window{

top:520px;

right:-85px;

transform:rotate(3deg);

}

.bee-window{

top:1480px;

left:-90px;

transform:rotate(-4deg);

}

.mood-window{

top:2320px;

right:-70px;

transform:rotate(2deg);

}

@keyframes windowFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}
/*==================================================
PART 18
DESKTOP GADGETS
==================================================*/

.desktop-gadget{

position:absolute;

width:180px;

background:#d9d9d9;

border:3px solid #000;

box-shadow:6px 6px #000;

overflow:hidden;

z-index:940;

}

.gadget-title{

background:linear-gradient(
90deg,
#0058c9,
#6fb6ff
);

padding:6px;

color:white;

font-family:Tahoma,sans-serif;

font-size:12px;

font-weight:bold;

}

.gadget-body{

padding:12px;

background:#f2f2f2;

text-align:center;

}

.fake-time{

font-family:'VT323',monospace;

font-size:48px;

color:#ffbf00;

text-shadow:2px 2px #000;

margin-bottom:8px;

}

.clock-gadget{

top:880px;

right:-100px;

transform:rotate(3deg);

}

.quote-gadget{

top:1850px;

left:-100px;

transform:rotate(-4deg);

}

.warning-gadget{

top:3000px;

right:-80px;

transform:rotate(2deg);

}

.desktop-gadget:hover{

transform:scale(1.03);

transition:.2s;

}
/*==================================================
EXPANSION PACK
SCRAPBOOK OVERLAY
==================================================*/

.scrapbook-layer{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

z-index:1200;

}

/*======================
MASKING TAPE
======================*/

.tape{

position:absolute;

width:90px;

opacity:.88;

}

.tape1{

top:240px;

left:70px;

transform:rotate(-18deg);

}

.tape2{

top:1380px;

right:120px;

transform:rotate(14deg);

}

/*======================
PAPER CLIPS
======================*/

.paperclip{

position:absolute;

width:55px;

}

.clip1{

top:820px;

left:38%;

}

.clip2{

top:2080px;

right:30%;

}

/*======================
SPARKLES
======================*/

.spark{

position:absolute;

width:26px;

animation:twinkle 2s infinite alternate;

}

.spark1{

top:560px;

left:20%;

}

.spark2{

top:1460px;

right:18%;

}

.spark3{

top:2480px;

left:62%;

}

/*======================
BEES
======================*/

.wander-bee{

position:absolute;

width:55px;

animation:wander 7s ease-in-out infinite;

}

.beeA{

top:980px;

left:82%;

}

.beeB{

top:2300px;

left:8%;

}

/*======================
LIGHTNING
======================*/

.lightning-sticker{

position:absolute;

width:70px;

top:1730px;

right:60px;

transform:rotate(-14deg);

}

/*======================
CORNER DOODLES
======================*/

.corner-doodle{

position:absolute;

font-family:'VT323',monospace;

font-size:30px;

color:#ffd447;

text-shadow:2px 2px #000;

}

.top-left{

top:40px;

left:30px;

transform:rotate(-8deg);

}

.bottom-right{

bottom:40px;

right:40px;

transform:rotate(7deg);

}

/*======================
ANIMATIONS
======================*/

@keyframes wander{

0%{

transform:translate(0,0);

}

25%{

transform:translate(12px,-8px);

}

50%{

transform:translate(-10px,10px);

}

75%{

transform:translate(8px,-12px);

}

100%{

transform:translate(0,0);

}

}

@keyframes twinkle{

0%{

opacity:.3;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1.3);

}

}
/*==================================================
XP ERROR WINDOWS
==================================================*/

.xp-popup{

position:absolute;

width:220px;

background:#d9d9d9;

border:3px solid #000;

box-shadow:6px 6px #000;

z-index:1500;

animation:popupFloat 6s ease-in-out infinite;

overflow:hidden;

}

.xp-title{

background:linear-gradient(
90deg,
#0058c9,
#53a8ff
);

padding:6px 8px;

font-family:Tahoma,sans-serif;

font-size:12px;

font-weight:bold;

color:white;

display:flex;

justify-content:space-between;

}

.xp-title span{

background:#d63a3a;

padding:0 5px;

border:1px solid #000;

}

.xp-body{

padding:14px;

text-align:center;

background:#efefef;

}

.xp-body p{

margin-bottom:12px;

font-size:14px;

color:#111;

}

.xp-body button{

background:#ececec;

border:2px solid #000;

padding:4px 12px;

font-family:Tahoma,sans-serif;

cursor:pointer;

}

.popup1{

top:350px;

right:-90px;

transform:rotate(5deg);

}

.popup2{

top:1550px;

left:-90px;

transform:rotate(-4deg);

}

.popup3{

top:2850px;

right:-70px;

transform:rotate(3deg);

}

@keyframes popupFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}