/** Sets the overall juxtaposition and styling (without colors) */
/** Hidden elements */
.menu-opener { display: none; }

p { margin: 16px 0; }

.mobile.flyout { position: fixed; z-index: 10; top: 0; left: 0; height: 100%; width: 100%; padding: 16px; opacity: 0; transform: translateX(-100%); transition: all 0.2s ease-in; box-shadow: 4px 0px 5px rgba(0, 0, 0, 0.25); }

.menu-opener:checked ~ .mobile.flyout { opacity: 1; transform: translateX(0%); }

.h-margin { padding: 0 16px; }

.top-margin { padding-top: 16px; }

a.logo, a.logo:visited { max-width: 320px; font-size: 48px; font-family: "League Spartan", "sans-serif"; font-weight: bold; display: block; text-decoration: none; line-height: 50px; }

.main-menu .logo { margin-bottom: 16px; }

.main-menu ul { margin: 0; padding: 0; }

.main-menu ul li { position: relative; }

.main-menu ul a:link, .main-menu ul a:visited { font-family: "League Spartan", "sans-serif"; font-weight: 500; font-size: 24px; padding: 8px 16px; margin-bottom: 12px; text-decoration: none; border-radius: 8px; display: block; }

.main-menu ul a:link i, .main-menu ul a:visited i { margin-right: 16px; width: 24px; }

.main-menu ul a:link i.fa-angle-right, .main-menu ul a:visited i.fa-angle-right { position: absolute; top: 14px; right: 0; }

.main-menu ul li { list-style: none; }

.main-menu .close-button, .hamburger { position: absolute; top: 24px; right: 24px; font-size: 32px; }

.canvas { padding: 0 16px; }

.contact-buttons a { display: block; padding: 8px 16px; border-radius: 8px; margin-bottom: 12px; text-align: center; text-decoration: none; }

ol.hobbies { margin-bottom: 16px; }

.hobby { display: flex; flex-flow: column nowrap; align-items: stretch; min-height: 150px; margin-bottom: 24px; }

.hobby h2 { margin-top: 16px; }

.hobby .graphic { display: block; min-width: 150px; flex-shrink: 0; padding-top: 16px; }

.hobby .graphic img { margin: 16px auto; }

.hobby .graphic i { font-size: 100px; width: 100%; text-align: center; margin: 16px auto; }

.hobby .graphic .glyph { font-size: 100px; text-align: center; min-width: 150px; }

.hobby .content { margin: 0 16px; flex-grow: 1; }

.hobby .content p { margin: 16px 0; }

.stick-top { position: sticky; top: 0; background-color: var(--body-background); z-index: 10; }

.projects ul { padding: 0; }

/** The color theme */
@media (prefers-color-scheme: light) { body { --body-background: #f2f8ff; --color: black; } .logo { --color: black; } .canvas h1 { --color: #546880; } .canvas h2 { --color: #75507b; } .main-menu { --background-color: #a7ceff; --item-background: #bfdcff; --icon-color: #333f4e; } .main-menu ul a:link, .main-menu ul a:visited { --color: black; } .main-menu ul a:hover, .main-menu ul a:hover i { --color: #f57900; --background-color: #fce2bd; } .timeline { --fill-color: #d9eaff; --border-color: #546880; } .timeline .latest { --fill-color: #73d216; --border-color: #4e9a06; } .timeline h2, .timeline h3 { --color: #546880; } .timeline .latest h2, .timeline .latest h3 { --color: black; } .contact-buttons a { --background: #ce5c00; } .hobby { --background-color: #d9eaff; } .hobby .graphic { --background-color: #a7ceff; --color: black; } }

@media (prefers-color-scheme: dark) { body { --body-background: #232b36; --color: #f2f8ff; } .logo { --color: #f2f8ff; } .canvas h1 { --color: #fcaf3e; } .canvas h2 { --color: #e0badc; } .main-menu { --background-color: #333f4e; --item-background: #232b36; --icon-color: #a7ceff; } .main-menu ul a:link, .main-menu ul a:visited { --color: #f2f8ff; } .main-menu ul a:hover, .main-menu ul a:hover i { --color: white; --background-color: #f57900; } .timeline { --fill-color: #546880; --border-color: #f2f8ff; } .timeline .latest { --border-color: #d4ffab; --fill-color: #4e9a06; } .timeline h2, .timeline h3 { --color: #a7ceff; } .timeline .latest h2, .timeline .latest h3 { --color: #f2f8ff; } .contact-buttons a { --background: #f57900; } .hobby { --background-color: #333f4e; } .hobby .graphic { --background-color: #546880; --color: white; } }

:root { color-scheme: light dark; }

body { background: var(--body-background); color: var(--color); }

.logo { color: var(--color); }

.canvas h1 { color: var(--color); }

.canvas h2 { color: var(--color); }

.main-menu { background: var(--background-color); }

.main-menu ul a:link, .main-menu ul a:visited { color: var(--color); background-color: var(--item-background); }

.main-menu ul a:link i, .main-menu ul a:visited i { color: var(--icon-color); }

.main-menu ul a:hover, .main-menu ul a:hover i { color: var(--color); background-color: var(--background-color); }

.timeline h2, .timeline h3 { color: var(--color); }

.timeline .latest h2, .timeline .latest h3 { color: var(--color); }

.contact-buttons a { background: var(--background); color: #FFF; }

@media only screen and (min-device-width: 768px) { .hobby { flex-flow: row; } .hobby.even { flex-flow: row-reverse; } }

@media only screen and (min-device-width: 1024px) { :root { --menu-width: 350px; } .canvas { max-width: 960px; margin: 0 auto; } section.projects { display: flex; gap: 24px; justify-content: center; } .close-button, .hamburger { display: none; } .mobile.flyout { transform: translateX(0%); opacity: 1; width: var(--menu-width); } main { margin-left: var(--menu-width); } body { position: relative; } .stick-top { position: inherit; z-index: 0; } }

body, p, h1, h2, h3, h4 { font-family: "Lexend", sans-serif; font-weight: 500; }

h1 { font-size: 40px; }

h2 { font-size: 32px; }

p { font-size: 24px; font-weight: 300; }

.canvas > h1, .canvas > h2, .canvas .projects h2 { display: flex; gap: 8px; align-items: center; }

.canvas > h1::before, .canvas > h1::before, .canvas > h2::before, .canvas > h2::before, .canvas .projects h2::before, .canvas .projects h2::before { font: var(--fa-font-solid); margin: 0 8px; }

.canvas > h1.brand::before, .canvas > h2.brand::before, .canvas .projects h2.brand::before { font: var(--fa-font-brands); }

.canvas > h1 { text-align: right; justify-content: end; }

.canvas > h2, .canvas .projects h2 { border-bottom: 1px dotted; justify-content: center; margin: 16px 0; }

/** Heading icons */
h1.about::before { content: '\f05a'; }

h1.cv::before { content: '\f2c2'; }

h2.projects::before { content: '\f542'; }

h2.ios::before { content: '\f179'; }

h2.android::before { content: '\f17b'; }

h2.experience::before { content: '\f0b1'; }

.projects li { list-style: none; font-size: 32px; font-weight: 400; text-align: center; padding: 12px; }

.timeline { position: relative; border-left: var(--border-color) 1px solid; margin-left: 40px; }

.timeline h2::before { content: ""; width: 24px; height: 24px; display: block; position: absolute; left: -12px; border-radius: 50%; margin-top: 15px; background: var(--fill-color); border: var(--border-color) 2px solid; box-shadow: 0 0 0 6px var(--body-background); }

.timeline .latest h2 { font-size: 36px; }

.timeline .latest h2::before { width: 32px; height: 32px; left: -16px; box-shadow: 0 0 0 6px var(--body-background), 0 -10px 0 6px var(--body-background); }

.timeline li { list-style: none; }

.timeline h2 { font-size: 32px; }

.max-width-center { max-width: 400px; margin: 0 auto; }

.hobby { border-radius: 8px; background-color: var(--background-color); overflow: hidden; }

.hobby .graphic { background-color: var(--background-color); color: var(--color); }

@media only print { .timeline { position: relative; border-left: var(--border-color) 1px solid; margin-left: 40px; } .timeline .latest h2::before, .timeline h2::before { box-shadow: 0 0 0 6px white; } .hobby { flex-flow: row; } .hobby.even { flex-flow: row-reverse; } .hamburger { display: none; } .stick-top { position: static; } }

/*# sourceMappingURL=theme.css.map */