════════════════════════════════════════════════════════════════════════════════ HTML SOURCE ════════════════════════════════════════════════════════════════════════════════ milk-tea.email
pink circle

Nutrition Facts®

MADE ON GOOGLE CHROME @PHOENIX-CODE

BEST VIEWED ON

SCREENS

1280 x 720

MOBILE-COMPATIBILITY 0%

IFRAMES, JAVASCRIPT 100%

an envelope
blue swirl
a yellow checkered tape
blue swirl
a plate of donuts
a memo pad
my signature
parental advisory
a barcode
════════════════════════════════════════════════════════════════════════════════ CSS (0 inline, 1 linked) ════════════════════════════════════════════════════════════════════════════════ :root { --background-color: white; --accent: #f9bddd; } html { line-height: 1.225; } body { cursor: url(../assets/items/cursor.png), auto; font-family: "MS PGothic"; background: var(--background-color); padding: 0; } body.index { overflow: hidden; padding-top: 7%; padding-left: 60px; transform: scale(0.91); z-index: 10; position: relative; } body.notf { overflow: hidden !important; } body.main, body.logs { padding: 0 0 7px 2px; } body.title { overflow: hidden !important; margin: 6px 0 0; } body.about { overflow-x: hidden; margin: 8px 10px 6px; } body.archive { background-image: url(../assets/backgrounds/glossy1.jpg); background-size: 850px; background-position: -20% 30%; } body.archive, body.shrines { overflow: clip !important; margin: 1px; } body.shrinei { overflow-x: hidden; margin: 1px; } body.diary { overflow: hidden; margin: 1px; } body.scrapbook { overflow: hidden; margin: 8px; background: transparent; } * { box-sizing: border-box; } main { background: 0 0; } main.notf { display: flex; justify-content: center; } iframe { border: none; cursor: url(../assets/items/cursor.png), default !important; } input[type="checkbox"] { cursor: url(../assets/items/cursor.png), default !important; } .col.right { display: grid; grid-template-columns: 240px calc(100% - 240px); grid-column-gap: 5px; } .col { display: block; width: 100% !important; background: #fff; } /* outer wrapper */ .wrapper { position: relative; width: 1200px; height: 800px; margin: 0 auto; transform-origin: top left; } @media (max-width: 1200px) { .wrapper { transform: scale(calc(100vw / 1200)); } } /* link styling */ a { cursor: url(../assets/items/select.png), pointer; color: #2453d4; } /* tooltip styling */ #s-m-t-tooltip { z-index: 9999; font-family: "Times New Roman"; background-color: rgba(250, 250, 255, 0.75); border-bottom: 2px solid #223388; border-right: 2px solid #223388; border-radius: 5px; backdrop-filter: blur(1px); color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; max-width: 200px; margin: 20px; padding: 7px; transition: 0.1s; text-align: center; } /* text styling */ p { font-size: 0.875em; } .inner > p { position: sticky; top: 0; background: #fff; width: 100%; z-index: 1; border-bottom: 1px solid gray; font-size: 12px; } .inner > p b { font-weight: 400 !important; } ::selection { color: #b4dffb; background: #ffffe0; backdrop-filter: blur(2px); } strong { color: #2453d4; } strong2 { color: #ee8cc8; } strong3 { color: rgb(158, 181, 235); } @font-face { font-family: PC98; src: url(../assets/fonts/pc-9800.ttf); } @font-face { font-family: spirit; src: url(../assets/fonts/Spirit.ttf); } @font-face { font-family: redaction; src: url(../assets/fonts/Redaction.otf); } @font-face { font-family: redaction2; src: url(../assets/fonts/RedactionN.otf); } @font-face { font-family: "acidic"; src: url(../assets/fonts/ACIDIC.TTF); font-style: normal; } /* corpo */ @font-face { font-family: "Chirp"; src: url(../assets/fonts/chirp.otf); font-style: normal; } @font-face { font-family: "SFPRO"; src: url(../assets/fonts/SFPRO.otf); font-style: normal; } @font-face { font-family: "Nitty"; src: url(../assets/fonts/Nitty.otf); font-style: normal; } /* heading styling */ .heading h4 { padding-inline: 7px; padding-top: 2px !important; font-size: 0; text-transform: uppercase; font-weight: 400; display: inline-block !important; margin-bottom: -1px; margin-right: 10px; transform: translateY(0) !important; } :is(.heading h4):hover { font-size: inherit !important; padding-inline: 7px; margin: 0; text-align: left; } :is(.heading h4):hover:after { font-size: 0 !important; } /* universal callers */ .flexbox { display: flex; } .rowflex { display: flex; flex-direction: row; } .columnflex { display: flex; flex-direction: column; } /* main page */ /* header */ .url-info { background: #fff url(../assets/images/softy.webp); background-size: cover; background-position: center; height: 200px; grid-column: span 3; image-rendering: pixelated; border: 1px solid #e0e0e0 !important; border-radius: 10px 0 0 10px; width: 713px !important; margin-top: 0 !important; /** box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.05); **/ filter: opacity(85%); box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; } .url-info::after { content: ""; width: 200px; height: 198.5px !important; margin: -0.5px 0 0 721px; background: url("../assets/gifs/googly.gif") left/cover no-repeat; position: absolute; border-radius: 0 10px 10px 0; border: 1px solid #5773ff !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; display: block; } /* top row */ .table-section { width: 100% !important; margin-top: 10px !important; margin-bottom: 10px !important; display: inline-block; background: #fff; border: 0 !important; } .table-section .inner { background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); border-top: 1.5px solid #8d6e6888; border-left: 1.5px solid #8d6e6888; border-bottom: 4px solid #8d6e6888; border-right: 1.5px solid #8d6e6888; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 10px; height: fit-content; overflow: hidden; text-align: right; } .table-section .heading { height: 22px !important; width: calc(100% - 2.5rem) !important; margin: 0 !important; font-weight: 400; font-size: 14px !important; border-radius: 10px 10px 0 0; background: var(--accent) !important; box-shadow: 0 -4px 3px 3px rgba(255, 255, 255, 0.5) inset; border: 1px solid #000; border-bottom: 0; color: #fff !important; text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000); } .table-section .heading h4:after { font-size: 14px; content: "クイズ"; display: inline; } .quiz { width: 200px; height: 112px; border: 1px solid black; border-radius: 0 0 10px 10px; margin-bottom: 8px; } .quizbg { background: linear-gradient(360deg, rgb(255, 255, 255), transparent), url(../assets/images/scooper.jpg) center/cover; padding: 7px; width: 100%; cursor: url(cursor.png), auto; font-family: "PC98"; font-size: 18px; color: #2453d4; height: 100%; border-radius: 0 0 10px 10px; text-align: center; } .quiztitle { padding: 3px 0px 4px 2px; } .quizanswer { border-radius: 3px; border-color: #000; width: 128px; font-size: 14px; cursor: url(cursor.png), auto; } .quizvote { color: #775a1d; background: #ffffff87; border: 1px solid #e6e600; padding: 3px; width: 60px; border-radius: 4px; cursor: url(select.png), pointer; } .quizview { color: #775a1d; background: #ffffff87; border: 1px solid #e6e600; padding: 3px; width: 60px; border-radius: 4px; cursor: url(../assets/items/select.png), pointer; } .mipodmain { background: url(../assets/images/ipod_vert.jpg); background-size: cover; background-position: center -2px; border-radius: 15px; height: 310px; width: 200px; border: 1px solid #e0e0e0; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; overflow: hidden; text-align: right; } .mipodbar { position: absolute; margin: 15px 0 0 16.5px; } .mipodalbum { display: flex; flex-direction: row; margin-top: 7px; margin-left: 22px; } .mipodalbum img { height: 50px; width: 50px; border: 2px ridge lightgray; } .mipodalbum p { margin: -1px 0 0 5px; line-height: 18px; text-decoration: underline; } .songboxp { margin: 27px 0 0 22px; } .mseeking { width: 163px; margin-top: 117px; margin-left: 18px; position: absolute; } .mpausebtn { position: absolute; margin-left: -108px; margin-top: 268px; } .mtable-section { background: transparent; } .mtable-section .inner { padding: 15px 15px 20px 17px; height: 452.5px; width: 713px; margin: -0.5px 0 0 -35px; } .mainbox { height: 100%; width: 100%; background: #fff; border: 1.25px solid #8584ff; border-radius: 6px; display: block; box-sizing: border-box; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d); } #myellowtape { position: absolute; margin-left: 600px; margin-top: 630px; z-index: 900; } #myellowtape img { transform: rotate(35deg); height: 38px; } #mexclm { position: absolute; margin-left: 670px; margin-top: 1050px; z-index: 900; } #mexclm img { transform: rotate(-10deg); height: 81px; } /* neighbors */ .blurbs, .ablurbs { grid-column: span 2; } .blurbs .inner, .ablurbs .inner { width: 923px !important; margin-bottom: 10px; border: 1px solid #000; border-radius: 0 0 10px 10px !important; border-top: 0; } .blurbs .inner { height: 70px !important; padding: 12px 0 15px; } .ablurbs .inner { height: 89px !important; padding: 12px 0 15px; } .blurbs .heading, .ablurbs .heading { height: 22px !important; width: 923px !important; border-radius: 10px 10px 0 0; background: var(--accent) !important; margin: 0 !important; font-weight: 400; font-size: 14px !important; background: var(--accent) !important; box-shadow: 0 -4px 3px 3px rgba(255, 255, 255, 0.5) inset; border: 1px solid #000; color: #fff !important; text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000); } .blurbs .heading h4:after { font-size: 14px; content: "友達"; display: inline; } .ablurbs .heading h4:after { font-size: 14px; content: "ファンリスト"; display: inline; } /* middle row */ .middle { grid-column: span 2; display: flex; width: 710 !important; height: 299px; margin-bottom: 10px; } .blog-preview p, .inner > p { padding-inline: 5px; } .blog-preview .heading { height: 22px !important; width: 280px !important; border-radius: 10px 10px 0 0; background: var(--accent) !important; border: 1px solid #000; margin: 0 0 0 -0.5px !important; font-weight: 400; font-size: 14px !important; box-shadow: 0 -2px 2px 3px rgba(255, 255, 255, 0.5) inset; color: #fff !important; text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000); } .blog-preview .heading h4:after { font-size: 14px; content: "アップデート"; } .blog-preview { position: relative; order: 2; width: 280px; display: block; background: #fff; height: 225px; border: 1px solid #000; border-top: 0; border-radius: 20px 20px 0 0; margin-left: 10px !important; } .blog-child { background: url(../assets/backgrounds/bluenote.jpg) center/cover; margin: 6px; padding: 0 4px 4px 35px; border: 1px solid #000; border-radius: 6px; height: 92px; font-size: 14px; line-height: 22px; } .blog-content { background: transparent; margin-top: 30px; overflow-y: auto; height: 61px; } .blog-preview::after { content: ""; display: block; position: absolute; background: url(../assets/images/flan_cup.jpg) center/cover no-repeat; border: 1px solid #000; border-radius: 0 0 10px 10px; width: 279px; margin-left: -1px; height: 65px; bottom: -74px; } .mblogsitely { font-family: "Spirit"; font-size: 25px; -webkit-text-fill-color: #ef91aa; -webkit-text-stroke: 0.5px #000; top: 35px; left: 180px; position: absolute; } .mblogentry { font-family: "Spirit"; font-size: 25px; -webkit-text-fill-color: #ef91aa; -webkit-text-stroke: 0.5px #000; top: 133px; left: 180px; position: absolute; } .friends:not(#comments) { order: 1; height: 299px !important; width: 633px; border: 1px solid #000; border-radius: 10px; display: flex; padding: 8px; } .afriends { background: #fff9f5; height: 367px !important; width: 560px; border: 1px solid #000; border-radius: 10px; display: flex; padding: 8px; z-index: 999; } .guestbook { background: url(../assets/images/cereal.webp); background-size: 220px 280px; border: 1px solid #c0c0c0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 6px; height: 100%; width: 220px; } .guestlink { width: 100%; text-align: center; margin-top: 240px; font-family: "PC98"; font-size: 18px; font-weight: bold; color: #000000; opacity: 0.7; } .guestlink a { text-decoration: none; } .webrings { border: 1px solid #000; border-radius: 6px; padding: 6px; height: 100%; width: 220px; overflow-y: auto; margin: 0px 8px; } .webrings::-webkit-scrollbar { display: none; } .wentitle { font-family: Arial; font-size: 31px; letter-spacing: -1px; font-weight: bolder; padding: 5px; } .wentry, .wentry-yume { display: flex; justify-content: center; align-items: center; border: 1px solid #000; background: url(../assets/backgrounds/notebg.png); background-attachment: fixed; border-radius: 3px; height: fit-content; margin: 0 0 6px; } .wentry img:hover, .wentry-yume img:hover { filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 01px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); cursor: url(../assets/items/select.png), pointer; z-index: 200; } .wentry-yume img { margin: 0 0 0 35px; } #yume-ring table tr td { padding: 0; } .wentry #doodlering .webring-wrapper { background-image: none !important; background-color: transparent !important; } .lpsringdiv { display: flex; flex-direction: column; align-items: center; width: -webkit-fill-available; } .lspringdiv img { margin-left: 56px; } .lpsring { text-align: center; text-transform: lowercase; font-weight: bold; letter-spacing: 1px; font-size: 10px !important; } .lpsring a { font-size: 14px; text-decoration: none; letter-spacing: 1px; } .stamp { display: flex; flex-direction: column; justify-content: center; background: transparent; width: 100%; height: 100%; border: 1px dashed #2453d4; border-radius: 6px; padding: 6px; } .buttonbg { background: url(../assets/backgrounds/star.jpg) center/cover; background-size: 177px; border: 1px solid #000; border-radius: 6px; padding: 6px; height: 50%; width: 163px; margin-left: 8px; margin-bottom: 6px; } textarea { width: 94px; resize: none; overflow: hidden; font-size: 0.7em; height: 1.8rem; color: #444; } .image-container { width: fit-content; margin: 20px; } .image-container img { width: 95px; border-radius: 4px; border: 3px ridge #f3ff8d; padding: 5px; position: relative; } .next-button { cursor: url(../assets/items/select.png), pointer; background: transparent; color: #2453d4; border: none; text-decoration: underline; font-family: "MS PGothic"; font-size: 14px; } .mlinkme { border-top: 1.5px solid #8d6e6888; border-left: 1.5px solid #8d6e6888; border-bottom: 4px solid #8d6e6888; border-right: 1.5px solid #8d6e6888; border-radius: 6px; height: 50%; width: 163px; margin-left: 8px; padding: 10px; background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); } .mlinkmebg { border: 3px ridge #d7b999; border-radius: 6px; height: 100%; padding: 4px; display: flex; background: url(../assets/backgrounds/neobg.jpg); background-size: 300px; } .mlinkmebg img { position: absolute; margin: 10px 0 0 -10px; z-index: 100; } .mlinkmebg p { font-size: 32px; font-family: "Spirit"; filter: sepia(20%); font-weight: bold; letter-spacing: -1px; color: #fff4fd; z-index: 1001; text-shadow: 0px 0px 3px #00000022, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, -2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, 2px -2px 0px #8d6e68, -2px 2px 0px #8d6e68, -2px 1px 1px #8d6e68, -2px 4px 1px #8d6e68, 2px 2px 0px #8d6e68, 3px 4px 1px #00000022; margin: 8px 0 0 8px; z-index: 105; } /* lower row */ #comments .heading, #acomments .heading { height: 22px !important; width: 741px !important; border-radius: 10px 10px 0 0; background: var(--accent) !important; border: 1px solid #000; margin: 0 !important; font-weight: 400; font-size: 14px !important; box-shadow: 0 -2px 2px 3px rgba(255, 255, 255, 0.5) inset; color: #fff !important; text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000); } #acomments .heading { width: 613px !important; } #comments .heading h4:after { font-size: 14px; content: "チャットボックス"; display: inline; } #acomments .heading h4:after { font-size: 14px; content: "クイズ結果"; display: inline; } .friends .inner { background: url(../assets/images/sugarra.webp) !important; background-size: 680px !important; width: 741px !important; border: 1px solid #000; border-radius: 0 0 10px 10px; border-top: 0; } #comments { position: relative; grid-column: span 2; right: -182px; width: fit-content; height: 540px !important; } #acomments { position: relative; margin-top: 11px; right: 0; width: fit-content; } #comments .inner { height: 524.5px; padding: 0; overflow: hidden; } #acomments .inner { height: 175px; padding: 10px; display: flex; flex-direction: row; gap: 10px; overflow-x: scroll; background: #fff !important; background-size: 680px !important; width: 613px !important; border: 1px solid #000; border-top: 0; border-bottom: 0; } #acomments .inner::-webkit-scrollbar-track { margin-left: -16px; margin-right: -16px; } #comments::before { top: -7px; right: 751px; width: 172px; height: 545.5px; margin-top: 7px; content: ""; display: block; position: absolute; border: 1px solid #e0e0e0 !important; filter: opacity(85%); box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 10px; background: url(../assets/images/pudding_slash.webp) right/cover; } #acomments::after { top: -7px; right: -322px; width: 310px; height: 199px; margin-top: 7px; content: ""; display: block; position: absolute; border-radius: 10px; background: url(../assets/images/peepsenv.webp) left/cover; background-position: 12% 108%; } #acomments .inner img { height: 100%; filter: grayscale(20%) sepia(80%) hue-rotate(180deg) saturate(200%) opacity(95%); } #acomments .inner img:hover { filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 01px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); } #mclip { position: absolute; margin-left: 445px; margin-top: -14px; z-index: 400; } #mclip img { height: 100px; } #mpen { position: absolute; margin-left: 160px; margin-top: 1150px; z-index: 900; } #mpen img { height: 390px; transform: rotate(233deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } /* marquee styling */ ul { list-style: none; padding: 5px; margin: 0; } .marquee { --gap: 1rem; position: relative; display: flex; overflow: hidden; user-select: none; gap: var(--gap); padding: 3px 0 3px; } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); height: 72px !important; min-width: 100%; animation: scroll 180s linear infinite; animation-direction: reverse; } .marquee:hover .marquee__content, .marquee:hover .dmq__content, .marquee:hover .abmq__content, .marquee:hover .scmq1__content, .marquee:hover .scmq2__content { animation-play-state: paused; } .marquee__content img, .abmq__content img { filter: grayscale(20%) sepia(80%) hue-rotate(180deg) saturate(200%) opacity(95%); } .marquee__content img:hover, .dmq_content img:hover, .abmq_content img:hover, .scmq1__content img:hover, .scmq2__content img:hover, .abmq__content img:hover { filter: brightness(110%); transform: scale(1.16); transition: 0.3s; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } /* music player */ .songtitlebox { background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-top-left-radius: 6px; border-top-right-radius: 6px; width: 125px; /* width of the player */ z-index: 9999; } .songtitle { background: transparent; } .songbox { background: transparent; font-family: "MS PGothic"; font-size: 15px; font-weight: bold; color: #06070c; line-height: 16px; text-align: left !important; position: absolute; margin-top: 10px; z-index: 9999; } .controls { width: 100%; } .controls img:hover { transform: scale(1.03); transition: 0.1s ease; } .seeking { background-color: #fff; /* background color of seeking bar */ display: flex; justify-content: space-evenly; padding: 5px; /* padding around seeking bar */ } .current-time { padding-right: 5px; } .total-duration { padding-left: 5px; } i.fas:hover { cursor: url(../assets/items/select.png), pointer; } input[type="range"] { -webkit-appearance: none; width: 100%; background-color: #fff; /* background color of seeking bar - make the color same as .seeking background color */ } input[type="range"]:focus { outline: none; } /* settings for chrome browsers */ input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 2px; /* thickness of seeking track */ cursor: help; background: #e74492; /* color of seeking track */ } input[type="range"]::-webkit-slider-thumb { height: 10px; /* height of seeking square */ width: 10px; /* width of seeking square */ border-radius: 5px; /* change to 5px if you want a circle seeker */ background: #e74492; /* color of seeker square */ cursor: help; -webkit-appearance: none; margin-top: -4.5px; } /* scrollbar */ ::-webkit-scrollbar { width: 16px; } ::-webkit-scrollbar:horizontal { height: 17px; } ::-webkit-scrollbar-corner { background: #fff; } ::-webkit-scrollbar-track { background: #fff; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E"); } ::-webkit-scrollbar-thumb { background-color: #dfdfdf; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; } ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement { display: block; } ::-webkit-scrollbar-button:vertical:start { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E"); height: 17px; } ::-webkit-scrollbar-button:vertical:end { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); height: 17px; } ::-webkit-scrollbar-button:horizontal:start { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E"); width: 16px; } ::-webkit-scrollbar-button:horizontal:end { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E"); width: 16px; } body::-webkit-scrollbar-corner { margin-top: 60px; } /* pixel mask */ .general-about img { -webkit-mask-image: url(https://i.postimg.cc/Hk6D7BxQ/868-sin-t-tulo-20240429140043.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } /* animations */ #float { animation-name: floating; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 10px); } 100% { transform: translate(0, -0px); } } /* title label */ #label { position: fixed; font-family: "Arial"; font-size: 70px; font-weight: 700; letter-spacing: -2px; border: 1px solid #000; background: #fff; text-align: left !important; padding: 0 5px 0; transform: rotate(-3deg); left: 120px; top: 145px; z-index: 400; width: fit-content; transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 1; visibility: visible; } #label.hidden { opacity: 0; visibility: hidden; } .labelline1 { margin-top: -5px; border-bottom: 2px solid #000; } .labelline2 { margin-top: 0; border-bottom: 1px solid #000; } .labelconst { font-weight: 100; font-size: 14px; letter-spacing: 0; margin-top: 5px; margin-bottom: 0; } .labelest { font-weight: 600; font-size: 22px; letter-spacing: 0; margin-top: 0; margin-bottom: 5px; } .labelimg { margin: 5px 0 0 10px; padding: 0; display: flex; justify-content: right; } /* sitemap */ #file { display: flex; width: 634px; height: 370px; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 15px; font-size: 80%; background: linear-gradient(#fff 10%, #ffceec 90%, #fff 100%); margin: 15px 0 0 22px; padding: 5px; z-index: 200; } #border-1 { height: 100%; width: 100%; border: 3px ridge #839aff99; border-radius: 15px; padding: 2px; } #border-2 { height: 100%; width: 100%; border: 1px dashed #f1c4ee; border-radius: 11px; } #sheet { height: 330px; overflow: auto; width: 520px; display: flex; line-height: 10px; position: absolute; padding: 15px 20px 15px; left: 70px; top: 17px; transform: rotate(2.5deg); background: url(../assets/backgrounds/grid.png); background-size: 270px; border: 1px solid #000; border-radius: 4px; } #sheet::-webkit-scrollbar { display: none; } #sheet:hover { z-index: 120; } #sheet a { text-decoration: none; color: inherit; transition: 0.1s all ease-in-out; } #sheet a:hover, #sheet a:focus { color: #ffceec !important; } #smbluebox { margin-left: -75px; margin-top: -70px; position: absolute; z-index: 95; } #smbluebox img { height: 490px; transform: rotate(-2deg); } #smyellownote { margin-left: 190px; margin-top: 30px; position: absolute; z-index: 90; } #smrilstamp { margin-left: 230px; margin-top: 180px; position: absolute; transform: rotate(10deg); z-index: 99; } #sitemap { left: 322px; top: 75px; position: absolute; padding: 5px; font-family: "Redaction"; font-size: 42px; font-weight: bold; letter-spacing: -1px; -webkit-text-fill-color: #fbff00; -webkit-text-stroke: 0.01px #00f; z-index: 390; } .main-checkbox { margin-right: 10px; } .top-label, .main-label { font-family: "spirit"; letter-spacing: 1px; color: #fff; text-shadow: 1px 0px #000, -1px 0px #000, 0px 1px #000, 0px -1px #000, 0 0; transition: 0.1s; cursor: url(cursor.png), auto; filter: saturate(300%); } .main-label { margin-top: 8px; width: fit-content; } .nested-label { cursor: url(cursor.png), auto; margin-left: 20px; } .more-nested-items { display: none; line-height: 17px; } .toggle-symbol { width: 20px; margin: 0 4px 0 5px; font-weight: bold; font-size: 18px; color: blue; } .main-toggle + .main-label .toggle-symbol::before, .nested-toggle + .nested-label .toggle-symbol::before { content: "+"; } .main-toggle:checked + .main-label .toggle-symbol::before, .nested-toggle:checked + .nested-label .toggle-symbol::before { content: "-"; color: red; } .main-toggle:checked ~ .more-nested-items, .nested-toggle:checked ~ .more-nested-items { display: block; } .main-toggle, .nested-toggle { opacity: 0; position: absolute; } .main-label, .nested-label { cursor: url(select.png), pointer; display: flex; align-items: center; } .flexed::-webkit-scrollbar { display: none; } #smclip { position: absolute; left: 445px; top: -5px; transform: scaleX(-1); z-index: 400; } #smcard { position: absolute; height: 130px; left: 300px; top: 40px; z-index: 300; } #smpencil { position: absolute; top: 200px; left: 510px; transform: rotate(200deg); z-index: 100; } #smcoffee { position: absolute; top: 215px; left: 80px; z-index: 100; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #smletter { position: absolute; top: 90px; left: 320px; z-index: 94; } .flexed::-webkit-scrollbar { display: none; } /* title page */ .titlebox { background: url(../assets/images/sealcard.jpg); background-size: 385px; border: 1px solid #eaeaea !important; border-radius: 10px; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; width: 269.5px; max-height: 260px; margin-left: 5px; padding: 14px; line-height: 19px; filter: saturate(120%); color: #715d64; letter-spacing: -0.5px; font-family: "acidic", serif; font-size: 15px; z-index: 200; } .titlebox img { position: absolute; margin: -28px 0 0 -8px; z-index: 100; } #goop { position: absolute; top: -22px; left: -3px; z-index: 100; } #torangesquig { position: absolute; margin: 84px 590px; z-index: 900; } #torangesquig img { height: 66px; transform: rotate(-20deg); } .miscbox { display: flex; flex-direction: column; width: 175px; border: 1px solid #000; border-radius: 6px; padding: 4px; margin-left: 222px; } #visitorid { display: flex; margin-bottom: 5px; } #visitorid p { margin: -1px 0 0 43px; } #visitor { background: url(../assets/images/heart_flan.JPG) center/cover; width: 100%; border: 1px solid #000; border-radius: 20px 6px 6px 6px; padding: 4px 7px 5px; } #visitor p { font-family: "PC98"; font-size: 19px; color: #2453d4; letter-spacing: -1px; text-align: center; } #visitorbox { background: #fff; border: 1px solid #000; border-radius: 6px; display: flex; justify-content: center !important; flex-direction: column; } #warning { margin: 5px 0 5px; border: 1px solid #000; border-radius: 6px; padding: 5px; font-family: "Times New Roman"; font-size: 15px; font-weight: bold; letter-spacing: -1px; } #warn1 { font-size: 30px; margin: -5px 0 0; } #warn2 { margin: -5px 0 0; text-decoration: underline; } #corkboard { display: flex; width: 667.5px; height: 137px; border: 2px #7f493d solid; border-radius: 5px; background: url(../assets/backgrounds/corkbg.jpg); margin: 5px 0 0 5px; z-index: 200; } .sticky { position: absolute; font-family: "PC98"; font-size: 12px; color: #000; line-height: 5px; margin: 27px 0 0 35px; } .sticky_head { position: absolute; font-family: "Redaction"; font-size: 40px; font-weight: bold; letter-spacing: -1px; opacity: 0.9; -webkit-text-stroke: 0.0001px #00f; color: #fff; } .stickyh1 { transform: rotate(-11deg); left: 130px; margin-top: -25px; } .stickyhere { margin-top: -48px; font-size: 28px; } .stickyh2 { transform: rotate(1.4deg); left: 190px; top: 300px; z-index: 210; } .stickyh2 p { font-family: "Spirit"; font-size: 28px; color: #7b3a16; margin: -7px 0 10px; } #tibluecard { position: absolute; transform: rotate(-10deg); height: 125px; left: 10px; margin-top: -5px; } #tiyellowpin { position: absolute; transform: rotate(2deg); height: 25px; left: 290px; margin-top: 8px; z-index: 205; } #tinote { position: absolute; transform: rotate(2deg); height: 140px; left: 200px; margin-top: 5px; z-index: 200; } #tiyellowpin { position: absolute; transform: rotate(2deg); height: 25px; left: 290px; margin-top: 8px; z-index: 205; } #tibluebubble { position: absolute; height: 110px; left: 360px; margin-top: -25px; z-index: 210; } #tiboo { position: absolute; height: 72px; left: 370px; margin: -8px 25px 0; z-index: 210; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #tisquare1, #tisquare2, #tisquare3, #tisquare4 { position: absolute; border: 2px rgb(133, 89, 43) solid; border-radius: 6px; height: 55px; width: 55px; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); z-index: 200; } #tisquare1 { margin: 6px 0 0 460px; } #tisquare2 { margin: 6px 0 0 527px; } #tisquare3 { margin: 71px 0 0 460px; } #tisquare4 { margin: 71px 0 0 527px; } #tipudding { margin: 270px 0 0 603px; position: absolute; z-index: 200; } /* about */ .abmq__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll 60s linear infinite; animation-direction: normal; } .amiddle { display: flex; margin-bottom: 10px; } .arating { background: url(../assets/backgrounds/a18-bg-grid.gif); background-attachment: fixed; background-position: 10px 4px; background-color: #fffef5; width: 336px; height: 163px; padding: 10px; border-top: 1.5px solid #8d6e6888; border-left: 1.5px solid #8d6e6888; border-bottom: 4px solid #8d6e6888; border-right: 1.5px solid #8d6e6888; border-radius: 16px; margin: 275px 0 10px; } .abill { border: 1px solid #e3e3e39c; box-shadow: inset 0px -6px 6px -5px #dadada, 5px 5px 6px -5px #dadada, -5px 5px 6px -5px #dadada; margin: 0 369px; position: absolute; z-index: 389; } .abillin { position: absolute; margin: -85px 0; width: 160px; height: 65px; overflow-y: auto; background-color: #fbfcfe; font-family: "Nitty"; font-size: 10px; font-stretch: ultra-condensed; color: #585a5ce1; letter-spacing: -1.5px; line-height: 10px; padding: 9px 9px; } .abillin::-webkit-scrollbar { display: none; } .abillin:hover::-webkit-scrollbar { display: block; } .abillin:hover { border-top: 2px ridge #b5ebff; border-left: 2px ridge #b5ebff; border-bottom: 2px ridge #b5ebff; border-right: 2px ridge #b5ebff; border-radius: 5px; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); margin-left: 10px; transform: scale(1.2); } .alinkme { position: absolute; padding: 10px; font-size: 34px; font-family: "Spirit"; filter: sepia(20%); font-weight: bold; letter-spacing: -1px; color: #ffe1f9; z-index: 2001; text-shadow: 0px 0px 3px #00000022, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, -2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, 2px -2px 0px #8d6e68, -2px 2px 0px #8d6e68, -2px 1px 1px #8d6e68, -2px 4px 1px #8d6e68, 2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, 2px -2px 0px #8d6e68, -2px 2px 0px #8d6e68, -2px 1px 1px #8d6e68, -2px 4px 1px #8d6e68, 2px 2px 0px #8d6e68, 3px 4px 1px #00000022; margin: 244px 66px 8px; } .abiscuit1 { border-top: 1.5px solid #fff9db; border-left: 1.5px solid #fff9db; border-bottom: 4px solid #fff9db; border-right: 1.5px solid #fff9db; box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3), inset 0 -3px 4px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.2); border-radius: 10px; outline: #d1d1d1 solid 1px; height: 152px; width: 150px; transform: rotate(-8deg); margin: 4px 0 0 14px; padding: 10px; background: url(../assets/backgrounds/choconya1.jpg); background-blend-mode: multiply; background-size: contain; position: absolute; z-index: 390; } .abiscuit2 { border-top: 1.5px solid #fff9db; border-left: 1.5px solid #fff9db; border-bottom: 4px solid #fff9db; border-right: 1.5px solid #fff9db; border-radius: 10px; outline: #d1d1d1 solid 1px; height: 152px; width: 150px; margin: 158px 0 0 8px; padding: 10px; background: url(../assets/backgrounds/choconya1.jpg); background-size: contain; position: absolute; z-index: 389; } #afilling { background: linear-gradient(to bottom, #fffef8 0%, #f4f1e9 55%, #fdfaf4 100%); box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 0, 0, 0.1); border-top: 1.5px solid #e2e2e2; border-left: 1.5px solid #e1e1e1; border-bottom: 4px solid #e1e1e1; border-right: 1.5px solid #e1e1e1; border-radius: 10px; outline: #d1d1d1 solid 1px; height: 100%; } .anews { width: 2700px; height: 438px; padding: 28px 7px 10px; border: 1px solid #f0f0f0 !important; border-radius: 10px; margin: 1px 0 0 9px; background: url(../assets/backgrounds/dotbg1.png); box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; font-family: "PC98"; z-index: 100; } .a-hanger { position: absolute; top: 6px; left: 60.6%; transform: translateX(-50%); width: 90px; height: 22px; background: url(../assets/backgrounds/dotbg1.png); background-position: 0 -6px; border-radius: 12px; display: flex; justify-content: center; align-items: center; } .a-hole { width: 36px; height: 10px; background: #fff; border-radius: 6px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); } .a-card { background: linear-gradient( to bottom, #ffffff 1%, #ce9f76 49%, #b08864 51%, #fff9f5 100% ); border-radius: 16px; margin: 0 12px 12px; padding: 8px; border: ridge 3px rgba(192, 146, 93, 0.6); } .aheader { position: absolute; text-align: center; margin-bottom: 10px; } .a-series { background: rgba(0, 0, 255, 0.694); color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 13px; letter-spacing: 1px; } .a-blister { background: rgba(255, 255, 255, 0.6); border-radius: 22px; padding: 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 8px 18px rgba(172, 172, 172, 0.18); } .a-glossy { position: relative; overflow: hidden; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15) ); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), inset 0 -10px 20px rgba(255, 255, 255, 0.25), 0 12px 30px rgba(136, 136, 136, 0.25); } .a-glossy::before { content: ""; position: absolute; top: -20%; left: -40%; width: 180%; height: 60%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0.15) 55%, rgba(255, 255, 255, 0) 70% ); transform: rotate(-8deg); pointer-events: none; } .a-glossy::after { content: ""; position: absolute; top: 6px; left: 6px; right: 6px; height: 45%; border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) ); pointer-events: none; } .a-window { background: url(../assets/images/purinweb.webp); background-size: cover; background-position: center; border-radius: 20px; height: 260px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 -8px 16px rgba(255, 255, 255, 0.6); } .a-footer { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; } .anumber { background: rgba(0, 0, 255, 0.694); font-weight: bolder; color: #fff; padding: 6px 10px; border-radius: 2px 2px 2px 8px; font-size: 16px; } .atagged { margin-left: -205px; margin-top: 4.5px; } .atagged img { height: 32px; border-radius: 2px; border: #d2d2d2 solid 1px; box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px gainsboro; } .a-name { font-size: 18px; font-weight: 600; color: #ff5f9e; letter-spacing: 1px; } .atest { background: url(../assets/images/shortcake.webp); background-size: 700px; background-position: 40% 50%; width: 100%; height: 438px; border: 1px solid #e0e0e0 !important; filter: opacity(85%); box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 10px; margin: 0 0 0 9px; } #atabs { position: absolute; margin: -31px 0 0 6px; transform: scale(0.8); transform-origin: left top; display: flex; flex-direction: row; z-index: 998; } .apasspin { border: 1px solid #000; border-radius: 6px; background-color: #ecf7ff; padding: 6px; height: 100%; width: 288px; overflow-y: auto; margin: 0px 1px; z-index: 999; } #apcolum { background: transparent; } #apcolum:hover { z-index: 2000; } .aphoto { border-top: 1.5px solid #8d6e6888; border-left: 1.5px solid #8d6e6888; border-bottom: 4px solid #8d6e6888; border-right: 1.5px solid #8d6e6888; border-radius: 6px; height: 200px; width: 173.5px; margin-left: 8px; padding: 8px; background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); } .aphoto img { height: 100%; width: 100%; filter: brightness(105%) /* contrast(120%) opacity(97%) grayscale(60%) hue-rotate(100deg) saturate(170%) */; border-radius: 6px; border: #e6ecff ridge 3px; } #abadge { position: absolute; margin-left: 110px; margin-top: 730px; pointer-events: none; z-index: 900; } #abadge img { height: 160px; transform: rotate(2deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #apenc { position: absolute; margin-left: 700px; margin-top: 400px; z-index: 1009; } #apenc img { height: 390px; transform: rotate(213deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #akeych1 { position: absolute; margin: -20px 660px; z-index: 1001; pointer-events: none; } #akeych1 img { height: 290px; transform: rotate(-5deg); filter: brightness(1.05) contrast(0.9) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #aidc { position: absolute; margin-left: -3px; margin-top: -447px; filter: brightness(1.05) saturate(125%) contrast(0.9) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); z-index: 97; } #aidc img { height: 268px; border-radius: 14px; } #aidcim { position: absolute; margin-left: 39px; margin-top: -470px; z-index: 901; } #aidcim img { width: 113.5px; height: 118px; } #aidcim img:hover { filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d) drop-shadow(0 0 1px #8080804d); } .aipodmain { background: url(../assets/images/ipod_vert.jpg); background-size: cover; background-position: center -2px; border-radius: 15px; height: 310px; width: 200px; margin: 0 9px 8px 0; border: 1px solid #e0e0e0; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; overflow: hidden; text-align: right; } @font-face { src: url(https://dl.dropbox.com/scl/fi/44jmpsjadcy83ekitx5h2/Icons-South-St.ttf?rlkey=xlgdqf7d1egq08yvreyauv0p5&dl=0); font-family: icons; } .abphone { animation: bobbing 3s ease-in-out infinite; margin: -160px 300px; z-index: 1000; } #dmessage { transform: scale(1.6) rotate(-4deg); height: 320px; width: 160px; outline: #a4a4a4 solid 1px; border: 1px solid #e0e0e0 !important; box-shadow: 0 0 0 2px rgb(248, 211, 239) inset, 0 0 0 6px #000 inset, inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 25px; padding: 6px; position: absolute; font-family: "SFPRO"; box-sizing: border-box; } #dmessage::after, #dmessage::before { display: block; position: absolute; left: 0; right: 0; margin: auto; background: #000; border-radius: 50px; box-sizing: border-box; } #dmessage::before { text-shadow: none !important; content: "o"; top: 10px; width: 33%; height: 16px; color: #00008b; line-height: 12px; text-align: right; padding-inline: 6px; font-size: 10px; } #dmessage::after { content: ""; bottom: 9px; width: 35%; height: 3px; } .message-in:before, .message-out:before { width: 20px; height: 20px; background: 0 0; bottom: 0; z-index: -1; position: absolute; content: ""; display: block; } .topbarorwhatever { text-align: left !important; height: 20%; width: 100%; background: #ecf5fc; border-radius: 18px 18px 0 0; padding: 0 7px; border-bottom: 1px solid #d1d4db; } .topbarorwhatever p:not(#contactname) { margin: 6px 0 !important; font-size: 9px; display: inline-block; color: black !important; } .topbarorwhatever p:not(#bigname, #contactname, :first-child) { float: right; margin-top: 6px; font-family: icons !important; word-spacing: 2px; font-size: 9px; } .ppprofile { width: 100%; height: 30px; margin: 3px auto !important; text-align: center; color: #000 !important; text-decoration: none !important; display: block; } #ppictuture { content: url(../assets/images/pinkflurry.JPG); margin-bottom: -2px; margin-top: -2px; } #contactname:before { content: "the void "; font-size: 8px; font-weight: 400; margin-top: -100px; color: #000; } #contactname { margin: -2px; font-size: 6px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: #4ba5f1; } .ppprofile img { width: 25px; height: 25px; object-fit: cover; border-radius: 100%; } #vottomvar { width: 100%; } #messagescrollable { width: 100%; height: 70%; overflow-y: scroll; overflow-x: hidden; transform: rotate(180deg); direction: rtl; background: #fff; padding: 24px 4px 0; } #messagescontainer { min-height: 0; display: flex; flex-direction: column-reverse; } #messagescrollable::-webkit-scrollbar { display: none; } .message-in, .message-out { font-size: 9px; padding: 5px; margin-inline: 8px !important; word-break: break-word; border-radius: 5px; position: relative; transform: rotate(180deg); text-align: left; margin-block: 4px; } :is(.message-in, .message-out) img { width: 100%; } .message-out { background: url(../assets/backgrounds/dotbg1.png); margin-right: 45px !important; color: #3568d6; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d); border: 1px solid #2453d4; } .message-in:before { left: -19px; border-radius: 0 0 10px; border-right: 5px solid #e9e9eb; transform: rotate(5deg); } .message-in { background: #e9e9eb; margin-left: 45px !important; color: #000; } #vottomvar { background: #d1d4db; height: 10%; border-radius: 0 0 18px 18px; } .messageboxxy { width: 80%; height: 18px; background: #fff; border-radius: 50px; transform: translateY(-39px); border: 1px solid #cecece; float: right; margin-right: 5px; padding: 7px; cursor: text; } .messageboxxy:after { content: ""; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAJ0klEQVRYCc1ZW0hUXxff58xNRylJayaGCrKITJ3UpKmmbCxsQDJzqrcu0kWIIrErVJRBFyiKii4PEb1E0UOXJ6MLiSaEVpQ1qHRR0TQdc5zRmss5c86H/v7fan9jNcG/4NsPss4+66z1W7+19trbPUySJPV/h6IosiyrqhqJRBRFUVUVj9DEW7/f39nZ2dXV5fF4urq6ent7e3p6uru7P3/+DAGTAwMD9DkMwhXMqqpKQpTM8Bkc80rhcDjKBB5fv369Y8eO7Ozs2SMjIyNj1qxZaWlpVqs1IyMjMzPTarVmZmZmZGTMnj07Nze3oqKira1NVVVJkpSRAY8Us6qq5CsSicALCwQCkIAsCnUoFMLbYDCoqmp9ff3MmTNFUWSM6fV6NjK0Wi2E0X81Gg1jLCcn58OHD7CjqirZhC9woSgKgVNVdZgtAk5sybJMwCORCNIXDAaLiorgG8gYY6IoCoKg0WgEQcArgRuiKGpGRmlpaRSaSCRCRJAvgs4A5YdKBD88Mt6/fz9x4kTGmFarBSyQgZnRVPEz06dP7+vrg1cKHo+ESZZlejXMFqUcaf723xEMBoeGhvx+fyAQCIfD1dXVKSkpxBOo0uv14Gk0W8SrwWAwm80tLS1erzcUCgUCAa/XOzg4CD9DQ0NEJEH8J4mqqr5///7o0aPLly/Pz89fsGCB3W7Py8tbuHDhopHhcDhycnLi4+PhXhRFnU5HfPCYaJIxRvNxcXHZ2dkFBQV2u33JkiWLFi1yOBzz589fsmRJQUHBihUrzpw509ra+j2JKPnbt2+npaUJggAyUMUoEn6GCCDOdDod+eYBQSaDjDGEAWX8pUWDVzab7dGjR0DGIpFIQ0PDpEmTyBBvHRWNuHn3XFkPVzpeEVZ6yxhD/YmiiFB5jnmPsJCWluZ2u4dXoiRJpaWloigCO5keDQVWqB0QSprBt/yqjHoV9UliYmJ8fDxjLC4ujmLbuXOnJEmstbXVYrHQLAzBNFnh+SMCNBpNlNcoNSKDFiy6HcyWlZU9f/781q1bWVlZ0EQ3SU9P7+7uZrW1tSkpKfiSLwXeB58UWnpkiyLR6XSUdKDnA+PTZ7fbPR4PyujOnTuwD4XU1NSmpiZWU1OTlJTEp4wPjp/ngUInMTHRarWWlJTs3bv3+PHjlZWV5eXlLpdrxowZer1eHBmCIMTFxcExWVi1ahXtOfX19UlJSYhNEASLxdLY2MiePn06ZswYNCH6jBf4iEnNYrFs3Lixqqrqy5cvaDbUCRVF6erqunfv3tq1axMTE2GK0m0wGERRNJlMjx8/jkQiAwMDe/bsgQtUjslkevPmDUOTpM9Qtnzh8xC1Wq1er1+9enV1dTV23MHBQX4blUcGsuPz+erq6pxOJxYTtQMYnzRp0po1a5xOJ+qdvEyePLm5uXk4iWPGjCFKBEEgiKRKERuNxsrKSkBBa1YUpa+v79WrV9XV1TU1NW/fvvV6vXRYkiTJ4/Hs3bsXK47KgwRYhnfANZvNw7VVW1s7duxYQsDj4yfRQS5fvkyblSRJdXV127Zty8rKSk5OTkhIiI+PT0lJmTt37u7du589e0YtW5blQ4cOARnZJ+NRgsVicbvdP4WFYueb+IkTJ0KhEJjo6OjYvn07xUPRk9eJEyfu2bPH6/WitMPh8Pbt26k2SC0KE2MsNiz6RhTFwsLCnp4eENDc3OxwOKhxGwyGqEMENcmioqKOjg6shvb29jlz5gDZz+okNiw+oPHjxz9+/Bgns97e3qVLl6L1ATevGeVPFMV169b19/ejEG/duoW1yX9CwUOIwRaFJQhCcXExVfG+ffuQMpgmtSjrWq0WLDLGTp06BZr9fv/ixYt/gSk2W+RGq9XevHkT7aC+vn7ChAlRKYMm9Xd0UfpcFMXU1NR3796hyM6ePUuapMMLMdiizjl58uS2tjYccCsrK3FEJiikRuXM+wCvBoPh0qVL3759U1X1xYsXtFB4TZJjwKKY8vPzYdHn8zkcDkoByoiaJOZp5dLaBNySkhJsBh6Px2q1khFCQ0IMWHRSWL9+PZZSW1tbamoqzZPpqDInBySIomi1WrE3BwIBp9NJr0YLMWDRhr9161bUe0tLi9lsJjR04PxhqUX5mzZtmsfjkSRJlmWXyxX1ln+MAYtqpaysjNqVxWJBcpE7yhSPlfdBiNPT0z99+iTLsiRJxcXFUTr8YwxYUNXr9StXrkRZdHd3p6enY55A8yuAtx4l5+Xl+Xw+VVW/fv26cOHCX4TxW7B0Ol1OTo7X65VlORQKuVwuAsR3rygQUY86nW7Tpk2gHAX6r2ChvJKTk9+8eYMd+urVq9grcTaKalFRaPAoiqLBYLh3756iKJFI5OHDh0aj8YeamIzNFt+mcSHw6dOn3NxcIIMVxE0U/tBffn6+3+9HYPv27fuhDk3GgAVPKHCbzfblyxdk4caNG9iJqZx5lGSdBJPJVFVVBUzt7e3Tpk2jDkw6vBADFvUnxpjRaLx48SLuCCRJ2r9/P1YioFPfooqh5CYkJJw9e5Zujo4cOfJrTLH3RPggl1OnTm1sbETQwWDw2LFj48aNQ5T0j6F2ZDDGkP3x48dfuHAhEAigG9fW1vL/+fEM8XIMtih0IBMEwel0dnZ20qXe3bt3ly1blpCQQIuAUBqNxuLi4pqaGuRdUZSPHz/a7XY+AzwUXo4Bi1eFOVEUV61ahQsM9H2fz3f//v0DBw4UFhbm5eXZbDaXy3X48OEnT55gGw2Hw5FI5N27d7ThIPsUc5SX30oi/TcLK2hUBQUF9fX1oAG3c7iH6u/vx31YOBxG1tCEHzx4YLPZyBS/ZY3GFBsWfcMfRNHJzGbzsWPHmpqaAI5u50KhEO4yUYJut3vXrl1msxmm9Hq9VqtFhL9oKL+VRJ5t4l+n02k0milTppSXl9+9e7elpaW3t3dwZAwMDDQ2Nt64cWPz5s3YQIGJjkkIjDdL8UOIAYv6FrTpUoUsAqVOpzOZTJmZmfPmzbPZbDNmzDCZTFiJSDqtZXJPGzzN8MI/sBoaGpKTk6klUsvhVf+GTOAooSASh2HW2dmJ/YReE8S/gYa3SVfDdHGi1WoXL17s9XqH704PHjxIKQPno5nnzf1BmRwReVeuXFEUhcmy7PF4CgsL+TX8Bx3/zBS/wFGmBoNhw4YN/f39338uaG9v37Jli8lkQm3hbo1u2/6GALhYQAaDYerUqRUVFcA0zBZ6D36Tefny5fXr10+fPn3y5Mkzf3lcunTp5MmT586dO3/+/LVr19xuN/qwoijDd6fY49AGg8Eg/9MBIf4bAv2bjgM+7+I7W/RLEL9v8Kp/XIYj/gcVzADu9yT+ccf/xuD/Kaz/AKRCVxNDcm4YAAAAAElFTkSuQmCC) center/contain no-repeat; display: block; width: 15px; height: 13px; position: absolute; top: 1px; left: -18px; opacity: 0.4; cursor: pointer; } .messageboxxy span { display: block; font-size: 10px; line-height: 0; color: #cecece; user-select: none; } #vottomvar:before { content: ""; display: block; width: calc(100% - 2px); background: #fff; height: 20px; transform: translateY(-19px); } .ppprofile:hover { background: transparent !important; border: 0px !important; outline: 0px !important; text-decoration: none !important; } .abpass { background: #fff; border: 1px solid #c0c0c0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 3px; height: 194px; width: 194px; position: absolute; margin: 700px 690px 0px; padding: 9px; z-index: 2002; } .abpins { border: 1px solid #c0c0c0; height: 100%; overflow: hidden; } .abpins img { width: 100%; height: fit-content; } .aext-button { cursor: url(../assets/items/select.png), pointer; background: transparent; color: #2453d4; border: none; text-decoration: underline; font-family: "MS PGothic"; font-size: 14px; margin: 60px 0; } /* diary */ .lines { position: fixed; width: 677px; height: 366px; top: 0; left: 0; pointer-events: none; z-index: 300; opacity: 0.05; } .lines:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient( to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51% ); background-size: 100% 4px; will-change: background, background-size; animation: scanlines 0.2s linear infinite; } @keyframes scanlines { from { background: linear-gradient( to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 51% ); background-size: 100% 4px; } to { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51% ); background-size: 100% 4px; } } .pc { background: url(../assets/images/purinweb.webp); background-size: 690px; background-position: 50% 70%; left: 0; top: 0; padding: 11px; height: 365px; width: 676px; } .screen { background: transparent; font-family: "pc98"; color: #fff; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 0 0; } .screen a { text-decoration: none; color: inherit; } .screen img:hover { filter: brightness(110%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); cursor: url(../assets/items/select.png), pointer; } .hidden { display: none; } .ywindow { background: white; width: 315px; height: 188px; border: 1px solid #ffc9c6; border-radius: 5px; margin-top: -250px; margin-left: 50px; position: absolute; z-index: 2000; cursor: url(../assets/items/cursor.png), move; } .divider { width: 313.5px; margin-bottom: -15px; padding: 23px 4px 3px 4px; border-bottom: 1px solid #ffc9c6; border-top-left-radius: 4px; border-top-right-radius: 4px; font-family: "Arial"; font-size: 15px; background: #b3e6fb; color: #ffc9c6; text-shadow: 0 0 3px #3e3e3e; } .login { width: fit-content; background: #ffffff; border: 1px solid #ad4944; border-radius: 20px; padding: 2px 4px 0; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25); } .screen2 { background: white; margin: 16px 5px 3px; height: 157.5px; font-family: "pc98"; font-size: 14px; overflow: auto; } .screen2 img:hover { filter: brightness(104%) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d); cursor: url(../assets/items/select.png), pointer; } .folderflex { display: flex; flex-direction: column; margin-top: 15px; } .itemflex { display: flex; flex-direction: row; } .folder_item { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 12px; } .divider img:hover { filter: brightness(103%); cursor: url(../assets/items/select.png), pointer; } .divider img:active { filter: brightness(97%) saturate(125%); cursor: url(../assets/items/select.png), pointer; } .entry { font-family: "pc98"; font-size: 14px; border: 2px solid #ffc9c6; border-radius: 6px; top: 10px; margin-left: 170px; position: absolute; cursor: url(../assets/items/cursor.png), move; z-index: 2001; } .note_header { width: 414px; padding: 4px; border-bottom: 2px solid #ffc9c6; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: "segoe UI"; font-size: 15px; background: #fffcec; color: #000; } .note { background: url(../assets/backgrounds/notebg.png); background-size: 240px; background-attachment: fixed; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; line-height: 19px; width: 414px; height: 220px; padding: 20px 20px 10px; overflow: auto; font-size: 18px; } .note_header img:hover { filter: brightness(103%); cursor: url(../assets/items/cursor.png), pointer; } .note_header img:active { filter: brightness(97%) saturate(125%); cursor: url(../assets/items/select.png), pointer; } .startmenuz { color: inherit; } .startbar { width: 676px; padding: 4px; background: linear-gradient(180deg, #fff 0%, #ffcef8 100%); border-top: 1px solid #000; box-shadow: 0px 0px 15px 0px #fffbf0 inset, 0 0 5px white; } .startbar label { margin-top: -20px; } #startmcon { position: fixed; margin-top: -319px; left: 0; font-family: "PC98"; width: 244px; height: 270px; z-index: 1000; display: none; } #start_toggle:checked ~ #startmcon { display: block; } .startpanel { width: 100%; height: 100%; background-color: #fff; border: 3.5px solid #ffcef8; border-bottom: none; outline: 0.5px solid #000; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; } .start-header { background: linear-gradient(180deg, #fff 0%, #ffcef8 80%, #fff 100%); padding: 5px; display: flex; align-items: center; border-radius: 8px 8px 0 0; } .user-avatar { width: 48px; height: 48px; border: 2px ridge rgb(253, 234, 238); border-radius: 4px; margin-right: 10px; } .username { color: #00f; font-weight: bold; } .start-content { display: flex; flex: 1; overflow-y: auto; padding: 4px; } .app-list { flex: 1; padding: 3px; margin-left: 4px; } .app-list.pink-bg { background: linear-gradient(180deg, #fff 0%, rgba(255, 215, 229, 1) 100%); border: 1px solid rgba(255, 133, 174, 0.6); } .diapp { padding: 2px; cursor: pointer; font-size: 14px; margin-bottom: 5px; display: flex; align-items: center; justify-content: flex-start; text-align: left; position: relative; filter: sepia(0.8) hue-rotate(160deg); transition: filter 0.4s ease; } .diapp a { display: flex; align-items: center; text-decoration: none; color: inherit; width: 100%; } .app-icon { width: 24px; height: 24px; margin-right: 10px; } .diapp:hover { filter: none; } .diapp:hover { border: 1px solid #ff89c8; background: linear-gradient( to bottom, rgba(253, 247, 249, 0.589) 0%, #f4ffc2 100% ); border-radius: 2px; } .window-content { overflow: hidden; padding: 0 0 0 18px; background: url(../assets/backgrounds/notebg.png); background-size: 240px; background-attachment: fixed; border-radius: 0 0 5px 5px; } .window-content textarea, .window-content iframe { width: 100%; height: 100%; background: transparent; border: none; margin: 0; padding: 17px 0; font-size: 15px; font-family: "PC98"; color: #000; resize: none; } .window-content textarea { overflow: auto; } .window-content textarea:focus { outline: none; } .dvideo { background: url(../assets/images/videopl.jpg); background-size: 213px 203px; border: 1px solid #6c6c6c; border-radius: 10px; height: 203px; width: 213px; margin: -80px 0 0 400px; overflow: hidden; text-align: right; display: none; position: absolute; } #vid_toggle:checked ~ .dvideo { display: block; } .dvidcov { background: #000; position: absolute; margin-top: 24px; margin-left: 5px; height: 131px; width: 204px; } .dvidimg { display: flex; flex-direction: row; margin-top: 16px; margin-left: 5px; } .dipodmain { background: url(../assets/images/mediapl.jpg); background-size: 174px 190px; border: 1px solid #6c6c6c; border-radius: 10px; height: 190px; width: 175px; margin: -110px 0 0 300px; overflow: hidden; z-index: 9999; text-align: right; position: absolute; display: none; } #mus_toggle:checked ~ .dipodmain { display: block; } .dipodalbum { display: flex; flex-direction: row; margin-top: -5.5px; margin-left: 6px; } .dipodalbum img { height: 132px; width: 162px; border-radius: 6px 6px 0 0; filter: brightness(116%); } .dseeking { width: 200px; margin-top: 128px; margin-left: 12px; position: absolute; background-color: transparent; background: none; } .dseeking input[type="range"] { background-color: transparent !important; } .dseeking input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: help; background: transparent; } .dseeking input[type="range"]::-webkit-slider-thumb { height: 7px; width: 12px; background: url("../assets/items/trackThumb.gif") no-repeat center; background-size: contain; border-radius: 5px; cursor: help; -webkit-appearance: none; margin-top: -4.5px; } .dpausebtn { position: absolute; top: 148px; left: 71px; } .dpausebtn:hover { filter: brightness(110%); } .diaryexit { cursor: url(../assets/items/select.png), pointer !important; } .button { cursor: var(--cursor_pointer); color: #fff; } button:hover, button:active { filter: brightness(110%); } #start_button { background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); text-shadow: 1px 1px 5px #e02464; color: #fff; margin-left: -4px; margin-top: 0; border: 1px solid; padding: 0; border-left: 0; border-radius: 0 10px 10px 0; font-style: italic; display: inline-block; } #start_button img { padding: 1px 6px 0.5px 6px; width: 45px; } #start_button:hover { filter: brightness(103%); cursor: url(../assets/items/select.png), pointer; } #clock { float: right; font-family: "PC98"; color: #2453d4; text-shadow: -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px #fff; font-size: 29px; font-weight: 900; text-align: center; margin: 1px 4px 0 0; } /* logs */ .ltable-section { background: transparent; } .ltable-section .inner { padding: 15px 15px 20px 17px; height: 508px; width: 713px; margin: -8px 0 0 0; } .lipodmain { background: url(../assets/images/ipod_vert.jpg); background-size: cover; background-position: center -2px; border-radius: 15px; height: 310px; width: 200px; margin-top: -10px; border: 1px solid #000; overflow: hidden; text-align: right; } .lipodbar { position: absolute; margin: 15px 0 0 16.5px; } .lipodalbum { display: flex; flex-direction: row; margin-top: 7px; margin-left: 22px; } .lipodalbum img { height: 50px; width: 50px; border: 2px ridge lightgray; } .lipodalbum p { margin: -1px 0 0 5px; line-height: 18px; text-decoration: underline; } .lseeking { width: 163px; margin-top: 117px; margin-left: 18px; position: absolute; } .lpausebtn { position: absolute; margin-left: -108px; margin-top: 268px; } .lquiz { background: url("../assets/gifs/mikulog.gif"); background-size: 330px; background-position: 44% 49%; width: 199px; height: 192px; padding: 10px; border: 1px solid black; border-radius: 10px; margin: 8px 0; } .lmiddle { grid-column: span 2; display: flex; width: 710 !important; height: 299px; margin-bottom: 100px; margin-top: -7px; } .cd-insert { width: 713px; height: 395px !important; border: 1px solid #e4e4e4; border-radius: 10px 10px 90px 10px; padding: 8px; background: linear-gradient(145deg, #ffffff, #e6e6e6); box-shadow: 17px 17px 41px #d4d4d4, -17px -17px 41px #ffffff; display: flex; position: relative; overflow: hidden; } .cd-main { width: 360px; height: 360px; margin: 11px; border: 1px solid #e4e4e4; border-radius: 50%; background: linear-gradient(145deg, #e0e0e0, #f5f5f5); box-shadow: inset 8px 8px 16px #c4c4c4, inset -8px -8px 16px #ffffff; } .cd-grip { position: absolute; width: 55px; height: 55px; border-radius: 50%; background: linear-gradient(145deg, #d0d0d0, #e8e8e8); box-shadow: inset 8px 8px 16px #c4c4c4, inset -8px -8px 16px #ffffff; bottom: calc(50% - 80px - 10px); right: calc(50% - 80px + 36px); } .cd-hub { width: 60px; height: 60px; border-radius: 50%; background: #e8e8e8; border: 1px solid #e8e8e8; box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff, inset 0 0 8px rgba(0, 0, 0, 0.1); position: absolute; margin: 150px 148px; z-index: 900; } .cd-hub::before { content: ""; position: absolute; width: 80%; height: 80%; margin: 4px; border-radius: 50%; border: 2px solid hwb(0 89% 11%); box-shadow: 0 0 2px rgba(255, 255, 255, 0.8); } .cdone { margin: 2px 1px; z-index: 900; height: 355px !important; transition: transform 0.3s ease; } .cd-main:hover { animation: spinOnce 2s ease-in-out; /* Single spin on hover */ } /* All CDs (images) - hidden by default */ .cd-img { position: absolute; opacity: 0; transition: opacity 0.5s ease; } /* Active CD */ .cd-img.active { opacity: 1; } /* Buttons */ .cd-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 500px; margin: 0 auto; } .cd-btn { width: 40px; height: 40px; border-radius: 50%; background: #333; color: white; border: none; cursor: pointer; } @keyframes spinOnce { 0% { transform: rotate(0deg); } 50% { transform: rotate(40deg); } 100% { transform: rotate(0deg); } } /* shrines */ .ipad-in { background: url(../assets/images/melroom.jpg); background-size: 750px; background-position: 60% 75%; left: 0; top: 0; padding: 0; height: 410px; width: 676px; } .ipad-main { display: flex; flex-direction: row; padding: 0 80px; margin: -5px 0 4px; font-family: "SFPRO"; transform: scale(0.97); } #ipad-header { border-radius: 8px; margin: -3px 0 2px; } #ipad-footer { background: transparent; margin-top: -4px; } #ipad-footer img { display: block; margin: 0 auto; width: 180px; border-radius: 20px; } .iflex-1 { display: flex; flex-direction: column; width: 170px; } .iflex-2 { display: flex; flex-direction: column; width: 170px; margin: 0 2px 0; } .iflex-3 { display: flex; flex-direction: column; width: 170px; } .appset { display: flex; flex-direction: row; padding: 13px; } .app:hover { background: #d2d2d2; opacity: 0.9; transition: 0.1s ease; transform: scale(1.05); } .app { flex: 1; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 18px; height: 68px; cursor: url(../assets/items/select.png), pointer; } .shname { margin-top: -8px; font-size: 12px; } #shnamedown { margin: 328px 36px; position: absolute; font-size: 12px; } #ireminders { background-image: url(../assets/images/shrinote.webp); background-size: 163px; background-position: 0% 5%; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 18px; margin: 4px; height: 151px; } #ireminders:hover { opacity: 0.9; transition: 0.1s ease; transform: scale(1.05); } #ipad-img { background-image: url(../assets/gifs/snookums.gif); background-size: 290px; background-position: 40% 0%; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 18px; margin: 5px 4px; height: 141px; } #imusicbox { background: url(../assets/images/stickers1.webp); background-size: 830px; background-position: -50px -160px; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 18px; margin: 4px; height: 238px; } #iclock { border: 4px rgb(255, 221, 173) ridge; border-radius: 18px; margin: 4px; padding: 16px 0 0; height: 79px; font-family: "Redaction"; -webkit-text-stroke: 0.0001px #00f; color: #fff; text-shadow: -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px #fff; font-size: 39px; font-weight: 900; text-align: center; } .img-hover { z-index: 400; } .img-hover img:hover { filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0 0 1px #0000004d); } .shitopbar { width: 927px; padding: 6px 4px 6px; border-bottom: 2px solid #ffc9c6; font-family: sans-serif; font-size: 14px; background: #fffcec; color: #464646; } .shilogin { width: 740px; display: flex; background: #ffffff; border: 1px solid #ad4944; border-radius: 20px; padding: 5px 3px 0; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25); } #shiloadinggif { margin-right: 10px; margin-top: -2px; } #shiloadinggif img { width: 17px; } #shibarbutton1 { float: right; margin-top: -22px; } #shibarbutton2 { float: right; margin-top: -22px; margin-right: 23px; } .shafolder { background: rgba(134, 134, 134, 0.797); backdrop-filter: blur(10px); width: 252px; height: 280px; border-radius: 18px; margin: -290px 213px; position: absolute; z-index: 2000; transform: scale(0.92); } .shfheader { margin: -38px 0 0; font-size: 21px; font-family: "SFPRO"; color: #fff; } .shfooter { margin: 10px 0 0; font-size: 11px; font-family: "SFPRO"; color: #fff; } .shfooter a { color: inherit; } .shscreen2 { margin: 15px 5px 3px; padding: 6px 14.5px 14px; font-family: "SFPRO"; font-size: 14px; overflow: auto; overflow-x: hidden; } .shscreen2 img { width: 54.5px; margin: 15px 5px 3px; border-radius: 12px; } .shscreen2 img:hover { background: #d2d2d2; transition: 0.1s ease; transform: scale(1.08); cursor: url(../assets/items/select.png), pointer; } .shappfrow { display: flex; flex-direction: row; gap: 10px; } .shfnames { margin: 1px 13px 2px; font-size: 12px; color: #fff; } .ipad-main.toggle { position: fixed; z-index: 1000; } body.shrines::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); z-index: 10; display: none; animation: none; } body.shrines.blurred::before { display: block; } /* scrapbook */ .scsection { filter: grayscale(20%); margin: 12px 0 0 169px; display: flex; padding: 0; background-image: url(../assets/backgrounds/grid-blue.png); border: solid 4px white; border-image: url(../assets/backgrounds/grid-blue.png); outline: ridge 4px #dcebfb; border-radius: 10px; width: 770px; height: 548px; z-index: 900; } #schandle { filter: grayscale(20%); position: absolute; padding: 10px; background-image: url(../assets/backgrounds/grid-blue.png); border: ridge 4px #dcebfb; border-right: none; margin: -350px 0 12px 2.5px; border-radius: 100px 0 0 100px; width: 174px; height: 115px; } #scinhandle { filter: grayscale(20%); background-color: #fffef5; border: dashed 1px #c1c1c1; border-right: none; margin-left: 2.5px; border-radius: 100px 0 0 100px; width: 105%; height: 100%; } #spirals { position: absolute; margin-left: 358px; margin-top: 52px; z-index: 9999; pointer-events: none; filter: drop-shadow(0.5px 0.5px 0 white) drop-shadow(0 0.5px 0 white) drop-shadow(0 0.5px 0.5px white) drop-shadow(0.5px 0.5px 1px black) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black); } #spirals img { width: 36px; margin-bottom: -40px; } #scpenc { position: absolute; margin-left: 56px; margin-top: -500px; z-index: 9999; } #scpenc img { height: 455px; transform: rotate(-6deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #scwrapper { position: relative; z-index: 0; } #sctabs { position: absolute; margin: -27px 0 0 132px; transform: rotate(-90deg); transform-origin: left top; display: flex; flex-direction: row; } .bkmrk { padding: 5.5px; border-radius: 10px 10px 0px 0px; background-color: #fff; border: 2px ridge #ebebeb; border-bottom: 0px; padding-bottom: 0px; text-align: center; width: 80px; } .bkmrkin { border: 1.25px dashed #cc9a81; border-bottom: 0px; border-radius: 8px 8px 0px 0px; padding: 8px 5px; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0; } .abkmrkin { padding: 6px 5px !important; } .bkmrkin a { text-decoration: none; font-weight: bold; color: #ffffff; text-transform: uppercase; text-shadow: 0 1px #977357, 1px 0px #977357, 0 -1px #977357, -1px 0px #977357; font-size: 10px; } .bkmrkin a:hover { text-decoration: none; text-shadow: -1px -1px 0 rgb(158, 158, 255), 1px -1px 0 rgb(158, 158, 255), -1px 1px 0 rgb(158, 158, 255), 1px 1px 0 rgb(158, 158, 255); } #sckitch { position: absolute; top: 0; left: -155px; z-index: -1; pointer-events: none; } #sckitch img { height: 300px; transform: rotate(2deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } .tape, .tape2, .smtape { border-top: 1px dashed #ffc8c8; border-bottom: 1px dashed #ffc8c8; background: rgba(255, 232, 247, 0.58); padding: 3px; width: 130px; height: 30px; background-repeat: no-repeat; z-index: 9999; } .tape { position: absolute; margin: -520px 265px; transform: rotate(-1.6deg); } .tape2 { position: absolute; margin: -222px 80px; transform: rotate(1deg); z-index: 1001; } .scpolaroid { background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; height: 234px; width: 220px; position: absolute; margin: -210px 40px; padding: 9px; z-index: 1000; } .scsquig { position: absolute; margin: -360px 300px; z-index: 1001; } .scsquig img { height: 66px; transform: rotate(140deg); } .scsti1 { position: absolute; margin: -526.5px 464px; z-index: 1001; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); transform: rotate(3.6deg); } .scsti1 img { height: 36px; } .scsti2 { position: absolute; margin: -484px 447px; z-index: 1001; padding: 2px; height: 75px; background: #fff; border: #000 1px solid; border-radius: 5px; } .scsti2 img { height: 69px; } .scsti3 { position: absolute; margin: -405px 447px; z-index: 1001; padding: 2px; height: 75px; background: #fff; border: #000 1px solid; border-radius: 5px; } .scsti3 img { height: 69px; } .notes:hover { z-index: 1005; } .polins { background: url(../assets/images/CMGING.webp); background-size: 220px 280px; border: 1px solid #c0c0c0; height: 100%; } #sudoku { margin: -538px 228px; width: 212px; height: 246px; overflow: hidden; position: relative; z-index: 999; } #sudoku iframe { width: 400px; height: 390px; transform: translateX(-68px); pointer-events: auto; } .crop-container { height: 258px; margin: 12px 0 0 -22px; width: fit-content; overflow: hidden; } .crop-container:hover { overflow: auto; } .crop-container iframe { margin-top: -20px; } .scmusic { border-radius: 15px; height: 150px; width: 300px; top: 171px; left: 236px; z-index: 990; position: absolute; padding-top: 0; overflow: hidden; text-align: right; } .scseeking { width: 212px; padding: 7px 4px; margin-top: 100px; position: absolute; z-index: 990; border: 1px solid #000; } .scpause { margin: -201px -34px; border: 1px solid #000; z-index: 1000; } #scpausewrap { background: #fff; border: 1px solid #000; border-radius: 3px; position: absolute; padding: 9px; width: 74px; height: 74px; margin: -325.5px 447px; } .scpausebtn { border: 1px solid #787878; border-radius: 3px; filter: grayscale(27%); position: absolute; margin-left: -108px; margin-top: 269px; } #sidebox1 { background-color: #fffef5; outline: ridge #c1c1c1; border-radius: 6px; font-size: 14px; margin: 5px 0 0 5px; height: 531px; width: 365px; overflow: hidden; padding: 0; } #sidebox2 { background-color: #fffef5; outline: ridge #c1c1c1; border-radius: 6px; font-size: 14px; margin: 5px 0 0 12.5px; height: 531px; width: 375px; overflow: hidden; padding: 0; } :root { --grid: rgba(0, 0, 0, 0.1); --lightborder: rgba(0, 0, 0, 0.2); --heavyborder: rgba(0, 0, 0, 0.5); } .header { height: 6%; display: flex; align-items: center; } .day { height: 11.69%; display: flex; align-items: center; } .date { height: 100%; margin-left: 4%; width: 10%; border-top: 1px solid var(--heavyborder); border-left: 1px dotted var(--heavyborder); border-right: 1px dotted var(--heavyborder); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; } .date > p { font-size: 0.7em; line-height: 0.1em; margin: 2px; } .date.today-highlight { background-color: rgba(0, 0, 0, 0.1); font-weight: bold; } .menu1 { height: 100%; width: 30%; border-top: 1px solid var(--heavyborder); display: flex; align-items: center; padding-left: 4%; white-space: nowrap; } .menu1 a { font-family: "acidic"; text-decoration: none; color: rgb(95, 95, 208); font-size: 18px; z-index: 9999; margin-top: 5px; } .menu2 { height: 100%; width: 30%; border-top: 1px solid var(--heavyborder); display: flex; align-items: center; } .menu3 { height: 100%; width: 30%; border-top: 1px solid var(--heavyborder); border-right: 1px solid var(--heavyborder); display: flex; align-items: center; margin-right: 4%; } .scmarquee { width: 294px !important; margin: 22px -10px 20px; padding: 19px 0 19px; } .scmq1__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll 95s linear infinite; animation-direction: normal; } .scmq2__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; margin-top: 2px; animation: scroll 100s linear infinite; animation-direction: reverse; } .scmq1__content img, .scmq2__content img { width: 84px; } .grid-bg { background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 9px 9.5px; background-position: 0 -1.5px; border: 1px dotted rgb(216, 216, 216); height: 437px; width: 344px; position: fixed; margin: -437px 14.5px; } .notes { width: 92%; height: 88%; margin-top: 0; margin-left: 4%; margin-right: 4%; overflow: hidden; padding: 0.2em; position: relative; z-index: 999; } .notesline { position: fixed; top: 467px; left: 0; z-index: 9999; width: 307px; border-bottom: 1px solid var(--heavyborder); } .quote { height: 10%; display: flex; align-items: center; font-size: 1em; } .quote-author { height: 100%; width: 80%; padding-bottom: 12%; margin: 41px 0 0 -19px; } .corner-calendar { height: 92%; width: 21%; margin: 4%; margin-top: 6%; display: flex; flex-direction: column; } .calendar-wrapper { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; } .calendar { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; height: 100%; gap: 0; box-sizing: border-box; } .calendar > div { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 0.6em; overflow: hidden; } .current-week-border { position: absolute; border: 0.05em solid #666; border-radius: 1em; pointer-events: none; z-index: 0; box-sizing: border-box; } .today { font-weight: bold; } .prev { color: #666; } .saturday { color: #666; } .sunday { color: red; } .calendarframe { height: 101.5%; width: 104.9%; background: transparent; margin: -4px 0 0 -13px; } #calendar-cover { display: flex; flex-direction: column; align-items: center; margin: 35px 0 0 2px; } .scheader { position: absolute; margin: -39px 0 0 -220px; font-size: 0.9em; letter-spacing: -0.7px; } .scheader a { text-decoration: none; color: inherit; } .scheader span { cursor: url(../assets/items/select.png), pointer; } .month-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(16, auto); width: 92.4%; margin: -3px 0 21px -23px; max-width: 1200px; border: 0.05em solid var(--lightborder); } .month-grid:first-child { margin-top: -6px; } .month-grid:last-child { margin-bottom: -7px; } .day-block { border: none; outline: 0.001em solid var(--heavyborder); outline-offset: -0.05px; padding: 0.25rem; display: flex; background-color: #fff; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.089) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.089) 1px, transparent 1px); background-size: calc(100% / 10) calc(100% / 10); flex-direction: column; font-size: 0.8rem; height: 125px; overflow: hidden; position: relative; } .day-block .post-entry { overflow-y: auto; max-height: 100%; -webkit-overflow-scrolling: touch; } .day-block .post-entry::-webkit-scrollbar { display: none; } .weekday-label.saturday { color: blue; } .weekday-label.sunday { color: red; } .date-number { font-weight: bold; margin-bottom: 0.25rem; } .post-entry { white-space: pre-wrap; font-size: 0.75rem; line-height: 1.2; color: #333; padding: 0 2px 0; } .month-header { padding: 0; border: none; display: flex; flex-direction: column; font-family: sans-serif; } .month-banner { background-color: #88b9f8; color: white; display: flex; justify-content: space-between; align-items: flex-start; padding: 0.5rem; height: 49px; } .year-block { display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.1; } .western-year { font-weight: bold; } .japanese-year { font-size: 0.75rem; margin-top: 0.1rem; } .month-number { font-size: 2.7rem; font-weight: 300; line-height: 1; margin-top: -5px; } .month-name { background-color: white; color: #5f7085; padding: 0.27rem 0.5rem; font-size: 0.9rem; border: 1px solid #ccc; border-top: none; letter-spacing: 0.05em; font-family: MS PGothic; font-weight: bold; letter-spacing: -1px; } .date-number { font-family: sans-serif; font-weight: 100; } /* c-ephemera */ .grid-wrapper { display: grid; grid-template-columns: repeat(2, 143px); grid-auto-rows: 147px; grid-auto-flow: row dense; gap: 10px; padding: 10px; margin: -13px 0 0 -7px; width: calc(2 * 143px + 20px); height: calc(100vh - 50px); box-sizing: content-box; } .grid-cell { outline: 0.001em solid var(--heavyborder); outline-offset: -0.07px; background-color: #fff; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.089) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.089) 1px, transparent 1px); background-size: calc(100% / 6) calc(100% / 8); display: flex; flex-direction: column; justify-content: space-between; height: 150px; z-index: 100; position: relative; } .grid-cell:hover { z-index: 9999; } .cell-content:hover::-webkit-scrollbar { display: block; } .cell-content { flex: 1; font-size: 12px; overflow-y: auto; padding: 3px 5px 5px 5px; } .cell-banner a { text-decoration: none; color: inherit; } .cell-content::-webkit-scrollbar, .cell-banner::-webkit-scrollbar { display: none; } .cell-banner { background-color: #9bc4fa; font-family: sans-serif; font-size: 11.5px; border-bottom: 1px solid #7a7a7a; color: white; justify-content: space-between; padding: 4px; height: 44px; width: 143px; overflow-y: auto; } .celltag1, .celltag2, .celltag3, .celltag4, .celltag5, .celltag6 { position: absolute; cursor: url(../assets/items/select.png), pointer; z-index: 2; opacity: 0.9; transition: opacity 0.3s; } .celltag1:hover, .celltag2:hover, .celltag3:hover, .celltag4:hover, .celltag5:hover, .celltag6:hover { opacity: 1; } .celltag1 { bottom: 91px; right: 10px; width: 45px; height: 39px; background-image: url(../assets/items/F23.png); background-size: 45px; transform: rotate(2deg); } .celltag2 { bottom: 86px; right: 10px; width: 38px; height: 54px; background-image: url(../assets/images/K25.png); background-size: 38px; } .celltag3 { bottom: 85px; right: 9px; width: 54px; height: 49px; background-image: url(../assets/images/AK36.png); background-size: 55px; transform: rotate(2.5deg); } .celltag4 { bottom: 90px; right: 10px; width: 48px; height: 47px; background-image: url(../assets/images/F08.png); background-size: 48px; } .celltag5 { bottom: 99px; right: 5px; width: 56px; height: 20px; background-image: url(../assets/images/G04.png); background-size: 56px; transform: rotate(48deg); } .celltag6 { bottom: 91px; right: 10px; width: 47px; height: 45px; background-image: url(../assets/items/H09.png); background-size: 47px; } /* c-dictionary */ #cdsidebox { background-color: #fffef5; font-size: 17px; font-family: "Times New Roman"; margin: -5px 0 0 -12px; height: 438px; width: 374px; overflow-x: hidden; overflow-y: auto; padding: 0; position: relative; } #cdsidebox::-webkit-scrollbar { display: none; } #cdsidebox .day { height: 14.4%; display: flex; align-items: center; } .alphacon { width: 312px; height: 63px; font-size: 12px; padding: 9px 8px; position: absolute; overflow-y: auto; } .alphacon i { background-color: rgb(255, 226, 255); } .alphacon::-webkit-scrollbar { display: none; } /* c-memos */ .smtape { position: absolute; margin: 235px 0 0 158px; transform: rotate(5deg); z-index: 1002; } .scmempol { background: url(../assets/images/scrap/memos/0925.JPEG); background-size: contain; border: 1px solid #000; border-radius: 3px; height: 170px; width: 170px; filter: brightness(110%); position: absolute; margin: 248px 0 0 158px; padding: 9px; z-index: 1001; } .smhead { position: absolute; background: #ffffb4; border: 1px #000 solid; padding: 4px 40px 10px 30px; font-family: "Redaction"; font-size: 40px; filter: sepia(20%); font-weight: bold; letter-spacing: -1px; color: #fde5f8; z-index: 1001; text-shadow: 0px 0px 3px #00000022, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, -2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, 2px -2px 0px #8d6e68, -2px 2px 0px #8d6e68, -2px 1px 1px #8d6e68, -2px 4px 1px #8d6e68, 2px 2px 0px #8d6e68, 3px 4px 1px #00000022; } .smnote { position: absolute; background: url(../assets/backgrounds/bluenote.jpg); background-size: 270px 270px; border: 1px #000 solid; border-radius: 6px; filter: sepia(15%); height: 115px; width: 293px; padding: 51px 0 0 40px; font-family: "acidic"; font-size: 16px; color: rgb(95, 95, 208); z-index: 1000; } /* archive */ #arpostal { position: absolute; margin-left: 400px; margin-top: 35px; z-index: 90; pointer-events: none; } #arpostal img { height: 180px; } #artitle { width: 675px; border-bottom: 2px black solid; text-align: center; padding: 5px 0; font-family: "redaction"; font-size: 51px; font-weight: bold; -webkit-text-fill-color: #fff; -webkit-text-stroke: 0.01px #00f; } .arnav { width: 675px; border-bottom: 1px black solid; text-align: center; padding: 5px 0; font-family: "Times New Roman"; font-size: 16px; position: absolute; z-index: 220; } .arnav a:hover { background-color: var(--accent); color: #fff; } .arnav a { text-decoration: none; color: #000; } #arncont { display: flex; margin-bottom: -10px; padding-top: 2px; } #arleft { width: 200px; border-right: black 1px solid; margin: 30px 7px; padding-right: 8px; font-family: "Times New Roman"; } #arright { width: 485px; margin-top: 30px; padding-left: 2px; } .arheadline { margin: 7px -2px 0 0; border: 1px solid black; border-radius: 6px; width: 456px; padding: 3px; font-family: "Arial"; font-size: 14px; } .arheadline a { text-decoration: none; color: #000; } .arheadline a:hover { text-decoration: none; color: #00f; } #arrightright { display: flex; flex-direction: column; width: 350px; font-family: "Times New Roman"; font-size: 32px; letter-spacing: -1px; line-height: 24px; } #arright table { width: 456px; border-collapse: collapse; border: 1px solid black; } #arright table th { border: 1px solid black; } #arright table td { border: 1px solid black; padding: 8px; text-align: left; font-family: "Times New Roman"; } #arright td:first-child { width: 200px; } #arright a { text-decoration: none; } .inviscroll { overflow-y: auto; height: 300px; padding-bottom: 10px; } .inviscroll::-webkit-scrollbar { display: none; } #arnote { width: 113px; font-size: 15px; font-family: "Times New Roman"; margin-top: 4px; line-height: 18px; } #arlive { margin: -5px -7px; } #arlive img { height: 45px; } .arliveb { font-size: 31px; letter-spacing: -2px; } .arlives { font-size: 31px; letter-spacing: -2px; } #arlivenote { line-height: 15px !important; } .arls1 { margin: -26px 0 0; font-family: "Arial"; } .arls2 { margin: -26px 0 0; color: #bdbdbd; font-size: 11px; font-family: "Arial"; } #arlad { margin: 3px -1px; } #arlad img { height: 64px; } #artoast { margin: 8px 5px; } #artoast img { height: 200px; width: 338px; } .artoastb { margin: -1px 4px; } .arsectionhead { font-family: "Times New Roman"; font-size: 32px; margin-top: 6px; } .arsectionti { text-align: left; } .arsectiondesc { text-align: right; font-size: 13px; } .arbisectiond { text-align: right; padding: 3px; font-family: "Arial" !important; font-size: 14px; } /* index page */ main.index { margin-top: -15px; } #index-background { content: ""; position: fixed; top: -37px; left: -45px; right: -45px; bottom: 0; height: 642px; background: url(../assets/backgrounds/G3NNOtrbgAAqnJE.webp) center/cover; background-size: 650px; background-position: 1% 46.5%; background-blend-mode: overlay; filter: opacity(70%) saturate(150%); border: 1.5px solid #f4e0ec; border-radius: 22px; z-index: -9999; box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px #dadada; pointer-events: none; } #index-background::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 120deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 33%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 66%, rgba(255, 255, 255, 0) 69%, rgba(255, 255, 255, 0) 100% ); background-size: 300% 300%; opacity: 0.7; background-position: 0% 0%; pointer-events: none; overflow: hidden; border-radius: 15px; } @keyframes shine { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } .notice { font-family: "Arial"; font-size: 70px; font-weight: 700; letter-spacing: -1px; transform: rotate(2.8deg) scale(0.91); margin: 160px 0 0 -310px; border: 1px solid #000; background: #fff; width: 320px; text-align: left !important; padding: 0 8px 0; position: absolute; z-index: 992; } #innotice1 { font-weight: bold; font-size: 41px; margin-top: -2px; margin-bottom: -5px; } #innotice2 { font-weight: 100; font-size: 14px; margin-top: 5px; margin-bottom: 0; } #innotice3 { font-weight: 600; font-size: 13px; margin-top: 5px; margin-bottom: 0; } #innotice4 { font-weight: 800; font-size: 21px; margin-top: -5px; margin-bottom: 0; } #innotice5 { font-weight: 400; font-size: 44px; letter-spacing: -3px; margin-top: -4px; margin-bottom: -5px; } #innotice6 { font-weight: 100; font-size: 13px; margin-top: 5px; margin-bottom: 0; } #innotice7 { font-weight: 100; font-size: 13px; margin-top: 5px; margin-bottom: 3px; } .hl { border-bottom: 2px solid #000; width: 100%; } #doodle-marquee { background: url(../assets/backgrounds/grid.png) center/cover; border: 4px ridge #d7b999; border-radius: 10px; width: 350px; height: 68px; position: absolute; padding: 6px 16px 10px; margin: 395px 0 0 378px; z-index: 19; } .dmq_content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll 20s linear infinite; animation-direction: reverse; } #inpinkcircle { position: absolute; margin-left: 300px; margin-top: -50px; transform: rotate(-70deg); z-index: 0; } #inpinkcircle img { height: 330px; } .intable-section { width: fit-content; display: flex; justify-content: center; } .intable-section .inner { padding: 15px 15px 20px 17px; height: 350px; width: 420px; margin: 20px 0 0 -35px; } #innotebg { background: url(../assets/backgrounds/notebg.png); display: flex; flex-direction: column; height: 100%; border: 1.25px solid #8584ff; border-radius: 6px; display: block; box-sizing: border-box; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d); } #inyellowtape { position: absolute; margin-left: 680px; margin-top: -360px; z-index: 910; } #inyellowtape img { width: 190px; transform: rotate(22deg); } #inclip { position: absolute; margin-left: 425px; margin-top: -247px; z-index: 993; } #inclip img { transform: rotate(21deg); height: 81px; } #inblueswirl { position: absolute; margin-left: 670px; margin-top: -230px; z-index: 993; } #inblueswirl img { transform: rotate(-15deg); height: 80px; } #indonuts { position: absolute; margin-left: 570px; margin-top: -190px; z-index: 900; } #indonuts img { filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); height: 270px; } #invelope { position: absolute; margin-left: 277px; margin-top: -232px; transform: rotate(-0.8deg); z-index: 900; } #invelope img { border: 1px solid #000; height: 192px; } #inparent { position: absolute; left: -85px; top: -90px; z-index: 900; } #inparent img { height: 84px; border-radius: 6px; border: 1px solid #c4c4c4; box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px gainsboro; } #inbarcode { position: absolute; left: 56px; top: -92px; z-index: 900; } #inbarcode img { height: 86px; border-radius: 6px; border: 1px solid #c4c4c4; box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px gainsboro; } .modal { position: absolute; top: -16%; left: -10%; width: 120%; height: 100%; backdrop-filter: blur(6px); display: none; justify-content: center; align-items: center; z-index: 999; } #toggle:checked ~ .modal { display: flex; } .modal-content { max-width: 400px; margin-left: -10%; text-align: center; position: relative; padding: 0 110px; z-index: 20; display: inline-block; animation: bobbing 3s ease-in-out infinite; } #modal-warn { text-align: left; position: absolute; font-family: "Redaction"; filter: opacity(0.8); color: rgb(169, 6, 118); padding: 0 4px; font-size: 16px; height: 125px; width: 199px; overflow: auto; margin: -260px 0 0 55px; line-height: 19px; transform: rotate(-5.8deg); } #modal-warn::-webkit-scrollbar { display: none; } @keyframes bobbing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .modal-content img { filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); height: 400px; margin-top: -90px; } .modalsig { height: 400px; margin-top: -90px; position: absolute; pointer-events: none; } .modalsig img { filter: none !important; height: 105px; margin-top: -70px; margin-left: 60px; position: absolute; pointer-events: none; } .close, .open { cursor: pointer; } .close { color: red; margin-left: -40px; } /* ddlc sticker */ .flexed { display: flex; flex-direction: row; justify-content: center; position: absolute; width: 95%; margin: 45px 20px 0 22px; z-index: 991; } .monika { background: url(../assets/images/monika1.webp) no-repeat; background-size: 100% !important; margin-right: -15px; margin-top: -3px; height: 119px; width: 84px; } .monika:hover { animation: monika 1600ms; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes monika { from { transform: rotate(0deg); content: url(../assets/images/monika2.webp); } to { transform: rotate(360deg); } } .natsuki { background: url(../assets/images/natsuki1.webp) no-repeat; background-size: 100% !important; margin-right: -15px; margin-top: 4px; height: 110px; width: 96px; } .natsuki:hover { background: url(../assets/images/natsuki2.webp); animation: natsuki 0.2s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes natsuki { 0% { transform: translate(0); content: url(../assets/images/natsuki2.webp); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); content: url(../assets/images/natsuki2.webp); } } .yuri { background: url(../assets/images/yuri1.webp) no-repeat; background-size: 100% !important; margin-right: -15px; height: 115px; width: 79px; } .yuri:hover { background: url(../assets/images/yuri2.webp); animation: yuri 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes yuri { 0%, 100% { transform: translateX(0); content: url(../assets/images/yuri2.webp); } 10%, 30%, 50%, 70% { transform: translateX(-5px); } 20%, 40%, 60% { transform: translateX(5px); } 80% { transform: translateX(8px); } 90% { transform: translateX(-8px); } } .sayori { background: url(../assets/images/sayori1.webp) no-repeat; background-size: 100% !important; height: 115px; width: 79px; } .sayori:hover { background: url(../assets/images/sayori2.webp); animation: sayori 0.9s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier; } @keyframes sayori { 0%, 100% { transform: translateX(0%); transform-origin: 50% 50%; content: url(../assets/images/sayori2.webp); } 15% { transform: translateX(-2px) rotate(-2deg); } 30% { transform: translateX(5px) rotate(8deg); } 45% { transform: translateX(-6px) rotate(-3.6deg); } 60% { transform: translateX(5px) rotate(2.4deg); } 75% { transform: translateX(-6px) rotate(-1.2deg); content: url(../assets/images/sayori2.webp); } } /* enter link */ .curved-text { font-size: 72px; font-family: "Spirit"; color: transparent; display: inline-block; margin: -90px 0 0 585px !important; transform: perspective(600px) rotateX(40deg); text-align: center; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); letter-spacing: 2px; z-index: 999; position: relative; } .curved-text a { text-decoration: none; color: inherit; } .curved-text span { display: inline-block; position: relative; background: linear-gradient(#fff, #ef91aa, #fff); background-clip: text; } .curved-text span:nth-child(1) { transform: rotate(63deg); left: 5px; top: -55px; } .curved-text span:nth-child(2) { transform: rotate(47deg); top: -6px; left: -15px; } .curved-text span:nth-child(3) { transform: rotate(30deg); left: -35px; top: 25px; } .curved-text span:nth-child(4) { transform: rotate(15deg); left: -46px; top: 40px; } .curved-text span:nth-child(5) { transform: rotate(3deg); left: -50px; top: 49px; } .curved-text span:nth-child(6) { transform: rotate(-20deg); left: -50px; top: 40px; } .curved-text:hover { filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #2453d4) drop-shadow(1px 1px 0 #0000004d); transition: 0.2s ease; } /* 404 page */ #nfbiscuit { position: absolute !important; margin: 60px 0 0 -50px; z-index: 900; } #nfbiscuit img { transform: rotate(-8deg); height: 190px; } #nfclip, #nfyellowswirl, #nfyellowtape { position: absolute; z-index: 800; } #nfclip img { transform: rotate(-8deg); margin: 230px 0 0 290px; height: 100px; } #nfyellowswirl img { transform: rotate(45deg); margin: 70px 0 0 210px; height: 80px; } #nfyellowtape img { transform: rotate(-11deg); margin: 405px 0 0 -170px; height: 40px; width: 200px; } .nftable-section { width: fit-content; display: flex; justify-content: center; margin: 230px 0 0 50px !important; transform: rotate(3deg); } .nftable-section .inner { padding: 15px 15px 20px 17px; height: 170px; width: 415px; margin: 20px 0 0 -40px; } #nfnotebg { background: url(../assets/backgrounds/notebg.png); height: 100%; border: 1.25px solid #8584ff; border-radius: 6px; display: flex; justify-content: center; box-sizing: border-box; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d); } #error { font-size: 110px; font-family: "Spirit", cursive; display: inline-block; margin-top: 5px; text-align: center; background: -webkit-linear-gradient(#fff, #ef91aa, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); letter-spacing: -2px; z-index: 901; } #counter { font-weight: bold; } :root { --background-color: white; --accent: #f9bddd; } html { line-height: 1.225; } body { cursor: url(../assets/items/cursor.png), auto; font-family: "MS PGothic"; background: var(--background-color); padding: 0; } body.index { overflow: hidden; padding-top: 7%; padding-left: 60px; transform: scale(0.91); z-index: 10; position: relative; } body.notf { overflow: hidden !important; } body.main, body.logs { padding: 0 0 7px 2px; } body.title { overflow: hidden !important; margin: 6px 0 0; } body.about { overflow-x: hidden; margin: 8px 10px 6px; } body.archive { background-image: url(../assets/backgrounds/glossy1.jpg); background-size: 850px; background-position: -20% 30%; } body.archive, body.shrines { overflow: clip !important; margin: 1px; } body.shrinei { overflow-x: hidden; margin: 1px; } body.diary { overflow: hidden; margin: 1px; } body.scrapbook { overflow: hidden; margin: 8px; background: transparent; } * { box-sizing: border-box; } main { background: 0 0; } main.notf { display: flex; justify-content: center; } iframe { border: none; cursor: url(../assets/items/cursor.png), default !important; } input[type="checkbox"] { cursor: url(../assets/items/cursor.png), default !important; } .col.right { display: grid; grid-template-columns: 240px calc(100% - 240px); grid-column-gap: 5px; } .col { display: block; width: 100% !important; background: #fff; } /* outer wrapper */ .wrapper { position: relative; width: 1200px; height: 800px; margin: 0 auto; transform-origin: top left; } @media (max-width: 1200px) { .wrapper { transform: scale(calc(100vw / 1200)); } } /* link styling */ a { cursor: url(../assets/items/select.png), pointer; color: #2453d4; } /* tooltip styling */ #s-m-t-tooltip { z-index: 9999; font-family: "Times New Roman"; background-color: rgba(250, 250, 255, 0.75); border-bottom: 2px solid #223388; border-right: 2px solid #223388; border-radius: 5px; backdrop-filter: blur(1px); color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; max-width: 200px; margin: 20px; padding: 7px; transition: 0.1s; text-align: center; } /* text styling */ p { font-size: 0.875em; } .inner > p { position: sticky; top: 0; background: #fff; width: 100%; z-index: 1; border-bottom: 1px solid gray; font-size: 12px; } .inner > p b { font-weight: 400 !important; } ::selection { color: #b4dffb; background: #ffffe0; backdrop-filter: blur(2px); } strong { color: #2453d4; } strong2 { color: #ee8cc8; } strong3 { color: rgb(158, 181, 235); } @font-face { font-family: PC98; src: url(../assets/fonts/pc-9800.ttf); } @font-face { font-family: spirit; src: url(../assets/fonts/Spirit.ttf); } @font-face { font-family: redaction; src: url(../assets/fonts/Redaction.otf); } @font-face { font-family: redaction2; src: url(../assets/fonts/RedactionN.otf); } @font-face { font-family: "acidic"; src: url(../assets/fonts/ACIDIC.TTF); font-style: normal; } /* corpo */ @font-face { font-family: "Chirp"; src: url(../assets/fonts/chirp.otf); font-style: normal; } @font-face { font-family: "SFPRO"; src: url(../assets/fonts/SFPRO.otf); font-style: normal; } @font-face { font-family: "Nitty"; src: url(../assets/fonts/Nitty.otf); font-style: normal; } /* heading styling */ .heading h4 { padding-inline: 7px; padding-top: 2px !important; font-size: 0; text-transform: uppercase; font-weight: 400; display: inline-block !important; margin-bottom: -1px; margin-right: 10px; transform: translateY(0) !important; } :is(.heading h4):hover { font-size: inherit !important; padding-inline: 7px; margin: 0; text-align: left; } :is(.heading h4):hover:after { font-size: 0 !important; } /* universal callers */ .flexbox { display: flex; } .rowflex { display: flex; flex-direction: row; } .columnflex { display: flex; flex-direction: column; } /* main page */ /* header */ .url-info { background: #fff url(../assets/images/softy.webp); background-size: cover; background-position: center; height: 200px; grid-column: span 3; image-rendering: pixelated; border: 1px solid #e0e0e0 !important; border-radius: 10px 0 0 10px; width: 713px !important; margin-top: 0 !important; /** box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(0, 0, 0, 0.05); **/ filter: opacity(85%); box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; } .url-info::after { content: ""; width: 200px; height: 198.5px !important; margin: -0.5px 0 0 721px; background: url("../assets/gifs/googly.gif") left/cover no-repeat; position: absolute; border-radius: 0 10px 10px 0; border: 1px solid #5773ff !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; display: block; } /* top row */ .table-section { width: 100% !important; margin-top: 10px !important; margin-bottom: 10px !important; display: inline-block; background: #fff; border: 0 !important; } .table-section .inner { background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); border-top: 1.5px solid #8d6e6888; border-left: 1.5px solid #8d6e6888; border-bottom: 4px solid #8d6e6888; border-right: 1.5px solid #8d6e6888; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 10px; height: fit-content; overflow: hidden; text-align: right; } .table-section .heading { height: 22px !important; width: calc(100% - 2.5rem) !important; margin: 0 !important; font-weight: 400; font-size: 14px !important; border-radius: 10px 10px 0 0; background: var(--accent) !important; box-shadow: 0 -4px 3px 3px rgba(255, 255, 255, 0.5) inset; border: 1px solid #000; border-bottom: 0; color: #fff !important; text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000); } .table-section .heading h4:after { font-size: 14px; content: "クイズ"; display: inline; } .quiz { width: 200px; height: 112px; border: 1px solid black; border-radius: 0 0 10px 10px; margin-bottom: 8px; } .quizbg { background: linear-gradient(360deg, rgb(255, 255, 255), transparent), url(../assets/images/scooper.jpg) center/cover; padding: 7px; width: 100%; cursor: url(cursor.png), auto; font-family: "PC98"; font-size: 18px; color: #2453d4; height: 100%; border-radius: 0 0 10px 10px; text-align: center; } .quiztitle { padding: 3px 0px 4px 2px; } .quizanswer { border-radius: 3px; border-color: #000; width: 128px; font-size: 14px; cursor: url(cursor.png), auto; } .quizvote { color: #775a1d; background: #ffffff87; border: 1px solid #e6e600; padding: 3px; width: 60px; border-radius: 4px; cursor: url(select.png), pointer; } .quizview { color: #775a1d; background: #ffffff87; border: 1px solid #e6e600; padding: 3px; width: 60px; border-radius: 4px; cursor: url(../assets/items/select.png), pointer; } .mipodmain { background: url(../assets/images/ipod_vert.jpg); background-size: cover; background-position: center -2px; border-radius: 15px; height: 310px; width: 200px; border: 1px solid #e0e0e0; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; overflow: hidden; text-align: right; } .mipodbar { position: absolute; margin: 15px 0 0 16.5px; } .mipodalbum { display: flex; flex-direction: row; margin-top: 7px; margin-left: 22px; } .mipodalbum img { height: 50px; width: 50px; border: 2px ridge lightgray; } .mipodalbum p { margin: -1px 0 0 5px; line-height: 18px; text-decoration: underline; } .songboxp { margin: 27px 0 0 22px; } .mseeking { width: 163px; margin-top: 117px; margin-left: 18px; position: absolute; } .mpausebtn { position: absolute; margin-left: -108px; margin-top: 268px; } .mtable-section { background: transparent; } .mtable-section .inner { padding: 15px 15px 20px 17px; height: 452.5px; width: 713px; margin: -0.5px 0 0 -35px; } .mainbox { height: 100%; width: 100%; background: #fff; border: 1.25px solid #8584ff; border-radius: 6px; display: block; box-sizing: border-box; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d); } #myellowtape { position: absolute; margin-left: 600px; margin-top: 630px; z-index: 900; } #myellowtape img { transform: rotate(35deg); height: 38px; } #mexclm { position: absolute; margin-left: 670px; margin-top: 1050px; z-index: 900; } #mexclm img { transform: rotate(-10deg); height: 81px; } /* neighbors */ .blurbs, .ablurbs { grid-column: span 2; } .blurbs .inner, .ablurbs .inner { width: 923px !important; margin-bottom: 10px; border: 1px solid #000; border-radius: 0 0 10px 10px !important; border-top: 0; } .blurbs .inner { height: 70px !important; padding: 12px 0 15px; } .ablurbs .inner { height: 89px !important; padding: 12px 0 15px; } .blurbs .heading, .ablurbs .heading { height: 22px !important; width: 923px !important; border-radius: 10px 10px 0 0; background: var(--accent) !important; margin: 0 !important; font-weight: 400; font-size: 14px !important; background: var(--accent) !important; box-shadow: 0 -4px 3px 3px rgba(255, 255, 255, 0.5) inset; border: 1px solid #000; color: #fff !important; text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000); } .blurbs .heading h4:after { font-size: 14px; content: "友達"; display: inline; } .ablurbs .heading h4:after { font-size: 14px; content: "ファンリスト"; display: inline; } /* middle row */ .middle { grid-column: span 2; display: flex; width: 710 !important; height: 299px; margin-bottom: 10px; } .blog-preview p, .inner > p { padding-inline: 5px; } .blog-preview .heading { height: 22px !important; width: 280px !important; border-radius: 10px 10px 0 0; background: var(--accent) !important; border: 1px solid #000; margin: 0 0 0 -0.5px !important; font-weight: 400; font-size: 14px !important; box-shadow: 0 -2px 2px 3px rgba(255, 255, 255, 0.5) inset; color: #fff !important; text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000); } .blog-preview .heading h4:after { font-size: 14px; content: "アップデート"; } .blog-preview { position: relative; order: 2; width: 280px; display: block; background: #fff; height: 225px; border: 1px solid #000; border-top: 0; border-radius: 20px 20px 0 0; margin-left: 10px !important; } .blog-child { background: url(../assets/backgrounds/bluenote.jpg) center/cover; margin: 6px; padding: 0 4px 4px 35px; border: 1px solid #000; border-radius: 6px; height: 92px; font-size: 14px; line-height: 22px; } .blog-content { background: transparent; margin-top: 30px; overflow-y: auto; height: 61px; } .blog-preview::after { content: ""; display: block; position: absolute; background: url(../assets/images/flan_cup.jpg) center/cover no-repeat; border: 1px solid #000; border-radius: 0 0 10px 10px; width: 279px; margin-left: -1px; height: 65px; bottom: -74px; } .mblogsitely { font-family: "Spirit"; font-size: 25px; -webkit-text-fill-color: #ef91aa; -webkit-text-stroke: 0.5px #000; top: 35px; left: 180px; position: absolute; } .mblogentry { font-family: "Spirit"; font-size: 25px; -webkit-text-fill-color: #ef91aa; -webkit-text-stroke: 0.5px #000; top: 133px; left: 180px; position: absolute; } .friends:not(#comments) { order: 1; height: 299px !important; width: 633px; border: 1px solid #000; border-radius: 10px; display: flex; padding: 8px; } .afriends { background: #fff9f5; height: 367px !important; width: 560px; border: 1px solid #000; border-radius: 10px; display: flex; padding: 8px; z-index: 999; } .guestbook { background: url(../assets/images/cereal.webp); background-size: 220px 280px; border: 1px solid #c0c0c0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 6px; height: 100%; width: 220px; } .guestlink { width: 100%; text-align: center; margin-top: 240px; font-family: "PC98"; font-size: 18px; font-weight: bold; color: #000000; opacity: 0.7; } .guestlink a { text-decoration: none; } .webrings { border: 1px solid #000; border-radius: 6px; padding: 6px; height: 100%; width: 220px; overflow-y: auto; margin: 0px 8px; } .webrings::-webkit-scrollbar { display: none; } .wentitle { font-family: Arial; font-size: 31px; letter-spacing: -1px; font-weight: bolder; padding: 5px; } .wentry, .wentry-yume { display: flex; justify-content: center; align-items: center; border: 1px solid #000; background: url(../assets/backgrounds/notebg.png); background-attachment: fixed; border-radius: 3px; height: fit-content; margin: 0 0 6px; } .wentry img:hover, .wentry-yume img:hover { filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 01px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); cursor: url(../assets/items/select.png), pointer; z-index: 200; } .wentry-yume img { margin: 0 0 0 35px; } #yume-ring table tr td { padding: 0; } .wentry #doodlering .webring-wrapper { background-image: none !important; background-color: transparent !important; } .lpsringdiv { display: flex; flex-direction: column; align-items: center; width: -webkit-fill-available; } .lspringdiv img { margin-left: 56px; } .lpsring { text-align: center; text-transform: lowercase; font-weight: bold; letter-spacing: 1px; font-size: 10px !important; } .lpsring a { font-size: 14px; text-decoration: none; letter-spacing: 1px; } .stamp { display: flex; flex-direction: column; justify-content: center; background: transparent; width: 100%; height: 100%; border: 1px dashed #2453d4; border-radius: 6px; padding: 6px; } .buttonbg { background: url(../assets/backgrounds/star.jpg) center/cover; background-size: 177px; border: 1px solid #000; border-radius: 6px; padding: 6px; height: 50%; width: 163px; margin-left: 8px; margin-bottom: 6px; } textarea { width: 94px; resize: none; overflow: hidden; font-size: 0.7em; height: 1.8rem; color: #444; } .image-container { width: fit-content; margin: 20px; } .image-container img { width: 95px; border-radius: 4px; border: 3px ridge #f3ff8d; padding: 5px; position: relative; } .next-button { cursor: url(../assets/items/select.png), pointer; background: transparent; color: #2453d4; border: none; text-decoration: underline; font-family: "MS PGothic"; font-size: 14px; } .mlinkme { border-top: 1.5px solid #8d6e6888; border-left: 1.5px solid #8d6e6888; border-bottom: 4px solid #8d6e6888; border-right: 1.5px solid #8d6e6888; border-radius: 6px; height: 50%; width: 163px; margin-left: 8px; padding: 10px; background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); } .mlinkmebg { border: 3px ridge #d7b999; border-radius: 6px; height: 100%; padding: 4px; display: flex; background: url(../assets/backgrounds/neobg.jpg); background-size: 300px; } .mlinkmebg img { position: absolute; margin: 10px 0 0 -10px; z-index: 100; } .mlinkmebg p { font-size: 32px; font-family: "Spirit"; filter: sepia(20%); font-weight: bold; letter-spacing: -1px; color: #fff4fd; z-index: 1001; text-shadow: 0px 0px 3px #00000022, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, -2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, 2px -2px 0px #8d6e68, -2px 2px 0px #8d6e68, -2px 1px 1px #8d6e68, -2px 4px 1px #8d6e68, 2px 2px 0px #8d6e68, 3px 4px 1px #00000022; margin: 8px 0 0 8px; z-index: 105; } /* lower row */ #comments .heading, #acomments .heading { height: 22px !important; width: 741px !important; border-radius: 10px 10px 0 0; background: var(--accent) !important; border: 1px solid #000; margin: 0 !important; font-weight: 400; font-size: 14px !important; box-shadow: 0 -2px 2px 3px rgba(255, 255, 255, 0.5) inset; color: #fff !important; text-shadow: 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 0 0 1px color-mix(in srgb, var(--accent) 70%, #000), 1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000), -1px 1px 0 color-mix(in srgb, var(--accent) 70%, #000), 1px -1px 0 color-mix(in srgb, var(--accent) 70%, #000); } #acomments .heading { width: 613px !important; } #comments .heading h4:after { font-size: 14px; content: "チャットボックス"; display: inline; } #acomments .heading h4:after { font-size: 14px; content: "クイズ結果"; display: inline; } .friends .inner { background: url(../assets/images/sugarra.webp) !important; background-size: 680px !important; width: 741px !important; border: 1px solid #000; border-radius: 0 0 10px 10px; border-top: 0; } #comments { position: relative; grid-column: span 2; right: -182px; width: fit-content; height: 540px !important; } #acomments { position: relative; margin-top: 11px; right: 0; width: fit-content; } #comments .inner { height: 524.5px; padding: 0; overflow: hidden; } #acomments .inner { height: 175px; padding: 10px; display: flex; flex-direction: row; gap: 10px; overflow-x: scroll; background: #fff !important; background-size: 680px !important; width: 613px !important; border: 1px solid #000; border-top: 0; border-bottom: 0; } #acomments .inner::-webkit-scrollbar-track { margin-left: -16px; margin-right: -16px; } #comments::before { top: -7px; right: 751px; width: 172px; height: 545.5px; margin-top: 7px; content: ""; display: block; position: absolute; border: 1px solid #e0e0e0 !important; filter: opacity(85%); box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 10px; background: url(../assets/images/pudding_slash.webp) right/cover; } #acomments::after { top: -7px; right: -322px; width: 310px; height: 199px; margin-top: 7px; content: ""; display: block; position: absolute; border-radius: 10px; background: url(../assets/images/peepsenv.webp) left/cover; background-position: 12% 108%; } #acomments .inner img { height: 100%; filter: grayscale(20%) sepia(80%) hue-rotate(180deg) saturate(200%) opacity(95%); } #acomments .inner img:hover { filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 01px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); } #mclip { position: absolute; margin-left: 445px; margin-top: -14px; z-index: 400; } #mclip img { height: 100px; } #mpen { position: absolute; margin-left: 160px; margin-top: 1150px; z-index: 900; } #mpen img { height: 390px; transform: rotate(233deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } /* marquee styling */ ul { list-style: none; padding: 5px; margin: 0; } .marquee { --gap: 1rem; position: relative; display: flex; overflow: hidden; user-select: none; gap: var(--gap); padding: 3px 0 3px; } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); height: 72px !important; min-width: 100%; animation: scroll 180s linear infinite; animation-direction: reverse; } .marquee:hover .marquee__content, .marquee:hover .dmq__content, .marquee:hover .abmq__content, .marquee:hover .scmq1__content, .marquee:hover .scmq2__content { animation-play-state: paused; } .marquee__content img, .abmq__content img { filter: grayscale(20%) sepia(80%) hue-rotate(180deg) saturate(200%) opacity(95%); } .marquee__content img:hover, .dmq_content img:hover, .abmq_content img:hover, .scmq1__content img:hover, .scmq2__content img:hover, .abmq__content img:hover { filter: brightness(110%); transform: scale(1.16); transition: 0.3s; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } /* music player */ .songtitlebox { background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-top-left-radius: 6px; border-top-right-radius: 6px; width: 125px; /* width of the player */ z-index: 9999; } .songtitle { background: transparent; } .songbox { background: transparent; font-family: "MS PGothic"; font-size: 15px; font-weight: bold; color: #06070c; line-height: 16px; text-align: left !important; position: absolute; margin-top: 10px; z-index: 9999; } .controls { width: 100%; } .controls img:hover { transform: scale(1.03); transition: 0.1s ease; } .seeking { background-color: #fff; /* background color of seeking bar */ display: flex; justify-content: space-evenly; padding: 5px; /* padding around seeking bar */ } .current-time { padding-right: 5px; } .total-duration { padding-left: 5px; } i.fas:hover { cursor: url(../assets/items/select.png), pointer; } input[type="range"] { -webkit-appearance: none; width: 100%; background-color: #fff; /* background color of seeking bar - make the color same as .seeking background color */ } input[type="range"]:focus { outline: none; } /* settings for chrome browsers */ input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 2px; /* thickness of seeking track */ cursor: help; background: #e74492; /* color of seeking track */ } input[type="range"]::-webkit-slider-thumb { height: 10px; /* height of seeking square */ width: 10px; /* width of seeking square */ border-radius: 5px; /* change to 5px if you want a circle seeker */ background: #e74492; /* color of seeker square */ cursor: help; -webkit-appearance: none; margin-top: -4.5px; } /* scrollbar */ ::-webkit-scrollbar { width: 16px; } ::-webkit-scrollbar:horizontal { height: 17px; } ::-webkit-scrollbar-corner { background: #fff; } ::-webkit-scrollbar-track { background: #fff; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E"); } ::-webkit-scrollbar-thumb { background-color: #dfdfdf; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; } ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement { display: block; } ::-webkit-scrollbar-button:vertical:start { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E"); height: 17px; } ::-webkit-scrollbar-button:vertical:end { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); height: 17px; } ::-webkit-scrollbar-button:horizontal:start { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E"); width: 16px; } ::-webkit-scrollbar-button:horizontal:end { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E"); width: 16px; } body::-webkit-scrollbar-corner { margin-top: 60px; } /* pixel mask */ .general-about img { -webkit-mask-image: url(https://i.postimg.cc/Hk6D7BxQ/868-sin-t-tulo-20240429140043.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } /* animations */ #float { animation-name: floating; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 10px); } 100% { transform: translate(0, -0px); } } /* title label */ #label { position: fixed; font-family: "Arial"; font-size: 70px; font-weight: 700; letter-spacing: -2px; border: 1px solid #000; background: #fff; text-align: left !important; padding: 0 5px 0; transform: rotate(-3deg); left: 120px; top: 145px; z-index: 400; width: fit-content; transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 1; visibility: visible; } #label.hidden { opacity: 0; visibility: hidden; } .labelline1 { margin-top: -5px; border-bottom: 2px solid #000; } .labelline2 { margin-top: 0; border-bottom: 1px solid #000; } .labelconst { font-weight: 100; font-size: 14px; letter-spacing: 0; margin-top: 5px; margin-bottom: 0; } .labelest { font-weight: 600; font-size: 22px; letter-spacing: 0; margin-top: 0; margin-bottom: 5px; } .labelimg { margin: 5px 0 0 10px; padding: 0; display: flex; justify-content: right; } /* sitemap */ #file { display: flex; width: 634px; height: 370px; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 15px; font-size: 80%; background: linear-gradient(#fff 10%, #ffceec 90%, #fff 100%); margin: 15px 0 0 22px; padding: 5px; z-index: 200; } #border-1 { height: 100%; width: 100%; border: 3px ridge #839aff99; border-radius: 15px; padding: 2px; } #border-2 { height: 100%; width: 100%; border: 1px dashed #f1c4ee; border-radius: 11px; } #sheet { height: 330px; overflow: auto; width: 520px; display: flex; line-height: 10px; position: absolute; padding: 15px 20px 15px; left: 70px; top: 17px; transform: rotate(2.5deg); background: url(../assets/backgrounds/grid.png); background-size: 270px; border: 1px solid #000; border-radius: 4px; } #sheet::-webkit-scrollbar { display: none; } #sheet:hover { z-index: 120; } #sheet a { text-decoration: none; color: inherit; transition: 0.1s all ease-in-out; } #sheet a:hover, #sheet a:focus { color: #ffceec !important; } #smbluebox { margin-left: -75px; margin-top: -70px; position: absolute; z-index: 95; } #smbluebox img { height: 490px; transform: rotate(-2deg); } #smyellownote { margin-left: 190px; margin-top: 30px; position: absolute; z-index: 90; } #smrilstamp { margin-left: 230px; margin-top: 180px; position: absolute; transform: rotate(10deg); z-index: 99; } #sitemap { left: 322px; top: 75px; position: absolute; padding: 5px; font-family: "Redaction"; font-size: 42px; font-weight: bold; letter-spacing: -1px; -webkit-text-fill-color: #fbff00; -webkit-text-stroke: 0.01px #00f; z-index: 390; } .main-checkbox { margin-right: 10px; } .top-label, .main-label { font-family: "spirit"; letter-spacing: 1px; color: #fff; text-shadow: 1px 0px #000, -1px 0px #000, 0px 1px #000, 0px -1px #000, 0 0; transition: 0.1s; cursor: url(cursor.png), auto; filter: saturate(300%); } .main-label { margin-top: 8px; width: fit-content; } .nested-label { cursor: url(cursor.png), auto; margin-left: 20px; } .more-nested-items { display: none; line-height: 17px; } .toggle-symbol { width: 20px; margin: 0 4px 0 5px; font-weight: bold; font-size: 18px; color: blue; } .main-toggle + .main-label .toggle-symbol::before, .nested-toggle + .nested-label .toggle-symbol::before { content: "+"; } .main-toggle:checked + .main-label .toggle-symbol::before, .nested-toggle:checked + .nested-label .toggle-symbol::before { content: "-"; color: red; } .main-toggle:checked ~ .more-nested-items, .nested-toggle:checked ~ .more-nested-items { display: block; } .main-toggle, .nested-toggle { opacity: 0; position: absolute; } .main-label, .nested-label { cursor: url(select.png), pointer; display: flex; align-items: center; } .flexed::-webkit-scrollbar { display: none; } #smclip { position: absolute; left: 445px; top: -5px; transform: scaleX(-1); z-index: 400; } #smcard { position: absolute; height: 130px; left: 300px; top: 40px; z-index: 300; } #smpencil { position: absolute; top: 200px; left: 510px; transform: rotate(200deg); z-index: 100; } #smcoffee { position: absolute; top: 215px; left: 80px; z-index: 100; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #smletter { position: absolute; top: 90px; left: 320px; z-index: 94; } .flexed::-webkit-scrollbar { display: none; } /* title page */ .titlebox { background: url(../assets/images/sealcard.jpg); background-size: 385px; border: 1px solid #eaeaea !important; border-radius: 10px; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; width: 269.5px; max-height: 260px; margin-left: 5px; padding: 14px; line-height: 19px; filter: saturate(120%); color: #715d64; letter-spacing: -0.5px; font-family: "acidic", serif; font-size: 15px; z-index: 200; } .titlebox img { position: absolute; margin: -28px 0 0 -8px; z-index: 100; } #goop { position: absolute; top: -22px; left: -3px; z-index: 100; } #torangesquig { position: absolute; margin: 84px 590px; z-index: 900; } #torangesquig img { height: 66px; transform: rotate(-20deg); } .miscbox { display: flex; flex-direction: column; width: 175px; border: 1px solid #000; border-radius: 6px; padding: 4px; margin-left: 222px; } #visitorid { display: flex; margin-bottom: 5px; } #visitorid p { margin: -1px 0 0 43px; } #visitor { background: url(../assets/images/heart_flan.JPG) center/cover; width: 100%; border: 1px solid #000; border-radius: 20px 6px 6px 6px; padding: 4px 7px 5px; } #visitor p { font-family: "PC98"; font-size: 19px; color: #2453d4; letter-spacing: -1px; text-align: center; } #visitorbox { background: #fff; border: 1px solid #000; border-radius: 6px; display: flex; justify-content: center !important; flex-direction: column; } #warning { margin: 5px 0 5px; border: 1px solid #000; border-radius: 6px; padding: 5px; font-family: "Times New Roman"; font-size: 15px; font-weight: bold; letter-spacing: -1px; } #warn1 { font-size: 30px; margin: -5px 0 0; } #warn2 { margin: -5px 0 0; text-decoration: underline; } #corkboard { display: flex; width: 667.5px; height: 137px; border: 2px #7f493d solid; border-radius: 5px; background: url(../assets/backgrounds/corkbg.jpg); margin: 5px 0 0 5px; z-index: 200; } .sticky { position: absolute; font-family: "PC98"; font-size: 12px; color: #000; line-height: 5px; margin: 27px 0 0 35px; } .sticky_head { position: absolute; font-family: "Redaction"; font-size: 40px; font-weight: bold; letter-spacing: -1px; opacity: 0.9; -webkit-text-stroke: 0.0001px #00f; color: #fff; } .stickyh1 { transform: rotate(-11deg); left: 130px; margin-top: -25px; } .stickyhere { margin-top: -48px; font-size: 28px; } .stickyh2 { transform: rotate(1.4deg); left: 190px; top: 300px; z-index: 210; } .stickyh2 p { font-family: "Spirit"; font-size: 28px; color: #7b3a16; margin: -7px 0 10px; } #tibluecard { position: absolute; transform: rotate(-10deg); height: 125px; left: 10px; margin-top: -5px; } #tiyellowpin { position: absolute; transform: rotate(2deg); height: 25px; left: 290px; margin-top: 8px; z-index: 205; } #tinote { position: absolute; transform: rotate(2deg); height: 140px; left: 200px; margin-top: 5px; z-index: 200; } #tiyellowpin { position: absolute; transform: rotate(2deg); height: 25px; left: 290px; margin-top: 8px; z-index: 205; } #tibluebubble { position: absolute; height: 110px; left: 360px; margin-top: -25px; z-index: 210; } #tiboo { position: absolute; height: 72px; left: 370px; margin: -8px 25px 0; z-index: 210; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #tisquare1, #tisquare2, #tisquare3, #tisquare4 { position: absolute; border: 2px rgb(133, 89, 43) solid; border-radius: 6px; height: 55px; width: 55px; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); z-index: 200; } #tisquare1 { margin: 6px 0 0 460px; } #tisquare2 { margin: 6px 0 0 527px; } #tisquare3 { margin: 71px 0 0 460px; } #tisquare4 { margin: 71px 0 0 527px; } #tipudding { margin: 270px 0 0 603px; position: absolute; z-index: 200; } /* about */ .abmq__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll 60s linear infinite; animation-direction: normal; } .amiddle { display: flex; margin-bottom: 10px; } .arating { background: url(../assets/backgrounds/a18-bg-grid.gif); background-attachment: fixed; background-position: 10px 4px; background-color: #fffef5; width: 336px; height: 163px; padding: 10px; border-top: 1.5px solid #8d6e6888; border-left: 1.5px solid #8d6e6888; border-bottom: 4px solid #8d6e6888; border-right: 1.5px solid #8d6e6888; border-radius: 16px; margin: 275px 0 10px; } .abill { border: 1px solid #e3e3e39c; box-shadow: inset 0px -6px 6px -5px #dadada, 5px 5px 6px -5px #dadada, -5px 5px 6px -5px #dadada; margin: 0 369px; position: absolute; z-index: 389; } .abillin { position: absolute; margin: -85px 0; width: 160px; height: 65px; overflow-y: auto; background-color: #fbfcfe; font-family: "Nitty"; font-size: 10px; font-stretch: ultra-condensed; color: #585a5ce1; letter-spacing: -1.5px; line-height: 10px; padding: 9px 9px; } .abillin::-webkit-scrollbar { display: none; } .abillin:hover::-webkit-scrollbar { display: block; } .abillin:hover { border-top: 2px ridge #b5ebff; border-left: 2px ridge #b5ebff; border-bottom: 2px ridge #b5ebff; border-right: 2px ridge #b5ebff; border-radius: 5px; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); margin-left: 10px; transform: scale(1.2); } .alinkme { position: absolute; padding: 10px; font-size: 34px; font-family: "Spirit"; filter: sepia(20%); font-weight: bold; letter-spacing: -1px; color: #ffe1f9; z-index: 2001; text-shadow: 0px 0px 3px #00000022, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, -2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, 2px -2px 0px #8d6e68, -2px 2px 0px #8d6e68, -2px 1px 1px #8d6e68, -2px 4px 1px #8d6e68, 2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, 2px -2px 0px #8d6e68, -2px 2px 0px #8d6e68, -2px 1px 1px #8d6e68, -2px 4px 1px #8d6e68, 2px 2px 0px #8d6e68, 3px 4px 1px #00000022; margin: 244px 66px 8px; } .abiscuit1 { border-top: 1.5px solid #fff9db; border-left: 1.5px solid #fff9db; border-bottom: 4px solid #fff9db; border-right: 1.5px solid #fff9db; box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3), inset 0 -3px 4px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.2); border-radius: 10px; outline: #d1d1d1 solid 1px; height: 152px; width: 150px; transform: rotate(-8deg); margin: 4px 0 0 14px; padding: 10px; background: url(../assets/backgrounds/choconya1.jpg); background-blend-mode: multiply; background-size: contain; position: absolute; z-index: 390; } .abiscuit2 { border-top: 1.5px solid #fff9db; border-left: 1.5px solid #fff9db; border-bottom: 4px solid #fff9db; border-right: 1.5px solid #fff9db; border-radius: 10px; outline: #d1d1d1 solid 1px; height: 152px; width: 150px; margin: 158px 0 0 8px; padding: 10px; background: url(../assets/backgrounds/choconya1.jpg); background-size: contain; position: absolute; z-index: 389; } #afilling { background: linear-gradient(to bottom, #fffef8 0%, #f4f1e9 55%, #fdfaf4 100%); box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 0, 0, 0.1); border-top: 1.5px solid #e2e2e2; border-left: 1.5px solid #e1e1e1; border-bottom: 4px solid #e1e1e1; border-right: 1.5px solid #e1e1e1; border-radius: 10px; outline: #d1d1d1 solid 1px; height: 100%; } .anews { width: 2700px; height: 438px; padding: 28px 7px 10px; border: 1px solid #f0f0f0 !important; border-radius: 10px; margin: 1px 0 0 9px; background: url(../assets/backgrounds/dotbg1.png); box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; font-family: "PC98"; z-index: 100; } .a-hanger { position: absolute; top: 6px; left: 60.6%; transform: translateX(-50%); width: 90px; height: 22px; background: url(../assets/backgrounds/dotbg1.png); background-position: 0 -6px; border-radius: 12px; display: flex; justify-content: center; align-items: center; } .a-hole { width: 36px; height: 10px; background: #fff; border-radius: 6px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); } .a-card { background: linear-gradient( to bottom, #ffffff 1%, #ce9f76 49%, #b08864 51%, #fff9f5 100% ); border-radius: 16px; margin: 0 12px 12px; padding: 8px; border: ridge 3px rgba(192, 146, 93, 0.6); } .aheader { position: absolute; text-align: center; margin-bottom: 10px; } .a-series { background: rgba(0, 0, 255, 0.694); color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 13px; letter-spacing: 1px; } .a-blister { background: rgba(255, 255, 255, 0.6); border-radius: 22px; padding: 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 8px 18px rgba(172, 172, 172, 0.18); } .a-glossy { position: relative; overflow: hidden; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15) ); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), inset 0 -10px 20px rgba(255, 255, 255, 0.25), 0 12px 30px rgba(136, 136, 136, 0.25); } .a-glossy::before { content: ""; position: absolute; top: -20%; left: -40%; width: 180%; height: 60%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0.15) 55%, rgba(255, 255, 255, 0) 70% ); transform: rotate(-8deg); pointer-events: none; } .a-glossy::after { content: ""; position: absolute; top: 6px; left: 6px; right: 6px; height: 45%; border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) ); pointer-events: none; } .a-window { background: url(../assets/images/purinweb.webp); background-size: cover; background-position: center; border-radius: 20px; height: 260px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 -8px 16px rgba(255, 255, 255, 0.6); } .a-footer { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; } .anumber { background: rgba(0, 0, 255, 0.694); font-weight: bolder; color: #fff; padding: 6px 10px; border-radius: 2px 2px 2px 8px; font-size: 16px; } .atagged { margin-left: -205px; margin-top: 4.5px; } .atagged img { height: 32px; border-radius: 2px; border: #d2d2d2 solid 1px; box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px gainsboro; } .a-name { font-size: 18px; font-weight: 600; color: #ff5f9e; letter-spacing: 1px; } .atest { background: url(../assets/images/shortcake.webp); background-size: 700px; background-position: 40% 50%; width: 100%; height: 438px; border: 1px solid #e0e0e0 !important; filter: opacity(85%); box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 10px; margin: 0 0 0 9px; } #atabs { position: absolute; margin: -31px 0 0 6px; transform: scale(0.8); transform-origin: left top; display: flex; flex-direction: row; z-index: 998; } .apasspin { border: 1px solid #000; border-radius: 6px; background-color: #ecf7ff; padding: 6px; height: 100%; width: 288px; overflow-y: auto; margin: 0px 1px; z-index: 999; } #apcolum { background: transparent; } #apcolum:hover { z-index: 2000; } .aphoto { border-top: 1.5px solid #8d6e6888; border-left: 1.5px solid #8d6e6888; border-bottom: 4px solid #8d6e6888; border-right: 1.5px solid #8d6e6888; border-radius: 6px; height: 200px; width: 173.5px; margin-left: 8px; padding: 8px; background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); } .aphoto img { height: 100%; width: 100%; filter: brightness(105%) /* contrast(120%) opacity(97%) grayscale(60%) hue-rotate(100deg) saturate(170%) */; border-radius: 6px; border: #e6ecff ridge 3px; } #abadge { position: absolute; margin-left: 110px; margin-top: 730px; pointer-events: none; z-index: 900; } #abadge img { height: 160px; transform: rotate(2deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #apenc { position: absolute; margin-left: 700px; margin-top: 400px; z-index: 1009; } #apenc img { height: 390px; transform: rotate(213deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #akeych1 { position: absolute; margin: -20px 660px; z-index: 1001; pointer-events: none; } #akeych1 img { height: 290px; transform: rotate(-5deg); filter: brightness(1.05) contrast(0.9) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #aidc { position: absolute; margin-left: -3px; margin-top: -447px; filter: brightness(1.05) saturate(125%) contrast(0.9) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); z-index: 97; } #aidc img { height: 268px; border-radius: 14px; } #aidcim { position: absolute; margin-left: 39px; margin-top: -470px; z-index: 901; } #aidcim img { width: 113.5px; height: 118px; } #aidcim img:hover { filter: brightness(104%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d) drop-shadow(0 0 1px #8080804d); } .aipodmain { background: url(../assets/images/ipod_vert.jpg); background-size: cover; background-position: center -2px; border-radius: 15px; height: 310px; width: 200px; margin: 0 9px 8px 0; border: 1px solid #e0e0e0; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; overflow: hidden; text-align: right; } @font-face { src: url(https://dl.dropbox.com/scl/fi/44jmpsjadcy83ekitx5h2/Icons-South-St.ttf?rlkey=xlgdqf7d1egq08yvreyauv0p5&dl=0); font-family: icons; } .abphone { animation: bobbing 3s ease-in-out infinite; margin: -160px 300px; z-index: 1000; } #dmessage { transform: scale(1.6) rotate(-4deg); height: 320px; width: 160px; outline: #a4a4a4 solid 1px; border: 1px solid #e0e0e0 !important; box-shadow: 0 0 0 2px rgb(248, 211, 239) inset, 0 0 0 6px #000 inset, inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 25px; padding: 6px; position: absolute; font-family: "SFPRO"; box-sizing: border-box; } #dmessage::after, #dmessage::before { display: block; position: absolute; left: 0; right: 0; margin: auto; background: #000; border-radius: 50px; box-sizing: border-box; } #dmessage::before { text-shadow: none !important; content: "o"; top: 10px; width: 33%; height: 16px; color: #00008b; line-height: 12px; text-align: right; padding-inline: 6px; font-size: 10px; } #dmessage::after { content: ""; bottom: 9px; width: 35%; height: 3px; } .message-in:before, .message-out:before { width: 20px; height: 20px; background: 0 0; bottom: 0; z-index: -1; position: absolute; content: ""; display: block; } .topbarorwhatever { text-align: left !important; height: 20%; width: 100%; background: #ecf5fc; border-radius: 18px 18px 0 0; padding: 0 7px; border-bottom: 1px solid #d1d4db; } .topbarorwhatever p:not(#contactname) { margin: 6px 0 !important; font-size: 9px; display: inline-block; color: black !important; } .topbarorwhatever p:not(#bigname, #contactname, :first-child) { float: right; margin-top: 6px; font-family: icons !important; word-spacing: 2px; font-size: 9px; } .ppprofile { width: 100%; height: 30px; margin: 3px auto !important; text-align: center; color: #000 !important; text-decoration: none !important; display: block; } #ppictuture { content: url(../assets/images/pinkflurry.JPG); margin-bottom: -2px; margin-top: -2px; } #contactname:before { content: "the void "; font-size: 8px; font-weight: 400; margin-top: -100px; color: #000; } #contactname { margin: -2px; font-size: 6px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: #4ba5f1; } .ppprofile img { width: 25px; height: 25px; object-fit: cover; border-radius: 100%; } #vottomvar { width: 100%; } #messagescrollable { width: 100%; height: 70%; overflow-y: scroll; overflow-x: hidden; transform: rotate(180deg); direction: rtl; background: #fff; padding: 24px 4px 0; } #messagescontainer { min-height: 0; display: flex; flex-direction: column-reverse; } #messagescrollable::-webkit-scrollbar { display: none; } .message-in, .message-out { font-size: 9px; padding: 5px; margin-inline: 8px !important; word-break: break-word; border-radius: 5px; position: relative; transform: rotate(180deg); text-align: left; margin-block: 4px; } :is(.message-in, .message-out) img { width: 100%; } .message-out { background: url(../assets/backgrounds/dotbg1.png); margin-right: 45px !important; color: #3568d6; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d); border: 1px solid #2453d4; } .message-in:before { left: -19px; border-radius: 0 0 10px; border-right: 5px solid #e9e9eb; transform: rotate(5deg); } .message-in { background: #e9e9eb; margin-left: 45px !important; color: #000; } #vottomvar { background: #d1d4db; height: 10%; border-radius: 0 0 18px 18px; } .messageboxxy { width: 80%; height: 18px; background: #fff; border-radius: 50px; transform: translateY(-39px); border: 1px solid #cecece; float: right; margin-right: 5px; padding: 7px; cursor: text; } .messageboxxy:after { content: ""; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAJ0klEQVRYCc1ZW0hUXxff58xNRylJayaGCrKITJ3UpKmmbCxsQDJzqrcu0kWIIrErVJRBFyiKii4PEb1E0UOXJ6MLiSaEVpQ1qHRR0TQdc5zRmss5c86H/v7fan9jNcG/4NsPss4+66z1W7+19trbPUySJPV/h6IosiyrqhqJRBRFUVUVj9DEW7/f39nZ2dXV5fF4urq6ent7e3p6uru7P3/+DAGTAwMD9DkMwhXMqqpKQpTM8Bkc80rhcDjKBB5fv369Y8eO7Ozs2SMjIyNj1qxZaWlpVqs1IyMjMzPTarVmZmZmZGTMnj07Nze3oqKira1NVVVJkpSRAY8Us6qq5CsSicALCwQCkIAsCnUoFMLbYDCoqmp9ff3MmTNFUWSM6fV6NjK0Wi2E0X81Gg1jLCcn58OHD7CjqirZhC9woSgKgVNVdZgtAk5sybJMwCORCNIXDAaLiorgG8gYY6IoCoKg0WgEQcArgRuiKGpGRmlpaRSaSCRCRJAvgs4A5YdKBD88Mt6/fz9x4kTGmFarBSyQgZnRVPEz06dP7+vrg1cKHo+ESZZlejXMFqUcaf723xEMBoeGhvx+fyAQCIfD1dXVKSkpxBOo0uv14Gk0W8SrwWAwm80tLS1erzcUCgUCAa/XOzg4CD9DQ0NEJEH8J4mqqr5///7o0aPLly/Pz89fsGCB3W7Py8tbuHDhopHhcDhycnLi4+PhXhRFnU5HfPCYaJIxRvNxcXHZ2dkFBQV2u33JkiWLFi1yOBzz589fsmRJQUHBihUrzpw509ra+j2JKPnbt2+npaUJggAyUMUoEn6GCCDOdDod+eYBQSaDjDGEAWX8pUWDVzab7dGjR0DGIpFIQ0PDpEmTyBBvHRWNuHn3XFkPVzpeEVZ6yxhD/YmiiFB5jnmPsJCWluZ2u4dXoiRJpaWloigCO5keDQVWqB0QSprBt/yqjHoV9UliYmJ8fDxjLC4ujmLbuXOnJEmstbXVYrHQLAzBNFnh+SMCNBpNlNcoNSKDFiy6HcyWlZU9f/781q1bWVlZ0EQ3SU9P7+7uZrW1tSkpKfiSLwXeB58UWnpkiyLR6XSUdKDnA+PTZ7fbPR4PyujOnTuwD4XU1NSmpiZWU1OTlJTEp4wPjp/ngUInMTHRarWWlJTs3bv3+PHjlZWV5eXlLpdrxowZer1eHBmCIMTFxcExWVi1ahXtOfX19UlJSYhNEASLxdLY2MiePn06ZswYNCH6jBf4iEnNYrFs3Lixqqrqy5cvaDbUCRVF6erqunfv3tq1axMTE2GK0m0wGERRNJlMjx8/jkQiAwMDe/bsgQtUjslkevPmDUOTpM9Qtnzh8xC1Wq1er1+9enV1dTV23MHBQX4blUcGsuPz+erq6pxOJxYTtQMYnzRp0po1a5xOJ+qdvEyePLm5uXk4iWPGjCFKBEEgiKRKERuNxsrKSkBBa1YUpa+v79WrV9XV1TU1NW/fvvV6vXRYkiTJ4/Hs3bsXK47KgwRYhnfANZvNw7VVW1s7duxYQsDj4yfRQS5fvkyblSRJdXV127Zty8rKSk5OTkhIiI+PT0lJmTt37u7du589e0YtW5blQ4cOARnZJ+NRgsVicbvdP4WFYueb+IkTJ0KhEJjo6OjYvn07xUPRk9eJEyfu2bPH6/WitMPh8Pbt26k2SC0KE2MsNiz6RhTFwsLCnp4eENDc3OxwOKhxGwyGqEMENcmioqKOjg6shvb29jlz5gDZz+okNiw+oPHjxz9+/Bgns97e3qVLl6L1ATevGeVPFMV169b19/ejEG/duoW1yX9CwUOIwRaFJQhCcXExVfG+ffuQMpgmtSjrWq0WLDLGTp06BZr9fv/ixYt/gSk2W+RGq9XevHkT7aC+vn7ChAlRKYMm9Xd0UfpcFMXU1NR3796hyM6ePUuapMMLMdiizjl58uS2tjYccCsrK3FEJiikRuXM+wCvBoPh0qVL3759U1X1xYsXtFB4TZJjwKKY8vPzYdHn8zkcDkoByoiaJOZp5dLaBNySkhJsBh6Px2q1khFCQ0IMWHRSWL9+PZZSW1tbamoqzZPpqDInBySIomi1WrE3BwIBp9NJr0YLMWDRhr9161bUe0tLi9lsJjR04PxhqUX5mzZtmsfjkSRJlmWXyxX1ln+MAYtqpaysjNqVxWJBcpE7yhSPlfdBiNPT0z99+iTLsiRJxcXFUTr8YwxYUNXr9StXrkRZdHd3p6enY55A8yuAtx4l5+Xl+Xw+VVW/fv26cOHCX4TxW7B0Ol1OTo7X65VlORQKuVwuAsR3rygQUY86nW7Tpk2gHAX6r2ChvJKTk9+8eYMd+urVq9grcTaKalFRaPAoiqLBYLh3756iKJFI5OHDh0aj8YeamIzNFt+mcSHw6dOn3NxcIIMVxE0U/tBffn6+3+9HYPv27fuhDk3GgAVPKHCbzfblyxdk4caNG9iJqZx5lGSdBJPJVFVVBUzt7e3Tpk2jDkw6vBADFvUnxpjRaLx48SLuCCRJ2r9/P1YioFPfooqh5CYkJJw9e5Zujo4cOfJrTLH3RPggl1OnTm1sbETQwWDw2LFj48aNQ5T0j6F2ZDDGkP3x48dfuHAhEAigG9fW1vL/+fEM8XIMtih0IBMEwel0dnZ20qXe3bt3ly1blpCQQIuAUBqNxuLi4pqaGuRdUZSPHz/a7XY+AzwUXo4Bi1eFOVEUV61ahQsM9H2fz3f//v0DBw4UFhbm5eXZbDaXy3X48OEnT55gGw2Hw5FI5N27d7ThIPsUc5SX30oi/TcLK2hUBQUF9fX1oAG3c7iH6u/vx31YOBxG1tCEHzx4YLPZyBS/ZY3GFBsWfcMfRNHJzGbzsWPHmpqaAI5u50KhEO4yUYJut3vXrl1msxmm9Hq9VqtFhL9oKL+VRJ5t4l+n02k0milTppSXl9+9e7elpaW3t3dwZAwMDDQ2Nt64cWPz5s3YQIGJjkkIjDdL8UOIAYv6FrTpUoUsAqVOpzOZTJmZmfPmzbPZbDNmzDCZTFiJSDqtZXJPGzzN8MI/sBoaGpKTk6klUsvhVf+GTOAooSASh2HW2dmJ/YReE8S/gYa3SVfDdHGi1WoXL17s9XqH704PHjxIKQPno5nnzf1BmRwReVeuXFEUhcmy7PF4CgsL+TX8Bx3/zBS/wFGmBoNhw4YN/f39338uaG9v37Jli8lkQm3hbo1u2/6GALhYQAaDYerUqRUVFcA0zBZ6D36Tefny5fXr10+fPn3y5Mkzf3lcunTp5MmT586dO3/+/LVr19xuN/qwoijDd6fY49AGg8Eg/9MBIf4bAv2bjgM+7+I7W/RLEL9v8Kp/XIYj/gcVzADu9yT+ccf/xuD/Kaz/AKRCVxNDcm4YAAAAAElFTkSuQmCC) center/contain no-repeat; display: block; width: 15px; height: 13px; position: absolute; top: 1px; left: -18px; opacity: 0.4; cursor: pointer; } .messageboxxy span { display: block; font-size: 10px; line-height: 0; color: #cecece; user-select: none; } #vottomvar:before { content: ""; display: block; width: calc(100% - 2px); background: #fff; height: 20px; transform: translateY(-19px); } .ppprofile:hover { background: transparent !important; border: 0px !important; outline: 0px !important; text-decoration: none !important; } .abpass { background: #fff; border: 1px solid #c0c0c0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 3px; height: 194px; width: 194px; position: absolute; margin: 700px 690px 0px; padding: 9px; z-index: 2002; } .abpins { border: 1px solid #c0c0c0; height: 100%; overflow: hidden; } .abpins img { width: 100%; height: fit-content; } .aext-button { cursor: url(../assets/items/select.png), pointer; background: transparent; color: #2453d4; border: none; text-decoration: underline; font-family: "MS PGothic"; font-size: 14px; margin: 60px 0; } /* diary */ .lines { position: fixed; width: 677px; height: 366px; top: 0; left: 0; pointer-events: none; z-index: 300; opacity: 0.05; } .lines:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient( to bottom, transparent 50%, rgba(0, 0, 0, 0.5) 51% ); background-size: 100% 4px; will-change: background, background-size; animation: scanlines 0.2s linear infinite; } @keyframes scanlines { from { background: linear-gradient( to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 51% ); background-size: 100% 4px; } to { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 50%, transparent 51% ); background-size: 100% 4px; } } .pc { background: url(../assets/images/purinweb.webp); background-size: 690px; background-position: 50% 70%; left: 0; top: 0; padding: 11px; height: 365px; width: 676px; } .screen { background: transparent; font-family: "pc98"; color: #fff; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 0 0; } .screen a { text-decoration: none; color: inherit; } .screen img:hover { filter: brightness(110%) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); cursor: url(../assets/items/select.png), pointer; } .hidden { display: none; } .ywindow { background: white; width: 315px; height: 188px; border: 1px solid #ffc9c6; border-radius: 5px; margin-top: -250px; margin-left: 50px; position: absolute; z-index: 2000; cursor: url(../assets/items/cursor.png), move; } .divider { width: 313.5px; margin-bottom: -15px; padding: 23px 4px 3px 4px; border-bottom: 1px solid #ffc9c6; border-top-left-radius: 4px; border-top-right-radius: 4px; font-family: "Arial"; font-size: 15px; background: #b3e6fb; color: #ffc9c6; text-shadow: 0 0 3px #3e3e3e; } .login { width: fit-content; background: #ffffff; border: 1px solid #ad4944; border-radius: 20px; padding: 2px 4px 0; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25); } .screen2 { background: white; margin: 16px 5px 3px; height: 157.5px; font-family: "pc98"; font-size: 14px; overflow: auto; } .screen2 img:hover { filter: brightness(104%) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 0px #0000004d); cursor: url(../assets/items/select.png), pointer; } .folderflex { display: flex; flex-direction: column; margin-top: 15px; } .itemflex { display: flex; flex-direction: row; } .folder_item { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 12px; } .divider img:hover { filter: brightness(103%); cursor: url(../assets/items/select.png), pointer; } .divider img:active { filter: brightness(97%) saturate(125%); cursor: url(../assets/items/select.png), pointer; } .entry { font-family: "pc98"; font-size: 14px; border: 2px solid #ffc9c6; border-radius: 6px; top: 10px; margin-left: 170px; position: absolute; cursor: url(../assets/items/cursor.png), move; z-index: 2001; } .note_header { width: 414px; padding: 4px; border-bottom: 2px solid #ffc9c6; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: "segoe UI"; font-size: 15px; background: #fffcec; color: #000; } .note { background: url(../assets/backgrounds/notebg.png); background-size: 240px; background-attachment: fixed; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; line-height: 19px; width: 414px; height: 220px; padding: 20px 20px 10px; overflow: auto; font-size: 18px; } .note_header img:hover { filter: brightness(103%); cursor: url(../assets/items/cursor.png), pointer; } .note_header img:active { filter: brightness(97%) saturate(125%); cursor: url(../assets/items/select.png), pointer; } .startmenuz { color: inherit; } .startbar { width: 676px; padding: 4px; background: linear-gradient(180deg, #fff 0%, #ffcef8 100%); border-top: 1px solid #000; box-shadow: 0px 0px 15px 0px #fffbf0 inset, 0 0 5px white; } .startbar label { margin-top: -20px; } #startmcon { position: fixed; margin-top: -319px; left: 0; font-family: "PC98"; width: 244px; height: 270px; z-index: 1000; display: none; } #start_toggle:checked ~ #startmcon { display: block; } .startpanel { width: 100%; height: 100%; background-color: #fff; border: 3.5px solid #ffcef8; border-bottom: none; outline: 0.5px solid #000; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; } .start-header { background: linear-gradient(180deg, #fff 0%, #ffcef8 80%, #fff 100%); padding: 5px; display: flex; align-items: center; border-radius: 8px 8px 0 0; } .user-avatar { width: 48px; height: 48px; border: 2px ridge rgb(253, 234, 238); border-radius: 4px; margin-right: 10px; } .username { color: #00f; font-weight: bold; } .start-content { display: flex; flex: 1; overflow-y: auto; padding: 4px; } .app-list { flex: 1; padding: 3px; margin-left: 4px; } .app-list.pink-bg { background: linear-gradient(180deg, #fff 0%, rgba(255, 215, 229, 1) 100%); border: 1px solid rgba(255, 133, 174, 0.6); } .diapp { padding: 2px; cursor: pointer; font-size: 14px; margin-bottom: 5px; display: flex; align-items: center; justify-content: flex-start; text-align: left; position: relative; filter: sepia(0.8) hue-rotate(160deg); transition: filter 0.4s ease; } .diapp a { display: flex; align-items: center; text-decoration: none; color: inherit; width: 100%; } .app-icon { width: 24px; height: 24px; margin-right: 10px; } .diapp:hover { filter: none; } .diapp:hover { border: 1px solid #ff89c8; background: linear-gradient( to bottom, rgba(253, 247, 249, 0.589) 0%, #f4ffc2 100% ); border-radius: 2px; } .window-content { overflow: hidden; padding: 0 0 0 18px; background: url(../assets/backgrounds/notebg.png); background-size: 240px; background-attachment: fixed; border-radius: 0 0 5px 5px; } .window-content textarea, .window-content iframe { width: 100%; height: 100%; background: transparent; border: none; margin: 0; padding: 17px 0; font-size: 15px; font-family: "PC98"; color: #000; resize: none; } .window-content textarea { overflow: auto; } .window-content textarea:focus { outline: none; } .dvideo { background: url(../assets/images/videopl.jpg); background-size: 213px 203px; border: 1px solid #6c6c6c; border-radius: 10px; height: 203px; width: 213px; margin: -80px 0 0 400px; overflow: hidden; text-align: right; display: none; position: absolute; } #vid_toggle:checked ~ .dvideo { display: block; } .dvidcov { background: #000; position: absolute; margin-top: 24px; margin-left: 5px; height: 131px; width: 204px; } .dvidimg { display: flex; flex-direction: row; margin-top: 16px; margin-left: 5px; } .dipodmain { background: url(../assets/images/mediapl.jpg); background-size: 174px 190px; border: 1px solid #6c6c6c; border-radius: 10px; height: 190px; width: 175px; margin: -110px 0 0 300px; overflow: hidden; z-index: 9999; text-align: right; position: absolute; display: none; } #mus_toggle:checked ~ .dipodmain { display: block; } .dipodalbum { display: flex; flex-direction: row; margin-top: -5.5px; margin-left: 6px; } .dipodalbum img { height: 132px; width: 162px; border-radius: 6px 6px 0 0; filter: brightness(116%); } .dseeking { width: 200px; margin-top: 128px; margin-left: 12px; position: absolute; background-color: transparent; background: none; } .dseeking input[type="range"] { background-color: transparent !important; } .dseeking input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: help; background: transparent; } .dseeking input[type="range"]::-webkit-slider-thumb { height: 7px; width: 12px; background: url("../assets/items/trackThumb.gif") no-repeat center; background-size: contain; border-radius: 5px; cursor: help; -webkit-appearance: none; margin-top: -4.5px; } .dpausebtn { position: absolute; top: 148px; left: 71px; } .dpausebtn:hover { filter: brightness(110%); } .diaryexit { cursor: url(../assets/items/select.png), pointer !important; } .button { cursor: var(--cursor_pointer); color: #fff; } button:hover, button:active { filter: brightness(110%); } #start_button { background: linear-gradient( to bottom, #e2f3ff 1%, #a5d5ff 49%, #85b4ff 51%, #ebf0f4 100% ); text-shadow: 1px 1px 5px #e02464; color: #fff; margin-left: -4px; margin-top: 0; border: 1px solid; padding: 0; border-left: 0; border-radius: 0 10px 10px 0; font-style: italic; display: inline-block; } #start_button img { padding: 1px 6px 0.5px 6px; width: 45px; } #start_button:hover { filter: brightness(103%); cursor: url(../assets/items/select.png), pointer; } #clock { float: right; font-family: "PC98"; color: #2453d4; text-shadow: -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px #fff; font-size: 29px; font-weight: 900; text-align: center; margin: 1px 4px 0 0; } /* logs */ .ltable-section { background: transparent; } .ltable-section .inner { padding: 15px 15px 20px 17px; height: 508px; width: 713px; margin: -8px 0 0 0; } .lipodmain { background: url(../assets/images/ipod_vert.jpg); background-size: cover; background-position: center -2px; border-radius: 15px; height: 310px; width: 200px; margin-top: -10px; border: 1px solid #000; overflow: hidden; text-align: right; } .lipodbar { position: absolute; margin: 15px 0 0 16.5px; } .lipodalbum { display: flex; flex-direction: row; margin-top: 7px; margin-left: 22px; } .lipodalbum img { height: 50px; width: 50px; border: 2px ridge lightgray; } .lipodalbum p { margin: -1px 0 0 5px; line-height: 18px; text-decoration: underline; } .lseeking { width: 163px; margin-top: 117px; margin-left: 18px; position: absolute; } .lpausebtn { position: absolute; margin-left: -108px; margin-top: 268px; } .lquiz { background: url("../assets/gifs/mikulog.gif"); background-size: 330px; background-position: 44% 49%; width: 199px; height: 192px; padding: 10px; border: 1px solid black; border-radius: 10px; margin: 8px 0; } .lmiddle { grid-column: span 2; display: flex; width: 710 !important; height: 299px; margin-bottom: 100px; margin-top: -7px; } .cd-insert { width: 713px; height: 395px !important; border: 1px solid #e4e4e4; border-radius: 10px 10px 90px 10px; padding: 8px; background: linear-gradient(145deg, #ffffff, #e6e6e6); box-shadow: 17px 17px 41px #d4d4d4, -17px -17px 41px #ffffff; display: flex; position: relative; overflow: hidden; } .cd-main { width: 360px; height: 360px; margin: 11px; border: 1px solid #e4e4e4; border-radius: 50%; background: linear-gradient(145deg, #e0e0e0, #f5f5f5); box-shadow: inset 8px 8px 16px #c4c4c4, inset -8px -8px 16px #ffffff; } .cd-grip { position: absolute; width: 55px; height: 55px; border-radius: 50%; background: linear-gradient(145deg, #d0d0d0, #e8e8e8); box-shadow: inset 8px 8px 16px #c4c4c4, inset -8px -8px 16px #ffffff; bottom: calc(50% - 80px - 10px); right: calc(50% - 80px + 36px); } .cd-hub { width: 60px; height: 60px; border-radius: 50%; background: #e8e8e8; border: 1px solid #e8e8e8; box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff, inset 0 0 8px rgba(0, 0, 0, 0.1); position: absolute; margin: 150px 148px; z-index: 900; } .cd-hub::before { content: ""; position: absolute; width: 80%; height: 80%; margin: 4px; border-radius: 50%; border: 2px solid hwb(0 89% 11%); box-shadow: 0 0 2px rgba(255, 255, 255, 0.8); } .cdone { margin: 2px 1px; z-index: 900; height: 355px !important; transition: transform 0.3s ease; } .cd-main:hover { animation: spinOnce 2s ease-in-out; /* Single spin on hover */ } /* All CDs (images) - hidden by default */ .cd-img { position: absolute; opacity: 0; transition: opacity 0.5s ease; } /* Active CD */ .cd-img.active { opacity: 1; } /* Buttons */ .cd-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 500px; margin: 0 auto; } .cd-btn { width: 40px; height: 40px; border-radius: 50%; background: #333; color: white; border: none; cursor: pointer; } @keyframes spinOnce { 0% { transform: rotate(0deg); } 50% { transform: rotate(40deg); } 100% { transform: rotate(0deg); } } /* shrines */ .ipad-in { background: url(../assets/images/melroom.jpg); background-size: 750px; background-position: 60% 75%; left: 0; top: 0; padding: 0; height: 410px; width: 676px; } .ipad-main { display: flex; flex-direction: row; padding: 0 80px; margin: -5px 0 4px; font-family: "SFPRO"; transform: scale(0.97); } #ipad-header { border-radius: 8px; margin: -3px 0 2px; } #ipad-footer { background: transparent; margin-top: -4px; } #ipad-footer img { display: block; margin: 0 auto; width: 180px; border-radius: 20px; } .iflex-1 { display: flex; flex-direction: column; width: 170px; } .iflex-2 { display: flex; flex-direction: column; width: 170px; margin: 0 2px 0; } .iflex-3 { display: flex; flex-direction: column; width: 170px; } .appset { display: flex; flex-direction: row; padding: 13px; } .app:hover { background: #d2d2d2; opacity: 0.9; transition: 0.1s ease; transform: scale(1.05); } .app { flex: 1; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 18px; height: 68px; cursor: url(../assets/items/select.png), pointer; } .shname { margin-top: -8px; font-size: 12px; } #shnamedown { margin: 328px 36px; position: absolute; font-size: 12px; } #ireminders { background-image: url(../assets/images/shrinote.webp); background-size: 163px; background-position: 0% 5%; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 18px; margin: 4px; height: 151px; } #ireminders:hover { opacity: 0.9; transition: 0.1s ease; transform: scale(1.05); } #ipad-img { background-image: url(../assets/gifs/snookums.gif); background-size: 290px; background-position: 40% 0%; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 18px; margin: 5px 4px; height: 141px; } #imusicbox { background: url(../assets/images/stickers1.webp); background-size: 830px; background-position: -50px -160px; border: 1px solid #e0e0e0 !important; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; border-radius: 18px; margin: 4px; height: 238px; } #iclock { border: 4px rgb(255, 221, 173) ridge; border-radius: 18px; margin: 4px; padding: 16px 0 0; height: 79px; font-family: "Redaction"; -webkit-text-stroke: 0.0001px #00f; color: #fff; text-shadow: -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px #fff; font-size: 39px; font-weight: 900; text-align: center; } .img-hover { z-index: 400; } .img-hover img:hover { filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0 0 1px #0000004d); } .shitopbar { width: 927px; padding: 6px 4px 6px; border-bottom: 2px solid #ffc9c6; font-family: sans-serif; font-size: 14px; background: #fffcec; color: #464646; } .shilogin { width: 740px; display: flex; background: #ffffff; border: 1px solid #ad4944; border-radius: 20px; padding: 5px 3px 0; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.25); } #shiloadinggif { margin-right: 10px; margin-top: -2px; } #shiloadinggif img { width: 17px; } #shibarbutton1 { float: right; margin-top: -22px; } #shibarbutton2 { float: right; margin-top: -22px; margin-right: 23px; } .shafolder { background: rgba(134, 134, 134, 0.797); backdrop-filter: blur(10px); width: 252px; height: 280px; border-radius: 18px; margin: -290px 213px; position: absolute; z-index: 2000; transform: scale(0.92); } .shfheader { margin: -38px 0 0; font-size: 21px; font-family: "SFPRO"; color: #fff; } .shfooter { margin: 10px 0 0; font-size: 11px; font-family: "SFPRO"; color: #fff; } .shfooter a { color: inherit; } .shscreen2 { margin: 15px 5px 3px; padding: 6px 14.5px 14px; font-family: "SFPRO"; font-size: 14px; overflow: auto; overflow-x: hidden; } .shscreen2 img { width: 54.5px; margin: 15px 5px 3px; border-radius: 12px; } .shscreen2 img:hover { background: #d2d2d2; transition: 0.1s ease; transform: scale(1.08); cursor: url(../assets/items/select.png), pointer; } .shappfrow { display: flex; flex-direction: row; gap: 10px; } .shfnames { margin: 1px 13px 2px; font-size: 12px; color: #fff; } .ipad-main.toggle { position: fixed; z-index: 1000; } body.shrines::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); z-index: 10; display: none; animation: none; } body.shrines.blurred::before { display: block; } /* scrapbook */ .scsection { filter: grayscale(20%); margin: 12px 0 0 169px; display: flex; padding: 0; background-image: url(../assets/backgrounds/grid-blue.png); border: solid 4px white; border-image: url(../assets/backgrounds/grid-blue.png); outline: ridge 4px #dcebfb; border-radius: 10px; width: 770px; height: 548px; z-index: 900; } #schandle { filter: grayscale(20%); position: absolute; padding: 10px; background-image: url(../assets/backgrounds/grid-blue.png); border: ridge 4px #dcebfb; border-right: none; margin: -350px 0 12px 2.5px; border-radius: 100px 0 0 100px; width: 174px; height: 115px; } #scinhandle { filter: grayscale(20%); background-color: #fffef5; border: dashed 1px #c1c1c1; border-right: none; margin-left: 2.5px; border-radius: 100px 0 0 100px; width: 105%; height: 100%; } #spirals { position: absolute; margin-left: 358px; margin-top: 52px; z-index: 9999; pointer-events: none; filter: drop-shadow(0.5px 0.5px 0 white) drop-shadow(0 0.5px 0 white) drop-shadow(0 0.5px 0.5px white) drop-shadow(0.5px 0.5px 1px black) drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black); } #spirals img { width: 36px; margin-bottom: -40px; } #scpenc { position: absolute; margin-left: 56px; margin-top: -500px; z-index: 9999; } #scpenc img { height: 455px; transform: rotate(-6deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } #scwrapper { position: relative; z-index: 0; } #sctabs { position: absolute; margin: -27px 0 0 132px; transform: rotate(-90deg); transform-origin: left top; display: flex; flex-direction: row; } .bkmrk { padding: 5.5px; border-radius: 10px 10px 0px 0px; background-color: #fff; border: 2px ridge #ebebeb; border-bottom: 0px; padding-bottom: 0px; text-align: center; width: 80px; } .bkmrkin { border: 1.25px dashed #cc9a81; border-bottom: 0px; border-radius: 8px 8px 0px 0px; padding: 8px 5px; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0; } .abkmrkin { padding: 6px 5px !important; } .bkmrkin a { text-decoration: none; font-weight: bold; color: #ffffff; text-transform: uppercase; text-shadow: 0 1px #977357, 1px 0px #977357, 0 -1px #977357, -1px 0px #977357; font-size: 10px; } .bkmrkin a:hover { text-decoration: none; text-shadow: -1px -1px 0 rgb(158, 158, 255), 1px -1px 0 rgb(158, 158, 255), -1px 1px 0 rgb(158, 158, 255), 1px 1px 0 rgb(158, 158, 255); } #sckitch { position: absolute; top: 0; left: -155px; z-index: -1; pointer-events: none; } #sckitch img { height: 300px; transform: rotate(2deg); filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); } .tape, .tape2, .smtape { border-top: 1px dashed #ffc8c8; border-bottom: 1px dashed #ffc8c8; background: rgba(255, 232, 247, 0.58); padding: 3px; width: 130px; height: 30px; background-repeat: no-repeat; z-index: 9999; } .tape { position: absolute; margin: -520px 265px; transform: rotate(-1.6deg); } .tape2 { position: absolute; margin: -222px 80px; transform: rotate(1deg); z-index: 1001; } .scpolaroid { background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; box-shadow: inset 0px -6px 6px -5px #dadada, 0px 0px 6px 0px #dadada; height: 234px; width: 220px; position: absolute; margin: -210px 40px; padding: 9px; z-index: 1000; } .scsquig { position: absolute; margin: -360px 300px; z-index: 1001; } .scsquig img { height: 66px; transform: rotate(140deg); } .scsti1 { position: absolute; margin: -526.5px 464px; z-index: 1001; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); transform: rotate(3.6deg); } .scsti1 img { height: 36px; } .scsti2 { position: absolute; margin: -484px 447px; z-index: 1001; padding: 2px; height: 75px; background: #fff; border: #000 1px solid; border-radius: 5px; } .scsti2 img { height: 69px; } .scsti3 { position: absolute; margin: -405px 447px; z-index: 1001; padding: 2px; height: 75px; background: #fff; border: #000 1px solid; border-radius: 5px; } .scsti3 img { height: 69px; } .notes:hover { z-index: 1005; } .polins { background: url(../assets/images/CMGING.webp); background-size: 220px 280px; border: 1px solid #c0c0c0; height: 100%; } #sudoku { margin: -538px 228px; width: 212px; height: 246px; overflow: hidden; position: relative; z-index: 999; } #sudoku iframe { width: 400px; height: 390px; transform: translateX(-68px); pointer-events: auto; } .crop-container { height: 258px; margin: 12px 0 0 -22px; width: fit-content; overflow: hidden; } .crop-container:hover { overflow: auto; } .crop-container iframe { margin-top: -20px; } .scmusic { border-radius: 15px; height: 150px; width: 300px; top: 171px; left: 236px; z-index: 990; position: absolute; padding-top: 0; overflow: hidden; text-align: right; } .scseeking { width: 212px; padding: 7px 4px; margin-top: 100px; position: absolute; z-index: 990; border: 1px solid #000; } .scpause { margin: -201px -34px; border: 1px solid #000; z-index: 1000; } #scpausewrap { background: #fff; border: 1px solid #000; border-radius: 3px; position: absolute; padding: 9px; width: 74px; height: 74px; margin: -325.5px 447px; } .scpausebtn { border: 1px solid #787878; border-radius: 3px; filter: grayscale(27%); position: absolute; margin-left: -108px; margin-top: 269px; } #sidebox1 { background-color: #fffef5; outline: ridge #c1c1c1; border-radius: 6px; font-size: 14px; margin: 5px 0 0 5px; height: 531px; width: 365px; overflow: hidden; padding: 0; } #sidebox2 { background-color: #fffef5; outline: ridge #c1c1c1; border-radius: 6px; font-size: 14px; margin: 5px 0 0 12.5px; height: 531px; width: 375px; overflow: hidden; padding: 0; } :root { --grid: rgba(0, 0, 0, 0.1); --lightborder: rgba(0, 0, 0, 0.2); --heavyborder: rgba(0, 0, 0, 0.5); } .header { height: 6%; display: flex; align-items: center; } .day { height: 11.69%; display: flex; align-items: center; } .date { height: 100%; margin-left: 4%; width: 10%; border-top: 1px solid var(--heavyborder); border-left: 1px dotted var(--heavyborder); border-right: 1px dotted var(--heavyborder); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; } .date > p { font-size: 0.7em; line-height: 0.1em; margin: 2px; } .date.today-highlight { background-color: rgba(0, 0, 0, 0.1); font-weight: bold; } .menu1 { height: 100%; width: 30%; border-top: 1px solid var(--heavyborder); display: flex; align-items: center; padding-left: 4%; white-space: nowrap; } .menu1 a { font-family: "acidic"; text-decoration: none; color: rgb(95, 95, 208); font-size: 18px; z-index: 9999; margin-top: 5px; } .menu2 { height: 100%; width: 30%; border-top: 1px solid var(--heavyborder); display: flex; align-items: center; } .menu3 { height: 100%; width: 30%; border-top: 1px solid var(--heavyborder); border-right: 1px solid var(--heavyborder); display: flex; align-items: center; margin-right: 4%; } .scmarquee { width: 294px !important; margin: 22px -10px 20px; padding: 19px 0 19px; } .scmq1__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll 95s linear infinite; animation-direction: normal; } .scmq2__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; margin-top: 2px; animation: scroll 100s linear infinite; animation-direction: reverse; } .scmq1__content img, .scmq2__content img { width: 84px; } .grid-bg { background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 9px 9.5px; background-position: 0 -1.5px; border: 1px dotted rgb(216, 216, 216); height: 437px; width: 344px; position: fixed; margin: -437px 14.5px; } .notes { width: 92%; height: 88%; margin-top: 0; margin-left: 4%; margin-right: 4%; overflow: hidden; padding: 0.2em; position: relative; z-index: 999; } .notesline { position: fixed; top: 467px; left: 0; z-index: 9999; width: 307px; border-bottom: 1px solid var(--heavyborder); } .quote { height: 10%; display: flex; align-items: center; font-size: 1em; } .quote-author { height: 100%; width: 80%; padding-bottom: 12%; margin: 41px 0 0 -19px; } .corner-calendar { height: 92%; width: 21%; margin: 4%; margin-top: 6%; display: flex; flex-direction: column; } .calendar-wrapper { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; } .calendar { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; height: 100%; gap: 0; box-sizing: border-box; } .calendar > div { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 0.6em; overflow: hidden; } .current-week-border { position: absolute; border: 0.05em solid #666; border-radius: 1em; pointer-events: none; z-index: 0; box-sizing: border-box; } .today { font-weight: bold; } .prev { color: #666; } .saturday { color: #666; } .sunday { color: red; } .calendarframe { height: 101.5%; width: 104.9%; background: transparent; margin: -4px 0 0 -13px; } #calendar-cover { display: flex; flex-direction: column; align-items: center; margin: 35px 0 0 2px; } .scheader { position: absolute; margin: -39px 0 0 -220px; font-size: 0.9em; letter-spacing: -0.7px; } .scheader a { text-decoration: none; color: inherit; } .scheader span { cursor: url(../assets/items/select.png), pointer; } .month-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(16, auto); width: 92.4%; margin: -3px 0 21px -23px; max-width: 1200px; border: 0.05em solid var(--lightborder); } .month-grid:first-child { margin-top: -6px; } .month-grid:last-child { margin-bottom: -7px; } .day-block { border: none; outline: 0.001em solid var(--heavyborder); outline-offset: -0.05px; padding: 0.25rem; display: flex; background-color: #fff; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.089) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.089) 1px, transparent 1px); background-size: calc(100% / 10) calc(100% / 10); flex-direction: column; font-size: 0.8rem; height: 125px; overflow: hidden; position: relative; } .day-block .post-entry { overflow-y: auto; max-height: 100%; -webkit-overflow-scrolling: touch; } .day-block .post-entry::-webkit-scrollbar { display: none; } .weekday-label.saturday { color: blue; } .weekday-label.sunday { color: red; } .date-number { font-weight: bold; margin-bottom: 0.25rem; } .post-entry { white-space: pre-wrap; font-size: 0.75rem; line-height: 1.2; color: #333; padding: 0 2px 0; } .month-header { padding: 0; border: none; display: flex; flex-direction: column; font-family: sans-serif; } .month-banner { background-color: #88b9f8; color: white; display: flex; justify-content: space-between; align-items: flex-start; padding: 0.5rem; height: 49px; } .year-block { display: flex; flex-direction: column; font-size: 0.85rem; line-height: 1.1; } .western-year { font-weight: bold; } .japanese-year { font-size: 0.75rem; margin-top: 0.1rem; } .month-number { font-size: 2.7rem; font-weight: 300; line-height: 1; margin-top: -5px; } .month-name { background-color: white; color: #5f7085; padding: 0.27rem 0.5rem; font-size: 0.9rem; border: 1px solid #ccc; border-top: none; letter-spacing: 0.05em; font-family: MS PGothic; font-weight: bold; letter-spacing: -1px; } .date-number { font-family: sans-serif; font-weight: 100; } /* c-ephemera */ .grid-wrapper { display: grid; grid-template-columns: repeat(2, 143px); grid-auto-rows: 147px; grid-auto-flow: row dense; gap: 10px; padding: 10px; margin: -13px 0 0 -7px; width: calc(2 * 143px + 20px); height: calc(100vh - 50px); box-sizing: content-box; } .grid-cell { outline: 0.001em solid var(--heavyborder); outline-offset: -0.07px; background-color: #fff; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.089) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.089) 1px, transparent 1px); background-size: calc(100% / 6) calc(100% / 8); display: flex; flex-direction: column; justify-content: space-between; height: 150px; z-index: 100; position: relative; } .grid-cell:hover { z-index: 9999; } .cell-content:hover::-webkit-scrollbar { display: block; } .cell-content { flex: 1; font-size: 12px; overflow-y: auto; padding: 3px 5px 5px 5px; } .cell-banner a { text-decoration: none; color: inherit; } .cell-content::-webkit-scrollbar, .cell-banner::-webkit-scrollbar { display: none; } .cell-banner { background-color: #9bc4fa; font-family: sans-serif; font-size: 11.5px; border-bottom: 1px solid #7a7a7a; color: white; justify-content: space-between; padding: 4px; height: 44px; width: 143px; overflow-y: auto; } .celltag1, .celltag2, .celltag3, .celltag4, .celltag5, .celltag6 { position: absolute; cursor: url(../assets/items/select.png), pointer; z-index: 2; opacity: 0.9; transition: opacity 0.3s; } .celltag1:hover, .celltag2:hover, .celltag3:hover, .celltag4:hover, .celltag5:hover, .celltag6:hover { opacity: 1; } .celltag1 { bottom: 91px; right: 10px; width: 45px; height: 39px; background-image: url(../assets/items/F23.png); background-size: 45px; transform: rotate(2deg); } .celltag2 { bottom: 86px; right: 10px; width: 38px; height: 54px; background-image: url(../assets/images/K25.png); background-size: 38px; } .celltag3 { bottom: 85px; right: 9px; width: 54px; height: 49px; background-image: url(../assets/images/AK36.png); background-size: 55px; transform: rotate(2.5deg); } .celltag4 { bottom: 90px; right: 10px; width: 48px; height: 47px; background-image: url(../assets/images/F08.png); background-size: 48px; } .celltag5 { bottom: 99px; right: 5px; width: 56px; height: 20px; background-image: url(../assets/images/G04.png); background-size: 56px; transform: rotate(48deg); } .celltag6 { bottom: 91px; right: 10px; width: 47px; height: 45px; background-image: url(../assets/items/H09.png); background-size: 47px; } /* c-dictionary */ #cdsidebox { background-color: #fffef5; font-size: 17px; font-family: "Times New Roman"; margin: -5px 0 0 -12px; height: 438px; width: 374px; overflow-x: hidden; overflow-y: auto; padding: 0; position: relative; } #cdsidebox::-webkit-scrollbar { display: none; } #cdsidebox .day { height: 14.4%; display: flex; align-items: center; } .alphacon { width: 312px; height: 63px; font-size: 12px; padding: 9px 8px; position: absolute; overflow-y: auto; } .alphacon i { background-color: rgb(255, 226, 255); } .alphacon::-webkit-scrollbar { display: none; } /* c-memos */ .smtape { position: absolute; margin: 235px 0 0 158px; transform: rotate(5deg); z-index: 1002; } .scmempol { background: url(../assets/images/scrap/memos/0925.JPEG); background-size: contain; border: 1px solid #000; border-radius: 3px; height: 170px; width: 170px; filter: brightness(110%); position: absolute; margin: 248px 0 0 158px; padding: 9px; z-index: 1001; } .smhead { position: absolute; background: #ffffb4; border: 1px #000 solid; padding: 4px 40px 10px 30px; font-family: "Redaction"; font-size: 40px; filter: sepia(20%); font-weight: bold; letter-spacing: -1px; color: #fde5f8; z-index: 1001; text-shadow: 0px 0px 3px #00000022, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, -2px 2px 0px #8d6e68, -2px -2px 1px #8d6e68, -2px -2px 1px #8d6e68, 2px -2px 0px #8d6e68, -2px 2px 0px #8d6e68, -2px 1px 1px #8d6e68, -2px 4px 1px #8d6e68, 2px 2px 0px #8d6e68, 3px 4px 1px #00000022; } .smnote { position: absolute; background: url(../assets/backgrounds/bluenote.jpg); background-size: 270px 270px; border: 1px #000 solid; border-radius: 6px; filter: sepia(15%); height: 115px; width: 293px; padding: 51px 0 0 40px; font-family: "acidic"; font-size: 16px; color: rgb(95, 95, 208); z-index: 1000; } /* archive */ #arpostal { position: absolute; margin-left: 400px; margin-top: 35px; z-index: 90; pointer-events: none; } #arpostal img { height: 180px; } #artitle { width: 675px; border-bottom: 2px black solid; text-align: center; padding: 5px 0; font-family: "redaction"; font-size: 51px; font-weight: bold; -webkit-text-fill-color: #fff; -webkit-text-stroke: 0.01px #00f; } .arnav { width: 675px; border-bottom: 1px black solid; text-align: center; padding: 5px 0; font-family: "Times New Roman"; font-size: 16px; position: absolute; z-index: 220; } .arnav a:hover { background-color: var(--accent); color: #fff; } .arnav a { text-decoration: none; color: #000; } #arncont { display: flex; margin-bottom: -10px; padding-top: 2px; } #arleft { width: 200px; border-right: black 1px solid; margin: 30px 7px; padding-right: 8px; font-family: "Times New Roman"; } #arright { width: 485px; margin-top: 30px; padding-left: 2px; } .arheadline { margin: 7px -2px 0 0; border: 1px solid black; border-radius: 6px; width: 456px; padding: 3px; font-family: "Arial"; font-size: 14px; } .arheadline a { text-decoration: none; color: #000; } .arheadline a:hover { text-decoration: none; color: #00f; } #arrightright { display: flex; flex-direction: column; width: 350px; font-family: "Times New Roman"; font-size: 32px; letter-spacing: -1px; line-height: 24px; } #arright table { width: 456px; border-collapse: collapse; border: 1px solid black; } #arright table th { border: 1px solid black; } #arright table td { border: 1px solid black; padding: 8px; text-align: left; font-family: "Times New Roman"; } #arright td:first-child { width: 200px; } #arright a { text-decoration: none; } .inviscroll { overflow-y: auto; height: 300px; padding-bottom: 10px; } .inviscroll::-webkit-scrollbar { display: none; } #arnote { width: 113px; font-size: 15px; font-family: "Times New Roman"; margin-top: 4px; line-height: 18px; } #arlive { margin: -5px -7px; } #arlive img { height: 45px; } .arliveb { font-size: 31px; letter-spacing: -2px; } .arlives { font-size: 31px; letter-spacing: -2px; } #arlivenote { line-height: 15px !important; } .arls1 { margin: -26px 0 0; font-family: "Arial"; } .arls2 { margin: -26px 0 0; color: #bdbdbd; font-size: 11px; font-family: "Arial"; } #arlad { margin: 3px -1px; } #arlad img { height: 64px; } #artoast { margin: 8px 5px; } #artoast img { height: 200px; width: 338px; } .artoastb { margin: -1px 4px; } .arsectionhead { font-family: "Times New Roman"; font-size: 32px; margin-top: 6px; } .arsectionti { text-align: left; } .arsectiondesc { text-align: right; font-size: 13px; } .arbisectiond { text-align: right; padding: 3px; font-family: "Arial" !important; font-size: 14px; } /* index page */ main.index { margin-top: -15px; } #index-background { content: ""; position: fixed; top: -37px; left: -45px; right: -45px; bottom: 0; height: 642px; background: url(../assets/backgrounds/G3NNOtrbgAAqnJE.webp) center/cover; background-size: 650px; background-position: 1% 46.5%; background-blend-mode: overlay; filter: opacity(70%) saturate(150%); border: 1.5px solid #f4e0ec; border-radius: 22px; z-index: -9999; box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px #dadada; pointer-events: none; } #index-background::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 120deg, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 33%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2) 66%, rgba(255, 255, 255, 0) 69%, rgba(255, 255, 255, 0) 100% ); background-size: 300% 300%; opacity: 0.7; background-position: 0% 0%; pointer-events: none; overflow: hidden; border-radius: 15px; } @keyframes shine { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } .notice { font-family: "Arial"; font-size: 70px; font-weight: 700; letter-spacing: -1px; transform: rotate(2.8deg) scale(0.91); margin: 160px 0 0 -310px; border: 1px solid #000; background: #fff; width: 320px; text-align: left !important; padding: 0 8px 0; position: absolute; z-index: 992; } #innotice1 { font-weight: bold; font-size: 41px; margin-top: -2px; margin-bottom: -5px; } #innotice2 { font-weight: 100; font-size: 14px; margin-top: 5px; margin-bottom: 0; } #innotice3 { font-weight: 600; font-size: 13px; margin-top: 5px; margin-bottom: 0; } #innotice4 { font-weight: 800; font-size: 21px; margin-top: -5px; margin-bottom: 0; } #innotice5 { font-weight: 400; font-size: 44px; letter-spacing: -3px; margin-top: -4px; margin-bottom: -5px; } #innotice6 { font-weight: 100; font-size: 13px; margin-top: 5px; margin-bottom: 0; } #innotice7 { font-weight: 100; font-size: 13px; margin-top: 5px; margin-bottom: 3px; } .hl { border-bottom: 2px solid #000; width: 100%; } #doodle-marquee { background: url(../assets/backgrounds/grid.png) center/cover; border: 4px ridge #d7b999; border-radius: 10px; width: 350px; height: 68px; position: absolute; padding: 6px 16px 10px; margin: 395px 0 0 378px; z-index: 19; } .dmq_content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; animation: scroll 20s linear infinite; animation-direction: reverse; } #inpinkcircle { position: absolute; margin-left: 300px; margin-top: -50px; transform: rotate(-70deg); z-index: 0; } #inpinkcircle img { height: 330px; } .intable-section { width: fit-content; display: flex; justify-content: center; } .intable-section .inner { padding: 15px 15px 20px 17px; height: 350px; width: 420px; margin: 20px 0 0 -35px; } #innotebg { background: url(../assets/backgrounds/notebg.png); display: flex; flex-direction: column; height: 100%; border: 1.25px solid #8584ff; border-radius: 6px; display: block; box-sizing: border-box; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d); } #inyellowtape { position: absolute; margin-left: 680px; margin-top: -360px; z-index: 910; } #inyellowtape img { width: 190px; transform: rotate(22deg); } #inclip { position: absolute; margin-left: 425px; margin-top: -247px; z-index: 993; } #inclip img { transform: rotate(21deg); height: 81px; } #inblueswirl { position: absolute; margin-left: 670px; margin-top: -230px; z-index: 993; } #inblueswirl img { transform: rotate(-15deg); height: 80px; } #indonuts { position: absolute; margin-left: 570px; margin-top: -190px; z-index: 900; } #indonuts img { filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); height: 270px; } #invelope { position: absolute; margin-left: 277px; margin-top: -232px; transform: rotate(-0.8deg); z-index: 900; } #invelope img { border: 1px solid #000; height: 192px; } #inparent { position: absolute; left: -85px; top: -90px; z-index: 900; } #inparent img { height: 84px; border-radius: 6px; border: 1px solid #c4c4c4; box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px gainsboro; } #inbarcode { position: absolute; left: 56px; top: -92px; z-index: 900; } #inbarcode img { height: 86px; border-radius: 6px; border: 1px solid #c4c4c4; box-shadow: inset 0px -5px 5px -4px #dadada, 0px 0px 5px 0px gainsboro; } .modal { position: absolute; top: -16%; left: -10%; width: 120%; height: 100%; backdrop-filter: blur(6px); display: none; justify-content: center; align-items: center; z-index: 999; } #toggle:checked ~ .modal { display: flex; } .modal-content { max-width: 400px; margin-left: -10%; text-align: center; position: relative; padding: 0 110px; z-index: 20; display: inline-block; animation: bobbing 3s ease-in-out infinite; } #modal-warn { text-align: left; position: absolute; font-family: "Redaction"; filter: opacity(0.8); color: rgb(169, 6, 118); padding: 0 4px; font-size: 16px; height: 125px; width: 199px; overflow: auto; margin: -260px 0 0 55px; line-height: 19px; transform: rotate(-5.8deg); } #modal-warn::-webkit-scrollbar { display: none; } @keyframes bobbing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .modal-content img { filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #0000004d); height: 400px; margin-top: -90px; } .modalsig { height: 400px; margin-top: -90px; position: absolute; pointer-events: none; } .modalsig img { filter: none !important; height: 105px; margin-top: -70px; margin-left: 60px; position: absolute; pointer-events: none; } .close, .open { cursor: pointer; } .close { color: red; margin-left: -40px; } /* ddlc sticker */ .flexed { display: flex; flex-direction: row; justify-content: center; position: absolute; width: 95%; margin: 45px 20px 0 22px; z-index: 991; } .monika { background: url(../assets/images/monika1.webp) no-repeat; background-size: 100% !important; margin-right: -15px; margin-top: -3px; height: 119px; width: 84px; } .monika:hover { animation: monika 1600ms; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes monika { from { transform: rotate(0deg); content: url(../assets/images/monika2.webp); } to { transform: rotate(360deg); } } .natsuki { background: url(../assets/images/natsuki1.webp) no-repeat; background-size: 100% !important; margin-right: -15px; margin-top: 4px; height: 110px; width: 96px; } .natsuki:hover { background: url(../assets/images/natsuki2.webp); animation: natsuki 0.2s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes natsuki { 0% { transform: translate(0); content: url(../assets/images/natsuki2.webp); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); content: url(../assets/images/natsuki2.webp); } } .yuri { background: url(../assets/images/yuri1.webp) no-repeat; background-size: 100% !important; margin-right: -15px; height: 115px; width: 79px; } .yuri:hover { background: url(../assets/images/yuri2.webp); animation: yuri 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes yuri { 0%, 100% { transform: translateX(0); content: url(../assets/images/yuri2.webp); } 10%, 30%, 50%, 70% { transform: translateX(-5px); } 20%, 40%, 60% { transform: translateX(5px); } 80% { transform: translateX(8px); } 90% { transform: translateX(-8px); } } .sayori { background: url(../assets/images/sayori1.webp) no-repeat; background-size: 100% !important; height: 115px; width: 79px; } .sayori:hover { background: url(../assets/images/sayori2.webp); animation: sayori 0.9s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier; } @keyframes sayori { 0%, 100% { transform: translateX(0%); transform-origin: 50% 50%; content: url(../assets/images/sayori2.webp); } 15% { transform: translateX(-2px) rotate(-2deg); } 30% { transform: translateX(5px) rotate(8deg); } 45% { transform: translateX(-6px) rotate(-3.6deg); } 60% { transform: translateX(5px) rotate(2.4deg); } 75% { transform: translateX(-6px) rotate(-1.2deg); content: url(../assets/images/sayori2.webp); } } /* enter link */ .curved-text { font-size: 72px; font-family: "Spirit"; color: transparent; display: inline-block; margin: -90px 0 0 585px !important; transform: perspective(600px) rotateX(40deg); text-align: center; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); letter-spacing: 2px; z-index: 999; position: relative; } .curved-text a { text-decoration: none; color: inherit; } .curved-text span { display: inline-block; position: relative; background: linear-gradient(#fff, #ef91aa, #fff); background-clip: text; } .curved-text span:nth-child(1) { transform: rotate(63deg); left: 5px; top: -55px; } .curved-text span:nth-child(2) { transform: rotate(47deg); top: -6px; left: -15px; } .curved-text span:nth-child(3) { transform: rotate(30deg); left: -35px; top: 25px; } .curved-text span:nth-child(4) { transform: rotate(15deg); left: -46px; top: 40px; } .curved-text span:nth-child(5) { transform: rotate(3deg); left: -50px; top: 49px; } .curved-text span:nth-child(6) { transform: rotate(-20deg); left: -50px; top: 40px; } .curved-text:hover { filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px #2453d4) drop-shadow(1px 1px 0 #0000004d); transition: 0.2s ease; } /* 404 page */ #nfbiscuit { position: absolute !important; margin: 60px 0 0 -50px; z-index: 900; } #nfbiscuit img { transform: rotate(-8deg); height: 190px; } #nfclip, #nfyellowswirl, #nfyellowtape { position: absolute; z-index: 800; } #nfclip img { transform: rotate(-8deg); margin: 230px 0 0 290px; height: 100px; } #nfyellowswirl img { transform: rotate(45deg); margin: 70px 0 0 210px; height: 80px; } #nfyellowtape img { transform: rotate(-11deg); margin: 405px 0 0 -170px; height: 40px; width: 200px; } .nftable-section { width: fit-content; display: flex; justify-content: center; margin: 230px 0 0 50px !important; transform: rotate(3deg); } .nftable-section .inner { padding: 15px 15px 20px 17px; height: 170px; width: 415px; margin: 20px 0 0 -40px; } #nfnotebg { background: url(../assets/backgrounds/notebg.png); height: 100%; border: 1.25px solid #8584ff; border-radius: 6px; display: flex; justify-content: center; box-sizing: border-box; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 2px 2px #0000004d); } #error { font-size: 110px; font-family: "Spirit", cursive; display: inline-block; margin-top: 5px; text-align: center; background: -webkit-linear-gradient(#fff, #ef91aa, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(0 0 1px white) drop-shadow(1px 1px 0 #0000004d); letter-spacing: -2px; z-index: 901; } #counter { font-weight: bold; } /* frame link */ var mainFrame; var firstLoad = true; var updateTitle = true; var pageParam = "z"; var titlePrefix = ""; var hitCounterFunction = undefined; //Event to handle first page load - Also sets up the mainFrame window.addEventListener("DOMContentLoaded", (e) => { mainFrame = document.getElementById("mainframe"); mainFrame.addEventListener("load", updateHistory, false); setMainFrame(); }); //Event to handle back button presses window.addEventListener("popstate", function (e) { if (e.state !== null) { setMainFrame(); } }); //Checks to see if a page parameter exists and sets the mainframe src to that page. function setMainFrame() { let params = new URLSearchParams(window.location.search); let page = params.get(pageParam); if (page != null) { page = page.replace("javascript:", ""); // Security to stop url scripts mainFrame.src = page; } } //Updates the browser history with the current page, causing the URL bar to update async function updateHistory() { let title = titlePrefix + mainFrame.contentDocument.title; // Stops the page getting into an infinate loop reloading itself if (firstLoad) { firstLoad = false; if (updateTitle) { document.title = title; } if (hitCounterFunction != undefined) { hitCounterFunction(); } return; } history.replaceState({}, title, "?" + pageParam + "=" + mainFrame.contentWindow.location.pathname); if (updateTitle) { document.title = title; } //Save a hit - Optionally run this if a hit counter has been defined if (hitCounterFunction != undefined) { hitCounterFunction(); } } /* click + hover sounds */ var html5_audiotypes = { mp3: "audio/mpeg", mp4: "audio/mp4", ogg: "audio/ogg", wav: "audio/wav" }; function createsoundbite(sound) { var html5audio = document.createElement("audio"); if (html5audio.canPlayType) { for (var i = 0; i < arguments.length; i++) { var sourceel = document.createElement("source"); sourceel.setAttribute("src", arguments[i]); if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute("type", html5_audiotypes[RegExp.$1]); html5audio.appendChild(sourceel); } html5audio.load(); html5audio.playclip = function () { html5audio.pause(); html5audio.currentTime = 0; html5audio.play(); }; return html5audio; } else { return { playclip: function () { throw new Error("your browser doesn't support HTML5 audio unfortunately"); } }; } } var mouseoversound = createsoundbite("https://file.garden/ZxOOS50ya2Lt0FdH/snips/c23vyj.mp3"); var clicksound = createsoundbite("https://file.garden/ZxOOS50ya2Lt0FdH/snips/i9vbgs.mp3"); var popsound = createsoundbite("https://file.garden/ZxOOS50ya2Lt0FdH/snips/6l7okm.mp3"); /* next button */ /* 1-buttons */ const images = [ "assets/buttons/button3.gif", "assets/buttons/button2.gif", "assets/buttons/button.gif" ]; let currentIndex = 0; function nextImage() { currentIndex = (currentIndex + 1) % images.length; document.getElementById("sliderImage").src = images[currentIndex]; } /* 2-picrews */ const images2 = [ "assets/images/about/picrews/download20250801182440.png", "assets/images/about/picrews/download20250806132905.png", "assets/images/about/picrews/download20250806124555.png", "assets/images/about/picrews/download20250805212936.png", "assets/images/about/picrews/download20250806154856.png", "assets/images/about/picrews/download20251003174500.png", "assets/images/about/picrews/download20250806123729.png", "assets/images/about/picrews/download20250806133907.png", "assets/images/about/picrews/download20250806130636.png", "assets/images/about/picrews/download20250806135233.png", "assets/images/about/picrews/download20250105184336.png", "assets/images/about/picrews/download20250806140726.png", "assets/images/about/picrews/download20250806133606.png", "assets/images/about/picrews/download20250806160847.png", "assets/images/about/picrews/download20251003193048.png", "assets/images/about/picrews/download20250806131846.png", "assets/images/about/picrews/download20250806135717.png", "assets/images/about/picrews/download20250806124207.png", "assets/images/about/picrews/download20250101112706.png", "assets/images/about/picrews/download20250801182946.png", "assets/images/about/picrews/download20250806134643.png", "assets/images/about/picrews/1873485_ngkfiTzJ.png", "assets/images/about/picrews/download20250805210946.png", "assets/images/about/picrews/download20250805202945.png", "assets/images/about/picrews/download20250805204204.png", "assets/images/about/picrews/download20250805204216.png", "assets/images/about/picrews/download20250805200106.png", "assets/images/about/picrews/download20250805210255.png", "assets/images/about/picrews/download20250805192511.png", "assets/images/about/picrews/download20250805204209.png", "assets/images/about/picrews/tumblr_f43617c12f3da718e8c63da63ac9b1e6_4a437760_500.jpg", "assets/images/about/picrews/download20250805194914.png", "assets/images/about/picrews/download20250805193746.png", "assets/images/about/picrews/download20250805204941.png", "assets/images/about/picrews/download20250105170354.png", "assets/images/about/picrews/download20250105180445.png", "assets/images/about/picrews/download20250105173632.png", "assets/images/about/picrews/download20250200131128.png", "assets/images/about/picrews/download20251003212157.png", "assets/images/about/picrews/download20251003215616.png", "assets/images/about/picrews/my-meiker-1759335637882557.png", "assets/images/about/picrews/download20251004181327.png", "assets/images/about/picrews/download20251004133714.png", "assets/images/about/picrews/download20251004180419.png", "assets/images/about/picrews/download20251004002529.png", "assets/images/about/picrews/download20251004002043.png", "assets/images/about/picrews/download20240700201922.png" ]; const links2 = [ "https://picrew.me/en/image_maker/2112607", "https://picrew.me/ja/image_maker/2470419", "https://picrew.me/en/image_maker/19569", "https://picrew.me/en/image_maker/2300487", "https://picrew.me/en/image_maker/1549525", "https://picrew.me/en/image_maker/2321144/", "https://picrew.me/en/image_maker/2730397", "https://picrew.me/ja/image_maker/261388", "https://picrew.me/en/image_maker/2244143", "https://picrew.me/en/image_maker/1710941", "https://picrew.me/ja/image_maker/9971", "https://picrew.me/en/image_maker/2130282", "https://picrew.me/ja/image_maker/16079", "https://picrew.me/en/image_maker/606067", "https://picrew.me/en/image_maker/1679", "https://picrew.me/ja/image_maker/1413742", "https://picrew.me/en/image_maker/16952", "https://picrew.me/en/image_maker/285726", "https://picrew.me/en/image_maker/2212965/", "https://picrew.me/en/image_maker/365981", "https://picrew.me/en/image_maker/1996436", "https://picrew.me/en/image_maker/1873485", "https://picrew.me/ja/image_maker/173830", "https://picrew.me/en/image_maker/1506792", "https://picrew.me/en/image_maker/1643225", "https://picrew.me/en/image_maker/8654", "https://picrew.me/en/image_maker/1729225", "https://picrew.me/ja/image_maker/9889", "https://picrew.me/en/image_maker/610761", "https://picrew.me/en/image_maker/54076", "https://picrew.me/en/image_maker/549603", "https://picrew.me/en/image_maker/84797", "https://picrew.me/en/image_maker/1482749", "https://picrew.me/en/image_maker/2423166", "https://picrew.me/en/image_maker/2452633", "https://picrew.me/ja/image_maker/1904634", "https://picrew.me/en/image_maker/36849", "https://picrew.me/en/image_maker/1988752", "https://picrew.me/en/image_maker/1510232/", "https://picrew.me/en/image_maker/30472/", "https://meiker.io/play/15622/online.html", "https://picrew.me/en/image_maker/41709/", "https://picrew.me/en/image_maker/2546261/", "https://picrew.me/en/image_maker/258388/", "https://picrew.me/en/image_maker/1908798", "https://picrew.me/en/image_maker/257033", "https://picrew.me/en/image_maker/2406143" ]; let currentIndex2 = 0; function nextImage2() { currentIndex2 = (currentIndex2 + 1) % images2.length; document.getElementById("picrewImage").src = images2[currentIndex2]; document.getElementById("picrewLink").href = links2[currentIndex2]; } /* draggable elements */ $(function () { $(".draggable").draggable(); }); /* toggle windows */ document.addEventListener("DOMContentLoaded", (event) => { const showImages = document.getElementsByClassName("showimage"); const hideImages = document.getElementsByClassName("hideimage"); const toggleDivs = document.getElementsByClassName("toggle"); for (let i = 0; i < showImages.length; i++) { showImages[i].addEventListener("click", () => { toggleDivs[i].classList.remove("hidden"); }); hideImages[i].addEventListener("click", () => { toggleDivs[i].classList.add("hidden"); }); } }); /* hashtag toggle */ $(document).ready(function () { $("main .toggled").hide(); $("main.showall .toggled").show(); $("#togglenavi a").click(function () { $("main .toggled").hide(); var toggleId = $(this).attr("href").substr(1); $("." + toggleId).toggle(); }); if (window.location.hash) { var hash = window.location.hash.substring(1); $("main .toggled").hide(); $(".toggled." + hash).show(); } else { $("main .toggled").hide(); $(".toggled.home").show(); // or use your default class name window.location.hash = "#home"; // sets the visible hash in the URL } }); /* image toggle */ function filterByTag(tag) { const cells = document.querySelectorAll(".grid-cell"); cells.forEach(cell => { if (cell.dataset.tag === tag) { cell.style.display = "flex"; } else { cell.style.display = "none"; } }); } function showAll() { const cells = document.querySelectorAll(".grid-cell"); cells.forEach(cell => { cell.style.display = "flex"; });