*{box-sizing:border-box}:root{font-family:Red Hat Display,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}#app{position:relative;display:flex;flex-direction:column;min-height:100vh;background:var(--app-background);--default-orange: #FB8B53;--light-color: #FAF1E6;--on-primary-color: var(--light-color);--overlay-color: rgba(0, 0, 0, .5);--indicator-shadow: 0 0 10px 2px var(--shadow-color);--extra-small-padding: 4px;--small-padding: 8px;--medium-padding: 16px;--large-padding: 24px;--extra-large-padding: 32px;--content-max-width: 1200px;--top-bar-height: 50px;--bottom-bar-height: 100px;--snackbar-z-index: 10;--dialog-z-index: 5;--app-bar-z-index: 2;--app-background-z-index: -1}#app,#app *,#app *:after{transition:all .2s}#app button{border:none}#app button:hover{cursor:pointer}#app p{font-weight:700}#app #app-bar{z-index:var(--app-bar-z-index)}#app #app-bar #app-banner{display:flex;justify-content:center;background:#415252;color:#fff}#app #app-content{margin-top:var(--top-bar-height);position:relative;overflow-x:hidden;flex:1}#app #app-content a{color:var(--primary-color);text-decoration:none}@media only screen and (max-width: 990px){#app #app-content{margin-top:0;margin-bottom:var(--bottom-bar-height)}}.dark-theme{--primary-color: var(--default-orange);--surface-color: #3a3734;--on-surface-color: var(--text-color);--text-color: var(--light-color);--shadow-color: #161311;--icon-color: var(--text-color);--close-button-color: var(--icon-color);--app-background: #292725;--app-bar-background: var(--primary-color);--surface-border-radius: var(--medium-padding);color:var(--text-color)}.dark-theme #app-background{background:var(--app-background)}.dark-theme #navigation-bar .navigation-item{color:var(--on-primary-color)}.dark-theme #navigation-bar .navigation-item:after{content:" ";opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;width:30%;height:100%;background:var(--app-background)}.dark-theme #navigation-bar .navigation-item:hover:after,.dark-theme #navigation-bar .navigation-item.selected:after{opacity:1;width:100%}.light-theme{--primary-color: var(--default-orange);--surface-color: #fffefc;--on-surface-color: var(--text-color);--text-color: #39393a;--shadow-color: #948b76;--icon-color: var(--text-color);--close-button-color: var(--on-surface-color);--app-background: var(--light-color);--app-bar-background: var(--primary-color);--surface-border-radius: var(--medium-padding);color:var(--text-color)}.light-theme #app-background{background:var(--app-background)}.light-theme #navigation-bar .navigation-item{color:var(--on-primary-color)}.light-theme #navigation-bar .navigation-item:after{content:" ";opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;width:30%;height:100%;background:var(--app-background)}.light-theme #navigation-bar .navigation-item:hover,.light-theme #navigation-bar .navigation-item.selected{color:var(--text-color)}.light-theme #navigation-bar .navigation-item:hover:after,.light-theme #navigation-bar .navigation-item.selected:after{opacity:1;width:100%}#navigation-bar{display:flex;flex:0 1 50%;justify-content:flex-end;align-items:center}#navigation-bar #home-button{margin-right:auto}#navigation-bar .navigation-item{z-index:1;position:relative;text-decoration:none;display:flex;align-items:center;height:100%;padding:0px var(--medium-padding)}#navigation-bar .navigation-item:after{z-index:-1}#home-button:hover span:first-child{color:var(--primary-color)}.carousel{position:relative}.carousel .carousel-container{height:100%;display:flex;overflow-y:hidden;overflow-x:scroll;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}.carousel .carousel-container::-webkit-scrollbar{display:none}.carousel .carousel-container .carousel-item{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative;overflow:hidden}.carousel .progress-indicator{position:absolute;top:0;right:0;bottom:0;left:0}.carousel .index-indicator{position:absolute;bottom:0;left:50%;transform:translate(-50%)}.carousel .carousel-button{z-index:12;top:50%;transform:translateY(-50%);position:absolute;background:transparent}.carousel .carousel-button svg{width:40px;height:40px}.carousel .carousel-button svg *{fill:var(--on-surface-color)}.carousel .carousel-button.previous-button svg{rotate:-90deg}.carousel .carousel-button.next-button{right:0}.carousel .carousel-button.next-button svg{rotate:90deg}.index-indicator{z-index:1;display:flex;position:relative;--indicator-size: 10px;gap:var(--indicator-size);padding-bottom:var(--indicator-size)}.index-indicator .indicator{border-radius:50%;height:var(--indicator-size);width:var(--indicator-size);background:var(--light-color);box-shadow:var(--indicator-shadow);opacity:.5}.index-indicator #current{position:absolute;opacity:1}.progress-indicator{height:4px;width:100%;z-index:1;position:relative}.progress-indicator .progress-loader{position:absolute;height:100%;width:0;background:var(--light-color);box-shadow:var(--indicator-shadow)}.page{position:absolute;height:100%;width:100%;display:flex;justify-content:center;transform:translate(0);overflow:hidden}.page .page-inner{display:flex;height:100%;width:100%;justify-content:center;overflow-y:auto;flex:1}.page .page-inner .content{display:flex;padding:var(--medium-padding);max-width:var(--content-max-width);min-height:100%;overflow:hidden;height:fit-content;flex:1}@media only screen and (max-width: 990px){.page .content h1{margin-top:0}}#about-me{display:flex;flex:1;flex-direction:column;align-items:start;justify-content:center;overflow:hidden}#about-me #article{z-index:1;max-width:40%}#about-me .carousel{position:absolute;top:0;left:35%;width:60%;height:100%;overflow:hidden;--image-fade: linear-gradient(to right, transparent, black 20%, black 80%, transparent);-webkit-mask-image:var(--image-fade);mask-image:var(--image-fade)}#about-me .carousel .carousel-item{-webkit-mask-image:var(--image-fade);mask-image:var(--image-fade)}#about-me .carousel img{position:absolute;top:0;right:0;bottom:0;left:50%;transform:translate(-50%);height:100%;-webkit-mask-image:var(--image-fade);mask-image:var(--image-fade)}#about-me .carousel button{background:#ffffff80;height:100%;width:20%;opacity:0}#about-me .carousel button:hover{opacity:1}@media only screen and (max-width: 990px){#about-me{gap:var(--medium-padding)}#about-me .carousel{position:relative;top:0;right:0;bottom:0;left:0;height:300px;width:100%}#about-me .carousel img{height:200%}#about-me .carousel button{display:none}#about-me #article{max-width:100%;flex:2}}#contact{flex:1;display:flex;flex-direction:column;color:var(--on-primary-color)}#contact.image-loading{color:var(--on-surface-color)}#contact #background-image-container{position:absolute;display:flex;justify-content:center;align-items:center;top:0;right:0;bottom:0;left:0;height:100%;width:100%}#contact #background-image-container #background-image{height:100%;width:100%;max-width:2000px;background-size:cover;background-repeat:no-repeat;background-position:center;box-shadow:inset 0 0 0 1000px #8f300066;animation:backgroundAppear 1s ease forwards}#contact #contact-info{flex:1;z-index:1;display:flex;flex-direction:column;gap:var(--extra-large-padding);justify-content:center;align-items:center;text-align:center}#contact #contact-info #socials{display:flex;gap:var(--medium-padding)}#contact #contact-info #socials a svg{height:40px;width:40px}#contact #contact-info #socials a:hover{scale:1.2}#contact #contact-info #old-site-text{font-size:small}@keyframes backgroundAppear{0%{transform:translate(50%);filter:blur(100px)}to{transform:translate(0);filter:blur(0px)}}@media only screen and (max-width: 990px){#contact #background-image-container #background-image{background-position:-200px}}#examples{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}#examples h1{margin-bottom:0}#examples .examples-content{padding:var(--small-padding)}#examples .examples-content .examples-section .examples-grid{display:flex;flex-wrap:wrap;gap:var(--medium-padding)}#examples .examples-content .examples-section .examples-grid .card{overflow:hidden;padding:var(--medium-padding) var(--extra-large-padding)}#examples .examples-content .examples-section .examples-grid .card .card-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--small-padding);height:100%;width:100%}#examples .examples-content .examples-section .examples-grid .card .card-content .example-icon svg{height:40px;width:40px}#examples .examples-content .examples-section .examples-grid .card .card-content .example-icon svg *{fill:var(--on-surface-color)}#examples .examples-content .examples-section .examples-grid .card .card-content span{font-size:medium}#examples .examples-content .outro-article{margin-top:40px}@media only screen and (max-width: 990px){#examples .examples-content .examples-section .examples-grid .card{flex:1}}#ui-element-dialog-content{width:100%;padding:0 var(--extra-large-padding);min-height:500px;width:600px}#ui-element-dialog-content .carousel{height:100%}#ui-element-dialog-content .carousel .index-indicator .indicator{background:var(--on-surface-color)}@media only screen and (max-width: 990px){#ui-element-dialog-content{padding:0;min-height:100%;width:100%}}.loader{width:120px;height:120px;display:flex;justify-content:center;align-items:center;--spinner-color: #009FBD;--bar-color: #89AC46;--dot-color: #EB5B00;--loader-duration: 3s}#column-bar{display:flex;justify-content:space-evenly;align-items:center;width:100%;height:100%}#column-bar>div{height:10px;width:10px;border-radius:var(--extra-small-padding);background:var(--bar-color);animation:columnBar .5s ease alternate infinite}@keyframes columnBar{0%{height:10px;filter:grayscale(1);opacity:.2}to{height:30px}}#criss-cross{position:relative;overflow:hidden;height:100%;width:100%;--full-duration: 5s;--sub-duration: calc(var(--full-duration) / 3);animation:crissCrossRotate var(--full-duration) linear infinite}#criss-cross #criss{position:absolute;height:10px;width:0;left:0;bottom:calc(50% - 5px);background:var(--bar-color);animation:criss var(--sub-duration) ease infinite}#criss-cross #cross{position:absolute;height:10px;width:0;right:0;bottom:calc(50% + 5px);background:var(--bar-color);animation:cross var(--sub-duration) ease infinite}@keyframes crissCrossRotate{0%{rotate:0deg}32%{rotate:0deg}33%{rotate:90deg}62%{rotate:90deg}66%{rotate:45deg}99%{rotate:45deg}to{rotate:0deg}}@keyframes criss{0%{width:0;left:-10%}50%{width:100%;left:0}to{width:0;left:110%}}@keyframes cross{0%{width:0;right:-10%}50%{width:100%;right:0}to{width:0;right:110%}}#progress-bar{width:100%}#progress-bar span{width:100%;display:flex;justify-content:center;font-size:x-large}#progress-bar .bar{height:10px;background:var(--bar-color);border-radius:var(--small-padding)}.dots-grid{display:grid;height:100%;width:100%;grid-template-columns:auto auto auto;justify-content:space-around;align-items:center}.dots-grid .dot{opacity:0;height:20px;width:20px;background:var(--dot-color);border-radius:50%;animation:dots var(--loader-duration) ease infinite}@keyframes dots{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.ellipsis{display:flex;flex:1;justify-content:space-between}.ellipsis>div{height:20px;width:20px;transform:translateY(-20px);background:var(--dot-color);border-radius:5px;animation:ellipsis .5s ease alternate infinite}@keyframes ellipsis{0%{transform:translateY(-20px)}to{transform:translateY(0)}}.grid-to-center{position:relative;width:100%;height:100%}.grid-to-center>div{position:absolute;bottom:calc(100% - 20px);left:0;opacity:0;animation:moveGridToCenter var(--loader-duration) ease infinite;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:20px solid var(--dot-color)}@keyframes moveGridToCenter{0%{left:0;bottom:calc(100% - 20px);transform:rotate(90deg);scale:1}15%{scale:1;left:calc(100% - 20px);bottom:calc(100% - 20px);transform:rotate(180deg);opacity:1}30%{left:calc(100% - 20px);bottom:0;transform:rotate(270deg)}45%{left:0;bottom:0;transform:rotate(360deg)}60%{left:0;bottom:calc(50% - 10px);transform:rotate(430deg)}85%{left:calc(50% - 10px);bottom:calc(50% - 10px);scale:1;transform:rotate(520deg)}to{left:calc(50% - 10px);bottom:calc(50% - 10px);transform:rotate(520deg);opacity:1;scale:0}}.circle-progress{position:relative;width:100%;height:100%}.circle-progress span{position:absolute;font-size:x-large;top:50%;left:50%;transform:translate(-50%,-50%);text-shadow:0 0 10px var(--app-background)}.circle-progress svg{border-radius:50%;width:100%;height:100%}.circle-progress svg circle{fill:none;stroke:var(--spinner-color);stroke-width:90px;stroke-dasharray:314;stroke-dashoffset:314}.circle-regular{animation:circleRegularSpin 2s linear infinite;height:100%;width:100%}.circle-regular circle{fill:none;transform-origin:50% 50%;stroke:var(--spinner-color);stroke-width:15px;stroke-dasharray:250;stroke-linecap:round;animation:circleRegularStrokeOffset var(--loader-duration) ease infinite}@keyframes circleRegularSpin{0%{transform:rotate(-360deg)}to{transform:rotate(0)}}@keyframes circleRegularStrokeOffset{0%{stroke-dashoffset:245;transform:rotate(0)}50%{stroke-dashoffset:70;transform:rotate(45deg)}to{stroke-dashoffset:245;transform:rotate(360deg)}}.circle-spiral{width:100%;height:100%;position:relative}.circle-spiral>div{position:absolute;animation:circleSpiralRotate 3s infinite;height:100%;width:100%}.circle-spiral>div>div{position:absolute;height:10px;width:10px;opacity:0;left:0;top:0;transform:scale(.5);background:var(--spinner-color);border-radius:50%;animation:circleSpiralMove var(--loader-duration) infinite}@keyframes circleSpiralRotate{0%{transform:rotate(0)}to{transform:rotate(720deg)}}@keyframes circleSpiralMove{0%{opacity:0;left:10%;top:10%}25%{transform:scale(1.5);opacity:1}50%{opacity:0}to{left:50%;top:50%;opacity:0;transform:scale(.1)}}#multiselect{display:flex;flex-direction:column;align-items:center;gap:var(--medium-padding)}#multiselect #buttons{border:2px solid var(--on-surface-color);border-radius:10px;display:flex;overflow:hidden;height:40px}#multiselect #buttons .divider{width:2px;height:100%;background:var(--on-surface-color)}#multiselect #buttons button{height:100%;width:40px;background:var(--surface-color);color:var(--on-surface-color)}#multiselect #buttons button.selected{background:var(--primary-color);color:var(--on-primary-color)}#multiselect #buttons button span{font-size:x-large}#multiselect #buttons button#bold{font-weight:bolder}#multiselect #buttons button#italics{font-style:italic}#multiselect #buttons button#underline{text-decoration:underline}#multiselect span{font-size:x-large}#ripple-button{position:relative;border-radius:var(--small-padding);overflow:hidden;background:var(--primary-color);padding:10px 30px}#ripple-button:disabled{filter:grayscale(1)}#ripple-button span{font-size:x-large;font-weight:700;color:var(--on-primary-color)}#ripple-button .ripple-effect{position:absolute;border-radius:50%;transform:scale(0);background:#fff;animation:ripple 1s ease}@keyframes ripple{to{transform:scale(4);opacity:0}}.snackbar{z-index:var(--snackbar-z-index);position:fixed;max-height:100%;width:300px;--snackbar-height: 50px;--snackbar-width: 200px;--snackbar-padding: 10px;--snackbar-gap: calc(var(--snackbar-height) + 10px)}.snackbar .snack{top:0;right:0;bottom:0;left:0;margin-top:var(--snackbar-padding);margin-left:var(--snackbar-padding);position:absolute;border-radius:var(--small-padding);min-width:var(--snackbar-width);max-width:fit-content;height:var(--snackbar-height);background:var(--surface-color);padding:var(--extra-small-padding) var(--small-padding);animation-duration:1s;animation-timing-function:ease;animation-fill-mode:forwards;border:1px solid var(--on-surface-color);box-shadow:2px 2px 20px var(--shadow-color);display:flex;justify-content:space-between;align-items:center}@keyframes snackIn{0%{left:-100%}to{left:0}}@keyframes snackOut{to{left:-100%}}#switch{padding:0;height:fit-content;--border-radius: 50px;--handle-size: 30px;--track-padding: 10px;border-radius:var(--border-radius);filter:grayscale(1)}#switch #track{border-radius:var(--border-radius);position:relative;background:var(--primary-color);padding:var(--track-padding);display:flex;justify-content:center;align-items:center;gap:20px}#switch #track #handle{position:absolute;background:var(--on-primary-color);border-radius:50%;height:var(--handle-size);width:var(--handle-size);left:calc(var(--track-padding) / 2)}#switch #track span{font-weight:700;font-size:medium;color:var(--on-primary-color)}#switch.on{filter:grayscale(0)}#switch.on #track #handle{left:calc(100% - var(--handle-size) - var(--track-padding) / 2)}.confetti{position:absolute;top:-10%;opacity:0;animation:confetti 5s ease-in infinite}@keyframes confetti{0%{top:-10%;rotate:0deg;transform:translate(-10%);opacity:0}20%{opacity:0}50%{opacity:1;transform:translate(10%)}95%{opacity:0}to{opacity:0;top:100%;rotate:1000deg}}#dialog{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:dialogOpen;animation-fill-mode:forwards;z-index:var(--dialog-z-index)}#dialog #inner{position:relative;display:flex;justify-content:center;height:100%;width:100%}#dialog #inner .card{position:absolute;top:50%;left:50%;background:var(--surface-color);transform:translate(-50%,-50%);max-width:var(--content-max-width);display:flex;flex-direction:column}#dialog #inner .card #card-content{position:relative;flex:1;display:flex;min-width:100px;min-height:100px}#dialog #inner .card #header{display:flex;justify-content:space-between}#dialog #inner .card #header h1{margin-top:0}#dialog #inner .card #header #close-button{margin-left:auto;width:40px;height:40px;border-radius:50%;background:transparent;padding:5px}#dialog #inner .card #header #close-button svg *{fill:var(--close-button-color)}#dialog #inner #dialog-background{height:100%;width:100%;background:var(--overlay-color);opacity:.5}#dialog.closing{animation:dialogClose;animation-fill-mode:forwards}@keyframes dialogOpen{0%{opacity:0}to{opacity:1}}@keyframes dialogClose{0%{opacity:1}to{opacity:0}}@media only screen and (max-width: 990px){#dialog #inner .card{top:0;transform:translate(-50%);height:100%;width:100%}}.card{background:var(--surface-color);padding:var(--medium-padding);border-radius:var(--surface-border-radius);color:var(--on-surface-color)}.card.clickable{border:1px solid var(--primary-color);box-shadow:0 10px 10px var(--shadow-color)}.card.clickable:hover{cursor:pointer;box-shadow:0 2px 2px var(--shadow-color)}#clicker-game{display:flex;flex-direction:column;align-items:center}#clicker-game #header{display:flex;flex-direction:column;justify-content:center;align-items:center}#clicker-game #clicker-button{border-radius:50%;width:60px;overflow:hidden;height:40px;background:red;box-shadow:0 5px #3f0909}#clicker-game #clicker-upgrades{display:flex;flex-direction:column;overflow:hidden;height:100px}#clicker-game #clicker-upgrades .upgrade{opacity:.5}#clicker-game #clicker-upgrades .upgrade.can-buy{opacity:1}#rock-paper-scissors-game{display:flex;flex-direction:column;align-items:center;width:100%;min-height:500px;--card-width: 70px;--card-height: 100px}#rock-paper-scissors-game .winner-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-shadow:0 0 10px var(--shadow-color);font-size:xx-large;z-index:2}#rock-paper-scissors-game .game-board{display:flex;flex-direction:column;flex:1;height:100%;width:100%;justify-content:space-between;align-items:center;border-radius:var(--small-padding);padding:var(--small-padding);position:relative}#rock-paper-scissors-game .game-board.mid-play{pointer-events:none}#rock-paper-scissors-game .game-board .hand{position:relative;border:1px dashed;border-radius:var(--small-padding);width:calc(2 * var(--card-width));height:var(--card-height)}#rock-paper-scissors-game .game-board .game-card{position:absolute;display:flex;justify-content:center;align-items:center;background:#2e1c11;border-radius:8px;top:0;left:50%;transform:translate(-50%);width:var(--card-width);border-bottom:2px solid;border-right:2px solid;height:var(--card-height)}#rock-paper-scissors-game .game-board .game-card.player-card{top:calc(100% - var(--card-height))}#rock-paper-scissors-game .game-board .game-card svg{height:40px;width:40px}#rock-paper-scissors-game .game-board .game-card svg *{fill:#fff}#rock-paper-scissors-game .game-board .game-card.player-play,#rock-paper-scissors-game .game-board .game-card.computer-play{top:50%}.search-and-filter{--search-bar-height: 40px;display:flex;flex-direction:column;gap:var(--medium-padding)}.search-and-filter .search-controls{display:flex;flex-direction:column;gap:var(--medium-padding)}.search-and-filter .search-controls .search{height:var(--search-bar-height);display:flex}.search-and-filter .search-controls .search input{border:4px solid var(--primary-color);border-right:none;border-radius:var(--small-padding) 0 0 var(--small-padding);outline:none}.search-and-filter .search-controls .search .search-button{display:flex;justify-content:center;align-items:center;padding:0;height:var(--search-bar-height);width:var(--search-bar-height);background:var(--primary-color);text-align:center;border-radius:0 var(--small-padding) var(--small-padding) 0}.search-and-filter .search-controls .search .search-button svg{height:20px;width:20px}.search-and-filter .search-controls .search .search-button svg *{stroke:var(--on-primary-color);stroke-width:4px}.search-and-filter .search-controls .sorting{display:flex;gap:var(--small-padding)}.search-and-filter .search-controls .sorting button{height:40px;width:40px;display:flex;align-items:center;justify-content:center;background:var(--surface-color);box-shadow:inset 0 0 0 2px var(--on-surface-color);border-radius:50%}.search-and-filter .search-controls .sorting button.clear-all{margin-left:auto;box-shadow:none}.search-and-filter .search-controls .sorting button svg{width:30px;height:30px}.search-and-filter .search-controls .sorting button svg *{fill:var(--on-surface-color)}.search-and-filter .search-controls .sorting button.selected{background:var(--on-surface-color)}.search-and-filter .search-controls .sorting button.selected svg *{fill:var(--surface-color)}.search-and-filter .results{display:flex;flex-direction:column;gap:var(--small-padding);padding-bottom:var(--extra-large-padding);width:100%;height:300px;overflow:auto;-webkit-mask-image:linear-gradient(to bottom,black 80%,transparent);mask-image:linear-gradient(to bottom,black 80%,transparent)}.search-and-filter .results::-webkit-scrollbar{display:none}.search-and-filter .results .result{background:var(--on-surface-color);height:fit-content;border-radius:var(--small-padding);display:flex;justify-content:space-between;padding:var(--small-padding);color:var(--surface-color)}.search-and-filter .results .result span{font-size:large}.slider{display:flex;flex-direction:column;align-items:center}.slider .value{text-shadow:0px 0px 5px var(--shadow-color)}.slider .background-element{z-index:-1}#skills{display:flex;flex-direction:column;align-items:center;flex:1;gap:30px;justify-content:space-between;--path-line-color: var(--text-color);--icon-size: 30px}#skills #timeline{flex:1;max-width:50%;padding-bottom:var(--extra-large-padding)}#skills #timeline .timeperiod{display:flex;gap:var(--medium-padding);flex-direction:row}#skills #timeline .timeperiod .date{display:flex;justify-content:end;min-width:100px}#skills #timeline .timeperiod .path{position:relative;display:flex;flex-direction:column;align-items:center}#skills #timeline .timeperiod .path .dot{padding-top:var(--extra-large-padding);padding-bottom:var(--extra-large-padding)}#skills #timeline .timeperiod .path .dot div{height:14px;width:14px;background:var(--primary-color);border-radius:50%}#skills #timeline .timeperiod .path .line{position:absolute;margin-top:55px;width:4px;border-radius:2px;height:85%;border:2px solid var(--path-line-color);opacity:.5}#skills #timeline .timeperiod:last-child .path .line{border-right:none;border-left:5px dotted var(--path-line-color)}#skills #timeline .timeperiod:last-child .path .line:after{position:absolute;content:" ";border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid var(--path-line-color);bottom:-7px;left:-12px}#skills #skill-list{flex:1}#skills #skill-list #skill-grid{display:flex;flex-wrap:wrap;gap:var(--small-padding)}#skills #skill-list #skill-grid .card{display:flex;padding:var(--medium-padding) var(--large-padding);flex:1;flex-direction:column;align-items:center;justify-content:space-between}#skills #skill-list #skill-grid .card .logo{display:flex;gap:var(--medium-padding);justify-content:center;position:relative;min-height:50px;min-width:100px}#skills #skill-list #skill-grid .card .logo svg{height:var(--icon-size);width:var(--icon-size)}#skills #skill-list #skill-grid .card .logo svg#react{animation:react 4s linear infinite,reactBounce 4s ease infinite}#skills #skill-list #skill-grid .card .logo svg#javascript{border-radius:2px;position:absolute;animation:javascript 2s ease-in-out infinite}#skills #skill-list #skill-grid .card .logo svg#typescript{position:absolute;animation:typescript 2s ease-in-out infinite}#skills #skill-list #skill-grid .card .logo svg#CSS{z-index:1;position:absolute;animation:CSS 3s ease infinite}#skills #skill-list #skill-grid .card .logo svg#Scss{z-index:0;position:absolute;animation:Scss 3s ease-in-out alternate infinite}#skills #skill-list #skill-grid .card .logo svg#Kotlin{position:absolute;animation:Kotlin 2s ease infinite}#skills #skill-list #skill-grid .card .logo svg#Android{position:absolute;animation:Android 2s ease infinite}#skills #skill-list #skill-grid .card .logo svg#Git{animation:Git 4s ease infinite}#skills #skill-list #skill-grid .card #heart{position:absolute;animation:heart 2s ease infinite}#skills #skill-list #skill-grid .card span{width:100%;text-align:center;font-size:small}@keyframes react{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes reactBounce{0%{scale:1}40%{scale:1}45%{scale:1.2}50%{scale:.8}55%{scale:1.2}60%{scale:1}to{scale:1}}@keyframes javascript{0%{left:10%;rotate:-15deg;z-index:1;opacity:1;transform:scale(1)}25%{opacity:.5;transform:scale(.7)}49%{z-index:1;opacity:1}50%{left:calc(90% - var(--icon-size));rotate:15deg;z-index:2;transform:scale(1)}75%{transform:scale(1.3)}to{left:10%;rotate:-15deg;z-index:2;transform:scale(1)}}@keyframes typescript{0%{right:10%;rotate:15deg;z-index:2;transform:scale(1)}25%{transform:scale(1.3)}49%{z-index:2}50%{right:calc(90% - var(--icon-size));rotate:-15deg;z-index:1;opacity:1;transform:scale(1)}75%{opacity:.5;transform:scale(.7)}to{right:10%;rotate:15deg;z-index:1;opacity:1;transform:scale(1)}}@keyframes CSS{50%{transform:translateY(0)}53%{transform:translateY(10%) scaleX(1)}56%{transform:translateY(-10%) scaleX(.8)}59%{transform:translateY(10%) scaleX(1.2)}62%{transform:translateY(-10%) scaleX(.8)}65%{transform:translateY(10%) scaleX(1)}68%{transform:translateY(0)}}@keyframes Scss{0%{right:0;opacity:1;transform:translate(0);filter:grayscale(1)}50%{opacity:0;right:50%;transform:translate(50%)}68%{opacity:0;right:50%;transform:translate(50%)}to{opacity:1;right:calc(95% - var(--icon-size));transform:translate(0)}}@keyframes Kotlin{0%{left:10%;transform:translate(0)}50%{left:30%;transform:translate(-30%) rotate(10deg)}53%{left:30%;transform:translate(-30%) rotate(5deg)}56%{left:30%;transform:translate(-30%) rotate(10deg)}59%{left:30%;transform:translate(-30%) rotate(5deg)}62%{left:30%;transform:translate(-30%) rotate(10deg)}65%{left:30%;transform:translate(-30%) rotate(10deg)}to{left:10%;transform:translate(0) translateY(0)}}@keyframes Android{0%{right:10%;transform:translate(0)}50%{right:30%;transform:translate(30%) rotate(-10deg)}53%{right:30%;transform:translate(30%) rotate(-5deg)}56%{right:30%;transform:translate(30%) rotate(-10deg)}59%{right:30%;transform:translate(30%) rotate(-5deg)}62%{right:30%;transform:translate(30%) rotate(-10deg)}65%{right:30%;transform:translate(30%) rotate(-10deg)}to{right:10%;transform:translate(0) translateY(0)}}@keyframes heart{0%{opacity:0}60%{opacity:0;transform:translateY(0)}80%{opacity:1}to{opacity:0;transform:translateY(-150%)}}@media only screen and (max-width: 990px){#skills{align-items:start}#skills #timeline{max-width:100%}#skills #timeline .timeperiod .date{min-width:65px}#skills #timeline .timeperiod .date h2{margin-top:25px;font-size:medium}#skills #timeline .timeperiod .article{flex:2}}#bottom-bar{display:none;z-index:var(--app-bar-z-index);bottom:0;width:100%;position:fixed;height:var(--bottom-bar-height)}@media only screen and (max-width: 990px){#bottom-bar{display:flex}#bottom-bar nav{flex:1;position:relative;display:flex;background:var(--app-bar-background);border-top:1px solid var(--on-surface-color);justify-content:space-around}#bottom-bar nav .navigation-item,#bottom-bar nav .bottom-bar-item{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:unset;line-height:23px;background:none;text-decoration:none;color:var(--on-primary-color);padding:0}#bottom-bar nav .navigation-item span,#bottom-bar nav .bottom-bar-item span{font-size:small}#bottom-bar nav .navigation-item svg,#bottom-bar nav .bottom-bar-item svg{scale:.8;opacity:.8;height:40px;width:40px;color:var(--on-primary-color)}#bottom-bar nav .navigation-item.selected svg,#bottom-bar nav .navigation-item:hover svg,#bottom-bar nav .bottom-bar-item.selected svg,#bottom-bar nav .bottom-bar-item:hover svg{scale:1.2;opacity:1}#bottom-bar #settings-drawer{position:absolute;display:block;top:0;right:0;background:var(--app-bar-background);border-top:1px solid var(--on-surface-color);border-left:1px solid var(--on-surface-color);border-top-left-radius:var(--medium-padding)}#bottom-bar #settings-drawer.open{transform:translateY(-100%)}#bottom-bar #settings-drawer #drawer-content{display:flex;flex-direction:column;justify-content:center;align-items:end;padding:var(--extra-large-padding) var(--medium-padding);gap:var(--extra-large-padding)}#bottom-bar #settings-drawer #drawer-content #theme-picker .theme-button{height:40px;width:40px}}#language-picker{display:flex;gap:var(--small-padding)}#language-picker .language{padding:0;height:20px;width:35px;border-radius:var(--small-padding);display:flex;justify-content:center;align-items:center;overflow:hidden;opacity:.5}#language-picker .language.selected,#language-picker .language:hover{opacity:1}#language-picker .language svg{max-width:50px;max-height:50px}@media only screen and (max-width: 990px){#language-picker .language{height:30px;width:50px}}#theme-picker{--theme-button-size: 25px;--theme-button-size-mobile: 30px;--button-start-position: 50px;display:flex;align-items:center;height:100%;gap:var(--small-padding);overflow:hidden}#theme-picker .theme-button{border-radius:50%;height:var(--theme-button-size);width:var(--theme-button-size);display:flex;justify-content:center;align-items:center;opacity:.5;transform:translateY(var(--button-start-position));padding:3px}#theme-picker .theme-button svg{max-width:calc(var(--theme-button-size) - 5px);max-height:calc(var(--theme-button-size) - 5px)}#theme-picker .theme-button.selected,#theme-picker .theme-button:hover{opacity:1}#theme-picker .theme-button.dark-theme{border:2px solid #FAF1E6;background-color:#292725}#theme-picker .theme-button.dark-theme svg{color:#faf1e6}#theme-picker .theme-button.light-theme{border:2px solid #292725;background-color:#faf1e6}#theme-picker .theme-button.light-theme svg{color:#292725}@keyframes themeButton{0%{transform:translateY(var(--button-start-position))}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@media only screen and (max-width: 990px){#theme-picker{overflow:visible}#theme-picker .theme-button{border-radius:50%;height:var(--theme-button-size-mobile);width:var(--theme-button-size-mobile)}#theme-picker .theme-button svg{max-width:calc(var(--theme-button-size-mobile) - 10px);max-height:calc(var(--theme-button-size-mobile) - 10px)}}#top-bar{display:flex;z-index:var(--app-bar-z-index);position:fixed;width:100%;justify-content:center;height:var(--top-bar-height);background:var(--app-bar-background)}#top-bar .inner{display:flex;justify-content:space-between;flex:0 1 var(--content-max-width);padding:0 var(--medium-padding)}#top-bar .inner .controls{display:flex;gap:var(--medium-padding);justify-content:space-between;align-items:center}@media only screen and (max-width: 990px){#top-bar{display:none}}#intro{position:absolute;overflow:hidden;height:100%;width:100%;z-index:100;--start-buffer-duration: .5s;--color-swipe-duration: 2s}#intro #start-buffer{background-color:var(--app-background);height:100%;width:100%;visibility:visible;animation:startBufferRemove var(--start-buffer-duration) linear forwards;animation-delay:var(--start-buffer-duration)}#intro #intro-content{position:relative;display:flex;height:100%}#intro #intro-content .color-swipe{position:absolute;left:-80%;width:0;height:100%;transform:skew(-30deg);background:var(--primary-color);animation:colorSwipe var(--color-swipe-duration) ease-in forwards}#intro #intro-content #intro-logo-wrapper{position:absolute;height:100%;width:100%;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--on-surface-color);background:var(--overlay-color);opacity:0}#intro #intro-content #intro-logo-wrapper h1 span{display:inline-block;opacity:0;font-size:100px;animation:logoCharacter 1s ease forwards;color:var(--light-color)}#intro #intro-content #intro-logo-wrapper h1 span.first-name{color:var(--primary-color)}@keyframes startBufferRemove{0%{visibility:visible}to{visibility:hidden}}@keyframes colorSwipe{0%{left:-80%;width:0}50%{left:-80%;width:250%}to{left:200%;width:0}}@keyframes introLogoAdd{0%{opacity:0}to{opacity:1}}@keyframes introLogoRemove{0%{opacity:1}to{opacity:0}}@keyframes logoCharacter{0%{opacity:0;transform:translate(-50px) rotate(-15deg)}to{opacity:1;transform:translate(0) rotate(0)}}@media only screen and (max-width: 990px){#intro #intro-content #intro-logo-wrapper h1{margin-bottom:200px}#intro #intro-content #intro-logo-wrapper h1 span{font-size:unset}}