html { background: #fafafa; } html.night { background: #333; } html.ready, html.ready body, html.ready a { transition: 0.2s all; } body { font-family: "Roboto", sans-serif; display: flex; flex-direction: column; min-height: 100vh; margin: 0 0 0 0; } html.night body { color: white; } #main { flex-grow: 1; width: 80%; margin: 0 auto; padding-bottom: 10px; } h1 { text-align: center; font-size: 4em; font-weight: 200 !important; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", "Roboto", sans-serif; font-weight: 400; } #bune { height:200px; min-height: 15vh; margin: 50px auto 0; display: block; } #main > p, #main > div > p { font-size: 1.1em; } p, ul { margin: 20px auto; line-height: 1.3em; } li { margin-top: 3px; } ul { list-style-type: "- "; } a { color: mediumpurple; text-decoration: none; } .contact-list { padding-bottom: 20px; border-bottom: thin #999 solid; } html.night .contact-list { border-bottom-color: #777; } .contact-list li.icon { list-style: none; } .contact-list li.icon::before { content: "\200B"; /* https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#Accessibility_concerns */ display: inline-block; background-size: contain; height: 1em; width: 1em; background-position: center; margin-left: calc(-1em - 5px); vertical-align: text-top; margin-right: 5px; filter: invert(0%); } html.night .contact-list li.icon::before { filter: invert(100%); } #projects, #screenshots, .donation-methods { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } .project { background: linear-gradient(to bottom, #0dd, mediumpurple) no-repeat; background-size: 2px; } .project, .donation-method { flex: 1 1 400px; padding: 10px; padding-bottom: 30px; margin: 10px; position: relative; } .project::before, .donation-method::before { top: 0; left: 0; right: 0; bottom: 0; content: ""; z-index: -1; position: absolute; background: linear-gradient(to bottom right, #00000003, #0000000c); } html.night .project::before, html.night .donation-method::before { background: linear-gradient(to bottom right, #ffffff03, #ffffff0c); } .project .footer, .donation-method .footer { position: absolute; bottom: 0; margin: 10px 0; font-style: italic; } .project .footer .spacer:not(:last-child)::after, .subheading-links .spacer:not(:last-child)::after { content: " - "; } .project h2, .donation-method h2 { margin-top: 0; } .subheading-links { font-style: italic; text-align: center; } #screenshots a { display: block; flex: 1 1 600px; max-width: 80%; margin: 10px; } #screenshots a img { width: 100%; } header { background: mediumpurple; color: white; padding: 0 30px; display: flex; /* justify-content: space-between; */ flex-wrap: wrap; user-select: none; } header h1 { display: none; color: white; font-size: 2em; } header a, #show-more { color: white; display: inline-block; padding: 5px 12px; transition: 0.2s all; } header a.current { background: linear-gradient(to bottom, white, #fafafa); color: mediumpurple; pointer-events: none; } html.night header a.current { color: white; background: linear-gradient(to bottom, #282828, #333); } header a:hover, #show-more:hover { background-color: #fff8; } html.night header a:hover, hrml.night #show-more:hover { background-color: #0008; } .more { display: contents; } #spacer { flex-grow: 1; } #show-more { display: none; padding: 5px; cursor: default; } .lynnesoft { background: center/contain url('/assets/img/lynnesoft.png') no-repeat; height: 32px; width: 32px; display: inline-block; vertical-align: top; } .lynnesoft.desktop { margin-right: 10px; } .lynnesoft.mobile { display: none; margin: 0 auto; min-height: 32px; } #hamburger { display: none; position: fixed; top: 10px; left: 10px; z-index: 1; padding: 10px; background: #fafafa; border-radius: 10px; height: 27px; width: 27px; } html.night #hamburger { background: #333; } #hb-icon { height: 100%; width: 100%; background: linear-gradient( to bottom, mediumpurple, mediumpurple 10%, #fafafa 10%, #fafafa 45%, mediumpurple 45%, mediumpurple 55%, #fafafa 55%, #fafafa 90%, mediumpurple 90%, mediumpurple 100% ); } html.night #hb-icon { background: linear-gradient( to bottom, mediumpurple, mediumpurple 10%, #333 10%, #333 45%, mediumpurple 45%, mediumpurple 55%, #333 55%, #333 90%, mediumpurple 90%, mediumpurple 100% ); } #theme-control { color: white; border: thin white solid; border-radius: 2px; padding: 2px 7px; cursor: pointer; height: max-content; margin: auto 0; } #theme-control::before { content: "Theme: Day"; } html.night #theme-control::before { content: "Theme: Night"; } button, a.button { background: mediumpurple; border: none; cursor: pointer; color: white; font-size: 1.3em; padding: 10px; margin: 0 20px; min-width: 100px; } #quiz { text-align: center; position: relative; } .quiz-popup:not(.null) { display: block; position: absolute; color: white; top: 0; left: 0; right: 0; bottom: 0; font-size: 3em; padding-top: 40px; animation: quiz-popup-fadeout 0.25s 0.25s linear forwards; animation-fill-mode: forwards; } .quiz-popup.true { background: #0c9; } .quiz-popup.true::before { content: "Correct!"; } .quiz-popup.false { background: #c03; } .quiz-popup.false::before { content: "Incorrect!"; } @keyframes quiz-popup-fadeout { 0% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } } /*this is very silly do not look*/ #big-leggy-lynne { margin: 40px auto 0; width: 10px; } #big-leggy-lynne div { width: 100%; background-size: 100% 100%; background-repeat: no-repeat; } #bll-top { background: url('/assets/img/bll-top.png'); } #bll-leggies { transition: 0.3s all; background: url('/assets/img/bll-leggy.png'); } #bll-bottom { background: url('/assets/img/bll-send-pics.png'); } #bll-enlarge { font-size: 2em; display: block; margin: 30px auto; } @media only screen and (max-width: 1200px) { /* when the moon hits your eye like a big pizza pie that's a*/ .more a { display: none; } .more.show a { display: inline-block; } #show-more { display: inline-block; } } @media only screen and (max-width: 1000px) { #main { width: 95%; } header a { padding: 5px 8px; } header { justify-content: space-around; } } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #main { width: 90%; } ul { padding-left: 15px; } p, ul { line-height: 1.6em; } #screenshots a { max-width: 100%; } .lynnesoft.desktop { display: none; } .lynnesoft.mobile { display: block; } #hamburger { display: inline-block; touch-action: manipulation; } header { padding: 0; position: fixed; width: 100vw; height: 100vh; top: 0; left: -100vw; justify-content: start; transition: 0.2s all; flex-direction: column; flex-wrap: nowrap; overflow-y: auto; } header.active { left: 0; } html.night header { background: black; } header h1 { display: block; } header span:not(#theme-control), header a { height: unset; } header a { display: block; } header > span { padding-bottom: 20px; } header a { text-align: center; padding: 10px 0; } #spacer { flex-grow: 0; flex-basis: 50px; } .more a { display: block; } #show-more { display: none; } #theme-control { width: max-content; margin: 20px auto; display: block; touch-action: manipulation; } #main.active { pointer-events: none; opacity: 0; } .project, .donation-method { margin: 10px 0; } .project { padding-bottom: unset; } .project p { margin-bottom: 0; } .project .footer { position: relative; } .project .footer a { display: block; text-align: center; margin: 3px 0; } .project .footer .spacer:not(:last-child)::after { content: ""; } }