/* FONT IMPORT */ @import url('https://fonts.cdnfonts.com/css/karma-2'); /* _ __ |\ | __ ( ) __ /__\ | \||__ /__\ | /__ | ___|| || \| ___| | by senrei 2026 __/| | || | | angelos charisteas fanlisting \__/ \__/ (_) */ /* -------------------------------------------------------- */ /* VARIABLES */ /* -------------------------------------------------------- */ /* Variables are used like this: var(--text-color) */ :root { /* Background Colors: */ --background-color: #241717; --content-background-color: #8baaaa2d; /* Text: */ --font: 'Karma', sans-serif; --heading-font: 'Karma', sans-serif; --font-size: 17px; /* Theme Settings: */ --margin: 20px; --padding: 29px; --border: 2px solid #97532cbb; --round-borders: 16px; --sidebar-width: 100px; /* Text Colors: */ --text-colors: #802907; --link-color: #9b4b2b; --link-color-hover: #708d94; --link-color-active: #708d94; /* Theme-related Colors: */ --accent: #e9fcf7; --gradientBottom: rgba(17, 45, 78, 0.219); --gradientTop: #54768398; } /* -------------------------------------------------------- */ /* GENERAL */ /* -------------------------------------------------------- */ /* LINKS */ a { text-decoration: none; cursor: crosshair; } a, a:visited { color: var(--link-color); } a:active { color: var(--link-color-active); } a:hover { color: var(--link-color-hover); text-decoration: bold; cursor: url('winterclick.png'), crosshair, auto; } 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("bg.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(204, 131, 14, 0.13); text-shadow: 1px 1px 4px rgb(250, 162, 0); } mark { /* Text highlighted by using the element */ text-shadow: 1px 1px 4px var(--accent); background-color: inherit; color: #725311; } 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: center; } .header-image img { width: 100%; height: auto; border-radius: 16px; } /* -------------------------------------------------------- */ /* 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 */ } 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: 1px; } .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 { width: auto; height: auto; max-width: 100%; align-content: center; } .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: 7%; margin: auto; } .scrollbox { max-height: 170px; overflow: scroll; }