/* Root Variables */ :root { --font-weight: 350; --font-family: 'space-mono'; --bigger-font-weight: 700; --link-border-radius: 1000px; --page-max-width: 700px; --color-primary: #FF5053; --color-highlight: #FEF2FF; --color-accent-a: #B2AAFF; --color-accent-b: #6A5FDB; --color-accent-c: #29114C; --color-accent-d: #261A66; --color-accent-e: #190B2F; --color-background: #0F000A; } @font-face { font-family: 'pilowlava'; /*src: URL('../fonts/pilowlava/Fonts/webfonts/Pilowlava-Regular.woff2') format('woff2');*/ src: url('../fonts/pilowlava/Fonts/webfonts/Pilowlava-Regular.woff2') format('woff2'); } @font-face { font-family: 'spacegrotesk'; src: url('../fonts/space-grotesk-1.1.4/webfont/SpaceGrotesk-Regular.woff2') format('woff2'); } @font-face { font-family: 'space-mono'; src: url('../fonts/space-mono/SpaceMono-Regular.ttf') format('truetype'); } @font-face { font-family: 'uncut-sans'; src: url('../fonts/uncut-sans/Webfonts/UncutSans-Regular.woff2') format('woff2'); } /* General Styles */ body { background-color: var(--color-background); color: var(--color-accent-a); font-family: var(--font-family), monospace; font-weight: var(--font-weight); overflow-x: hidden; margin: 0; position: relative; height: 100%; } h1, p { margin: 0; } main { position: relative; z-index: 2; max-width: var(--page-max-width); margin: 0 auto; padding: 20px; /*filter: drop-shadow(0 0 2px var(--color-primary)) brightness(1);*/ } ::selection { color: var(--color-background); background: var(--color-primary); } /* 38c3 */ .blobs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Keep the container behind all content */ pointer-events: none; /* Prevent interaction */ overflow: hidden; } .blobs img { pointer-events: none; /* Ensure the images don't block anything */ will-change: transform; /* Improve performance for animations */ } .grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; /* Ensure the grid is behind the blobs */ display: grid; pointer-events: none; /* Prevent interaction */ opacity: 0.5; background-image: linear-gradient(var(--color-accent-e) 1px, transparent 1px), linear-gradient(90deg, var(--color-accent-e) 1px, transparent 1px); background-size: 60px 60px; /* Adjust the grid spacing */ background-color: var(--color-background); /* Base color for the grid */ } /* Header Styles */ header { text-align: center; width: max-content; margin: 0 auto; /*background-color: var(--color-background);*/ /*border: 1px var(--color-accent-e) solid;*/ } header .names { width: min-content; white-space: nowrap; } header h1, header p { text-align: left; font-size: 35px; color: var(--color-primary); font-family: pilowlava, monospace; } header p { font-family: space-mono, monospace; font-size: 25px; } header img { border-radius: 50%; max-width: 300px; padding: 0; } /* Description */ header, .description, .linkGroup, .timer, footer { background-color: rgba(15, 0, 10, 0.9); /*border: 1px var(--color-primary) solid;*/ border: 1px var(--color-accent-c) solid; } header, .description, .linkGroup, .timer { padding: 5px; } /* Links Styles */ h2 { width: 100%; font-size: 30px; margin: 0; color: var(--color-accent-a); font-family: pilowlava, monospace; @media only screen and (max-width: 480px) { text-align: center; /* slim */ margin: 10px auto; } @media only screen and (min-width: 480px) { text-align: center; /* wide */ margin: 0; } } .text-link::before { content: "["; } .text-link::after { content: "]"; } .text-link { color: var(--color-primary); text-decoration: none; position: relative; padding: 5px; white-space: nowrap; display: inline-block; } .text-link:hover { filter: drop-shadow(0 0 5px var(--color-primary)) brightness(1.02); top: -2px; } /* Links Container */ .links { padding: 0 0; } /* Link Group */ .linkGroup { margin: auto; @media only screen and (min-width: 480px) { display: flex; flex-wrap: wrap; /* wide */ } } .linkGroup * { color: var(--color-accent-a); border: none; } /* Link Styles */ .link { height: fit-content; position: relative; transition: top 100ms ease, filter 100ms ease; /* Added filter transition */ @media only screen and (max-width: 480px) { margin: 10px 5%; /* slim */ } @media only screen and (min-width: 480px) { padding: 5px; /* wide */ } } /* Button Styles */ .linkButton { font-weight: var(--bigger-font-weight); font-size: 25px; line-height: 25px; text-align: center; text-decoration: none; text-transform: lowercase; color: var(--color-background); background-color: var(--color-primary); display: block; box-sizing: border-box; padding: 10px 20px; border-radius: var(--link-border-radius); width: 100%; /* slim */ @media only screen and (min-width: 480px) { width: auto; /* wide */ padding: 5px 20px; } } .linkButton .icon { width: 25px; height: 25px; padding-right: 10px; padding-bottom: 2px; vertical-align: middle; } /* Default Hover Effect */ .hoverHighlight:hover { @media only screen and (min-width: 480px) { filter: drop-shadow(0 0 8px var(--color-primary)) brightness(1.1); top: -2px; } } .links:hover .hoverHighlight:not(:hover) { @media only screen and (min-width: 480px) { filter: brightness(0.8); } } /* Search Highlighting */ .highlightSearch { filter: drop-shadow(0 0 8px var(--color-primary)) brightness(1.1); z-index: 1; @media only screen and (min-width: 480px) { top: -2px; } } .notHighlightSearch { filter: brightness(0.5); @media only screen and (max-width: 480px) { display: none; } } .linkButton:active { transform: scale(0.95); top: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* Search Input Field Styles */ .fuzzysearch { margin: 10px auto; text-align: center; max-width: var(--page-max-width); } #link-search { background-color: var(--color-background); color: var(--color-accent-a); border: 2px solid var(--color-primary); border-radius: 50px; padding: 10px 15px; font-size: 16px; text-align: center; font-weight: var(--bigger-font-weight); width: 100%; max-width: 400px; /* Adjust width as needed */ /*box-shadow: 0 0 5px var(--secondary-color2);*/ transition: background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease; } #link-search::placeholder { color: var(--color-accent-a); opacity: 0.9; /* Placeholder text opacity */ } #link-search:focus::placeholder { color: var(--color-accent-e); opacity: 0.9; /* Placeholder text opacity */ } #link-search:focus { outline: none; background-color: var(--color-background); box-shadow: 0 0 10px var(--color-primary); border-color: var(--color-primary); color: var(--color-primary); } @media only screen and (max-width: 480px) { #link-search { padding: 8px 12px; max-width: 90%; /* Responsive width for small screens */ } } @media only screen and (min-width: 480px) { #link-search { padding: 10px 15px; } } /* Timers Styles */ .timer { } .timer p { @media only screen and (max-width: 480px) { margin-bottom: 20px; /* slim */ } } .timer p span { color: var(--color-primary); /*color: var(--color-primary);*/ text-decoration: none; } /* Footer Styles */ footer { text-align: center; }