#root{min-width:100svw;min-height:100lvh;text-align:center;background:radial-gradient(circle at 100% 0%,rgb(20,20,120),black,rgb(0,10,30));color:#fff;transform:logo-spin 1s linear}body{margin:0;overflow-x:hidden}.App-container{display:grid}.App-container h1{font-size:2.5rem;border-radius:50%;padding:10px;box-shadow:0 0 20px #5ad0ff;display:block;background:radial-gradient(black 30%,rgb(6,74,119) 125%);position:relative;left:50%;transform:translate(-50%);max-width:700px}.App-container h2{font-size:1.5rem;display:block;background:linear-gradient(rgb(0,119,255) 0%,rgb(1,0,78) 50%,black);position:relative;left:50%;transform:translate(-50%)}.App-container button{color:#add8e6;background:linear-gradient(transparent,blue,transparent)}.App-container button:hover{color:#fff;box-shadow:0 0 10px #fff}::-webkit-scrollbar{width:20px;height:20px}::-webkit-scrollbar-track{background:#666666;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(to top right,darkblue,grey);border-radius:10px;border:2px solid #f0f0f0}::-webkit-scrollbar-thumb:hover{background:linear-gradient(to top right,blue,white)}@media (min-width: 1024px){.App-container h1{font-size:3.5rem}.App-container h2{font-size:2rem}}.HomePage-container{position:relative;width:min(1000px,100svw);left:50%;transform:translate(-50%);gap:50px}.HomePage-container *{max-width:90%}.portrait-box{background:url(/assets/heming_coder-9208613b.png);background-size:cover;width:200px;height:300px;position:relative;left:50%;animation:enterframe .7s ease-in forwards;border:solid;border-width:15px;border-style:ridge;border-color:#06005780;border-right:none;box-shadow:10px 10px 5px #000}@keyframes enterframe{0%{transform:translate(50%) scale(1) perspective(1000px) rotateY(90deg);opacity:0}to{transform:translate(-50%) scale(1) perspective(1000px) rotateY(20deg);opacity:1}}.portrait-box:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to right,transparent 25%,rgb(0,162,255) 200%);background-clip:padding-box;z-index:1;animation:pulse1 3s ease-in-out infinite}@keyframes pulse1{0%,to{left:0}50%{left:50%}}.link-container{position:relative;left:50%;transform:translate(-50%);display:flex;justify-content:center;flex-wrap:wrap;gap:20px;grid-column:span 3}.link-button{font-size:30px;color:#add8e6;display:flex;align-items:center;justify-content:center;background:url(/assets/blue_tech-b50e134c.png);border-radius:5%;width:200px;height:200px;filter:drop-shadow(5px 5px 5px white)}.link-button:hover{color:#fff;box-shadow:0 0 10px #0f5;transition:transform .2s linear;transform:scale(1.1);background-size:cover}.HomePage-container p{font-size:1.5rem;white-space:pre-line;text-align:left;padding:10px;box-shadow:5px 5px 20px 5px #000;width:fit-content;border:solid;border-color:#005572;border-left:none;border-right:none;border-radius:10%;justify-self:center;background:linear-gradient(black -100%,transparent 100%)}.text-3rem{font-size:3rem;font-weight:500;color:#add8e6;text-shadow:0 0 20px yellowgreen}.text-2rem{font-size:2rem;font-weight:500;color:#00bfff}.footer-container{width:100%;margin-top:80px;margin-bottom:0;bottom:0%;grid-column:span 3;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;justify-self:center;gap:10vw;border-radius:20px;background:black;padding:2vh}.HomePage-container label{font-size:1.5rem;padding-right:10px}.footer-container a{display:block;width:fit-content;font-size:2rem;box-shadow:0 0 1px 1px #00008b;border-radius:50%}.footer-container a:hover{color:#fff;background:linear-gradient(transparent,darkblue);box-shadow:0 0 20px 5px #add8e6;border-radius:50%}.flex-column{display:flex;justify-content:left;flex-direction:column;justify-self:center}.grid-item-2{justify-self:center}@media (min-width: 600px){.HomePage-container{position:relative;left:50%;transform:translate(-50%);margin-bottom:50px;display:grid;grid-column:1;justify-content:center;align-items:center;grid-template-columns:1fr 1fr 1fr}.link-container{grid-column:span 2;grid-column-start:1;grid-column-end:3}.grid-item-2{grid-column:span 2;grid-column-start:2;grid-column-end:4}.grid-item-full{grid-column:span 3;white-space:pre-line}}.image-gallery-container{min-width:100svw;padding-top:100px;padding-bottom:200px}.image-gallery-container ul{display:flex;flex-wrap:wrap;justify-content:center;gap:50px}.image-gallery-container li{list-style-type:none}@media (max-width: 320px){.image-gallery-container{width:320px}}.ImageCard{align-self:center;position:relative;background-color:#25252e;height:auto;width:200px;box-shadow:0 0 40px #003cff;transition:transform .3s ease;transform:perspective(1000px) rotateX(30deg) rotateY(30deg);padding:10px;border:solid;border-width:5px;border-radius:10%}.ImageCard:hover{cursor:pointer;background-color:#25252e;height:auto;width:200px;box-shadow:0 0 80px #05ee81;transform:perspective(1000px) rotateX(0) rotateY(0) scale(1.5);z-index:1}.ImageCard h2{display:block;font-size:1.5rem;background-color:gray;text-align:center}.ImageCard img{object-fit:cover;height:auto;width:200px}.ImageCard p{font-size:1rem;display:none}.ImageCard:hover p{display:block}.ProjectsPage-container{background:url(/assets/tech_globe-f586d2a3.png);min-height:100vh}.AboutPage{display:flex;justify-content:center}.AboutPage-container{display:grid;grid-template-columns:1fr 1fr 1fr;justify-content:center;width:800px;gap:50px;position:relative;left:50%;transform:translate(-50%)}@media (max-width: 800px){.AboutPage-container{width:100svw}}.AboutPage-container h2{grid-column:span 3}.AboutPage-container p{grid-column:span 3;white-space:pre-line;text-align:left;padding:10px;box-shadow:5px 5px 20px 5px #000;width:fit-content;border:solid;border-color:#005572;border-left:none;border-right:none;border-radius:10%;background:linear-gradient(black -100%,transparent 100%)}.AboutPage-container img{max-width:600px}@keyframes shadow-pulse{0%{box-shadow:0 0 5px #00a2ff}50%{box-shadow:0 0 30px #00a2ff}to{box-shadow:0 0 5px #00a2ff}}.text-short{grid-column:span 3;display:flex;flex-direction:column;justify-content:center;align-items:center}.text-short p{font-size:max(1rem,1svw);color:#fff;text-align:left;animation:shadow-pulse 3s ease-in-out infinite}.text-long{grid-column:span 3;display:flex;flex-direction:column;justify-content:center;align-items:left}.text-long p{color:#fff;white-space:collapse;text-align:left;font-size:1rem}.AboutPage-col-2{grid-column:span 2}.AboutPage-col-3{grid-column:span 3}.AboutPage-container button{color:#add8e6;background:linear-gradient(transparent,blue,transparent)}.AboutPage-container button:hover{color:#fff;box-shadow:0 0 10px #fff}@media (max-width: 600px){.AboutPage-container h2,.AboutPage-container p{grid-column:span 3}.AboutPage-container img{grid-column:span 3;width:100svw}}.form-container{display:flex;justify-content:center;width:min(600px,90svw);margin:auto;padding:20px;border-radius:8px;background:linear-gradient(transparent 0%,rgb(55,45,170),transparent 100%)}.form-container form{display:grid;grid-template-columns:1fr}.form-container label{font-size:1.3rem;display:flex;justify-content:center;flex-direction:column;margin-bottom:10px}.form-container input,.form-container textarea{background:rgb(50,50,50);color:#fff;font-family:arial;font-size:1.2rem;padding:8px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px;height:auto}.form-container button{padding:10px}.ContactPage-container{display:flex;justify-content:center;flex-direction:column}.Navbar{position:relative;min-width:100svw;display:flex;background:linear-gradient(rgb(50,50,50)30%,black 80%,rgb(50,50,50));justify-content:space-between;align-items:center;z-index:1}.navbar-left{display:flex;justify-content:center;align-items:center;margin-left:20px}.navbar-logo{width:40px;height:40px;border-radius:50%;margin-right:5px;filter:drop-shadow(1px 1px 1px white)}.navbar-title{font-family:cursive;color:#87ceeb;filter:drop-shadow(1px 1px 0 darkblue)}.Navbar ul{list-style:none;padding:0;display:flex;flex-direction:row;gap:5svw;margin-right:5svw}.Navbar li{font-size:20px;color:#fff}.Navbar li:hover{filter:drop-shadow(1px 1px rgb(0,204,255))}.Navbar button{display:none;color:#fff;background:radial-gradient(black,darkgrey);cursor:pointer}@media (max-width: 700px){.Navbar li{display:none}.Navbar nav button{display:block;height:50px}.responsive_nav{position:fixed;top:-20px;left:0}.responsive_nav ul{position:fixed;padding-top:20px;min-width:100svw;background:linear-gradient(rgb(50,50,50)30%,black 80%,rgb(50,50,50));justify-content:center;z-index:1;display:flex;flex-direction:column;gap:3rem}.responsive_nav li{display:block}.responsive_nav button{background:radial-gradient(black,darkgrey);border-radius:0}}.carousel-container{position:relative;width:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;perspective:600px}.carousel-image-container{position:relative;display:flex;justify-content:start;gap:8px;height:100px;width:100%;background:linear-gradient(to top,black 50%,transparent 100%);border-radius:10px;overflow:auto;overflow-y:hidden;padding:1rem}.carousel-image{position:relative;height:80px;object-fit:contain;border-radius:10px;cursor:pointer;transition:transform 1s ease-in-out,opacity 1s ease-in-out}.carousel-image:hover{transform:scale(1.1);box-shadow:0 0 10px #fff;transition:transform .3s ease}.App-container button.playButton{position:absolute;bottom:120px;left:0%;padding:.5rem;cursor:pointer;font-size:1.5rem;background:radial-gradient(transparent,black);box-shadow:0 0 10px silver;z-index:20}.center-image-frame{display:flex;justify-content:center;align-items:center;height:450px;width:100%}.center-image{position:relative;justify-self:center;align-self:center;max-height:100%;max-width:min(100%,450px);height:auto;width:auto;z-index:10;border-radius:10px;animation:appear .7s ease-in-out}@keyframes appear{0%{opacity:1;transform:scale(.5) translate(-20%) rotateY(-90deg)}to{opacity:1;transform:scale(1)}}@keyframes pull-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-10%) scale(0%);opacity:0}}@media (min-width: 1024px){.center-image-frame{height:600px}}.projectContainer{background:url(/assets/tech_globe-f586d2a3.png);min-height:100vh}.projectDetailsContainer{display:flex;flex-direction:column;padding:0 5%;width:90svw;gap:1rem}.projectDetails-images{grid-column:span 12}.projectDetailsContainer a{color:#64c800;background:linear-gradient(rgb(50,150,50) -100%,black,rgb(50,150,50) 200%);padding:.5rem;border-radius:.5rem}.projectDetailsContainer a:hover{color:#96fa00;background:linear-gradient(rgb(100,200,50) -100%,black,rgb(100,200,50) 200%)}.projectDetails-tech{grid-column:1 / -1;font-size:1rem;text-align:center;display:block;background:linear-gradient(rgb(50,50,150) -100%,black,rgb(50,50,150) 200%);padding:10px;justify-self:center;color:#fff;font-family:Arial;font-weight:600;border-radius:1rem}.projectDetails-text{font-size:1rem;text-align:left;display:block;background:linear-gradient(to top right,rgb(30,30,30),rgb(50,50,50));padding:10px;color:#fff;font-family:Arial;font-weight:600;border-radius:1rem}@media (min-width: 1024px){.projectDetailsContainer{display:grid;grid-template-columns:repeat(12,1fr)}.projectDetails-images{grid-column:span 6;justify-self:start;width:100%}.projectDetails-text{align-self:start;margin-top:2rem;justify-self:end;grid-column:span 6;width:100%;font-size:1.25rem}}:root{font-family:Inter,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;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}
