canvas{position:fixed;top:0;left:0}:root{--base-color: white;--half-transparent-base-color: rgba(255,255,255,.5);--transparent-base-color: rgba(255,255,255,.85);--text-color: black;--hover-color: white;--panel-visible: hidden}.darkmode{--base-color: black;--half-transparent-base-color: rgba(0,0,0,.5);--transparent-base-color: rgba(0,0,0,.85);--text-color: white;--hover-color: black}*{box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background-color:var(--base-color);overflow-x:hidden;overflow-y:hidden;animation:disableScrollBar 2s 3.5s forwards}@keyframes disableScrollBar{0%{overflow-y:hidden}to{overflow-y:visible}}@keyframes backgroundChange{0%{background-color:#fff}to{background-color:#000}}@keyframes backgroundChange{0%{--base-color: white;--text-color: black;--hover-color: white}to{--base-color: black;--text-color: white;--hover-color: black}}.topnav{overflow:hidden;opacity:0%;background-color:transparent;animation:topnavMoves 2s 3.5s forwards;position:relative}@keyframes topnavMoves{0%{opacity:0%}to{opacity:100%}}.topnav .nav-btn{float:left;display:block;color:var(--text-color);background-color:var(--base-color);text-align:center;padding:10px 16px;text-decoration:none;font-size:17px;border-radius:45px;cursor:pointer}.topnav .nav-btn:hover{background-color:var(--text-color);color:var(--base-color);transition:.3s}.topnav .nav-btn.active{background-color:var(--text-color);color:var(--base-color)}@media screen and (max-width: 600px){.topnav a:not(:first-child){display:none}.topnav a.icon{float:right;display:block}}@media screen and (max-width: 600px){.topnav.responsive{position:relative}.topnav.responsive a.icon{position:absolute;right:0;top:0}.topnav.responsive a{float:none;display:block;text-align:left}}#theme-switch{float:right;padding:6px 10px;margin-top:8px;margin-right:16px;background-color:var(--base-color);display:flex;justify-content:center;align-items:center;border:none;cursor:pointer;border-radius:15px}#theme-switch:hover{background-color:var(--base-color);color:var(--base-color)}#theme-switch svg{fill:var(--text-color)}#theme-switch svg:hover{background-color:var(--base-color)}#theme-switch svg:last-child{display:none}.darkmode #theme-switch svg:first-child{display:none}.darkmode #theme-switch svg:last-child{display:block}.loader{display:inline-block;text-align:center;justify-content:center;position:absolute;width:100%;height:15vw;top:35%;opacity:0%;background-color:#000;color:#fff;animation:opacityFull,opacityNone;animation-fill-mode:forwards,forwards;animation-duration:2s,1s;animation-delay:0s,2s;overflow:hidden}.loader-text{position:relative;display:inline-block;text-align:center;justify-content:center;margin:0 auto;top:10%;font-size:10vw;opacity:0%;animation:opacityTextFull,opacityTextNone;animation-fill-mode:forwards,forwards;animation-duration:2s,1s;animation-delay:0s,2s;overflow:hidden;-webkit-user-select:none;user-select:none}@keyframes opacityFull{0%{opacity:0%}to{opacity:50%}}@keyframes opacityNone{0%{opacity:50%}to{opacity:0%}}@keyframes opacityTextFull{0%{opacity:0%}to{opacity:100%}}@keyframes opacityTextNone{0%{opacity:100%}to{opacity:0%}}.description{margin:0 auto;position:absolute;top:40%;left:33%;display:inline-block;animation:up 1.3s 1s}.description .text{font-size:1.5em;font-family:Arial;font-weight:400;color:var(--text-color);text-align:center;margin:0 auto;padding:5px;opacity:0%;animation:fade .5s 1s forwards,textColorChange .5s 2s forwards}@keyframes fade{0%{visibility:none;opacity:0}to{visibility:visible;opacity:100%}}@keyframes up{0%{top:45%}top{top:40%}}#section{padding-left:16px}#section h2{color:var(--text-color);font-size:5em}.about p{font-size:3em;color:var(--text-color)}.portfolio{position:relative;opacity:0;visibility:hidden;animation:portfoliofadeIn 1s forwards 3.5s}.portfolio .filter{position:relative;margin-bottom:20px;margin-top:-60px;border-radius:10px;background-color:var(--half-transparent-base-color);width:100%;height:15%}.portfolio .filter input[type=text]{width:15%;border-color:var(--text-color);color:var(--base-color);font-size:17px}.dropdown{color:var(--text-color);padding:15px;font-size:16px;position:relative;display:inline-block;justify-content:center;cursor:pointer}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:5px 40px 5px 15px;background-color:var(--base-color);color:var(--text-color);font-size:20px;font-family:sans-serif;cursor:pointer}.dropdown .icon-container{width:60px;height:100%;position:absolute;right:0;display:flex;align-items:center;justify-content:center}.icon-container{top:-2%}.icon-container i{font-size:20px;color:var(--text-color)}#sort-by,#layout{float:right;margin-right:-2px}@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait){.topnav .nav-btn{padding:10px 8px;font-size:16px}#theme-switch{margin-top:0;margin-right:0}#section h2{font-size:2.5em}.portfolio .dropdown,#sort-by,#layout{width:100%;margin-bottom:-20px}.portfolio .filter{padding:10px 10px 30px 0;margin-top:-20px}.portfolio .filter input[type=text]{width:92.5%;font-size:15px;margin-left:12px}select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:15px}.icon-container i{font-size:15px}#sort-by,#layout{float:none}#sort-by .icon-container,#layout .icon-container{float:left;margin-top:3px}}@keyframes portfoliofadeIn{0%{visibility:hidden;opacity:0;top:23%}to{visibility:visible;opacity:1;top:3%}}@property --panel-visible{syntax: "<panel-visible>"; initial-value: hidden; inherits: false;}.projectview{position:fixed;border:2px solid var(--base-color);background-color:var(--base-color);border-radius:10px;border-color:var(--text-color);float:left;top:15%;left:5%;width:90%;height:65%;margin-right:40px;overflow:hidden;transition:.1s;z-index:10;visibility:hidden;opacity:0;transition:opacity .15s ease}.projectview span{display:block;height:100%;background:linear-gradient(90deg,transparent,var(--base-color),transparent);width:100%;position:relative;top:50%;left:-150%;transform:skew(-35deg)}.projectview .close:before{content:"✕"}.projectview .close{position:absolute;top:0;right:0;font-size:1.5em;color:red;background-color:#8b0000;text-align:center;height:5%;width:2%;z-index:15;cursor:pointer}.projectview #description{text-align:center;vertical-align:middle;line-height:100%;position:relative;top:45%;color:var(--text-color)}.projectview img{display:flex;justify-content:center;width:50%;align-items:center;margin:auto;transform:translateY(75%)}.projectview #download{background:green;color:#fff;text-align:center;border:none;border-radius:30px;display:inline-block;font-size:20px;font-weight:400;cursor:pointer;text-decoration:none;position:absolute;top:90%;left:38%;width:25%;height:7.5%;transition:2s}@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait){.projectview .close{top:0;right:2px;font-size:1.5em;border-radius:30px;height:6%;width:9%}.projectview #description{margin-top:35%;padding:0 0 4px 10px}.projectview img{position:absolute;top:20%;display:flex;justify-content:center;width:100%;align-items:center;padding:10px}.projectview #download{font-size:18px;width:60%;height:7%;position:relative;top:53%;left:20%}}.about-container{background-color:var(--half-transparent-base-color);padding:2.5px 5px 5px 2.5px}.about{position:relative;margin-top:26%;margin-bottom:4%;opacity:0;visibility:hidden;animation:aboutfadeIn 1s forwards 3.5s;-webkit-user-select:none;user-select:none}@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait){.about{margin-top:90%}.about h2{font-size:2em}.about p{font-size:1.5em}}@keyframes aboutfadeIn{0%{visibility:hidden;opacity:0;top:85%}to{visibility:visible;opacity:1;top:65%}}.contact-container{background-color:var(--half-transparent-base-color);width:100%;padding:2.5px 5px 5px 2.5px}.contact{position:relative;top:120%;opacity:0;display:block;visibility:hidden;animation:contactfadeIn 1s forwards 3.5s;-webkit-user-select:none;user-select:none}@keyframes contactfadeIn{0%{visibility:hidden;opacity:0;top:190%}to{visibility:visible;opacity:1;top:120%}}.box{width:250px;height:250px;border:2px solid var(--base-color);background-color:var(--base-color);border-radius:10px;border-color:var(--text-color);float:left;margin-right:40px;margin-bottom:40px;overflow:hidden;transition:.05s}.box p{display:hidden;color:var(--text-color);-webkit-user-select:none;user-select:none;text-align:center;text-decoration:none;position:static;float:inherit}.box span{display:block;height:100%;background:linear-gradient(90deg,transparent,white,transparent);width:100%;position:relative;top:0;left:-150%;transform:skew(-35deg)}.box:hover{--angle: 0deg;width:400px;height:400px;border-style:solid;border-radius:0;border-image:conic-gradient(from var(--angle),transparent 50%,var(--text-color)) 1 round;animation:3s spin linear infinite;cursor:pointer;transition:.1s}.box:hover span{left:130%;transition:.5s}.box img{display:block;width:100%;opacity:75%}.box:hover img{opacity:100%;transition:.5s}@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait){.box{width:100px;height:100px;border:2px solid var(--base-color);background-color:var(--base-color);border-radius:10px;border-color:var(--text-color);float:left;margin-right:18px;margin-bottom:18px;overflow:hidden;transition:.05s}.box:hover{width:150px;height:150px}}.box.horizontal-layout{width:100%;height:200px;border:2px solid var(--base-color);background-color:var(--transparent-base-color);border-radius:10px;border-color:var(--text-color);float:top;margin-bottom:20px;overflow:hidden;transition:.05s;position:relative}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.box.horizontal-layout #download{background:green;color:#fff;border-radius:30px;border:none;display:block;font-size:20px;font-weight:400;cursor:pointer;position:absolute;left:85%;top:40%;width:10%;height:15%;float:right}.box.horizontal-layout #download:hover{border:.5 solid white;transition:.1s}.box.horizontal-layout p{display:block;color:var(--text-color);-webkit-user-select:none;user-select:none;text-align:center;text-decoration:none;position:static;float:inherit}.box.horizontal-layout .title{font-size:2vw;margin-left:1%;margin-top:1%;float:left}.box.horizontal-layout .description{font-size:.85vw;margin-top:5%;text-align:center;vertical-align:middle;display:table-cell;display:none}.box.horizontal-layout .date{font-size:1vw;position:absolute;left:87.5%;bottom:10%}.box.horizontal-layout .os{font-size:1.5vw;position:absolute;right:85%;top:60%;float:left;display:none}.box.horizontal-layout .languages,.box.horizontal-layout .language{font-size:12px;position:fixed;right:50;top:50%;float:bottom;opacity:0%;display:none}.box.horizontal-layout .platform{font-size:12px;position:absolute;right:78%;top:80%;float:left;display:none}.box.horizontal-layout .field{font-size:12px;position:absolute;right:66%;top:80%;float:right;display:none}.box.horizontal-layout:hover{--angle: 0deg;width:100%;height:235px;border-style:solid;border-radius:0;border-image:conic-gradient(from var(--angle),transparent 50%,var(--text-color)) 1 round;animation:1s spin linear infinite;cursor:pointer;transition:.1s}.box.horizontal-layout:hover .description{margin-left:-19.5%;margin-top:-1.7%;transition:.1s}.box.horizontal-layout:hover .os{right:85%;transition:.1s}.box.horizontal-layout:hover .languages{right:80%;transition:.1s}.box.horizontal-layout:hover .platform{right:76%;transition:.1s}.box.horizontal-layout:hover .field{right:64%;transition:.1s}@keyframes spin{0%{--angle: 0deg}to{--angle: 360deg}}.box.horizontal-layout img{display:block;max-height:100%;width:10.5%;float:left}.box.horizontal-layout:hover img{opacity:100%;height:100%;width:12.5%;transition:.1s}@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait){.box.horizontal-layout{height:100px;border:1px solid var(--base-color);border-radius:5px;border-color:var(--text-color);float:top;overflow:hidden}.box.horizontal-layout #download{border-radius:10px;width:20%;display:block;font-size:10px;position:absolute;left:75%}.box.horizontal-layout p{display:block;color:var(--text-color);-webkit-user-select:none;user-select:none;text-align:center;text-decoration:none;position:static;float:inherit}.box.horizontal-layout .title{font-size:18px;margin-left:3%;margin-top:10%;float:left}.box.horizontal-layout .description{display:none}.box.horizontal-layout .os,.box.horizontal-layout .language,.box.horizontal-layout .platform,.box.horizontal-layout .field{display:none}.box.horizontal-layout img{display:block;max-height:100%;width:28%;float:left}.box.horizontal-layout:hover{max-height:105%}.box.horizontal-layout:hover .description,.box.horizontal-layout:hover .os,.box.horizontal-layout:hover .languages,.box.horizontal-layout:hover .platform,.box.horizontal-layout:hover .field{display:none}.box.horizontal-layout:hover .date{bottom:30%}.box.horizontal-layout:hover #download{font-size:13px}.box.horizontal-layout .date{font-size:10px;position:absolute;left:78%;bottom:16%;float:bottom}.box.horizontal-layout:hover img{display:block;width:60%}}#contact-info{margin:0 auto;background-color:transparent;color:var(--text-color);display:flex;white-space:nowrap;overflow:hidden;padding-left:5px;padding-bottom:20px;text-align:center;position:relative;align-items:center;justify-content:center}#contact-info a{color:var(--text-color)}#contact-info p{display:inline-block;align-items:center;vertical-align:middle;justify-content:center;margin:0 .5em auto;font-size:100px;text-align:center;overflow:hidden}@media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait){#contact-info p{font-size:6em}}