:root{--zoey-pink:#ffc0cb;--zoey-purple:#dfc3e7;--zoey-brown:#1d1f21;--content-max-width:min(100% - 2 * var(--padding) ,40.625rem);--rounding:40px;--circle-rounding:9999px;--padding:12px;--border-width:4.5px;--transition-timer:300ms;--font-small:0.85em;--font-large:1.35em;--font-blog-title:2.7em;--font-normal:clamp(1.0125rem, 0.954rem + 0.278vw, 1.075rem);--font-normal-weight:450;--font-high-weight:900;--icon-size:32px;--project-icon-size:108px;--project-icon-size-small:72px;--friend-icon-size:100px;--summary-img-size:800px}body{font-family:system-ui,sans-serif;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:[full-width-start] 1fr [content-start] var(--content-max-width) [content-end] 1fr [full-width-end];min-height:calc(100dvh - var(--padding)*4);background-color:var(--zoey-brown);& > * { display: grid; grid-template-columns: subgrid; grid-auto-rows: min-content; grid-column: full-width; } & > header { background-color: var(--zoey-pink); border-radius: var(--rounding); padding: var(--padding); grid-column: full-width; } & > main { border: none; color: var(--zoey-pink); font-size: var(--font-normal); font-weight: var(--font-normal-weight); :where(& > *) { grid-column: content; margin: var(--padding); } } & > footer { grid-column: full-width; margin: calc(var(--padding) * 4) calc(var(--padding) * 4) var(--padding) calc(var(--padding) * 4); }}h1,h2,figure{text-align:center}a{color:var(--zoey-purple)}figure{display:grid;justify-items:center;grid-column:full-width}ul,li{margin:calc(var(--padding)/2)}.navbar{display:grid;grid-column:full-width;grid-template-columns:1fr 1fr;margin-inline:auto;width:100%;animation-name:dropDownAnimation;animation-timing-function:ease-in-out;animation-duration:var(--transition-timer)}.header-main{display:flex;align-items:center;& > div > a.header-button { margin: 0px calc(var(--padding) * 1.5); }}.header-links{display:flex;grid-auto-columns:full-width;margin-inline:auto 0;justify-content:end;align-items:center;transition:all .5s ease-in-out;transition-duration:calc(var(--transition-timer) * 1.5);& > a.header-button { margin: 0px calc(var(--padding) * 1.5); }}.header-button{color:var(--zoey-brown);text-decoration:none;font-size:var(--font-large);font-weight:var(--font-high-weight);padding:var(--padding)calc(var(--padding) * 4);border-radius:var(--rounding);transition-duration:var(--transition-timer);&:hover { color:var(--zoey-pink); background-color:var(--zoey-brown); } &:active { transform:translateY(5%); }}.active-header-button{color:var(--zoey-pink);background-color:var(--zoey-brown)}.header-menu-button{display:none;padding:calc(var(--padding)/2)calc(var(--padding)/1.2);border-radius:calc(var(--rounding)/3);transition-duration:var(--transition-timer);&:hover { background-color:var(--zoey-brown); & > label > .menu-icon > g > path { fill:var(--zoey-pink); } } &:active { transform:translateY(5%); }}.menu-icon{& > g > path { transition-duration: var(--transition-timer); fill: var(--zoey-brown); }}.info-buttons{display:flex;justify-content:center;& > p { background-color: var(--zoey-pink); color: var(--zoey-brown); font-weight: var(--font-high-weight); border-radius: var(--rounding); padding: var(--padding) calc(var(--padding) * 4); margin: var(--padding); }}.contacts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;& > div { border-color: var(--zoey-pink); border-width: var(--border-width); border-style: solid; border-radius: var(--circle-rounding); padding: calc(var(--padding) / 1.5); margin: var(--padding); transition-duration: var(--transition-timer); &:hover { transform: scale(120%); } } & > div, & > div > a > .contact-icon { width: var(--icon-size); height: var(--icon-size); }}.figure-image{margin:var(--padding);width:400px;border-radius:var(--rounding)}.can-zoom-in{transition-duration:var(--transition-timer);&:hover { transform:scale(115%); }}.friends{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:var(--margin-smaller);width:60%;& > a { color: var(--zoey-brown); font-size: var(--font-large); font-weight: var(--font-high-weight); margin: var(--padding); text-align: center; text-decoration: none; transition-duration: var(--transition-timer); &:hover { transform: scale(105%); } &:active { transform: translateY(20px); } }}.friend-button{border:solid 2px;border-radius:var(--rounding);padding:var(--padding)}.friend-icon{width:var(--friend-icon-size);height:var(--friend-icon-size);border-radius:var(--rounding)}.overview{position:absolute;transform:translateX(-50%)translateY(-5.55%)scale(.97);top:10%;left:50%;width:80%;border-radius:6px 6px 0 0}.overview-laptop{max-width:1e3px;width:100%}.laptop-container{position:relative;display:block;max-width:1e3px;width:90%;transition-duration:calc(var(--transition-timer) * 2);&:hover { transform:scale(105%); } &:active { transform:translateY(20px); }}.dark{display:none}.project-hero{max-width:1400px;width:90%;border-radius:0;transition-duration:calc(var(--transition-timer) * 2);&:hover { transform:scale(108%); } &:active { transform:translateY(20px); }}.tags-container{display:grid;grid-column:full-width}.tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;list-style-type:none;padding:0;margin:0;color:var(--zoey-brown)}.tag{margin:calc(var(--padding)/2);padding:calc(var(--padding)/2)calc(var(--padding) * 1.2);border-radius:var(--rounding);font-weight:500}.pink-tag{background:var(--zoey-pink)}.purple-tag{background:var(--zoey-purple)}.app-contributions-container{grid-column:full-width;display:grid;justify-content:center;align-items:center}.app-contributions{display:flex;flex-wrap:wrap;align-items:center;align-self:center;justify-content:center;& > a { padding: var(--padding); margin: 0 calc(var(--padding) / 2); transition-duration: calc(var(--transition-timer) * 2); &:hover { transform: scale(110%); } &:active { transform: translateY(20px); } }}.project-icon{width:var(--project-icon-size);height:var(--project-icon-size);border-radius:calc(var(--rounding)/2)}.blog-container{display:grid;grid-column:full-width;width:90%;max-width:1400px;align-items:center;align-self:center;justify-content:center;margin-inline:auto;& > * { margin: calc(var(--padding) * 2); text-align: left; padding: var(--padding); & > * { margin: calc(var(--padding) * 2); } }}.blog-title{text-align:left}.summary-image{max-width:var(--summary-img-size);transition-duration:var(--transition-timer);border-radius:calc(var(--rounding)/4);text-align:center;&:hover { transform:scale(106%); } &:active { transform:translateY(20px); }}.post-metadata,.post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--padding);& > * { font-size: var(--font-small); margin: 0; }}.post-tags{margin-top:calc(var(--padding) * 2);justify-content:center}.terms{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;list-style-type:none;font-size:var(--font-small);margin:0}.page-tags{display:flex;list-style-type:none;font-weight:500;padding:0;& > * { transition-duration: var(--transition-timer); &:hover { transform: scale(110%); } &:active { transform: translateY(20px); } }}.page-tag{margin:calc(var(--padding)/2);padding:calc(var(--padding)/2)calc(var(--padding) * 1.2);border-radius:var(--rounding);background:var(--zoey-pink);color:var(--zoey-brown);text-decoration:none}.summary{& > h1, h2, h3, h4 { display: none; }}.summary-image-container{text-align:center}.current-time{justify-content:center;margin-bottom:0;margin-top:calc(var(--padding) * 2)}.current-terms{justify-content:center;margin-bottom:0}.blog-title{font-size:calc(var(--font-large) * 3);text-align:center;margin:0}.skip-navigation{color:var(--zoey-brown);text-decoration:none;background-color:var(--zoey-pink);font-size:var(--font-large);font-weight:900;border:solid 8px;border-color:var(--zoey-brown);border-radius:var(--rounding);padding:var(--padding);margin-inline-start:var(--padding);position:absolute;transform:translateY(-200%);transition-duration:calc(var(--transition-timer) * 1.5);&:focus { transform:translateY(0); }}article>.blog-title{font-size:var(--font-blog-title);text-align:left}.post-text{max-width:900px;width:90%;margin-top:calc(var(--padding) * 2)}.post-image{max-width:900px;width:90%;border-radius:calc(var(--rounding)/4)}.input{display:none}.purple-button{background:var(--zoey-purple)}.pink-button{background:var(--zoey-pink)}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media screen and (width <= 1200px){.blog{display:block}.blog-container{width:97%;& > * { margin: var(--padding); & > * { margin: calc(var(--padding) / 2); } }}.summary-image{width:100%}}@media screen and (width <= 720px){body{margin:0;& > * { display: block; } & > header { border-radius: 0; } & > footer { margin: var(--padding)}}.navbar{grid-template-columns:1fr;grid-template-rows:1fr}.header-main{justify-content:space-between}.header-links{margin-inline:0;justify-content:center}.header-menu-button{display:inline-block}.header-links{margin-inline:0;margin:0;height:0;& > .header-button { display: none; padding: var(--padding) calc(var(--padding) * 2.5); animation-name: slideUp; animation-duration: var(--transition-timer); animation-timing-function: ease-in-out; margin: 0px calc(var(--padding) / 2); }}#menu-checkbox:checked~.header-links{display:flex;padding:var(--padding);margin:calc(var(--padding) * 2)0;& > .header-button { display: block; } & > a.header-button { margin: 0px calc(var(--padding) / 2); }}.info-buttons{display:grid;justify-content;center;& > p { text-align: center; }}.figure-image{width:96%}.project-icon{width:var(--project-icon-size-small);height:var(--project-icon-size-small)}.friends{width:100%}}.footer{background-color:var(--zoey-pink);text-align:center;grid-column:full-width;border-radius:calc(var(--rounding)/3);padding:var(--padding)}.brown-link{color:var(--zoey-brown);font-weight:calc(var(--font-high-weight) - 150)}@media(prefers-color-scheme:dark){.light{display:none}.dark{display:inline}}