@import url(https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Quicksand:wght@300..700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap);#app,body,html{font-family:Sour Gummy,sans-serif}#app .header,#app .skill{font-family:Quicksand,sans-serif}.container{display:flex;color:#f0efee;width:100%;height:95vh;left:0;top:0;background:#00bbfb;border-radius:0 0 8em 8em;text-align:center;justify-content:center;flex-direction:row;align-items:center;gap:10vw}.container .hero-text{width:auto}.container .hero-text,.container .hero-text .hey{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.container .hero-text .hey{width:5em;font-size:10em;text-align:left}.container .hero-text .hey .name{font-size:.2em;font-weight:200}.container .image img{width:35em}.projects,.skills{display:flex;left:0;top:0;flex-direction:column;padding:5em 2em;gap:2em}.projects .project-area,.projects .skill-area,.skills .project-area,.skills .skill-area{display:flex;gap:1em;width:100%;flex-wrap:wrap}.projects .project-area a,.projects .skill-area a,.skills .project-area a,.skills .skill-area a{text-decoration:none;color:inherit}.projects .project-area .skill-container,.projects .skill-area .skill-container,.skills .project-area .skill-container,.skills .skill-area .skill-container{background:#f0efee;width:12em;height:4em;display:flex;padding:2em;border:1px solid #f4f4f4;border-radius:1em;flex-direction:column;justify-content:center;gap:.5em;text-decoration:none}.projects .project-area .skill-container .skill,.projects .skill-area .skill-container .skill,.skills .project-area .skill-container .skill,.skills .skill-area .skill-container .skill{font-size:1.5em}.projects .project-area .skill-container .icon img,.projects .skill-area .skill-container .icon img,.skills .project-area .skill-container .icon img,.skills .skill-area .skill-container .icon img{width:auto;height:1.5em}.projects .project-area .skill-container,.projects .skill-area .skill-container,.skills .project-area .skill-container,.skills .skill-area .skill-container{background:linear-gradient(90deg,#f0efee,#f0efee),linear-gradient(90deg,red,#ff00b4,#0064c8);background-size:100% 5px,0 5px;background-position:100% 100%,0 100%;background-repeat:no-repeat;transition:background-size .4s}.projects .project-area .skill-container:hover,.projects .skill-area .skill-container:hover,.skills .project-area .skill-container:hover,.skills .skill-area .skill-container:hover{background-size:0 10px,100% 5px}.projects .project-area .project-container,.projects .skill-area .project-container,.skills .project-area .project-container,.skills .skill-area .project-container{background:#f0efee;width:25vw;height:40em;display:flex;padding:1em;border:1px solid #ededed;border-radius:1em;flex-direction:column;justify-content:flex-start;gap:1em;text-decoration:none}.projects .project-area .project-container .pills-container,.projects .skill-area .project-container .pills-container,.skills .project-area .project-container .pills-container,.skills .skill-area .project-container .pills-container{display:flex;gap:1em;flex-wrap:wrap}.projects .project-area .project-container .pills-container .pill,.projects .skill-area .project-container .pills-container .pill,.skills .project-area .project-container .pills-container .pill,.skills .skill-area .project-container .pills-container .pill{display:flex;gap:1em;border:2px solid #c5c5c5;border-radius:3em;padding:.75em 1em;width:-moz-fit-content;width:fit-content;align-items:center}.projects .project-area .project-container .pills-container .pill .skill,.projects .skill-area .project-container .pills-container .pill .skill,.skills .project-area .project-container .pills-container .pill .skill,.skills .skill-area .project-container .pills-container .pill .skill{font-size:1rem}.projects .project-area .project-container .pills-container .pill .icon img,.projects .skill-area .project-container .pills-container .pill .icon img,.skills .project-area .project-container .pills-container .pill .icon img,.skills .skill-area .project-container .pills-container .pill .icon img{width:auto;height:1.5em}.projects .project-area .project-container .projectImage,.projects .skill-area .project-container .projectImage,.skills .project-area .project-container .projectImage,.skills .skill-area .project-container .projectImage{border-radius:1em}.projects .project-area .project-container .project,.projects .skill-area .project-container .project,.skills .project-area .project-container .project,.skills .skill-area .project-container .project{font-size:1.75em;font-family:Quicksand,sans-serif;padding-bottom:.5em;text-decoration:none}.projects .project-area .project-container .projectDescription,.projects .skill-area .project-container .projectDescription,.skills .project-area .project-container .projectDescription,.skills .skill-area .project-container .projectDescription{font-size:1.25em;font-weight:200}.projects .project-area .project-container,.projects .skill-area .project-container,.skills .project-area .project-container,.skills .skill-area .project-container{background:linear-gradient(90deg,#f0efee,#f0efee),linear-gradient(90deg,red,#ff00b4,#0064c8);background-size:100% 5px,0 5px;background-position:100% 100%,0 100%;background-repeat:no-repeat;transition:background-size .4s}.projects .project-area .project-container:hover,.projects .skill-area .project-container:hover,.skills .project-area .project-container:hover,.skills .skill-area .project-container:hover{background-size:0 10px,100% 5px}.projects .project-area,.skills .project-area{gap:3em}@media only screen and (width <= 1500px){.container{flex-direction:column}.container .hero-text .hey{font-size:15vw;width:4em;text-align:center}.container .image img{width:50vw}}.header{font-size:2.5em}