:root{font-family:system-ui,Avenir,Helvetica,Arial,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}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{margin:0 auto;text-align:center;width:100%}.Homepage{overflow:hidden}.HomepageBanner{width:100%;min-width:1600px}.About{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin-top:100px}.AboutImg{padding:50px;max-width:500px;min-width:200px;align-content:center}.AboutText{align-content:center;padding:50px;max-width:600px;min-width:200px;text-align:left}.Skills{margin:auto;padding-top:50px;padding-bottom:100px;width:30%;align-items:center}.Skills>p{text-align:left;padding-left:40px}.Skills>h2{text-align:left}td{text-align:left;padding-left:40px}hr{width:60%}h1{font-size:3.2em;line-height:1.1}@media(max-width:1600px){.Skills{width:60%}.HomepageBanner{width:auto;min-width:0px}}@media(max-width:1000px){.AboutImg{max-width:400px;padding:0}.Skills{width:80%}}.NavigationBar{display:flex;justify-content:space-between;position:fixed;background-color:#5f9ea0;width:100%;height:60px;z-index:10}h3{color:#fff}.Footer{justify-content:space-between;align-content:center;background-color:#5f9ea0;width:100%;height:100px;z-index:10}.SocialMediaIcon{height:30px}.Footer>a{margin:10px}.Name{float:left;padding-left:20px;padding-right:20px}.Menu{display:flex;gap:0px}.Language{float:right;padding-left:20px;padding-right:20px}.Dropdown{position:relative}.DropdownMenu{position:absolute;top:100%;left:0;background:#4682b4;display:flex;flex-direction:column;width:180px;z-index:100}.DropdownMenu a{padding:10px;color:#fff}.DropdownMenu a:hover{background-color:#87ceeb}.Dropdown.open>button{background-color:#4682b4}button{border:none;outline:none;width:180px;background-color:#5f9ea0;height:60px;border-radius:0;padding:0;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer}button:hover{background-color:#4682b4}@media(max-width:1000px){button{width:90px}h3{font-size:0px}}.ExpandedImage{position:fixed;z-index:1000;top:0;left:0;height:100vh;width:100vw;background-color:#000000f2;display:flex;justify-content:center;align-items:center}.ExpandedImage__image>img{width:80%;max-width:1500px;max-height:800px;border:10px solid white;background-color:#fff}.changeImage{position:absolute;height:80px;width:auto;margin:20px;filter:invert(.7)}.left{left:50px}.right{right:50px}.changeImage:hover{filter:invert(.5)}.closeImage{position:fixed;font-size:50px;line-height:50px;cursor:pointer;height:50px;width:50px;top:20px;right:20px;filter:invert(.7)}.closeImage:hover{filter:invert(.5)}@media(max-width:1200px){.ExpandedImage__image>img{width:60%}.changeImage{position:absolute;height:5%;width:auto;margin:20px;filter:invert(.7)}.left{left:20px}.right{right:20px}}.Portfolio{width:80%;margin:100px auto 50px}.galleryWrapper{column-count:3;column-gap:10px}.galleryImg{display:block;width:100%;height:auto;margin-bottom:10px;break-inside:avoid;transition:transform .2s}.galleryImg:hover{cursor:pointer;filter:brightness(75%)}@media(max-width:1200px){.galleryWrapper{column-count:2}}@media(max-width:600px){.galleryWrapper{column-count:1}}.ProjectContainer{margin-top:60px}.Project{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;width:60%;margin:60px auto 100px}.projectWrapper{align-content:center;margin:20px;max-width:100%;height:100%}.banner{grid-column:1 / span 6}.bigL{grid-column:1 / span 4}.bigR{grid-column:3 / span 4}.smallL{grid-column:1 / span 2}.smallR{grid-column:5 / span 2}.gridCentered{grid-column:2 / span 4}.halfL{grid-column:1 / span 3}.halfR{grid-column:4 / span 3}.gridSpacer{height:100px}.subGrid{display:grid;grid-template-columns:20% 20% 20% 20% 20%}.gridText>p{padding:50px}.projectImg{max-width:inherit;max-height:inherit;transition:transform .2s}.projectImg:hover{cursor:pointer;filter:brightness(75%)}@media(max-width:1000px){.Project{width:80%;grid-template-columns:1fr}.halfL,.halfR,.banner,.bigL,.bigR,.smallL,.smallR,.gridCentered{grid-column:1 / span 1}}