/* FONT IMPORT */ @import url('https://fonts.cdnfonts.com/css/source-serif-4'); /* @import url('https://fonts.cdnfonts.com/css/trebuchet-ms-2'); */ /* _ __ |\ /|( ) __ |\ | \ //__\ |__ | \/ | | __ __ /__\ | \| \/| ___|| \| | | /__/__ | ___|| | | | | | | __/__/| | | 2025 - 2026 \__/ (_) \__/ */ /* -------------------------------------------------------- */ /* VARIABLES */ /* -------------------------------------------------------- */ /* Variables are used like this: var(--text-color) */ :root { /* Background Colors: */ --background-color: #141414; --content-background-color: #27282988; /* Text: */ --font: 'Source Serif 4', 'Trebuchet MS', sans-serif; --heading-font: 'Source Serif 4', 'Trebuchet MS', sans-serif; --font-size: 16px; /* Theme Settings: */ --margin: 16px; --padding: 20px; --border: 1px solid #d2feff; --round-borders: 16px; --sidebar-width: 200px; /* Text Colors: */ --text-colors: #a2d0d6; --link-color: #cafaf8; --link-color-hover: #d6b3d8; --link-color-active: #ffa6e6; /* Theme-related Colors: */ --accent: #ffa6e6; --gradientBottom: rgba(100, 131, 167, 0.219); --gradientTop: #54768398; } /* -------------------------------------------------------- */ /* GENERAL */ /* -------------------------------------------------------- */ /* LINKS */ a { text-decoration: none; } a, a:visited { color: var(--link-color); } a:active { color: var(--link-color-active); } a:hover { color: var(--link-color-hover); text-decoration: none; cursor: url('winterclick.png'), pointer; } a:focus { color: var(--link-color-hover); text-decoration: none; } /* -------------------------------------------------------- */ /* NAVIGATION */ .nav-padding { padding: 20px; } /* -------------------------------------------------------- */ /* BODY TAG */ body { cursor: url('wintercursor.png'), default; font-family: var(--font); font-size: var(--font-size); color: var(--text-colors); background: var(--background-color); background-image: url("darkwintermech.jpg"); display: flex; align-items: flex-start; justify-content: center; min-height: 100vh; margin: 0; padding: var(--margin); line-height: 1.2; } /* -------------------------------------------------------- */ /* GENERAL DECORATIONS */ ::selection { /* (Text highlighted by the user) */ background: rgba(39, 66, 92, 0.404); text-shadow: 1px 1px 4px var(--accent); } mark { /* Text highlighted by using the element */ text-shadow: 1px 1px 4px var(--accent); background-color: inherit; color: #a7dbca; } hr { color: var(--text-colors); } /* -------------------------------------------------------- */ /* LAYOUT */ /* -------------------------------------------------------- */ .layout { width: 1200px; display: grid; grid-gap: var(--margin); grid-template: "header header header" auto "leftSidebar main rightSidebar" auto "footer footer footer" auto / var(--sidebar-width) auto var(--sidebar-width); /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */ } main { grid-area: main; overflow-y: auto; padding: var(--padding); background: var(--content-background-color); border: var(--border); border-radius: var(--round-borders); } .splash-homepage { position: fixed; bottom: 20px; right: 20px; } /* -------------------------------------------------------- */ /* HEADER */ /* -------------------------------------------------------- */ header { grid-area: header; border-radius: var(--round-borders); margin-top: 5vw; font-size: 1.2em; text-shadow: 1px 1px var(--text-colors), -1px 1px var(--text-colors), 1px -1px var(--accent), -1px -1px var(--accent); color: var(--gradientTop); } .header-content { padding: var(--padding); } .header-title { font-family: var(--heading-font); font-size: 1.2em; font-weight: bold; text-align: right; } .header-image img { width: 100%; height: auto; filter: sepia(100%) grayscale(100%) hue-rotate(40deg) saturate(2.5) brightness(.8); transition: all ease .3s } .header-image img:hover { filter: grayscale(45%); transition: all ease .3s; } /* -------------------------------------------------------- */ /* NAVIGATION */ /* -------------------------------------------------------- */ nav { margin-bottom: 3em; display: flex; justify-content: center; } nav .sidebar-title { margin-bottom: 0.5em; } nav ul { margin: 0 -5px; padding: 0; list-style: none; user-select: none; } nav ul li { margin-bottom: 0; } nav>ul li>a, nav>ul li>strong { display: inline-block; } nav>ul li>a, nav>ul li>details summary, nav>ul li>strong { padding: 5px 10px; } nav>ul li>a.active, nav>ul li>details.active summary { font-weight: bold; text-align: center; } nav ul summary { cursor: pointer; } nav ul ul li>a { padding-left: 30px; } /* NAVIGATION IN HEADER */ header nav { margin-bottom: 0; } header nav ul { display: flex; flex-wrap: wrap; margin: 0; text-align: center; } header nav ul li { position: relative; text-align: center; } header nav ul li:first-child>a { padding-left: 0; text-align: center; } header nav ul li:last-child>a { padding-right: 0; text-align: center; } /* Subnavigation (Drop-Down): */ header nav ul ul { background: var(--content-background-color); display: none; position: absolute; top: 100%; left: 10px; padding: 0.5em; z-index: 1; border: var(--border); min-width: 100%; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); justify-content: center; } header nav ul li:hover ul, header nav ul li:focus-within ul { display: block; justify-content: center; } header nav ul li strong { color: var(--link-color); text-decoration: none; font-weight: normal; } header nav ul ul li a { display: block; padding-left: 0; padding-right: 0; } /* -------------------------------------------------------- */ /* SIDEBARS */ /* -------------------------------------------------------- */ aside { grid-area: aside; border: var(--border); border-radius: var(--round-borders); overflow: hidden; background: var(--sidebar-background-color); padding: var(--padding); color: var(--sidebar-text-color); } .left-sidebar { grid-area: leftSidebar; } .right-sidebar { grid-area: rightSidebar; } .sidebar-title { font-weight: bold; font-size: 1.2em; font-family: var(--heading-font); } .sidebar-section:not(:last-child) { margin-bottom: 3em; text-align: right; } .sidebar-section ul, .sidebar-section ol { padding-left: 1.5em; } .sidebar-section>*:not(p):not(ul):not(ol):not(blockquote) { margin-top: 10px; } /* Sidebar Blockquote: */ .sidebar-section blockquote { background: rgba(0, 0, 0, 0.1); padding: 15px; margin: 1em 0; border-radius: 10px; overflow: hidden; } .sidebar-section blockquote>*:first-child { margin-top: 0; } .sidebar-section blockquote>*:last-child { margin-bottom: 0; } /* Site Button: */ .site-button { display: flex; flex-direction: column; align-items: center; } .site-button textarea { font-family: monospace; font-size: 0.7em; } /* -------------------------------------------------------- */ /* FOOTER */ /* -------------------------------------------------------- */ footer { grid-area: footer; border: var(--border); border-radius: var(--round-borders); overflow: hidden; font-size: 0.75em; padding: 15px; display: flex; justify-content: center; text-align: center; margin-bottom: 5vw; } footer a, footer a:visited { color: var(--link-color); } footer a { text-decoration: none; } footer a:hover, footer a:focus { color: var(--link-color-hover); } /* -------------------------------------------------------- */ /* ACCESSIBILITY */ /* -------------------------------------------------------- */ /* please do not remove this. */ #skip-to-content-link { position: fixed; top: 0; left: 0; display: inline-block; padding: 0.375rem 0.75rem; line-height: 1; font-size: 1.25rem; background-color: var(--content-background-color); color: var(--text-color); transform: translateY(-3rem); transition: transform 0.1s ease-in; z-index: 99999999999; } #skip-to-content-link:focus, #skip-to-content-link:focus-within { transform: translateY(0); } /* -------------------------------------------------------- */ /* MOBILE RESPONSIVE */ /* -------------------------------------------------------- */ /* prevents overflow on smaller screens */ pre { overflow-x: auto; } /* CSS Code for devices < 800px */ @media (max-width: 800px) { body { font-size: 14px; } .layout { width: 100%; grid-template: "header" auto "main" auto "leftSidebar" auto "rightSidebar" auto "footer" auto / 1fr; /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */ } .left-sidebar { display: none; } .right-sidebar { display: none; } aside { border-bottom: 1px solid; padding: 9px; font-size: 0.9em; } nav { padding: 0; } nav>ul { padding-top: 0.5em; justify-content: center; } nav>ul li>a, nav>ul li>details summary, nav>ul li>strong { padding: 0.5em; } main { max-height: none; padding: 15px; } .images { flex-wrap: wrap; } .images img { width: 100%; } #skip-to-content-link { font-size: 1rem; } } /* -------------------------------------------------------- */ /* CONTENT */ /* -------------------------------------------------------- */ main { line-height: 1.5; } main a, main a:visited { color: var(--link-color); } main a:hover, main a:focus { color: var(--link-color-hover); text-decoration-style: wavy; } main p, main .image, main .full-width-image, main .two-columns { margin: 0.75em 0; } main ol, main ul { margin: 0.5em 0; padding-left: 1.5em; } main ol li, main ul li { margin-bottom: 0.2em; line-height: 1.3; } main ol { padding-left: 2em; } main blockquote { background: rgba(0, 0, 0, 0.1); padding: 15px; margin: 1em 0; border-radius: 10px; } main pre { margin: 1em 0 1.5em; } main code { text-transform: none; } main center { margin: 1em 0; padding: 0 1em; } main hr { border: 0; border-top: var(--border); margin: 1.5em 0; } /* HEADINGS: */ main h1, main h2, main h3, main h4, main h5, main h6 { font-family: var(--heading-font); margin-bottom: 0; line-height: 1.5; } main h1:first-child, main h2:first-child, main h3:first-child, main h4:first-child, main h5:first-child, main h6:first-child { margin-top: 0; } main h1 { font-size: 1.5em; } main h2 { font-size: 1.4em; } main h3 { font-size: 1.3em; } main h4 { font-size: 1.2em; } main h5 { font-size: 1.1em; } main h6 { font-size: 1em; } /* COLUMNS: */ .two-columns { display: flex; } .two-columns>* { flex: 1 1 0; margin: 0; } .two-columns>*:first-child { padding-right: 0.75em; } .two-columns>*:last-child { padding-left: 0.75em; } /* -------------------------------------------------------- */ /* CONTENT IMAGES */ /* -------------------------------------------------------- */ .image { display: block; width: auto; height: auto; max-width: 100%; } .full-width-image { display: block; width: 100%; height: auto; } .images { display: flex; width: calc(100% + 5px + 5px); margin-left: -5px; margin-right: -5px; } .images img { width: 100%; height: auto; padding: 5px; margin: 0; overflow: hidden; } /* -------------------------------------------------------- */ /* OTHERS */ /* -------------------------------------------------------- */ .section { border: dotted; border-radius: 1em; justify-content: center; align-items: center; text-align: center; padding: 3%; margin: 3%; } .scrollbox { max-height: 170px; overflow: scroll; } #cliques { max-height: 200px; overflow: scroll; } #fanlistings { max-height: 200px; overflow: scroll; flex-direction: row; justify-content: space-around; flex-shrink: 0; } /* -------------------------------------------------------- */ /* FALLING SNOWS */ /* -------------------------------------------------------- */ .initial-snow { position: static; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .initial-snow>* { font-size: 6px; color: white; position: fixed; top: -10vh; } @keyframes snowfall { 0% { transform: translate3d(var(--left-ini), 0, 0); } 100% { transform: translate3d(var(--left-end), 110vh, 0); } } .snow:nth-child(2n) { filter: blur(1px); font-size: 5px; } .snow:nth-child(6n) { filter: blur(2px); font-size: 5px; } .snow:nth-child(10n) { filter: blur(5px); font-size: 5px; } .snow:nth-child(1) { --size: 0.8vw; --left-ini: 0vw; --left-end: -1vw; left: 70vw; animation: snowfall 9s linear infinite; animation-delay: -1s; } .snow:nth-child(2) { --size: 0.2vw; --left-ini: -7vw; --left-end: 10vw; left: 65vw; animation: snowfall 15s linear infinite; animation-delay: -8s; } .snow:nth-child(3) { --size: 1vw; --left-ini: 6vw; --left-end: 6vw; left: 1vw; animation: snowfall 9s linear infinite; animation-delay: -7s; } .snow:nth-child(4) { --size: 0.2vw; --left-ini: -3vw; --left-end: 9vw; left: 88vw; animation: snowfall 14s linear infinite; animation-delay: -5s; } .snow:nth-child(5) { --size: 0.4vw; --left-ini: -2vw; --left-end: -9vw; left: 74vw; animation: snowfall 6s linear infinite; animation-delay: -4s; } .snow:nth-child(6) { --size: 0.2vw; --left-ini: 5vw; --left-end: 1vw; left: 35vw; animation: snowfall 6s linear infinite; animation-delay: -7s; } .snow:nth-child(7) { --size: 0.4vw; --left-ini: -2vw; --left-end: -1vw; left: 27vw; animation: snowfall 10s linear infinite; animation-delay: -8s; } .snow:nth-child(8) { --size: 1vw; --left-ini: -9vw; --left-end: -2vw; left: 69vw; animation: snowfall 8s linear infinite; animation-delay: -8s; } .snow:nth-child(9) { --size: 0.2vw; --left-ini: -1vw; --left-end: -5vw; left: 84vw; animation: snowfall 11s linear infinite; animation-delay: -6s; } .snow:nth-child(10) { --size: 0.2vw; --left-ini: 7vw; --left-end: -9vw; left: 82vw; animation: snowfall 10s linear infinite; animation-delay: -3s; } .snow:nth-child(11) { --size: 0.6vw; --left-ini: -2vw; --left-end: -1vw; left: 48vw; animation: snowfall 10s linear infinite; animation-delay: -1s; } .snow:nth-child(12) { --size: 0.2vw; --left-ini: 5vw; --left-end: 6vw; left: 39vw; animation: snowfall 15s linear infinite; animation-delay: -8s; } .snow:nth-child(13) { --size: 0.2vw; --left-ini: 6vw; --left-end: 5vw; left: 3vw; animation: snowfall 9s linear infinite; animation-delay: -8s; } .snow:nth-child(14) { --size: 0.8vw; --left-ini: -5vw; --left-end: -2vw; left: 49vw; animation: snowfall 11s linear infinite; animation-delay: -8s; } .snow:nth-child(15) { --size: 0.6vw; --left-ini: 10vw; --left-end: 4vw; left: 77vw; animation: snowfall 7s linear infinite; animation-delay: -4s; } .snow:nth-child(16) { --size: 0.8vw; --left-ini: -3vw; --left-end: 1vw; left: 86vw; animation: snowfall 14s linear infinite; animation-delay: -8s; } .snow:nth-child(17) { --size: 1vw; --left-ini: 6vw; --left-end: -7vw; left: 18vw; animation: snowfall 9s linear infinite; animation-delay: -6s; } .snow:nth-child(18) { --size: 1vw; --left-ini: -9vw; --left-end: 4vw; left: 64vw; animation: snowfall 13s linear infinite; animation-delay: -7s; } .snow:nth-child(19) { --size: 1vw; --left-ini: 2vw; --left-end: -7vw; left: 52vw; animation: snowfall 15s linear infinite; animation-delay: -9s; } .snow:nth-child(20) { --size: 0.4vw; --left-ini: 0vw; --left-end: 8vw; left: 5vw; animation: snowfall 8s linear infinite; animation-delay: -9s; } .snow:nth-child(21) { --size: 0.6vw; --left-ini: -9vw; --left-end: -2vw; left: 10vw; animation: snowfall 12s linear infinite; animation-delay: -3s; } .snow:nth-child(22) { --size: 0.8vw; --left-ini: -3vw; --left-end: -8vw; left: 54vw; animation: snowfall 11s linear infinite; animation-delay: -9s; } .snow:nth-child(23) { --size: 0.6vw; --left-ini: -7vw; --left-end: -8vw; left: 20vw; animation: snowfall 6s linear infinite; animation-delay: -3s; } .snow:nth-child(24) { --size: 0.4vw; --left-ini: 10vw; --left-end: -4vw; left: 68vw; animation: snowfall 10s linear infinite; animation-delay: -8s; } .snow:nth-child(25) { --size: 1vw; --left-ini: 3vw; --left-end: 5vw; left: 90vw; animation: snowfall 7s linear infinite; animation-delay: -9s; } .snow:nth-child(26) { --size: 1vw; --left-ini: -7vw; --left-end: 5vw; left: 71vw; animation: snowfall 13s linear infinite; animation-delay: -2s; } .snow:nth-child(27) { --size: 0.6vw; --left-ini: 9vw; --left-end: 4vw; left: 2vw; animation: snowfall 15s linear infinite; animation-delay: -5s; } .snow:nth-child(28) { --size: 1vw; --left-ini: -5vw; --left-end: 3vw; left: 23vw; animation: snowfall 12s linear infinite; animation-delay: -1s; } .snow:nth-child(29) { --size: 0.4vw; --left-ini: -2vw; --left-end: -1vw; left: 39vw; animation: snowfall 14s linear infinite; animation-delay: -9s; } .snow:nth-child(30) { --size: 0.6vw; --left-ini: -9vw; --left-end: -5vw; left: 76vw; animation: snowfall 10s linear infinite; animation-delay: -5s; } .snow:nth-child(31) { --size: 0.4vw; --left-ini: -5vw; --left-end: 3vw; left: 14vw; animation: snowfall 8s linear infinite; animation-delay: -5s; } .snow:nth-child(32) { --size: 0.2vw; --left-ini: 5vw; --left-end: -1vw; left: 86vw; animation: snowfall 10s linear infinite; animation-delay: -9s; } .snow:nth-child(33) { --size: 0.4vw; --left-ini: -3vw; --left-end: 10vw; left: 66vw; animation: snowfall 6s linear infinite; animation-delay: -6s; } .snow:nth-child(34) { --size: 1vw; --left-ini: -3vw; --left-end: 6vw; left: 75vw; animation: snowfall 14s linear infinite; animation-delay: -9s; } .snow:nth-child(35) { --size: 1vw; --left-ini: -6vw; --left-end: 7vw; left: 22vw; animation: snowfall 7s linear infinite; animation-delay: -5s; } .snow:nth-child(36) { --size: 1vw; --left-ini: 3vw; --left-end: 4vw; left: 10vw; animation: snowfall 11s linear infinite; animation-delay: -10s; } .snow:nth-child(37) { --size: 0.6vw; --left-ini: 2vw; --left-end: 10vw; left: 95vw; animation: snowfall 13s linear infinite; animation-delay: -6s; } .snow:nth-child(38) { --size: 0.8vw; --left-ini: 5vw; --left-end: 8vw; left: 34vw; animation: snowfall 9s linear infinite; animation-delay: -10s; } .snow:nth-child(39) { --size: 0.8vw; --left-ini: 4vw; --left-end: 0vw; left: 80vw; animation: snowfall 11s linear infinite; animation-delay: -2s; } .snow:nth-child(40) { --size: 0.8vw; --left-ini: 1vw; --left-end: -7vw; left: 45vw; animation: snowfall 11s linear infinite; animation-delay: -4s; } .snow:nth-child(41) { --size: 0.2vw; --left-ini: 9vw; --left-end: 10vw; left: 82vw; animation: snowfall 8s linear infinite; animation-delay: -2s; } .snow:nth-child(42) { --size: 1vw; --left-ini: 9vw; --left-end: -9vw; left: 22vw; animation: snowfall 10s linear infinite; animation-delay: -6s; } .snow:nth-child(43) { --size: 0.6vw; --left-ini: 5vw; --left-end: 8vw; left: 66vw; animation: snowfall 11s linear infinite; animation-delay: -1s; } .snow:nth-child(44) { --size: 0.6vw; --left-ini: -5vw; --left-end: -2vw; left: 75vw; animation: snowfall 12s linear infinite; animation-delay: -4s; } .snow:nth-child(45) { --size: 0.2vw; --left-ini: 0vw; --left-end: 3vw; left: 2vw; animation: snowfall 7s linear infinite; animation-delay: -5s; } .snow:nth-child(46) { --size: 0.2vw; --left-ini: 8vw; --left-end: -3vw; left: 94vw; animation: snowfall 8s linear infinite; animation-delay: -9s; } .snow:nth-child(47) { --size: 0.6vw; --left-ini: -6vw; --left-end: -9vw; left: 95vw; animation: snowfall 11s linear infinite; animation-delay: -4s; } .snow:nth-child(48) { --size: 0.2vw; --left-ini: -5vw; --left-end: 6vw; left: 34vw; animation: snowfall 10s linear infinite; animation-delay: -6s; } .snow:nth-child(49) { --size: 0.8vw; --left-ini: 4vw; --left-end: 8vw; left: 22vw; animation: snowfall 12s linear infinite; animation-delay: -10s; } .snow:nth-child(50) { --size: 0.2vw; --left-ini: -4vw; --left-end: 4vw; left: 100vw; animation: snowfall 14s linear infinite; }