#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}body{font-family:Playpen Sans,sans-serif}.app-container{width:100%;height:100vh}.skills-grid{display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:2rem;justify-content:center}.skill-category{background:rgba(0,0,0,.1);padding:1.5rem;border-radius:8px;border:1px solid rgba(228,114,139,.2);flex:1;min-width:300px;max-width:400px}.skill-category h3{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:#e4728b}.skill-icon{font-size:1.2em}.tech-icon{font-size:1em;margin-right:.5rem;color:#e4728b}.subcategory{font-weight:700;margin-top:1rem;margin-bottom:.5rem;color:#e4728b;font-style:italic}.skill-category ul{list-style:none;padding-left:0}.skill-category li{padding:.25rem 0;display:flex;align-items:center}.skill-category .subcategory{display:block}:root{--highlight: #d7c7f9;--select: #31254a;--background: #67548c;--header: #FFFADE;--project: #FF9475;--project-accent: #AB6095;--project-button: #E4728A;--project-button-select: #F9F871;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#67548c;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{height:100vh;margin:auto;line-height:1.5;font-weight:400;font-size:1.1em}#menu{z-index:2}#menu-bars{width:45px;height:40px;margin:30px 0 20px 20px;cursor:pointer}.menu-bar{height:5px;width:100%;background-color:#fff;display:block;border-radius:5px;transition:.3s ease}#bar-1{transform:translateY(-4px)}#bar-3{transform:translateY(4px)}#nav{transition:.3s ease}#nav ul{padding:0 22px;list-style-type:none}#nav li{list-style:none;padding:12px 0}#nav li a{color:#000;font-size:20px;text-decoration:none}#nav li a:hover{font-weight:700}.menu-bg,#menu{top:0;left:0;position:fixed}.menu-bg{z-index:1;width:0;height:0;margin:30px 0 20px 20px;background:radial-gradient(circle,var(--highlight),var(--highlight));border-radius:50%;transition:.3s ease}.change{display:block}.change .menu-bar{background-color:#000}.change #bar-1{transform:translateY(4px) rotate(-45deg)}.change #bar-2{opacity:0}.change #bar-3{transform:translateY(-6px) rotate(45deg)}.change-bg{width:520px;height:460px;transform:translate(-60%,-30%)}main{width:100%;padding:0%;display:flex;justify-content:center;flex-wrap:wrap;align-items:center;flex-direction:column}.section-header{text-align:center;margin:0 auto;padding:40px 0;color:var(--header);text-transform:uppercase;letter-spacing:.2em}#about-me{text-align:left}.my-info{display:flex;justify-content:flex-start;align-items:center}#profile-picture{max-width:30%;width:100%;border-radius:50%;display:inline;float:right;margin-left:1em}#portfolio p{text-align:left}.featured-card{background:linear-gradient(270deg,#ff9475,#ffc465,#e4728a);background-size:600% 600%;border-radius:20px;margin:4% auto;display:flex;flex-direction:column;align-items:center;height:100%;padding-bottom:2em;-webkit-animation:projectcard 30s ease infinite;-moz-animation:projectcard 30s ease infinite;animation:projectcard 30s ease infinite;-webkit-box-shadow:10px 10px 33px -12px var(--select);-moz-box-shadow:10px 10px 33px -12px var(--select);box-shadow:10px 10px 33px -12px var(--select)}.project-card{background:linear-gradient(270deg,#4467A6,#008CB4,#00A78C);background-size:600% 600%;margin:2% auto;width:70%;border-radius:20px;display:flex;flex-direction:column;align-items:center;height:100%;padding-bottom:2em;-webkit-animation:projectcard 30s ease infinite;-moz-animation:projectcard 30s ease infinite;animation:projectcard 30s ease infinite;-webkit-box-shadow:10px 10px 33px -12px var(--select);-moz-box-shadow:10px 10px 33px -12px var(--select);box-shadow:10px 10px 33px -12px var(--select)}@-webkit-keyframes projectcard{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@-moz-keyframes projectcard{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes projectcard{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.project-header{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.project-name{padding-left:8em}.links-container{flex-direction:column;width:20%}.project-info{display:flex;flex-direction:row;width:90%;justify-content:space-between}.project-img{border:1px solid var(--project-accent);border-radius:8px;width:48%;-webkit-box-shadow:1px 3px 27px -9px var(--select);-moz-box-shadow:1px 3px 27px -9px var(--select);box-shadow:1px 3px 27px -9px var(--select)}.project-text{background-color:#fff;color:var(--background);border-radius:8px;width:48%;-webkit-box-shadow:1px 3px 27px -9px var(--select);-moz-box-shadow:1px 3px 27px -9px var(--select);box-shadow:1px 3px 27px -9px var(--select);overflow:scroll;padding:.2em}.description{padding-left:.5em}.project-link,.project-code{display:inline-block;height:1.5em;width:5em;padding:.25em .5em;font-size:.8em;margin:.2em;text-decoration:none;background-color:var(--project-accent);color:#fff;border:2px solid var(--project-accent);border-radius:4px;transition:background-color .3s,color .3s,border-color .3s}.inactive:before{content:"Deployed"}.inactive:hover:before{content:"🚫"}.project-link:hover,.project-code:hover{color:var(--background);background-color:var(--project-button-select);border-color:var(--project-button-select)}.topics-container{padding:0 2.5em}.topic{display:inline-block;color:var(--header);font-weight:600;font-size:xx-small;margin:.1em;padding:5px 10px;border-radius:20px;background-color:var(--project)}.dates{font-size:x-small;display:flex;flex-direction:column;margin:0 auto;align-items:center}#skills-list,#skills-list li{list-style:none}#skills-list{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0;list-style:none}.skillset{padding-left:20px;list-style:none;text-transform:uppercase;font-weight:bolder}.skillset>li{margin-bottom:5px}.skillset>li:first-child{margin-top:5px}#skills-list>li{flex:0 0 45%;margin-bottom:20px}#download-resume{padding:10px 15px;margin-bottom:2em;margin-top:2em}iframe{width:50vw;width:100%;max-width:830px;height:calc(100vh - 250px);border-radius:10%;border:none;overflow:scroll}#download-resume a,#open-resume a,button{display:inline-block;padding:10px 20px;background-color:var(--highlight);color:#000;text-decoration:none;border-radius:5px;border:none;cursor:pointer;transition:background-color .3s ease}#download-resume a:hover,button:hover{background-color:var(--select);color:#fff}#contact{width:100%;height:100%}.contact-container{display:flex;flex-direction:row;justify-content:space-between;margin:0 auto;padding:20px;position:relative;max-width:840px}#contact-form{max-width:400px;font-weight:400;display:flex;flex-direction:column;width:calc(45% - 20px)}.user-input{max-width:400px;font-weight:400;background-color:var(--select);color:#fff;letter-spacing:1px;border-radius:4px;border:#fff;padding:1em;margin:0 0 .5em}#direct-contact{max-width:400px;width:calc(45% - 20px)}#direct-contact li{line-height:2.5}#contact-list{list-style-type:none;margin:0 auto;padding-right:20px;text-align:start}.location{margin-left:44px}.phone{margin-left:40px}.email{margin-left:42px}.contact-text{letter-spacing:1.5px}.contact-text a{color:#fff;text-decoration:none;transition-duration:.2s}.contact-text a:hover{color:#7fff00;letter-spacing:.1em}#social-media{position:relative;font-size:22px;text-align:center;width:100%;margin:0 auto;padding:0}#social-media li a{color:var(--select)}#social-media li{position:relative;display:inline-block;height:60px;width:60px;margin:10px 3px;line-height:60px;border-radius:50%;color:var(--highlight);background-color:var(--highlight);cursor:pointer;transition:all .2s ease-in-out}#social-media li:after{position:absolute;top:0;left:0;width:60px;height:60px;line-height:60px;border-radius:50%;opacity:0;box-shadow:0 0 0 1px #fff;transition:all .2s ease-in-out}#social-media li:hover{background-color:var(--select)}#social-media li:hover:after{opacity:1;transform:scale(1.12);transition-timing-function:cubic-bezier(.37,.74,.15,1.65)}#social-media li:hover a{color:var(--highlight)}footer{padding-bottom:20px;font-size:x-small}footer hr{border:none;background-image:linear-gradient(to right,white 10%,rgba(255,255,255,0) 0%);background-position:bottom;background-size:8px 1px;background-repeat:repeat-x;height:1px}@media screen and (max-width: 768px){body{font-size:1em}.my-info{flex-direction:column-reverse}#profile-picture{max-width:60%;width:100%;margin:0;align-items:center}.contact-container{flex-direction:column}#contact-form,#direct-contact{width:100%;align-self:center;margin:1em 0}#contact-list{font-size:.8em}.location{margin-left:20px}.phone{margin-left:18px}.email{margin-left:20px}#skills-list>li{flex:0 0 100%;margin-bottom:1.8em}.project-card,.featured-card{width:100%}.project-header{flex-direction:column;width:100%}.project-name{padding:4%;text-align:center}.links-container{flex-direction:row;width:100%}.project-code,.project-link{margin-inline:4%;margin-bottom:2%}.project-info{flex-direction:column}.project-img,.project-text{width:100%;margin:1.5%}}