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; } html.night a { color: #a9f; } #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 a:not(:last-child)::after, .subheading-links a: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; padding: 0 30px; display: flex; justify-content: space-between; flex-wrap: wrap; } header h1 { display: none; color: white; font-size: 2em; } header span { display: inline-block; text-align: center; } header a { color: white; display: inline-block; padding: 5px 15px; transition: 0.2s all; } html.night header a { color: white; } header a.current { background: linear-gradient(to bottom, white, #fafafa); color: mediumpurple; pointer-events: none; } html.night header a.current { background: linear-gradient(to bottom, #282828, #333); } header a:hover { background-color: #fff8; } html.night header a:hover { background-color: #0008; } .lynnesoft { background: center/contain url('/assets/img/lynnesoft.png') no-repeat; height: 30px; width: 32px; display: inline-block; vertical-align: top; } .lynnesoft.mobile { display: none; margin: 0 auto; } #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 10px; cursor: pointer; } #theme-control::before { content: "Theme: Day"; } html.night #theme-control::before { content: "Theme: Night"; } /*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 { background: mediumpurple; border: none; cursor: pointer; color: white; font-size: 2em; padding: 10px; margin: 30px auto; display: 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 { flex-direction: column; flex-wrap: nowrap; overflow-y:scroll; padding: 0; position: fixed; width: 100vw; height: 100vh; top: 0; left: -100vw; justify-content: start; transition: 0.2s all; /* background: 50% calc(100% - 5px) / 32px 32px url('/assets/img/lynnesoft-square-small.png') mediumpurple no-repeat; */ } header.active { left: 0; } html.night header { background: black; } header h1 { display: block; } header span { width: 100%; } header span:not(#theme-control), header a { height: unset; } header a { display: block; } header > span { padding-bottom: 20px; } #theme-control { width: max-content; margin: 0 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 a:not(:last-child)::after { content: ""; } }