@font-face{font-family:League Spartan;src:url("./fonts/LeagueSpartan-Regular.ttf",format: "ttf");font-weight:700;font-style:normal}:root{--dark: rgb(50,50,50);--light: rgb(230,230,230)}.dark-mode :root{--light: rgb(50,50,50);--dark: rgb(230,230,230)}html{overflow-x:hidden;overflow-y:scroll}*{font-family:League Spartan,sans-serif;color:var(--dark)}a{border-bottom:1px solid rgb(0,0,0,0);text-decoration:none}a:focus{outline:2px dotted black}a:hover{border-color:var(--dark)}body{overflow-x:hidden;margin:0;height:100vh;background-color:var(--light)}#root{width:100%;padding:0 10px;box-sizing:border-box}.button{font-size:20px;border:none}.button:hover{cursor:pointer}.arrow{width:20px;height:8px;stroke:var(--dark)}.dark-mode,.dark-mode *{color:var(--light)}.dark-mode,.dark-mode body,.dark-mode button{background-color:var(--dark)}.dark-mode svg:not(.languageBlob){stroke:var(--light)!important}.dark-mode a:hover{border-color:var(--light)}main{width:100%;height:100%;margin-top:110px}main *{transform:translateY(-100px)}.load-main *{transition:transform 2s;transform:translateY(0)}.container{max-width:1000px;margin:0 auto}.dragOver{background-color:#0000001a}.draggable{padding:1em;cursor:grab;display:flex;justify-content:space-between;flex-direction:column;height:100%;box-sizing:border-box}.draggable p{overflow:hidden;display:block}.draggable:active{cursor:grabbing}.dropzone{min-height:50px;width:100%;box-sizing:border-box}@media (max-width: 800px){.drag-intro{display:none}.mobile-zone{display:block}}@media (min-width: 800px){.mobile-zone{display:none}.drag-intro{display:block}}.reactivezone{display:flex;flex-direction:row;width:100%}.reactivezone .dropzone{margin:1em 0;border:1px dotted var(--dark);padding:1em}.dark-mode .reactivezone .dropzone{border-color:var(--light)}.draggable{border:1px solid rgb(0,0,0,0)}.draggable:hover{border-color:1px solid var(--dark)}.dark-mode .draggable:hover{border-color:var(--light)}.reactivezone p,.reactivezone input{font-size:3em;-webkit-text-fill-color:rgb(0,0,0,0);-webkit-text-stroke-width:1px;-webkit-text-stroke-color:var(--dark)}.dark-mode .reactivezone p,.dark-mode #cay,.dark-mode .reactivezone input{-webkit-text-stroke-color:var(--light);-webkit-text-fill-color:var(--dark);-webkit-text-stroke-width:1px}.boxes{display:flex;flex-direction:row}@media (max-width: 800px){.boxes,.reactivezone{display:block}.draggable{padding:0;margin:0}}#double-click-hint{height:2em;width:2em;text-align:center;margin:1em;animation:fadeInOut 2s infinite;position:absolute;bottom:10px;right:0;display:none;z-index:-1}#double-click-hint.active{display:block}@keyframes fadeInOut{0%{opacity:0}50%{opacity:1}to{opacity:0}}.draggable input{background-color:#0000;border:none;height:100%;max-width:300px}header{display:flex;flex-direction:row;justify-content:space-between;max-width:1000px;width:100%;margin:auto;left:0;right:0;top:0;position:fixed;z-index:1;padding:10px}.tools{display:flex;flex-direction:row}.tool-icon{padding:0 1em;width:50px;height:50px;margin:auto 0;transition:transform .2s}.tool-icon svg{fill:#0000;stroke:var(--dark);overflow:visible}.tool-icon:hover{cursor:pointer;transform:scale(1.1)}#moon-dark{fill:var(--dark);stroke:var(--dark)}#moon-shadow{fill:var(--light);stroke:var(--light)}.menu-icon-close #menu-rect-horizontal{animation-name:x-to-horizontal;animation-duration:1s;transform:rotate(-90deg);transform-origin:center;transition:transform 1s}.menu-icon-close #menu-rect-vertical{animation-name:x-to-vertical;animation-duration:1s;transform:rotate(-90deg);transform-origin:center;transition:transform 1s}footer{display:flex;flex-direction:row;justify-content:space-between;max-width:1000px;width:100%;margin:auto;padding:10px;box-sizing:border-box}footer img{width:40px;height:40px;margin:auto 0}.menu-icon-open #menu-rect-horizontal{animation-name:horizontal-to-x;animation-duration:1s;transform:rotate(45deg);transform-origin:center;transition:transform 1s}.menu-icon-open #menu-rect-vertical{animation-name:vertical-to-x;animation-duration:1s;transform:rotate(45deg);transform-origin:center;transition:transform 1s}@keyframes horizontal-to-x{0%{width:100%;x:0}50%{width:0%;x:50%}to{width:100%;x:0}}@keyframes vertical-to-x{0%{height:100%;y:0}50%{height:0%;y:50%}to{height:100%;y:0}}@keyframes x-to-horizontal{0%{width:100%;x:0}50%{width:0%;x:50%}to{width:100%;x:0}}@keyframes x-to-vertical{0%{height:100%;y:0}50%{height:0%;y:50%}to{height:100%;y:0}}.list{display:flex;flex-direction:column;width:100%;font-size:36px;margin:auto;-webkit-text-fill-color:var(--dark);-webkit-text-stroke-width:1px;-webkit-text-stroke-color:var(--dark)}.dark-mode .list{-webkit-text-stroke-color:var(--light);-webkit-text-fill-color:var(--dark)}.list>*{transition:transform .4s;transform-origin:left center;padding:.5em;border-bottom:1px solid var(--dark)}.dark-mode .list>*{border-color:var(--light)}.list>*:hover:not(.projects-header){transform:translate(10px)}.projects-list{margin:0;padding:0;max-width:500px;max-height:69vh;overflow-y:auto;overflow-x:hidden;flex-grow:1}.filters button{border-radius:10px;border:1px solid var(--dark);background-color:#0000;margin:.5em;padding:.5em;height:2.1em;cursor:pointer;box-sizing:border-box;color:var(--dark)}.dark-mode .filters button{border-color:var(--light);color:var(--light)}.filters button.selected{background-color:var(--dark);color:var(--light)}.dark-mode .filters button.selected{background-color:var(--light);color:var(--dark)}.filters .slide{width:0;height:2.1em;background-color:var(--dark);position:absolute;top:-1px;left:0;border-radius:10px;opacity:0;z-index:-1}.dark-mode .filters .slide{background-color:var(--light)}.filters button:hover{color:var(--light);transition:color .2s}.dark-mode .filters button:hover{color:var(--dark);transition:color .2s}button:hover .slide{width:100%;opacity:100%;color:var(--light);transition:width .2s,opacity .2s,color .2s}.menu{font-size:36px;max-width:700px;margin:auto}.menu-arrow{display:none;padding-right:1em;width:40px;height:16px;vertical-align:middle}.projects{display:flex;flex-direction:column;margin:0;padding:0;max-width:500px;width:100%;flex-grow:1}.projects-container{display:flex;flex-direction:row;justify-content:center}.projects-header{font-size:36px;padding:0 0 .5em;margin:0}.projects-left{width:100%;height:500px;background-position:top center;background-size:contain;background-repeat:no-repeat;transform:translate(-10px);transition:opacity .5s ease-in-out;flex-grow:1;opacity:0}.opacity{opacity:1}@media (max-width: 800px){.projects-container{flex-direction:column}.projects-left,.projects-img{display:none}.projects-list{margin:0;padding:0}}.project-page{display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 110px)}.project-info{display:flex;flex-direction:row;gap:4em;padding:0 2em}.project-meta{display:flex;flex-direction:column}.project-details{display:flex;flex-direction:row;gap:2em;max-width:500px;width:100%}.project-details>*{width:100%}.project-year{text-align:center}.project-main{display:flex;flex-direction:row}.project-desc{display:flex;flex-direction:column;width:100%}.project-links{display:flex;flex-direction:row;justify-content:space-between;font-weight:700}.project-header{display:flex;flex-direction:row}.project-header h1{flex-grow:3;text-align:center}.photos{max-width:500px;margin:10px auto auto}.photos>*{width:100%;margin:auto;padding:1em;border:1px solid var(--light);border-radius:1em}.next-project-btn{text-align:right;border-top:1px solid var(--dark);border-bottom:1px solid rgb(0,0,0,0);width:100%;margin-top:10px}.dark-mode .next-project-btn{border-top-color:var(--light)}.next-project-btn *{display:inline-block}.next-project-btn:hover,.see-projects-btn:hover{border-color:var(--dark)}.dark-mode .next-project-btn:hover,.dark-mode .see-projects-btn:hover{border-color:var(--light)}#project-next-arrow{width:20px;height:8px;padding-left:10px;vertical-align:middle;transition:transform .2s;transform-origin:left center;stroke:var(--dark)}.see-projects-btn{border-bottom:1px solid rgb(0,0,0,0);margin:1em auto;padding-bottom:1em;width:100%;display:inline-block}@media (max-width: 800px){.project-info,.project-header{flex-direction:column;align-items:center}.project-details{text-align:center}.project-technologies ul{list-style:none;padding:0}.project-meta{flex-direction:column-reverse}.next-project-btn{width:100%;margin-top:10px}}.repos{display:flex;flex-direction:row;flex-wrap:wrap}.repoCard{border:1px solid rgb(0,0,0,.5);border-radius:5px;padding:10px;margin:10px;flex-grow:1}.languageBlob{width:12px;height:12px}.colorJavaScript{stroke:#ff0;fill:#ff0}.colorHTML{stroke:red;fill:red}.colorCSS{stroke:pink;fill:pink}.about-links img{width:64px;padding:10px;box-sizing:border-box}.about-links a{border:none}.about-links a:hover img{padding:4px}.about-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:1em}.left{flex:60%}.right{flex:38%;max-width:100%}.about-container #cat{max-width:500px;min-width:200px;width:100%}.skills{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:start}.skills .skill-section{max-width:50%;min-width:135px}.skills .skill-section ul{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:start;align-items:center;padding:0;flex-grow:1}.skills li{width:60px;height:60px;box-sizing:border-box;margin:10px;display:flex;justify-content:center;align-items:center}.skills svg,.skills img{width:50px;height:50px}.skills svg:hover,.skills img:hover{width:60px;height:60px;transition:width .2s,height .2s}.skills ul{list-style-type:none}