@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto Slab,Verdana,Geneva,Tahoma,sans-serif}html{scroll-padding-top:8rem;scroll-behavior:smooth}.app{width:100%;min-height:100vh;padding-top:10rem;display:flex;flex-direction:column;align-items:center}#inner-body{width:50rem}@media only screen and (max-width: 1000px){html{font-size:calc(10px + 1vw)}#inner-body{width:100%;padding-left:1rem;padding-right:1rem}}.card{background-color:#fff;border:solid 1px gainsboro;border-radius:2rem;box-shadow:0 4px 8px #0000001a;transition:box-shadow .3s ease-in-out}.card:hover{box-shadow:0 8px 16px #0003}#navbar{width:40rem;height:5rem;position:fixed;top:1rem;z-index:100;display:flex;justify-content:space-evenly;align-items:center;gap:1rem}.navlinks{height:100%;border:solid transparent 1px;text-decoration:none;color:#000;display:flex;justify-content:center;align-items:center;flex-grow:1}.navlinks:hover{border:solid gainsboro 1px;border-radius:2rem;color:gray}@media only screen and (max-width: 1000px){#navbar{width:95%;gap:0rem}}#about{padding-bottom:10rem;display:grid;grid-template-areas:"a a b" "a a b" "c c c";grid-template-columns:1fr 1fr 1fr;gap:1rem}#about>*{padding:1rem}#hello{padding:4rem;font-size:2rem;overflow-wrap:break-word;word-wrap:break-word;grid-area:a;display:flex;flex-direction:column;flex:wrap;justify-content:center;align-items:center}#head{grid-area:b}#socials{font-size:3rem;grid-area:c;display:flex;justify-content:space-evenly;align-items:center}@media only screen and (max-width: 1000px){#about{display:flex;flex-direction:column}}.project-card{position:relative;width:16rem;height:16rem;padding:1rem;overflow:hidden;display:grid;grid-template-rows:9rem 3fr .5fr .5fr}.project-image{width:100%;height:100%;border-radius:1rem;cursor:pointer;overflow:hidden;background:linear-gradient(#e66465,#9198e5)}.project-image>img{object-fit:cover;width:100%;height:100%}img:after{content:"(url: " attr(src) ")"}.project-title{width:100%;padding:.2rem;text-overflow:hidden;overflow:hidden}.project-date{text-align:right;font-size:small}.project-skills{width:100%}.project-skill{width:fit-content;padding:.3rem;font-size:small;color:#dcdcdc;background-color:#000;border-radius:.5rem}.github-link-overlay{position:absolute;bottom:0;right:0;padding:1rem;font-size:1.5rem;background:#000000b3;color:#fff;border-top-left-radius:.5rem;opacity:0;transition:opacity .3s ease;text-decoration:none}.project-card:hover .github-link-overlay{opacity:1}.project-card:hover .github-link-overlay:hover{opacity:1;background-color:#00f}@media only screen and (max-width: 1000px){.project-card{width:100%}}#projects{padding-bottom:10rem;display:flex;flex-direction:column;gap:1rem}#projects-title{padding:2rem;font-size:larger}#project-cards{width:100%;display:flex;justify-content:center;gap:1rem;flex-flow:wrap}#error-card{padding:1rem}@media only screen and (max-width: 1000px){#project-cards{width:100%;flex-direction:column;align-items:center}}.search-container{height:fit-content;padding:1rem;overflow:hidden}.search-form{width:100%;height:3rem;border-radius:1rem;border:1px gainsboro solid;overflow:hidden;display:flex}.search-input{padding:1rem;border:none;flex-grow:1}.search-input:focus{outline:none}.search-button{width:30%;background-color:#dcdcdc;border:none}.search-button:hover{background-color:#708090;color:#fff}#resume{padding-bottom:10rem;display:flex;flex-direction:column;gap:1rem}#resume-title{padding:2rem;font-size:larger}#resume-card{height:50rem;overflow:hidden}#resume-embed{width:100%;height:100%}#contact{padding-bottom:10rem;display:flex;flex-direction:column;gap:2rem}#contact-title{padding:2rem;font-size:larger}#contact-card{width:100%;height:20rem;padding:1rem}#contact-form{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 3fr 1fr;grid-template-areas:"a b" "c c" "d d";gap:1rem}#contact-form>*{border-radius:.5rem;padding:1rem}#contact-name{grid-area:a}#contact-email{grid-area:b}#contact-message{grid-area:c;resize:none}#contact-submit{grid-area:d}#state-message{position:fixed;left:50%;bottom:1rem;transform:translate(-50%);padding:1rem;background-color:#59d1f970;z-index:100}@media only screen and (max-width: 1000px){#contact-form{display:flex;flex-direction:column}}