| :root { |
| /* --primary: #7347d9ff; */ |
| --primary100: #cfbff1; |
| --secondary: #d947adff; |
| --secondary50: #fae2f0; |
| --darkbgaccent: #1a1622ff; |
| --darkbg: #121212ff; |
| --darkbgalpha: #121212f8; |
| } |
| |
| html { |
| min-height: 100%; |
| } |
| |
| body { |
| min-height: 100%; |
| |
| margin: 0; |
| padding: 0; |
| color: #fffdf3; |
| font-weight: 400; |
| font-family: "Inconsolata", monospace; |
| font-size: 20px; |
| line-height: 120%; |
| |
| background-color: var(--darkbgaccent); |
| } |
| |
| @media screen and (max-width: 1000px) { |
| body { |
| font-size: 18px; |
| } |
| } |
| |
| #ledsFloater { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| min-height: 100%; |
| overflow-x: hidden; |
| z-index: -11; |
| } |
| |
| #ledsWrapper { |
| float: left; /* oh god */ |
| width: 100%; |
| min-height: 100%; |
| } |
| |
| #leds { |
| width: max(60vw, 600px); |
| height: max(60vw, 600px); |
| transform: rotate(-15deg); |
| position: relative; |
| top: min(-10vw, -100px); |
| left: min(-10vw, -100px); |
| z-index: -10; |
| } |
| |
| #page { |
| max-width: 60rem; |
| margin: 6em auto 2em auto; |
| background-color: var(--darkbgalpha); |
| |
| display: flex; |
| flex-direction: column; |
| } |
| |
| @media screen and (max-width: 1000px) { |
| #page { |
| background-color: #121212f0; |
| } |
| } |
| |
| .about img { |
| width: 100%; |
| display: block; |
| margin: 0 auto; |
| } |
| |
| #top { |
| display: flex; |
| flex-direction: row; |
| flex-flow: row wrap; |
| height: 10em; |
| margin: 2em 0 1em 0; |
| justify-content: center; |
| } |
| |
| @media screen and (max-width: 1000px) { |
| #top { |
| margin: 1em 0 1em 0; |
| } |
| } |
| |
| #logo, |
| #logo > img { |
| height: 100%; |
| } |
| |
| @media screen and (max-width: 600px) { |
| #top { |
| height: 5em; |
| } |
| |
| #top .type { |
| font-size: 18px; |
| } |
| } |
| |
| #top .type { |
| max-width: 15em; |
| font-size: min(35px, 2.5vw); |
| margin-left: 1em; |
| line-height: 1; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| } |
| |
| #top .type h1 { |
| padding: 0 0 0.5em 0.2em; |
| font-family: "Comfortaa", sans-serif; |
| color: #fff; |
| text-shadow: 0 0 1px var(--secondary), 0 0 5px var(--secondary), |
| 0 0 20px var(--secondary); |
| font-size: 60px; |
| animation: neon ease-in-out 4s infinite alternate, blink 5s infinite; |
| } |
| |
| @keyframes neon { |
| from { |
| text-shadow: 0 0 1px var(--secondary), 0 0 3px var(--secondary), |
| 0 0 15px var(--secondary); |
| } |
| to { |
| text-shadow: 0 0 1px var(--secondary), 0 0 15px var(--secondary), |
| 0 0 40px var(--secondary); |
| } |
| } |
| @keyframes blink { |
| 0% { |
| opacity: 1; |
| } |
| 80% { |
| opacity: 1; |
| } |
| 81% { |
| opacity: 0.4; |
| } |
| 82.7% { |
| opacity: 0.4; |
| } |
| 83% { |
| opacity: 1; |
| } |
| 94% { |
| opacity: 1; |
| } |
| 95% { |
| opacity: 0.4; |
| } |
| 95.7% { |
| opacity: 0.4; |
| } |
| 96% { |
| opacity: 1; |
| } |
| } |
| |
| @media screen and (max-width: 1000px) { |
| #top .type h1 { |
| font-size: 40px; |
| } |
| } |
| |
| @media screen and (max-width: 600px) { |
| #top .type h1 { |
| font-size: 24px; |
| } |
| } |
| |
| #map { |
| height: 28em; |
| } |
| |
| #quicklinks { |
| font-size: 16px; |
| background-color: rgba(255, 255, 255, 0.05); |
| } |
| |
| @media screen and (max-width: 1000px) { |
| #quicklinks { |
| font-size: 14px; |
| } |
| } |
| |
| #quicklinks ul { |
| padding: 0; |
| margin: 0; |
| display: flex; |
| flex-direction: row; |
| flex-flow: row wrap; |
| justify-content: center; |
| font-family: "Comfortaa", sans-serif; |
| } |
| |
| #quicklinks ul li { |
| display: flex; |
| } |
| |
| #quicklinks ul li.left { |
| flex-grow: 1; |
| font-style: italic; |
| } |
| |
| #quicklinks a { |
| text-decoration: none; |
| padding: 0.8rem 1rem; |
| color: #fff; |
| } |
| #quicklinks a:hover { |
| color: #fff; |
| } |
| |
| #quicklinks li:not(.left) a:hover { |
| background-color: rgba(255, 255, 255, 0.05); |
| } |
| |
| .img-wrapper { |
| position: relative; |
| height: 0; |
| padding-bottom: 60%; |
| } |
| |
| .img-wrapper > img { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| left: 0; |
| object-fit: contain; |
| } |
| |
| #gallery-nav { |
| display: flex; |
| flex-direction: row; |
| padding: 0; |
| margin: 0; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| #gallery-nav > li { |
| margin: 0; |
| padding: 0; |
| } |
| #gallery-nav > li:hover { |
| background-color: var(--darkbgaccent); |
| } |
| #gallery-nav > li.active { |
| background-color: var(--secondary); |
| } |
| #gallery-nav > li > a { |
| display: block; |
| text-decoration: none; |
| padding: 0 15px; |
| height: 32px; |
| padding-top: 7px; |
| } |
| |
| .bottom { |
| display: flex; |
| flex-direction: column; |
| padding: 1em 1em 0 1em; |
| } |
| |
| @media screen and (max-width: 1000px) { |
| .bottom { |
| padding: 2em 1em 0 1em; |
| } |
| } |
| |
| .bottom .about { |
| padding: 1rem 2em 3rem 2em; |
| } |
| |
| @media screen and (max-width: 1000px) { |
| .bottom .about { |
| padding: 0rem 0em 1rem 0em; |
| } |
| } |
| |
| .bottom .about li + li { |
| margin-top: 0.5em; |
| } |
| |
| p { |
| text-align: left; |
| color: #eee; |
| } |
| |
| h2 { |
| margin-bottom: 0; |
| font-size: 26px; |
| display: inline-block; |
| font-family: "Comfortaa", sans-serif; |
| line-height: 1.1; |
| } |
| |
| h2:after { |
| content: " "; |
| display: block; |
| background-color: var(--secondary); |
| height: 0.15em; |
| width: 100%; |
| margin-top: 0.1em; |
| margin-left: 0.3em; |
| } |
| |
| @media screen and (max-width: 1000px) { |
| h2 { |
| margin: 0; |
| } |
| } |
| |
| * + h2 { |
| margin: 2rem 0 0 0; |
| } |
| |
| h2 + * { |
| margin: 1rem 0 0 0; |
| } |
| |
| h3 { |
| font-size: 20px; |
| } |
| |
| pre { |
| background-color: #141000; |
| padding: 1rem; |
| } |
| |
| a { |
| text-decoration: underline; |
| text-decoration-color: var(--primary100); |
| color: #fff; |
| } |
| |
| a:hover { |
| color: var(--primary100); |
| } |
| |
| b { |
| font-weight: 800; |
| } |
| |
| ul { |
| padding: 0 0 0 1em; |
| } |
| |
| @media screen and (max-width: 1000px) { |
| ul { |
| padding: 0; |
| } |
| } |
| |
| li { |
| list-style: none; |
| } |
| |
| li i { |
| font-size: 0.9em; |
| } |
| |
| #footer { |
| margin: 1rem 0 0 0; |
| font-size: 0.8rem; |
| opacity: 60%; |
| } |
| |
| .atlist { |
| display: inline; |
| list-style: none; |
| } |
| |
| .atlist li { |
| display: inline; |
| } |
| |
| .atlist li:after { |
| content: ", "; |
| } |
| |
| .atlist li:last-child:after { |
| content: "."; |
| } |