.nav-bar{padding:.2em 0;display:flex;width:20%;justify-content:space-evenly;position:fixed;margin-top:5vh;border:.1em solid white;border-radius:100rem;background-color:#16141fe6;z-index:1;opacity:0;transition:opacity 2.5s ease;pointer-events:none}.nav-bar.visible{opacity:1;pointer-events:auto}.option{padding:0;border:none;outline:none;background:linear-gradient(45deg,purple,#fff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.option:hover{transform:rotate(10deg) scale(1.1);transition:transform .2s ease,box-shadow 1s ease;box-shadow:0 2px #fff;border-radius:10rem}.option:focus{outline:none;border:.2em solid yellow;border-top:none}*{margin:0;padding:0;box-sizing:border-box}.home{display:flex;flex-direction:column;width:100%;height:100%;background:linear-gradient(230deg,#473547 10%,#161a20 80%);color:#fff}.header{display:flex;justify-content:space-evenly;margin-bottom:10vh}#logo{width:10rem}.presentationContainer{display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center;color:#f0f8ff;font-family:cursive}.presentation{width:30%;display:flex;flex-direction:column}.presentation>h1{font-size:2rem;background:linear-gradient(-10deg,#fff,purple);-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:.5rem 0}.presentationContainer>p{text-align:justify;font-size:1.2rem;margin-top:5%;color:purple}#personalPhoto{width:15rem;height:auto;border-radius:50%}.separator{width:70vw;height:.2vh;margin:20vh auto 10vh;border:none;background:radial-gradient(circle,#fff,purple);box-shadow:0 0 10px #fff;border-radius:20px}.stackContainer{display:flex;justify-content:space-evenly;margin-top:2rem;font-size:.5rem}.stack{display:flex;flex-direction:column;align-items:center}@media (max-width: 1024px){.presentationContainer{flex-direction:column}.presentation{width:70%}.skillContainer{grid-template-columns:1fr}}@media (max-width: 425px){.flatMenu{width:80%}.presentation{width:90%}#personalPhoto{width:70%}}@media (max-width: 320px){.flatMenu{width:95%}.presentation{width:100%}#personalPhoto{width:80%}}.contact-container{display:flex;justify-content:space-evenly;margin-left:auto;margin-top:2rem;padding:1em;border-radius:2rem;box-shadow:0 20px 30px #722872}.contact-container>a{margin-right:2rem}.contact-container>a :hover{transform:rotate(0) scale(1.3);transition:transform .2s ease,box-shadow 1s ease;overflow:visible}.about{display:flex;flex-direction:column;align-items:center;width:100%;height:100vh;background:linear-gradient(230deg,#463346 10%,#161a20 80%);color:#fff}.about>h1{margin-top:5vh;font-family:cursive}.about>p{width:50vw;text-align:justify;font-size:clamp(.8vw,1vw,1vw);color:#fff;margin:auto;border-radius:5rem;padding:2rem;box-shadow:0 0 10rem 30px #383636}.resume{display:flex;flex-direction:column;align-items:center;color:#fff}.resume>h1{font-size:1.5vw}.resume>button{width:5vw;background:linear-gradient(230deg,#5f035f 10%,#969757 80%);padding:0}.resume>button>a{display:flex;justify-content:center}.resume{margin:auto auto 0}@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-floating{animation:floating 3s ease-in-out infinite}.skills{background-color:#000;color:#fff;padding:2rem;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}.skills-title{text-align:center;font-size:1.875rem;font-weight:700;margin-bottom:1.5rem}.skills-grid{flex-grow:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-auto-rows:minmax(0,1fr);gap:2rem}.skills-category{font-size:clamp(1.5vw,1vw,1.5vw);font-weight:600;margin-bottom:.75rem;border-bottom:2px solid gray;padding-bottom:.5rem}.subcategory-container{padding:0}.skills-subcategory{font-size:clamp(1vw,1vw,1.2vw);font-weight:500;margin:1vh;color:#007bff;text-align:center}.skills-list{display:grid;gap:1vh}.skill-card{background-color:#1a1a1a;padding:.5vh .5vw .5vh 1vw;border-radius:.5rem;display:flex;align-items:center;gap:1vw;box-shadow:0 2px 5px purple;transition:all .3s ease;z-index:0}.skill-card:hover{box-shadow:0 8px 16px #0003;transform:translateY(-5px)}.skill-icon{font-size:2em}.skill-name{font-size:1.125rem;font-weight:500}.skill-description{font-size:.875rem;color:gray}.skill-card.highlight{border:2px solid #007bff;background-color:#333;box-shadow:0 4px 8px #007bff33}.skill-card.highlight:hover{background-color:#444;box-shadow:0 8px 16px #007bff4d;transform:translateY(-5px)}.messageContainer{display:flex;flex-direction:column;align-items:center;height:100%;width:100%;background:radial-gradient(circle,#000,#31273a);color:#fff}.messageContainer>h1{margin-top:5vh;font-family:cursive}.message{margin-top:5vh;display:flex;flex-direction:column;align-items:center;border:.1rem solid purple;border-radius:1rem;border-top:none;width:50vw;height:70vh;margin-top:10vh}.message>h2{margin:5vh}.message>input,textarea{padding:1vw;margin:2vh;min-width:40vw;max-width:40vw;height:5vh;background:none;border:.1rem solid white;border-radius:2rem;border-top:none;outline:none;color:#fff}.message>textarea{min-height:15vh;max-height:20vh}.form-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:#f8f9fa}.submit-button{padding:12px 24px;font-size:18px;font-weight:700;border:none;cursor:pointer;border-radius:8px;color:#fff;background:linear-gradient(45deg,#007bff,#0056b3);box-shadow:0 4px 6px #0000001a;transition:all .3s ease-in-out}.submit-button:hover{background:linear-gradient(45deg,#0056b3,#00408a);transform:translateY(-2px)}.submit-button:disabled{background:#adb5bd;cursor:not-allowed;transform:none}.skeleton-loader{width:20px;height:20px;border-radius:50%;border:3px solid white;border-top:3px solid transparent;animation:spin .8s linear infinite}.success-message,.error-message{font-size:1rem;font-weight:700;padding:12px;border-radius:8px;text-align:center;display:inline-block;max-width:100%;transition:opacity .3s ease-in-out,transform .3s ease-in-out;animation:fadeIn .3s ease-in-out}.success-message{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;box-shadow:0 4px 6px #00800033}.error-message{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb;box-shadow:0 4px 6px #f003}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.footer{width:100%;background-color:#21192e;color:purple;padding:1.5rem 2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 4px 6px #0000001a}.footer-content{text-align:center;margin-bottom:1rem}.footer-text{font-size:1rem}.footer-page{font-size:.875rem;margin-top:.5rem}.footer-links{display:flex;justify-content:center;gap:1.5rem;margin-top:1rem}.footer-link{font-size:1.125rem;color:#e2e8f0;text-decoration:none;transition:color .3s ease}.footer-link:hover{color:#fff}@media (max-width: 768px){.footer{flex-direction:column}}@media (max-width: 425px){.footer{padding:1rem 1.5rem}}@media (max-width: 320px){.footer{padding:.5rem 1rem}}.appContainer{display:flex;flex-direction:column;align-items:center;height:100vh;width:100vw}section{height:100vh;width:100vw}.projects{display:flex;flex-direction:column;align-items:center;height:100%;width:100%;background:radial-gradient(circle,#000,#464545);color:#fff}.projectContainer{margin-top:10vh;flex-grow:1;display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));grid-template-rows:0fr 0fr;gap:2rem}.project{padding:1vw;border:.2rem solid transparent;border-radius:1rem;box-shadow:0 0 20px purple;width:fit-content;height:fit-content}.projectMedia{background-color:#fff;width:20vw}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;margin:0;padding:0;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding: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}}