html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{height:100%}:root{--tag-hover: #4FD1C5;--tag-active: #3B8D99;--tag: hsl(188, 44%, 28%);--primary: #3A4754;--secondary: hsl(210, 18%, 58%);--tertiary: hsl(210, 18%, 88%);--background: #121315;--archive-background: hsla(220, 9%, 13%, .774);--text-primary: #E0E0E0;--text-secondary: #B0B0B0}body{box-sizing:border-box;margin:0;height:100%;background-color:var(--background);color:var(--text-primary);font-family:Open Sans,sans-serif}html,body{height:100%}h1,h2,h3,h4{font-family:Roboto Slab,serif}@media (min-width: 1025px){.left-div{position:fixed;padding:5%;top:0;left:0;height:100vh;width:30vw}.right-div{margin-left:40%;padding-bottom:2rem}}@media (max-width: 1024px){.App{flex-direction:column;text-align:center}.left-div,.right-div{width:100%}}.App{background:linear-gradient(135deg,rgb(38,38,66) 0%,rgb(1,12,34) 25%),var(--background);box-sizing:border-box;padding:5%;width:100%;min-height:100%;position:relative;justify-content:center}.fireflies{position:absolute;z-index:0;bottom:5%;left:10%;width:80%;height:90%;pointer-events:none}.fireflies .firefly{position:absolute;width:5px;height:5px;background:radial-gradient(circle,#ffba4d 0%,rgba(255,223,127,0) 70%);border-radius:50%;animation:firefly-move 8s linear infinite,firefly-flicker 3s infinite alternate ease-in-out;opacity:0}@keyframes firefly-move{0%{transform:translate(0)}25%{transform:translate(-20px,-10px)}50%{transform:translate(30px,-20px)}75%{transform:translate(-15px,25px)}to{transform:translate(0)}}@keyframes firefly-flicker{0%,to{opacity:0}50%{opacity:1}}#about{padding-top:50px}@media (max-width: 1024px){#main-div>*{margin-left:auto}}@media (min-width: 1025px){#main-div>*{margin-bottom:50px}}#main-div>*{margin-right:auto}#shortcuts{max-width:200px;a {text-decoration: none; color: var(--text-secondary); transition: .2s;} a:hover {color: var(--text-primary);}}#socials{display:flex;gap:10px;img {height: 30px; width: 30px;} a {text-decoration: none;} button {height: 30px; display: flex; align-items: center; border: none; font-weight: bold; background-color: white; color: black; font-size: medium; cursor: pointer;}}@media (max-width: 1024px){#socials{justify-content:center}}.project-display{z-index:1;width:98%;background-color:#2a2e35;color:var(--text-secondary);border:1px solid var(--primary);transition:.2s;border-radius:12px;display:grid;grid-template-columns:1fr 1px 4fr;align-items:center;text-align:center}.project-display .project-headline{display:flex;flex-direction:column;justify-content:space-around;align-items:center;box-sizing:border-box;margin:0;height:100%;width:100%;padding:10px;img {height: 100px; width: 100px;} button {transition: .2s; border: 1px solid var(--primary); border-radius: 4px; color: var(--text-secondary); background: none; cursor: pointer;}}.project-display .project-headline .project-title{margin:0 0 10px}.project-display .project-divider{width:1px;min-height:80%;transition:.2s;border-left:1px solid var(--primary)}.project-display .project-info{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;margin:0;height:100%;width:100%;padding:10px 2% 2px;flex-grow:1}.project-display .project-info .project-description{margin:0 0 10px}.project-display .project-info .project-tags{margin:0;gap:10px;display:flex;flex-wrap:wrap}.project-display .project-info .project-tags .project-tag{height:20px;font-size:.8rem;display:flex;align-items:center;box-sizing:border-box;margin:0;padding:5px;border:1px solid var(--tag);border-radius:4px;transition:.2s;p {margin: 0;}}@media (min-width: 1025px){.project-display:hover{border:1px solid var(--secondary);color:var(--text-primary);button {border: 1px solid var(--secondary); color: var(--text-primary);} button:hover {border: 1px solid var(--tertiary);} .project-divider {border-left: 1px solid var(--secondary);} .project-info {.project-tags {.project-tag {border: 1px solid var(--tag-active);} .project-tag:hover {border: 1px solid var(--tag-hover);}}}}}@media (max-width: 1024px){.project-display.in-view{border:1px solid var(--secondary);color:var(--text-primary);button {border: 1px solid var(--secondary); color: var(--text-primary);} button:hover {border: 1px solid var(--tertiary);} .project-divider {border-left: 1px solid var(--secondary);} .project-info {.project-tags {.project-tag {border: 1px solid var(--tag-active);} .project-tag:hover {border: 1px solid var(--tag-hover);}}}}}#projects{display:flex;flex-direction:column;align-items:center;gap:20px}#archive-button{border:none;background-color:#fff;font-family:Open Sans,sans-serif;font-weight:700}#project-archive-container{box-sizing:border-box;height:100vh;width:100vw;padding:5%;position:fixed;top:0;left:0;transition:z-index .5s;z-index:-1}#project-archive{height:90%;padding:5%;display:flex;gap:20px;flex-direction:column;flex-wrap:nowrap;justify-content:center;background:var(--archive-background);overflow-y:scroll;border-radius:12px;transition:left .5s;position:relative;left:200%}#project-archive #all-projects{height:100%;display:flex;gap:20px;padding-bottom:500px;flex-direction:column;align-items:center}#project-archive #all-projects #close-archive-btn{width:50px}#project-archive-container.revealed{z-index:2}#project-archive-container.revealed #project-archive{left:0;transition:left .5s}#project-archive::-webkit-scrollbar{display:none}#project-archive{-ms-overflow-style:none;scrollbar-width:none}#close-archive-btn{border:none;background-color:#fff;font-family:Open Sans,sans-serif;font-weight:700}.spacer{height:30px;width:50px;flex-shrink:0}@media (max-width: 1024px){#project-archive-container{padding-bottom:0;padding-top:0}#project-archive{box-sizing:border-box;height:100%;padding-bottom:5%}#all-projects{padding-bottom:5%}}