v_isforvampyre/title> <style> :root { --light-gray: #f2f0f0; --gray: #e3e3e3; --dark-gray: #919191; --darker-gray: #545454; --logo-blue: #1D4ED8; --darker-blue: #1E40AF; --lighter-blue: #60A5FA; --even-lighter-blue: #BFDBFE; --lightest-blue: #DBEAFE; --red: #FF0000; --dark-orange: #ED0707; --light-orange: #f9c56c; --even-lighter-orange: #fcdbb8; --strange-yellow: #dbae2e; --green: #34D399; --light-green: #E6F8DD; --medium-green: #A0C99C; --dark-green: #059669; accent-color: #1D4ED8; accent-color: var(--logo-blue); } * { box-sizing: border-box; } html { line-height: 1.225; } html, body { margin: 0; padding: 0; } body { background-color: #e3e3e3; background-color: var(--gray); font-family: verdana, arial, sans-serif, helvetica; } .container { width: 810px; max-width: 100%; margin: 0 auto 10px; } .container.full-width { width: auto; } time.ago { opacity: 0; } .soon { opacity: 0.7; } details summary { cursor: pointer; user-select: none; } a { color: #1E40AF; color: var(--darker-blue); text-decoration: none; } a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active { color: #c00; text-decoration: underline; } p, ol li, ul:not(nav .links):not(footer .links) li { font-size: 0.875em; font-size: max(0.875em, 12px); } ol li ol li { font-size: 100%; } ul { padding-left: 20px; } nav { color: white; font-size: 72%; font-size: max(72%, 12px); } .nav-info { background: #f9c56c; background: var(--light-orange); color: black; padding: 12px 10px; font-weight: bold; } .nav-info p { margin: 0; } .nav-info.light { background: #fcdbb8; background: var(--even-lighter-orange); } nav .top { background: #1D4ED8; background: var(--logo-blue); padding: 15px 10px 14px 10px; display: flex; position: relative; } nav .top a { text-decoration: none; color: inherit; } nav .top a:hover { text-decoration: underline; } nav .top div { display: inline-block; vertical-align: top; } nav .top .left a { text-decoration: none; color: inherit; } nav .top .left img { margin: 0 0 0 6px; } nav .top .left .logo { width: 165px; height: 42px; } nav .top .left .logo.april-fools:hover { animation: rotate 6s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(-359deg); } } nav .top .left .christmas, nav .top .left .special-icon { height: 42px; width: auto; } nav .top .center { text-align: center; flex: 1; } nav .top .center form { margin-top: -2px; width: 100%; } nav .top .right { text-align: right; } nav .top .right .support-right { margin-top: 5px; } nav .links { background-color: #60A5FA; background-color: var(--lighter-blue); padding: 3.5px 16px; } nav .links .icon { vertical-align: -0.41em; } nav .links, footer .links { margin: 0; list-style: none; } footer .links { font-size: 0.875em; margin: 16px 0 5px 0; padding: 0; text-align: center; } nav .links li, footer .links li { display: inline-block; } nav .links li.active a { font-weight: bold; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { content: " | "; color: black; } nav .links li { min-height: 1.4em; } nav .links a { text-decoration: none; color: white; text-shadow: 0 0 7px #095DC3; /*to improve the color contrast*/ font-size: 0.98em; font-size: max(0.98em, 12px); } nav .links a:hover { text-decoration: underline; color: #040c5c; } nav .links .special a { color: #ffff33; } main { background: white; color: black; padding: 6px 0px; font-size: 80%; } main .left, main .right { padding: 10px; } footer { text-align: center; font-size: 70%; margin: 10px 0 10px; padding: 10px 5px; background-color: #e3e3e3; background-color: var(--gray); } footer img { display: inline-block; vertical-align: middle; } footer p { vertical-align: middle; margin: 10px 0 5px 0; font-size: 90%; } footer .copyright { font-size: 80%; text-decoration: underline; text-decoration-thickness: 0.5px; } .welcome { background: #34D399; background: var(--green); background-position: center center; background-size: cover; padding: 5px; margin: 0 0 10px 0; } .welcome img { margin: 5px auto; height: 35px; max-width: 100%; display: block; } .welcome.standalone { margin: 0 auto 15px auto; width: 300px; } .indie-box { outline: 1px solid #039; border: 8px solid var(--even-lighter-blue); margin: 20px 0 10px 0; padding: 5px 5px 15px 5px; text-align: center; font-weight: bold; } .indie-box p { margin: 8px 0 0 0; } .indie-box .more-details { font-size: 90%; font-weight: normal; } .indie-box .donate-link { display: block; } .indie-box .donate-btn { width: 135px; max-width: 100%; margin-top: 10px; aspect-ratio: 147/47; } .box { text-align: center; border: 1px solid #039; margin: 0 0 10px 0; padding: 5px 5px 15px 5px; color: #039; } .box.standalone { width: 300px; max-width: 100%; margin: 0 auto; } .box h4, .box p { margin: 0; padding: 0; } .box td.label { min-width: 61px; } .box label { color: black; } .box form table { margin-left: auto; margin-right: auto; max-width: 100%; } .box .remember td, .box .buttons td { padding-bottom: 8px; } .box .email td, .box .password td { text-align: right; } .box .email input, .box .password input { width: 100%; max-width: 100%; } .box .email td { padding-top: 8px; } .box .password td { padding-bottom: 8px; } .box .remember, .box .forgot { font-size: 80%; font-size: max(80%, 12px); } .box .remember label { vertical-align: top; } .box .forgot { float: right; text-align: right; font-weight: bold; display: block; } .box button { text-transform: uppercase; padding: 2px 5px; cursor: pointer; border-width: 1px; border-style: solid; } .login_btn { background: white; border-color: #B1B1B1 #1F1F1F #1F1F1F #B1B1B1; color: #4368B4; } .signup_btn, .login_btn.standalone { font-weight: bold; background: #ED0707; background: var(--dark-orange); border-color: #ff8282 #960303 #960303 #ff8282; color: white; } .login_btn.standalone, .signup_btn.standalone { width: 100%; } .home .new-people, .user-home .new-people, .home .spa { margin-right: 8px; } .invite-tip { font-size: 0.8em; display: inline-block; margin: 0; } .value-info .icon { height: 1.2em; width: 1.2em; vertical-align: -0.25em; margin-left: .3em; } .value-info p { text-align: right; } .value-info p:not(:first-child) { margin-top: 5px; } .value-info p:not(:last-child) { margin-bottom: 5px; } .new-people { border: 1px solid #f9c56c; border: 1px solid var(--light-orange); } .new-people .top { background-color: #f9c56c; background-color: var(--light-orange); overflow-wrap: break-word; word-break: break-word; } .new-people .top, .new-people .inner { padding: 4px 8px; } .new-people h4, .new-people p { margin: 0; padding: 0; } .new-people p { font-weight: bold; width: 100%; text-align: center; overflow-wrap: break-word; word-break: break-word; } .new-people.cool .inner { display: flex; overflow-x: auto; } .new-people .person { margin: 5px 10px; width: 80px; min-height: 100px; display: inline-block; align-self: flex-end; } .new-people .person img:not(.icon) { max-width: 80px; max-height: 80px; margin: 5px auto 0 auto; display: block; } .new-people .view-more { margin: 5px 10px; min-width: 80px; min-height: 100px; display: inline-block; display: flex; justify-content: center; align-items: center; } .spa { border: 2px solid #BFDBFE; border: 2px solid var(--even-lighter-blue); margin: 14px 0 3px 0; } .spa .heading { background: #BFDBFE; background: var(--even-lighter-blue); padding: 2px 7px; } .spa.orange { border: 2px solid #f9c56c; border: 2px solid var(--light-orange); } .spa.orange .heading { background: #f9c56c; background: var(--light-orange); } .spa .heading h4 { margin: 0; display: inline-block; } .spa:not(.specials) .inner { padding: 6px 5px 3px 5px; } .spa:not(.specials) .inner img { width: 100%; cursor: pointer; } .spa.specials .inner .details { min-height: 106px; margin-right: 0; } .user-home .spa.specials .inner .details { font-size: 97%; } .music .heading, .specials .heading, .bulletin-preview .heading, .blog-sub-preview .heading { background: #BFDBFE; background: var(--even-lighter-blue); padding: 5px 7px; margin: 10px 8px 10px 0; } .spa.specials .heading { margin: 0 0 5px 0; } .spa.specials .inner { padding: 6px 13px 10px 13px; } .user-home .specials:not(.spa) .heading, .user-home .bulletin-preview .heading, .user-home .blog-sub-preview .heading { margin: 25px 0 10px 0; } .user-home .specials.spa { margin-top: 25px; } .user-home .blog-sub-preview { margin-bottom: 18px; } .user-home .blog-sub-preview .blog-entries { padding: 0 7px; } .music .heading a.more, .specials .heading a.more, .friends .heading a.more, .new-people .top a.more, .bulletin-preview .heading a.more, .blog-sub-preview .heading a.more, .spa .heading .spa-info { float: right; margin-top: 1px; font-size: 80%; } .music .heading h4, .specials .heading h4, .new-people .top h4, .bulletin-preview .heading h4, .blog-sub-preview .heading h4 { margin: 0; font-size: 0.9em; display: inline-block; } .bulletin-preview table { margin-bottom: 15px; } .music .inner, .specials .inner { padding: 6px 15px 10px 15px; min-height: 120px; } .music .inner .cover, .specials .inner .image { float: left; margin: 0 20px 5px 0; display: block; } .music .inner .cover img, .specials .inner .image img { width: 110px; max-width: 100%; display: block; aspect-ratio: 1/1; } .specials .inner .image.tall img { width: auto; height: 110px; aspect-ratio: unset; } .music .inner .details, .specials .inner .details { margin: 0 7px 0 0; display: block; } .music .inner .details h4, .specials .inner .details h4 { margin: 2px 0 0 0; } .specials .inner h4.inner-heading { margin: 0 0 10px 0; } .music .inner .details h5, .specials .inner .details h5 { margin: 3px 0 0 0; } .music .inner .details p, .specials .inner .details p { margin: 7px 0 0 0; } .specials.big-img .inner { padding: 0; } .specials.big-img img { width: 100%; } .info-area { padding: 10px; width: 100%; } .info-box { border: 1px solid #1E40AF; border: 1px solid var(--darker-blue); background: #BFDBFE; background: var(--even-lighter-blue); padding: 5px 5px 30px 5px; position: relative; } .info-box:not(:last-child) { border-right-width: 0px; } .info-box p { font-size: 90%; font-size: max(90%, 12px); margin: 0; } .info-box h3 { color: #1E40AF; color: var(--darker-blue); margin: 0; margin-bottom: 5px; } .info-box .link { text-align: right; margin-top: 10px; position: absolute; bottom: 10px; right: 10px; } .info-box .link:not(a) { color: #c00; } .updates { padding: 0; margin: 0; list-style: none; } .updates li { margin: 0 0 10px 0; display: list-item; list-style-type: "»"; padding-inline-start: 1ch; } .profile h1 { font-size: 1.5em; margin: 0 0 10px 0; } .general-about .profile-pic { display: block; float: left; margin: 0 15px 8px 0; height: 160px; } .general-about .profile-pic img { max-width: 160px; max-height: 160px; } .general-about .details { display: block; } .general-about .details.below { width: 100%; display: inline-block; } .profile .mood { width: 100%; display: inline-block; } .profile .mood p { margin: 0 0 8px 0; } .profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions { width: 100%; border: 2px solid #60A5FA; border: 2px solid var(--lighter-blue); margin: 10px 0; } .setting-section { margin: 15px 0; } .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading { background: #60A5FA; background: var(--lighter-blue); color: white; padding: 2px 7px; } .profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .setting-section .heading h4, .statistics .heading h4 { margin: 0; display: inline-block; } .profile .contact .f-row { margin: 7px; font-weight: bold; font-size: 0.875em; } .profile .url-info { padding: 4px 7px; } .profile .url-info p { font-size: 100%; margin: 0; word-break: break-all; } .profile .url-info.view-full-profile { text-align: center; } table.details-table { width: 100%; } .details-table td:first-child { background: #BFDBFE; background: var(--even-lighter-blue); color: #1D4ED8; color: var(--logo-blue); font-weight: bold; width: 33%; } .details-table td { background: #DBEAFE; background: var(--lightest-blue); vertical-align: top; } .details-table.left-big td:first-child { width: unset; } .details-table.left-big td { width: 33%; } .details-table td p { margin: 0; overflow-wrap: break-word; word-break: break-word; } .details-table td * { max-width: 100%; } .profile .blurbs { margin: 20px 0; } .profile .blurbs .heading, .profile .friends .heading { background: #f9c56c; background: var(--light-orange); color: #ED0707; color: var(--dark-orange); padding: 2px 7px; } .blog-entry .comments .heading, .bulletin .comments .heading { padding: 10px 7px; border-top: 2px solid rgba(0, 0, 0, 0.4); margin-top: 10px; } .blog-category .right h2 { overflow-wrap: break-word; word-break: break-word; } .edit-link { font-size: 90%; } .edit-link.right-side { text-align: right; margin: 3px 5px 4px 5px; } .settings-sessions-table { margin: 10px 0 0 0; width: 100%; text-align: left; overflow-x: auto; white-space: nowrap; } .logout-btn, .blog-entry .kudos-btn { background: none !important; border: none; padding: 0 !important; cursor: pointer; user-select: text; text-decoration: none; color: #1E40AF; color: var(--darker-blue); } .logout-btn, .logout-form { color: white; display: inline-block; font-size: 100%; } .logout-btn { font-family: revert; } .logout-btn:hover, .logout-btn:active { color: inherit; text-decoration: underline; } .profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner, .setting-section .inner { padding: 7px; } .setting-section .inner p:last-child { margin-bottom: 0; } .profile .blurbs .section { margin-bottom: 14px; } .profile .blurbs .section h4 { margin: 0; color: #ED0707; color: var(--dark-orange); } .profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p { margin: 0 0 8px 0; } .profile .friends .person { width: 105px; display: inline-block; padding: 0 10px 15px 0; } .profile .friends .person p { color: #666666; font-weight: bold; width: 100%; overflow-wrap: break-word; word-break: break-word; font-size: 100%; text-align: center; } .profile .friends .person img:not(.icon) { max-width: 95px; max-height: 95px; display: block; margin: 0 auto; } .count { color: #D32626; } .comment-replies { padding: 0 5px; border: 5px solid white; margin-top: 10px; } .comment-reply { padding: 10px 5px; } .comment-reply:not(:first-child) { border-top: 1px solid black; } .comment-reply p { margin: 0; } table.comments-table, table.music-table, table.bulletin-table, table.forum-table, table.groups-table { width: 100%; overflow-wrap: break-word; word-break: break-word; } table.forum-table, table.groups-table, table.bulletin-table { border-collapse: collapse; border-spacing: 0; } .forum-table th, .forum-table td, .groups-table th, .groups-table td, .bulletin-table th, .bulletin-table td { border: 1px solid black; padding: 7px; } .forum-table th.subject, .forum-table td.subject, .groups-table th.name, .groups-table td.name { width: 100%; } .groups-table td.name { text-align: left; vertical-align: top; } .groups-table td.name p { margin: 3px 10px; } .forum-table th:not(.subject), .forum-table td:not(.subject), .groups-table th:not(.name), .groups-table td:not(.name) { width: auto; white-space: nowrap; } .comments-table p, .music-table p, .bulletin-table p, .forum-table p, .groups-table p { font-size: 100%; } .bulletin-table .user-info { width: 34%; } .forum-table .user-info { width: 70px; max-height: 70px; padding: 0; } .forum-table .user-info .profile-pic { max-width: 70px; max-height: 70px; vertical-align: bottom; /* to hide gap from link */ } .forum-table tr.topic-closed { opacity: 0.8; font-style: italic !important; } .forum-table th.subject, .forum-table td.subject { position: relative; } .forum-table .pinned { font-size: 0.8em; color: #332c25; margin-top: 2.4px; display: inline-block; font-weight: bold; font-style: italic; position: absolute; top: 2px; left: 4px; } .forum-table .pinned .icon { height: 1.3em; width: 1.3em; vertical-align: top; } .topic-closed-message { overflow: hidden; text-align: center; color: #545454; color: var(--darker-gray); } .topic-closed-message h5 { margin: 18px 0 0 0; font-weight: normal; } .topic-closed-message h3 { margin: 4px 0 27px 0; } .topic-closed-message a { color: black; } .groups-table .group-info { width: 90px; max-height: 90px; padding: 0; } .groups-table .group-info .group-pic { max-width: 90px; max-height: 90px; vertical-align: bottom; /* to hide gap from link */ } .bulletin-table p { margin: 5px 0; } .bulletin-table:not(.preview) .user-info p { margin: 0 0 5px 0; } .bulletin-table td.subject { width: 100%; } .bulletin-table td:not(.subject):not(.user-info) { white-space: nowrap; } .bulletin-table td { text-align: center; vertical-align: top; overflow-wrap: break-word; word-break: break-word; } .forum-table td, .groups-table td { text-align: center; overflow-wrap: break-word; word-break: break-word; } .forum-table td.reply-count, .groups-table td.member-count { font-size: 110%; } .comments-table td:first-child, .music-table td:first-child { background: #f9c56c; background: var(--light-orange); text-align: center; font-weight: bold; width: 38%; } .comments-table td, .music-table td { background: #fcdbb8; background: var(--even-lighter-orange); vertical-align: top; } .comments-table td:first-child img:not(.icon) { width: 90px; max-width: 100%; max-height: 200px; } .bulletin-table td:first-child img:not(.icon) { width: 80px; max-width: 100%; max-height: 150px; } .comments-table td pre, .music-table td pre { white-space: pre-wrap; } .comments-table td *, .bulletin-table td * { max-width: 100%; } .comments-table .report { font-size: 0.7em; float: right; margin: 8px 5px !important; } .comments-table .pinned { font-size: 0.8em; float: right; color: #332c25; margin-top: 2.4px; font-weight: bold; font-style: italic; } .comments-table .pinned .icon { height: 1.3em; width: 1.3em; vertical-align: top; } .music-table .cover { width: 140px; max-width: 100%; } .music-table .copyright { font-size: 58%; opacity: 0.8; } .music-table .music-button, .featured-playlist .music-button { text-decoration: none; } .music-table .music-button img, .featured-playlist .music-button img { width: 115px; max-width: 100%; display: inline-block; } .featured-playlist { width: 100%; background: #ffdcba; padding: 6px 10px; overflow: auto; margin-bottom: 10px; } .featured-playlist a { text-decoration: none; color: inherit; } .featured-playlist .sponsored { margin: -10px 0 5px 0; opacity: 0.5; font-size: 55%; } .featured-playlist h2, .featured-playlist h4 { margin: 5px 0; } .featured-playlist .text { float: left; margin: 10px 20px 10px 0; } .featured-playlist .music-button img { float: right; margin: 15px 0 0 0; width: 130px; } .notification-overview p { margin: 7px; font-weight: bold; } .notification-overview { border-bottom: 2px solid #60A5FA; border-bottom: 2px solid var(--lighter-blue); } .notifications-list form { display: inline-block; } .text-red, .text-red a { color: #ED0707; color: var(--dark-orange); } .text-green, .text-green a { color: #059669; color: var(--dark-green); } .text-yellow, .text-yellow a { color: #dbae2e; color: var(--strange-yellow); } .center-container { text-align: center; padding: 20px 10px 40px 10px; margin: 0 auto; } .center-container img { max-width: 100%; } .home-actions { background: #DBEAFE; background: var(--lightest-blue); font-weight: bold; } .home-actions .more-options { width: 100%; display: inline-block; padding: 0 5px; } .statistics { border: 1.4px solid black; text-align: center; font-weight: bold; width: 150px; max-width: 100%; margin: 15px 0; } .statistics .heading { background: #1E40AF; background: var(--darker-blue); color: white; padding: 2px 7px; } .user-home .top-row { margin-top: 10px; } .user-home .blog-preview h4 { margin: 0 0 10px 0; } .user-home .blog-preview p { overflow-wrap: break-word; word-break: break-word; } .user-home .new-people { margin: 14px 0; } .legal .changed h5 { margin: 20px 0 5px 0; } .legal .changed details { margin: 5px 0 20px 0; font-size: 0.8em; } .simple-container { margin: 0 auto 30px auto; width: 600px; padding: 0 8px; max-width: 100%; } .dash-container { margin: 10px 30px 30px 30px; } .dash-col { padding: 4px 10px; } .dash-col:first-child { padding-left: 0; } .dash-col:last-child { padding-right: 0; } .edit-info { background: #DBEAFE; background: var(--lightest-blue); border: 1px solid #60A5FA; border: 1px solid var(--lighter-blue); width: 100%; padding: 5px; overflow-wrap: break-word; word-break: break-word; } .error, .success, .info { background: #FF0000; background: var(--red); color: white; padding: 8px 5px; margin: 10px 0; } .success { color: black; background: #E6F8DD; background: var(--light-green); border: 1.5px solid #A0C99C; border: 1.5px solid var(--medium-green); } .info { color: black; background: #DBEAFE; background: var(--lightest-blue); border: 1.5px solid #60A5FA; border: 1.5px solid var(--lighter-blue); } .twofa-info { max-width: 400px; margin: 40px auto 10px auto; } .big_textarea { width: 100%; height: 170px; } .profile-info { border: 2px solid rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; padding: 15px 5px; margin-bottom: 10px; } .profile-info .inner { font-weight: bold; text-align: center; } .credits p, .about p { line-height: 145%; margin: 0 0 15px 0; } .credits h2, .credits h4, .about h2, .about h3 { margin: 15px 0 4px 0; } .ex { font-size: 0.7em; background: #545454; background: var(--darker-gray); opacity: 0.7; padding: 1px 5px; border-radius: 2px; color: #E8ECE9; font-weight: bold; margin: 0 2px 0 0; vertical-align: 2px; } .pagination { width: 100%; margin: 15px 0 5px 0; min-height: 20px; } .pagination .next { float: right; } .blog-entries .entry { background: #BFDBFE; background: var(--even-lighter-blue); padding: 8px 10px; margin: 0 0 15px 0; overflow-wrap: break-word; word-break: break-word; } .blog-entries .entry .publish-date { margin: 0; font-weight: bold; font-size: 0.7em; } .blog-entries .entry .pinned { float: right; } .blog-entries .entry .inner { padding: 5px 10px; } .blog-entries .entry .inner .title { margin: 4px 0 4px 0; } .blog-entries .entry .inner .title a { color: inherit; text-decoration: none; } .blog-entries .entry .inner .category { margin: 2px 0 8px 0; font-size: 0.75em; } .blog-entries .entry .inner p { margin: 6px 0; } .blog-entry .profile-pic img, .bulletin .profile-pic img { max-width: 110px; max-height: 110px; } .blog-preview p .pinned .icon { margin: 0 5px 0 0; height: 0.85rem; width: 0.85rem; vertical-align: -0.2em; } .blog-entry .content, .bulletin .content, .topic-box .content, .reply-box .content { padding: 0 10px 0 0; overflow: hidden; overflow-wrap: break-word; word-break: break-word; } .blog-entry .content p, .bulletin .content p, .topic-box .content p, .reply-box .content p { font-size: 1em; } .blog-entry .content pre, .bulletin .content pre, .topic-box .content pre, .reply-box .content pre { white-space: pre-wrap; } .blog-entry .content *, .bulletin .content *, .topic-box .content *, .reply-box .content * { max-width: 100%; } .blog-entry .title, .bulletin .title { margin: 3px 0 5px 0; overflow-wrap: break-word; word-break: break-word; } .groups-container h4, .edit-blog-entry h4, .bulletin .right h4 { margin: 3px 0 5px 0; overflow-wrap: break-word; word-break: break-word; } .edit-blog-entry input[type=text], .edit-blog-entry textarea, .edit-blog-entry .wysiwyg { width: 100%; margin: 10px 0; } #poll-options input[type=text] { width: 90%; margin: 6px 0; } a.poll-options-remove { cursor: pointer; } .edit-group textarea, .edit-group .wysiwyg { width: 100%; } .edit-group input[type=text], .edit-group textarea, .edit-group .wysiwyg { margin: 10px 0; } .wysiwyg_mode button { font-size: 0.95em; } div.wysiwyg { width: 100% !important; } .layout-description .wysiwyg { height: 200px; } .layout-description .wysiwyg iframe { min-height: 170px !important; } .edit-blog-entry textarea, .edit-group textarea { min-height: 300px; } .edit-blog-entry label, .edit-group label { font-weight: bold; } .group-category-label { font-size: 0.7em !important; } .username-box { /* https://stackoverflow.com/a/23086377 */ background-color: #ffffff; color: #545454; color: var(--darker-gray); padding: 4px 1px 3px 4px; border: 1px #888888 solid; font-size: 9pt; } .username-box input { margin: 0; } .edit-blog-entry .comments label { font-weight: normal; } .edit-blog-entry .publish, .edit-group .publish { min-height: 30px; margin: 15px 0 10px 0; } .category-list:not(.discover-groups) { padding: 20px 4px 4px 4px; } .category-list ul { list-style: none; padding: 0; margin: 10px 0; } .category-list li { margin-bottom: 5px; font-size: 0.9em; overflow-wrap: break-word; word-break: break-word; } .category-list.discover-groups ul { margin: 0 0 25px 0; } .category-list.discover-groups li { display: inline-block; margin-right: 17px; } .category-list.discover-groups li { display: inline-block; margin-right: 17px; } .group-right h1, .group-right .description { overflow-wrap: break-word; word-break: break-word; } .text-link { text-decoration: none; color: inherit; } .polls { flex: 1 1 0; height: 100%; overflow-y: auto; overscroll-behavior: auto; } .poll { background: linear-gradient(180deg, #fff, #e8e8e8); border: 1px solid #999b9b; border-radius: 2px; box-shadow: rgba(50, 50, 93, 0.15) 0px 2px 5px -1px, rgba(0, 0, 0, 0.21) 0px 1px 2px -1px; padding: 0 18px; position: relative; margin: 10px 20px 6px 20px; width: 90%; min-height: 35px; min-width: 30px; display: inline-block; } .poll h3 { margin: 12px 0; } .poll-container { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; margin-bottom: 20px; } .poll-container .poll-author { max-width: 55px; } .poll-container .poll-author p { text-align: center; margin: 0; word-break: break-word; } .poll-container .poll-author .pfp { max-width: 50px; } .poll-container-inner { display: flex; flex-direction: column; align-items: flex-start; position: relative; width: 90%; } .poll-container-inner .poll-footer { font-size: 85%; color: #686868; display: inline-block; margin: 0 24px 8px 24px; text-align: left; } .poll-container .poll::before { content: ""; position: absolute; width: 0px; height: 0px; border-left: 8px solid transparent; border-right: 8px solid #fafafa; border-top: 8px solid #fafafa; border-bottom: 8px solid transparent; filter: drop-shadow(-2.8px -1px #999b9b); left: -14px; top: 6px; } .poll-option { list-style: none; padding: 0; margin: 7px 0; } .poll-option input { margin-right: 2px; } @keyframes bgscroll { 0% { background-position: 0 center; } 50% { background-position: -999px center; } 100% { background-position: -0 center; } } .art_banner { background: url('https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/art_icons_banner.png'); background-repeat: repeat-x; color: #ecf2f9; text-align: center; animation: bgscroll 40s infinite linear; height: 50px; width: 100%; overflow: hidden; } .advent-info-link { text-decoration: none; color: inherit; } .advent-info { background: #EF4444; padding: 30px 5px; margin: 15px 0 10px 0; font-size: 1.4em; color: white; font-weight: bold; text-align: center; } .advent-grid a { text-decoration: none; color: inherit; } .advent-day-box { color: white; background: #EF4444; display: inline-block; width: 160px; height: 160px; max-width: 100%; padding: 5px; margin: 10px; font-weight: bold; font-size: 8em; } .advent-day-box.closed { background: #FCA5A5; cursor: not-allowed; } .email-verify-info, .account-info { margin: 10px 10px 3px 10px; } .account-info a { color: white; text-decoration: underline; } .invite-text { width: 100%; min-height: 90px; resize: vertical; font-size: 1.3em; } .invite-share-links a:hover { text-decoration: none; color: inherit; } .invite-share-links a:hover img { transform: scale(1.3); } .rss-list>li { font-size: 1.1em !important; margin-bottom: 8px; } .rss-list li ul li { margin-top: 4px; } .about-banner, .help-banner, .press-banner { background: #1D4ED8; width: 100%; padding: 15px; margin: 10px 0; text-align: right; min-height: 25px; color: white; } .about-banner a, .help-banner a, .press-banner a { color: inherit; text-decoration: none; } .about-banner .logo, .help-banner .logo, .press-banner .logo { margin: 0 0 0 auto; display: inline-block; width: auto; } .about-banner .logo img, .help-banner .logo img, .press-banner .logo img { width: 300px; max-width: 100%; display: inline-block; } .help-banner .logo img, .press-banner .logo img { width: 240px; } .help .content, .help .content p, .help .content ul, .help .content li, .press .content, .press .content p, .press .content ul, .press .content li { font-size: 1em; } .help .content, .press .content { margin-bottom: 35px; } .help h3 { margin: 20px 0 0 0; } .help .home.content ul { padding-left: 14px; } .help .home.content li { margin-bottom: 8px; } .shop-promo { border: 1px solid black; margin-bottom: 10px; width: 100%; } .shop-promo a { color: inherit; text-decoration: none; } .shop-promo img { max-width: 100%; } .shop-promo .middle { vertical-align: middle; text-align: center; } .shop-promo .sticker { margin: 10px 0 5px 10px; padding-right: 20px; } .sticker-banner { background: #1D4ED8; background: var(--logo-blue); padding: 2px 0 0 5px; cursor: pointer; margin: 0 0 10px 0; } .sticker-banner img { max-width: 100%; max-height: 55px; } .sticker-info, .admindash-info { text-decoration: none; } .sticker-info p, .admindash-info p { text-align: center; padding: 5px; font-size: 92%; } .shop .visit { font-weight: bold; font-size: 1.4em; } .shop .product { max-width: 100%; } .shop .product-img, .shop .supporter-info { width: 260px; max-width: 100%; } .shop .product-img-desc { margin: 0 0 20px 0; } .shop .product-img .saturate { animation: saturate 7s infinite; } @keyframes saturate { 0%, 100% { filter: saturate(0); } 50% { filter: saturate(5); } } .shop .shipping { background: #f9c56c; background: var(--light-orange); font-weight: bold; text-align: center; text-transform: uppercase; padding: 5px; font-size: 105%; } .shop .shipping img { display: inline-block; height: 1.4em; margin: 0 .05em 0 0; vertical-align: -0.3em; } .shop .how-much { margin: 14px 0 5px 0; } .shop .price-form input[type=radio] { margin-top: 8px; } .shop .price_input { font-size: 1.5em; padding: 3px 4px; width: 200px; } .shop .euro { font-size: 1.5em; } .shop .buy_button { font-size: 1.4em; } .shop .pay-buttons, .shop .buy-success { display: none; } .shop .chosen_price { text-align: center; margin: 8px 0 10px 0; } .rss-right { float: right; margin-top: -33px; } .news h1, .news ul { margin-bottom: 25px; } .news .rss-right { margin-top: -47px; } .brand h2 { margin: 25px 0 10px 0; } .brand h4 { margin-bottom: 5px; } .brand .logo { margin: 20px; max-width: 100%; width: 250px; } .brand .spacehey-icon { width: 90px; max-width: 100%; } .brand .color { min-height: 70px; width: 300px; max-width: 100%; background: #1D4ED8; background: var(--logo-blue); color: white; font-weight: bold; font-size: 2em; padding: 30px 0; text-align: center; } .manage-group-member { font-weight: normal !important; font-size: 0.7em; text-align: center; } .group-left .group-pic { max-width: 100%; max-height: 200px; width: 200px; } ul.group-actions { width: 100%; list-style: none; border: 2px solid #BFDBFE; border: 2px solid var(--even-lighter-blue); padding: 0; margin: 10px 0 6px 0; } ul.group-actions li { color: #1E40AF; color: var(--darker-blue); background: #BFDBFE; background: var(--even-lighter-blue); margin: 5px; padding: 6px 5px; text-align: center; font-weight: bold; } ul.group-actions li:hover { background: #DBEAFE; background: var(--lightest-blue); } ul.group-actions a { text-decoration: none; color: inherit; } .report-group { font-size: 0.7em; text-align: center; margin: 5px 0 5px 0; } .forum-container, .groups-container { margin: 0 auto 30px auto; width: 750px; padding: 0 8px; max-width: 100%; } .topic-container { margin: 8px 14px; } .topic-container .replies-headline { margin-bottom: 5px; } .topic-container .publish-date { font-size: 92%; } .topic-container .title { overflow-wrap: break-word; word-break: break-word; } .article .edit-info .author-details .publish-date { font-size: 80%; } .article .edit-info .author-details h4 { margin: 10px 0 5px 0; } .article .edit-info .author-details p { margin: 7px 0; } .topic-box { background: #DBEAFE; background: var(--lightest-blue); border: 1px solid #60A5FA; border: 1px solid var(--lighter-blue); margin-top: 15px; position: relative; } .topic-box .col, .reply-box .col { padding: 10px 10px 5px 10px; } .topic-box .m-col p:last-child, .reply-box .m-col p:last-child { margin-bottom: 5px; } .topic-info, .reply-info { padding: 5px; border-right: 3px solid white; font-size: 0.81em; overflow-wrap: break-word; word-break: break-word; } .topic-info h4, .reply-info h4 { margin: 8px 0; } .topic-info .profile-pic, .reply-info .profile-pic { width: 100px; max-width: 100%; } .reply-box { background: #fcdbb8; background: var(--even-lighter-orange); border: 2px solid #f9c56c; border: 2px solid var(--light-orange); margin-bottom: 10px; position: relative; } .topic-box .report, .reply-box .report { font-size: 0.7em; position: absolute; bottom: 4px; right: 10px; } .layout-screenshot-container { min-height: 150px; } .layout-screenshot { max-width: 100%; max-height: 380px; margin: 5px 0 0 0; } .profile-summary { width: 100%; border: 2px solid #60A5FA; border: 2px solid var(--lighter-blue); background: #DBEAFE; background: var(--lightest-blue); margin: 14px 0; font-weight: bold; min-height: 140px; } .profile-summary .profile-pic { height: 120px; float: left; padding: 0 14px 0 0; } .profile-summary .profile-pic img { max-width: 120px; max-height: 120px; } a.filter-active { font-weight: bold; } .private-profile h3 .icon { height: 1.2em; width: 1.2em; vertical-align: top; } .private-profile .profile-pic img { max-width: 100px; max-height: 100px; } .icon, .award img { display: inline-block; height: 1.4em; width: 1.4em; aspect-ratio: 1/1; margin: 0 .05em 0 .1em; vertical-align: -0.3em; color: rgba(0, 0, 0, 0); } .icon.verified { height: 0.9em; width: 0.9em; margin: 0 .02em 0 0; vertical-align: -0.06em; filter: drop-shadow(0px 0px 2px rgba(67, 131, 184, 0.2)); } .icon.emoji { user-select: text; height: 1.7em; width: 1.7em; vertical-align: -0.4em; margin: 0 0.03em 0 0.03em; filter: drop-shadow(0px 0px 0.7px rgba(0, 0, 0, 0.52)); } .verified-info[data-reason] { cursor: pointer; } .award { display: inline-block; margin: 5px 5px 0 0; font-weight: bold; font-size: 85%; } .award a { color: black; text-decoration: none; } .award img { height: 1.6em; width: 1.6em; } .supporter { color: #ED0707; color: var(--dark-orange); font-size: 90%; font-weight: bold; } .artproject_participant { color: #0096c2; font-size: 87%; font-weight: bold; } .supporter a, .artproject_participant a { text-decoration: none; color: inherit; } .nsfw img:not(.icon), img.nsfw { filter: blur(3px); } img.blur-hover { transition: all 0.5s; filter: blur(5px); } img.blur-hover:hover { filter: blur(0px); } .no-margin { margin: 0 !important; } .f-row { width: 100%; display: table; table-layout: fixed; } .f-col { display: table-cell; vertical-align: top; } @keyframes animated-bg-gradient { 0% { background-position: 0% 11% } 50% { background-position: 100% 90% } 100% { background-position: 0% 11% } } @keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } blink { animation-name: blink; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0); animation-duration: 2s; } .online { color: #0C8C00; font-weight: bold; font-size: 95%; } .online img { height: 1.5em; margin-right: 5px; animation-name: blink; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0); animation-duration: 2s; } .light { font-weight: normal; } .app-landing-row { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 35px; } .app-landing-col:first-child { width: 45%; } .app-landing-col:last-child { margin-bottom: 35px; padding: 10px; width: 60%; } .app-icon { border-radius: 22%; width: 67px; height: 67px; box-shadow: 0 0 20px 8px rgba(37, 99, 234, .2); } .download-btns { padding: 10px; } .download-btns img { width: 100%; padding: 5px; } .secondary-text { font-size: 80%; color: var(--darker-gray); } .app-phone-mockup { max-height: 500px; } #captcha { width: 300px; max-width: 100%; margin: 10px 0; border: 1px solid black; text-align: center; background: #f2f0f0; background: var(--light-gray); display: flex; flex-direction: column; } #captcha.center { margin-left: auto; margin-right: auto; } #captcha .heading { background: #1D4ED8; background: var(--logo-blue); padding: 2px 7px; color: white; width: 100%; position: relative; } #captcha .heading h4 { margin: 2px 0; display: inline-block; } #captcha .heading .help { color: #f2f0f0; color: var(--light-gray); position: absolute; top: 2px; right: 2px; } #captcha .inner { padding: 5px 15px; width: 100%; min-height: 120px; display: flex; flex-direction: column; justify-content: center; flex: 1; } #captcha p.msg { width: 100%; margin: 0; } #captcha p.msg.error-msg { color: #FF0000; color: var(--red); } #captcha p.msg.loading-msg { cursor: progress; } #captcha .inner h4 { margin-top: 8px; } #captcha .question { width: 100%; } #captcha .choices { display: flex; flex-direction: row; justify-content: space-between; margin: 5px 0 10px 0; } #captcha .choice_btn { width: 40px; height: 40px; border: 2px solid #545454; border: 2px solid var(--darker-gray); cursor: pointer; border-radius: 50%; aspect-ratio: 1/1; background-color: white; background-repeat: no-repeat; background-position: center center; background-size: cover; transition: all 0.4s ease; } #captcha .question_btn { border-radius: 0; border: 2px solid #059669; border: 2px solid var(--dark-green); cursor: default; pointer-events: none; padding: 3px; background-origin: content-box; } #captcha .choice_btn:hover, #captcha .choice_btn:active { border: 2px solid #FF0000; border: 2px solid var(--red); transform: scale(1.1); } #captcha .choice_btn.darken { filter: brightness(85%); } #captcha .question_seperator { display: inline-block; border-right: 1px solid black; height: 40px; margin: 0 5px; } @media(min-width: 30em) { /* DESKTOP */ .row { width: 100%; display: table; table-layout: fixed; } .col { display: table-cell; vertical-align: top; } .col.w-10 { width: 10%; } .col.w-15 { width: 15%; } .col.w-20 { width: 20%; } .col.w-25 { width: 25%; } .col.w-30 { width: 30%; } .col.w-40 { width: 40%; } .col.w-50 { width: 50%; } .col.w-60 { width: 60%; } .col.w-70 { width: 70%; } .col.w-75 { width: 75%; } .col.w-80 { width: 80%; } .col.w-90 { width: 90%; } .d-hide { display: none !important; } .home .col.left { background-image: url('https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/divider_o.png'); background-position: right -15px; background-repeat: repeat-y; } .row.middle-space .col:first-child { padding-right: 10px; } .row.middle-space .col:last-child { padding-left: 10px; } .groups-container .group-left { padding-right: 15px; } .groups-container .group-right { padding-left: 15px; } .topic-closed-message h3:before, .topic-closed-message h3:after { /* https://stackoverflow.com/a/14731123 */ background-color: #545454; background-color: var(--darker-gray); content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .topic-closed-message h3:before { right: 0.5em; margin-left: -50%; } .topic-closed-message h3:after { left: 0.5em; margin-right: -50%; } .article .edit-info .author-details .links a, .topic-box .links a { display: block; margin-bottom: 5px; } } @media(max-width: 30em) { /* MOBILE */ .m-row { width: 100%; display: table; table-layout: fixed; } .m-col { display: table-cell; vertical-align: top; } .m-hide { display: none !important; } .m-center { text-align: center !important; } nav .top { display: block; } nav.minimal-nav .top { display: flex !important; } nav .top .left { width: 100%; margin-bottom: 10px; } nav.minimal-nav .top .left { margin-bottom: 0; } nav .top .right { position: absolute; top: 8px; right: 8px; } nav .top .center { width: 100%; } nav .top .center form { display: flex; } nav .top .center .search-wrapper { flex: 1; } nav .top .center .search-wrapper input { width: calc(100% - 10px); max-width: 100%; } nav .links { text-align: center; padding: 3.5px 3.5px 5.5px 3.5px; } .info-box { border-right-width: 1px !important; } .info-box:not(:last-child) { border-bottom-width: 0px; } .home .new-people, .home .music .heading, .home .spa { margin-right: 0; } .user-home .spa.specials .inner .details { font-size: 100%; } .music .heading, .specials .heading, .bulletin-preview .heading, .blog-sub-preview .heading { margin-right: 0; } .statistics { width: 100%; } .statistics p { line-height: 1.4em; } .category-list:not(.discover-groups) { padding-top: 10px; } .category-list ul { width: calc(100% + 20px); margin: 10px 0 0 -10px; padding-left: 10px; display: flex; overflow-x: auto; } .category-list li { margin-right: 12px; word-break: normal; overflow-wrap: normal; white-space: nowrap } .blog-category .right h1, .blog-category .right h2 { margin-top: 0; } .shop .product-img, .shop .supporter-info { width: 100%; } .shop .product-img-desc { text-align: right; } .topic-info, .reply-info { border-right: none; border-bottom: 3px solid white; padding: 0; } .topic-info .m-col, .reply-info .m-col { padding: 5px; } .topic-info h4, .reply-info h4 { margin-top: 4px; } .article .edit-info .profile-pic, .article .edit-info .author-details { display: inline-block; vertical-align: top; } .article .edit-info .author-details { padding-left: 10px; width: calc(100% - 115px); /* full width minus the profile pic */ min-width: 145px; max-width: 100%; } .article .edit-info .author-details .links a:not(:last-child), .topic-box .links a { margin-right: 5px; } .article .edit-info .author-details .links a:last-child { display: block; margin-top: 5px; } .username-box { display: block; } .settings-sessions-table { display: block; } .forum-table th:last-child, .forum-table td:last-child { display: none; } .topic-closed-message h3 { font-style: italic; } .bulletin-table .comment-col { display: none; } .bulletin-table .time-col time { font-size: 80%; } ul.group-actions { margin: 0 4px 6px 4px; } .advent-day-box { width: calc(100% - 20px); } .app-landing-row { flex-direction: column-reverse; } .app-landing-col { width: 100% !important; } .dash-col { padding-left: 0; padding-right: 0; } #captcha .inner { padding: 5px 10px; } #captcha .choice_btn { width: 38px; height: 38px; } #captcha .question_seperator { height: 38px; } } @media(max-width: 17em) { /* SUPER-SMALL MOBILES (LIKE FEATURE-PHONES) */ nav .top { padding-top: 8px; } nav .top .left .logo { width: 99px; height: 25.2px; margin-left: 0; } nav .links { display: flex; overflow-x: auto; gap: 5px; padding-left: 8px; } nav .links li:not(:last-child)::after { display: ruby; } .music .inner, .specials .inner { padding: 4px 0 10px 0; min-height: 120px; } .music .inner .cover img, .specials .inner .image img { width: 40px; } } @supports(-webkit-touch-callout: none) { /* Safari on iOS */ input { /* set min font-size for inputs to 16px to avoid auto-zooming */ font-size: 100%; font-size: max(100%, 16px); } button:not(.signup_btn):not(.login_btn) { /* button text on ios is blue by default, make it black instead (like it should be) */ color: black !important; } } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; -webkit-text-size-adjust: 100% } body { margin: 0 } main { display: block } h1 { font-size: 2em; margin: .67em 0 } hr { box-sizing: content-box; height: 0; overflow: visible } pre { font-family: monospace, monospace; font-size: 1em } a { background-color: transparent } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b, strong { font-weight: bolder } code, kbd, samp { font-family: monospace, monospace; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } img { border-style: none } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 } button, input { overflow: visible } button, select { text-transform: none } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0 } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText } fieldset { padding: .35em .75em .625em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } progress { vertical-align: baseline } textarea { overflow: auto } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0 } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px } [type="search"]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } details { display: block } summary { display: list-item } template { display: none } [hidden] { display: none } </style> <div class="container">  <script> NekoType = "rose" </script> <h1 id="nl"> <script src="https://webneko.net/n20171213.js"></script><style type="text/css">#nl{display:none;}</style> <a href="https://webneko.net">Neko</a> </h1>  <main> <div class="row profile"> <meta itemprop="identifier" content="3514423"> <div class="col w-40 left"> <span itemprop="name"> <h1>wanillaberry</h1> </span> <div class="general-about"> <div class="profile-pic"> <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/nanapfp.jpg"> </div> <div class="details"> <p class="online"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/green_person.svg" aria-hidden="true" loading="lazy"> ONLINE! </p> </div> </div> <div class="mood"> <p> <b>Mood:</b> Cryptic and Machiavellian </p> </div>  <div class="contact"> <div class="heading"> <h4>Contacting wanillaberry</h4> </div> <div class="inner"> <div class="f-row"> <div class="f-col"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/add.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Add to Friends </div> <div class="f-col"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/award_star_add.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Add to Favorites </div> </div> <div class="f-row"> <div class="f-col"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/comment.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Send Message </div> <div class="f-col"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/arrow_right.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Forward to Friend </div> </div> <div class="f-row"> <div class="f-col"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/email.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Instant Message </div> <div class="f-col"> <img src="https://static.spacehey.net/icons/exclamation.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Block User </div> </div> <div class="f-row"> <div class="f-col"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/group_add.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Add to Group </div> <div class="f-col"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/flag_red.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Report User </div> </div> </div> </div>  <div class="url-info"> <b>My Whole Layout Will Break if I Remove This Box So I Am Using It to Imprison Slenderman</b> <center> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/slendy.gif"> </center> </div>  <div class="table-section"> <div class="heading"> <h4>wanillaberry's Interests</h4> </div> <div class="inner"> <table class="details-table" cellspacing="3" cellpadding="3"> <tbody> <tr> <td> <p>General</p> </td> <td> <p> IDK man, I never developed a sense of self. I am here because I HATEEEEE modern social media and how.... not social it truly is. I HATE influencers and ads and AMAZON STOREFRONTS!!! Democratise the web!! There is ZERO need for there to only be 6 websites on people's rotation. And all of those 6 being awful and soul-sucking and EVIL. The internet is all about the human desire to connect and learn, not be sold and sold to!! Anyway that's why I'm here. You don't actually need to know anything about me. I will not reduce my existence into a tiny little text box. If you're curious, get to know me and find out!!!!!!! </p> </td> </tr> <tr> <td> <p>Music</p> </td> <td> <p> Cool, underground, niche artists you've never heard of. </p> </td> </tr> <tr> <td> <p>Movies</p> </td> <td> <p> Horror films and modern day classic lit adaptations set in high school. </p> </td> </tr> <tr> <td> <p>Television</p> </td> <td> <p> Too much... TBC. </p> </td> </tr> <tr> <td> <p>Books</p> </td> <td> <p> Gothic lit, unpalatable feminism, and my diary which is a mix of both. </p> </td> </tr> <tr> <td> <p>Heroes</p> </td> <td> <p> I look to nobody but myself for inspiration. Except Batman. </p> </td> </tr> </tbody> </table> </div> </div> <div class="table-section"> <div class="heading"> <h4>wanillaberry's Links <br>(A Graveyard of Social Media I've Abandoned) </h4> </div> <div class="inner"> <table class="details-table" cellspacing="3" cellpadding="3"> <tbody> <tr> <td> <p> <a href="https://instagram.com/wanillaberryy" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/instagam.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Instagram </a> </p> </td> <td> <p> <a href="https://instagram.com/wanillaberryy">@wanillaberryy </a> </p> </td> </tr> <tr> <td> <p> <a href="https://twitter.com/wanillaberry" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/twitter.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Twitter </a> </p> </td> <td> <p> <a href="https://twitter.com/wanillaberry">@wanillaberry </a> </p> </td> </tr> <tr> <td> <p> <a href="https://www.youtube.com/@wanillaberry" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/youtube.png" class="icon" aria-hidden="true" loading="lazy" alt=""> YouTube </a> </p> </td> <td> <p> <a href="https://www.youtube.com/@wanillaberry" target="_blank">youtube.com/@wanillaberry </a> </p> </td> </tr> <tr> <td> <p> <a href="https://wanillaberry.tumblr.com/" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/tumblr.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Tumblr </a> </p> </td> <td> <p> <a href="https://wanillaberry.tumblr.com/" target="_blank">wanillaberry.tumblr.com </a> </p> </td> </tr> <tr> <td> <p> <a href="https://www.tiktok.com/@wanillaberry" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/custom_tiktok.png" class="icon" aria-hidden="true" loading="lazy" alt=""> TikTok </a> </p> </td> <td> <p> <a href="https://www.tiktok.com/@wanillaberry" target="_blank">@wanillaberry </a> </p> </td> </tr> <tr> <td> <p> <a href="https://open.spotify.com/user/315qh3kira6eyvjvbsigvt2epc5u" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/spotify.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Spotify </a> </p> </td> <td> <p> <a href="https://open.spotify.com/user/315qh3kira6eyvjvbsigvt2epc5u" target="_blank">Spotify </a> </p> </td> </tr> <tr> <td> <p> <a href="https://letterboxd.com/wanillaberry" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/custom_letterboxd.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Letterboxd </a> </p> </td> <td> <p> <a href="https://letterboxd.com/wanillaberry" target="_blank">@wanillaberry </a> </p> </td> </tr> <tr> <td> <p> <a href="https://linktr.ee/wanillaberry" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/custom_linktree.png" class="icon" aria-hidden="true" loading="lazy" alt=""> Linktree </a> </p> </td> <td> <p> <a href="https://linktr.ee/wanillaberry" target="_blank">@wanillaberry </a> </p> </td> </tr> </tbody> </table> </div> <center> <br> <div class="strawpoll-embed" id="strawpoll_ajnE1W3E0nW" style="height: 382px; max-width: 640px; width: 100%; margin: 0px auto; display: flex; flex-direction: column;"> <iframe title="StrawPoll Embed" id="strawpoll_iframe_ajnE1W3E0nW" src="https://strawpoll.com/embed/ajnE1W3E0nW" style="position: static; visibility: visible; display: block; width: 97%; flex-grow: 1;" frameborder="0" allowfullscreen="" allowtransparency="">Loading...</iframe> <script async="" src="https://cdn.strawpoll.com/dist/widgets.js" charset="utf-8"></script> </div> <a href="/room" target="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/enterroom.gif"> </a> </center> </div> </div> <div class="col right"> <div class="blurbs"> <div class="heading"> <h2> <a href="/sitemap">Click here for navigation while I redo my room page.</a> </h2> <h4> <a href="/changelog">And click here for the changelog, if you just want to see my latest updates.</a> </h4> </div> <div class="inner"> <div class="section"> <center> <br> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/mobile.gif" width="350"> <h2>This website requires JavaScript!</h2> <h3>Warning for flashing images, awful colour contrast and loud music.</h3> </center> <br> <p>Hello, and welcome to my little website! I'm not sure how you've managed to stumble upon it, but I hope you'll stay a while. Nearly a decade after I abandoned my last, I have decided to return to blogging. It is appealing, having a few pixels on the internet all to myself, my very own blog, rather than being constricted to a social media profile on which I feel simultaneously surveilled and ignored - a nobody in a sea of popularity contestants. Here, there exist no such constraints imposed by such an existence. I fancy that nobody will ever come across this insignificant website, and I will be at peace in my isolation. Or, perhaps it will be found, some years later, by a singular person who was looking for something else entirely, and they will find solace in relating to the words of a girl who no longer exists. Either way, I look forward to writing here, and building this blog up as some sort of forgotten time capsule. What I will fill it with, I have no clue.</p> <br> <center> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/gothicangelblingee.gif"> <br> <h2>Draw on My Blackboard!</h2> <p> <a href="/blackboards">Click here to view previous blackboards</a> </p> <iframe src="https://onlnbrd.com/b/DS3vsunE" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="400px" allowfullscreen=""></iframe> </center> <style> body { background: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/background.jpg) no-repeat center fixed; -webkit-background-size: cover } .logo { content: url(); } main { font-family: uset; color: red; background-color: black; border-color: red; border-style: dashed; } nav .top { background: transparent; } nav .links { background: rgba(0, 0, 0, 0.9); } .general-about img { -webkit-mask-image: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/mask.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } main:before { width: auto; margin-bottom: 25px; border: 1px solid #000; height: 150px; display: block; content: ""; background-image: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/header.gif); background-position: center center; background-size: cover; } #q, button { color: red; background-color: black; border: 1px solid red; font-family: inherit; } p, i, b, .count { color: red !important; } a, .profile .friends .person p, .logout-btn { color: red !important; text-decoration: underline !important; } .container { margin: 0 auto 0; } main { background: black; color: red; } .heading, .url-info { color: red !important; background: none; background-color: black !important; border: 2px solid red !important; } .inner { color: red !important; border: 2px solid red; border-top: none; } .profile-info { background-image: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/kittie.gif); background-position: center; background-size: cover; padding: 5px; border-radius: 8px; border: 2px solid red; border: 2px solid red; } .profile-info .inner { border: none; } .friends .inner { border-bottom: none; } #comments { border-bottom: 2px solid red; } .profile .contact, .profile .table-section, .home-actions { border: none !important; } .profile .contact.f-row:first-of-type { margin-top: 0px; padding-top: 7px; } .contact { background-image: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/gothzombie.jpg); background-repeat: no-repeat; background-attachment: scroll; Width: 300px; Height: 120px; } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { /* add to friends */ content: "✭" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorite */ content: "✭" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* send a message */ content: "✭" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* foward to friend*/ content: "✭" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */ content: "✭" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */ content: "✭" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add 2 group */ content: "✭" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report */ content: "✭" } .details-table { margin: 2px; } .details-table, td { border: 2px solid red; border-collapse: collapse; } td { color: red !important; background: none; background-color: black !important; } table.details-table { max-width: 98%; } .profile h1 { font-size: 20px; } footer p { color red !important; } .comments-table { color: red; border: none; border-radius: 8px; } footer { background-image: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/gothvampire.jpg); background-position: center; background-size: cover; border-radius: 8px; border: 2px solid red; } .general-about { border-radius: 8px; background: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/gothfairy.jpg); background-position: center; background-size: cover; padding: 5px; } body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/iwtvopening.gif); background-size: cover; background-repeat: no-repeat; animation: yourAnimation 4s ease 0s 1 normal forwards; pointer-events: none; } @keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } </style> <style> * { cursor: url(https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/cursor.png), auto !important; } </style> </div> <div class="friends"> <div class="heading"> <h4>wanillaberry's Friend Space</h4> </div> <div class="inner"> <p> <b>wanillaberry has 6 friends. </b> </p><p> <strong> Displaying 6 of 6 friends (View all) </strong> </p> <p></p> <div class="friends-grid"> <div class="person"> <p>Kellin <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/kellin"> </p></div> <div class="person"> <p>Sanya <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/sanya.webp"> </p></div> <div class="person"> <p>Leni <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/leni.webp"> </p></div> <div class="person"> <p>Kato <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/kato.png"> </p></div> <div class="person"> <p>Genesis <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/genesis.png"> </p></div> <div class="person"> <p>Harris_blood_suckr <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/harris.png"> </p></div> </div> </div> </div> <div class="friends" id="comments"> <div class="heading"> <h4>wanillaberry's Friends Comments</h4> </div> <div class="inner"> <p> <strong> Displaying 4 of 4 comments (View all) </strong> </p> <table class="comments-table" cellspacing="0" cellpadding="3" bordercolor="ffffff" border="1"> <tbody> <tr> <td> <p>Genesis</p> <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/genesis.png"> </td> <td> <p> <b>8th April 2025</b> </p> <p>If Light Yagami has a million haters, then I am one of them. If Light Yagami has ten haters, then I am one of them. If Light Yagami has only one hater then that is me. If Light Yagami has no haters, then that means I am no longer on earth. If the world is accepting Light Yagami, then I am against the world.</p> <p class="report"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/flag_red.png" class="icon" aria-hidden="true" loading="lazy"> Report </p> </td> </tr> <tr> <td> <p>Harris_blood_suckr</p> <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/harris.png"> </td> <td> <p> <b>8th April 2025</b> </p> <p>I think we as a society should be more biphobic</p> <p class="report"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/flag_red.png" class="icon" aria-hidden="true" loading="lazy"> Report </p> </td> </tr> <tr> <td> <p>Kato</p> <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/kato.png"> </td> <td> <p> <b>8th April 2025</b> </p> <p> "Racism is bad!" </p> <p class="report"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/flag_red.png" class="icon" aria-hidden="true" loading="lazy"> Report </p> </td> </tr> <tr> <td> <p>Kellin</p> <img class="pfp-fallback" src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/kellin"> </td> <td> <p> <b>28th February 2025</b> </p> <p> i am experiencing misery previously only known by will graham </p> <p class="report"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/flag_red.png" class="icon" aria-hidden="true" loading="lazy"> Report </p> </td> </tr> </tbody> </table> </div> </div> <center> <h2>My Web Neighbourhood!</h2> <div style="height:300px;width:445px;border:2px solid red; overflow:auto;"> <h3>My Button!</h3> <p> Thank you so much to Sanya for making this! It is my favourite thing in the whole wide world!</p> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/wanillaberry.gif"> <h3>My Web Neighbours!</h3> <a href="https://badgraph1csghost.neocities.org/" targer="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/badgraph1csghost.png"> </a> <a href="https://sanyation.neocities.org/" targer="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/sanyation.gif"> </a> <a href="https://mazapandust.com//" targer="_blank"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/mazcomic.gif"> </a> <h3>My Webrings!</h3> <style> #sanyation * { background-color: deeppink !important; color: aliceblue !important; } </style> <div style="width: 135px; /* <- Set any width you'd like! */"> <iframe style="border: none; width: 100%" src="https://neocities.jeith.com/wii-webring.html?site=https://wanillaberry.neocities.org&variant=standard"></iframe> </div> <br> <div id="sanyation"> <table> <tbody><tr> <td class="webring-prev"><a href="https://sanyation.neocities.org/other">previous</a></td> <td class="webring-info">This site is part of the SANYATION webring<br> <span class="webring-links"> <a href="javascript:void(0)" onclick="randomSite()">random</a> | <a href="https://sanyation.neocities.org/Webring/webring">webring index</a> | <a href="https://garlic.garden/onionring/">onionring</a></span></td> <td class="webring-next"><a href="https://sanyation.neocities.org/other">next</a></td> </tr> </tbody></table> <script type="text/javascript" src="https://sanyation.neocities.org/Webring/onionring-variables.js"></script> <script type="text/javascript" src="https://sanyation.neocities.org/Webring/onionring-widget.js"></script> </div> </div> </center> <br> <center> <h2>Chatbox!</h2> </center> <iframe src="https://www5.cbox.ws/box/?boxid=953631&boxtag=5angAA" width="100%" height="200" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe> </div> </div> <div style="float: ; max-height: 300px; position: fixed; left: 1px; bottom: 9px; z-index: 200;"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/jeff.gif" width="300" height="300"> </div> <div id="bloodydrip"> <style> #bloodydrip { background: url("https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/blooddrip"); background-position: center; background-repeat: repeat; width: 600%; height: 24px; min-width: 1720px; overflow: hidden; position: fixed; top: -0.9px; left: 0px; z-index: 100; pointer-events: none; opacity: 1; } </style> </div> <div class="snowflakes"> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> <div class="snowflake"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/batgif"> </div> </div> <style> @-webkit-keyframes snowflakes-fall { 0% { top: -10% } 100% { top: 100% } } @-webkit-keyframes snowflakes-shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0) } 50% { -webkit-transform: translateX(80px); transform: translateX(80px) } } @keyframes snowflakes-fall { 0% { top: -10% } 100% { top: 100% } } @keyframes snowflakes-shake { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(80px) } } .snowflake { position: fixed; top: -10%; z-index: 9999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; -webkit-animation-name: snowflakes-fall, snowflakes-shake; -webkit-animation-duration: 10s, 3s; -webkit-animation-timing-function: linear, ease-in-out; -webkit-animation-iteration-count: infinite, infinite; -webkit-animation-play-state: running, running; animation-name: snowflakes-fall, snowflakes-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running } .snowflake:nth-of-type(0) { left: 1%; -webkit-animation-delay: 0s, 0s; animation-delay: 0s, 0s } .snowflake:nth-of-type(1) { left: 10%; -webkit-animation-delay: 1s, 1s; animation-delay: 1s, 1s } .snowflake:nth-of-type(2) { left: 20%; -webkit-animation-delay: 6s, .5s; animation-delay: 6s, .5s } .snowflake:nth-of-type(3) { left: 30%; -webkit-animation-delay: 4s, 2s; animation-delay: 4s, 2s } .snowflake:nth-of-type(4) { left: 40%; -webkit-animation-delay: 2s, 2s; animation-delay: 2s, 2s } .snowflake:nth-of-type(5) { left: 50%; -webkit-animation-delay: 8s, 3s; animation-delay: 8s, 3s } .snowflake:nth-of-type(6) { left: 60%; -webkit-animation-delay: 6s, 2s; animation-delay: 6s, 2s } .snowflake:nth-of-type(7) { left: 70%; -webkit-animation-delay: 2.5s, 1s; animation-delay: 2.5s, 1s } .snowflake:nth-of-type(8) { left: 80%; -webkit-animation-delay: 1s, 0s; animation-delay: 1s, 0s } .snowflake:nth-of-type(9) { left: 90%; -webkit-animation-delay: 3s, 1.5s; animation-delay: 3s, 1.5s } .snowflake:nth-of-type(10) { left: 25%; -webkit-animation-delay: 2s, 0s; animation-delay: 2s, 0s } .snowflake:nth-of-type(11) { left: 65%; -webkit-animation-delay: 4s, 2.5s; animation-delay: 4s, 2.5s } </style> <div style="float: ; max-height: 200px; position: fixed; right: 25px; top: 6px; z-index: 300;"> <img src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/skeleton.gif" height="360"> </div> <style></style> </div></div></main> <footer> <p> Footer </p> </footer> <audio autoplay="" controls="" id="myAudio" loop="" style="width:.1%;height:.1%" volume="0.3"> <source src="https://file.garden/Z_RjuJFUvSUt-EAj/WEBSITE/HOMEPAGE/nin_discipline.mp3"> </audio> <script> document.addEventListener("visibilitychange", function() { document.hidden ? document.getElementById("myAudio").pause() : document.getElementById("myAudio").play() }) </script> </div> <div><div id="layerNeko0" style="position: absolute; clip: rect(0px, 32px, 32px, 0px); visibility: visible; left: 0px; top: 0px; z-index: 1000;"><a ondblclick="document.location.href="https://webneko.net"" href="https://webneko.net" onmouseover="aNekos[0].message();return true" onmouseout="window.status = """ onclick="aNekos[0].active = !aNekos[0].active;return false;" onfocus="this.blur()"><img border="0" name="imageNeko0" src="https://webneko.net/rose/sleep2.gif"></a></div></div> </html>