:root{--fade-end-day: rgba(224, 228, 235, 1);--fade-end-night: rgba(27, 31, 38, 1);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0;margin:0}.day-mode{background:linear-gradient(to bottom,#90dffe,#38a3d1);transition:background .6s ease,color .6s ease;color:#000}.night-mode{background:linear-gradient(to bottom,#020e18,#020e18cc,#020e1880),url(https://www.shutterstock.com/image-vector/starry-night-sky-star-constellations-600nw-1901997355.jpg);background-repeat:repeat;background-size:auto;transition:background .6s ease,color .6s ease;color:#fff}.loading-screen{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#1b1f26;color:#fff}.loading-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.spinner{width:50px;height:50px;border:5px solid rgba(255,255,255,.3);border-top:5px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.framework-list{display:flex;justify-content:center;align-items:center;gap:20px;padding:0;list-style:none;flex-wrap:wrap}.framework-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;border:1px solid #e0e4eb;border-radius:8px;box-shadow:2px 4px 8px #0000001a;transition:box-shadow .3s ease;width:120px;height:120px;text-align:center}.framework-box:hover{box-shadow:4px 6px 12px #0003}.framework-logo{font-size:40px;margin-bottom:10px}.App{display:flex;justify-content:center;min-height:100vh}.content-wrapper{position:relative;display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;transition:background-color .6s ease,box-shadow .6s ease,border-left .6s ease,border-right .6s ease;padding:0}.day-mode .content-wrapper{background-color:#e0e4eb;box-shadow:0 4px 8px #0003;border-left:1px solid #9fb2be;border-right:1px solid #9fb2be}.night-mode .content-wrapper{background-color:#1b1f26;box-shadow:0 4px 8px #0003;border-left:1px solid #313436;border-right:1px solid #313436}.background-image{height:300px;width:100%;margin-bottom:-100px;position:relative;z-index:0;background-size:cover;background-position:center;transition:background .6s ease,background-image .6s ease}.day-mode .background-image{background-image:url(/assets/day-CYfkZ2g0.jpg)}.night-mode .background-image{background-image:url(/assets/night-C7M8JOrq.jpg)}.app-header{display:flex;align-items:center;padding:120px 30px 0;position:relative;z-index:1}.profile-image{width:220px;height:220px;border-radius:50%;margin-right:20px;background-image:url(/assets/profile-BrxR2Xp1.jpg);background-size:cover;background-position:center;transition:background-size .6s ease,border .6s ease;margin-top:-100px;z-index:2}.day-mode .profile-image{border:5px solid #e0e4eb}.night-mode .profile-image{border:5px solid #1b1f26}.profile-image:hover{background-size:110%}.text-container{display:flex;flex-direction:column;margin-top:-20px}.app-header h1,.app-header h2{margin:0;padding:0}.app-header h2{margin-bottom:5px}.social-links{display:flex;gap:15px;flex-wrap:wrap}.social-link-container{display:flex;align-items:center;gap:5px;background-color:#f0f0f0;padding:5px 10px;border-radius:5px;transition:background-color .3s ease;color:inherit}.night-mode .social-link-container{background-color:#333}.social-link-container a{text-decoration:none;color:inherit;transition:color .3s ease}.social-link-container:hover{background-color:#e0e0e0}.night-mode .social-link-container:hover{background-color:#444}.social-link-text{display:inline-block;font-size:14px;color:inherit}.app-content{padding:20px 50px 0;margin-top:10px;transition:border-top .6s ease,box-shadow .6s ease}.day-mode .app-content{border-top:1px solid #e0e4eb;box-shadow:0 -1px 2px #0003}.night-mode .app-content{border-top:1px solid #313436;box-shadow:0 -1px 2px #0003}.introduction p{font-size:16px;line-height:1.5}.professional-section h3{margin:0;padding:0}.professional-section-wrapper{padding:0 20px;margin-left:15px;border-left:2px solid #bababa;position:relative}.circle-timeline{width:16px;height:16px;background-color:#add8e6;border-radius:50%;position:absolute;right:calc(100% + 14px);top:0}.professional-experience h4,.professional-experience h5{margin:0;padding:0;font-weight:600}.professional-experience{margin-top:20px;padding:10px;transition:border .6s ease,box-shadow .6s ease;position:relative}.day-mode .professional-experience{border:1px solid #e0e4eb;box-shadow:2px 4px 8px #0003}.night-mode .professional-experience{border:1px solid #313436;box-shadow:2px 4px 8px #0003}.skills{padding:20px;margin-bottom:20px}.skills h4{margin:0;padding:0;font-weight:600}.day-mode .skills{border:1px solid #e0e4eb;box-shadow:2px 4px 8px #0003}.night-mode .skills{border:1px solid #313436;box-shadow:2px 4px 8px #0003}.project-section{margin:40px 7px;text-align:center;border:1px solid #313436;box-shadow:2px 4px 8px #0003;padding:20px}.day-mode .project-section{border:1px solid #e0e4eb;box-shadow:2px 4px 8px #0003}.project-section h3{margin-bottom:20px;padding:0;text-align:left}.projects-title{margin-bottom:0}.projects-container{position:relative;width:100%;overflow:hidden;transition:max-height .6s ease-out;margin-top:-20px}.projects-toggle-btn{display:block;margin:1rem auto;padding:.5rem 1rem;background-color:#333;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.projects-toggle-btn:hover{background-color:#555}.night-mode .projects-toggle-btn{background-color:#f0f0f0;color:#000}.night-mode .projects-toggle-btn:hover{background-color:#ddd}.project-highlights-section{margin:40px 7px;text-align:center;border:1px solid #313436;box-shadow:2px 4px 8px #0003;padding:20px}.day-mode .project-highlights-section{border:1px solid #e0e4eb;box-shadow:2px 4px 8px #0003}.project-highlights-section h3{margin-bottom:20px;font-size:1.5rem}.carousel{position:relative;width:100%;max-width:800px;height:250px;margin:0 auto;overflow:hidden}.carousel-image-container{width:100%;height:0;padding-bottom:41.66%;position:relative}.carousel-image-container img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.carousel button{position:absolute;top:50%;transform:translateY(-50%);background:#0006;border:none;color:#fff;font-size:2rem;padding:.25em .5em;cursor:pointer;z-index:2}.carousel button[aria-label="Previous project"]{left:10px}.carousel button[aria-label="Next project"]{right:10px}.carousel button:hover{background:#0009;transform:translateY(-50%) scale(1.2)}.dots{display:flex;justify-content:center;margin-top:.5rem;gap:.5rem}.dot{width:10px;height:10px;border-radius:50%;background:#ffffff80;cursor:pointer;transition:background .2s ease}.dot.active{background:#fff}.project-description{margin-top:12px;font-size:1rem;color:inherit;text-align:left}.project-description li{margin-bottom:10px}.toggle-description-btn{background-color:#333;padding:5px 10px;border-radius:5px;transition:background-color .3s ease;color:inherit;cursor:pointer;margin-top:15px;border:none}.toggle-description-btn:hover{background-color:#444}.day-mode .toggle-description-btn{background-color:#f0f0f0;color:#000}.image-viewer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;overflow:hidden}.viewer-image{max-width:90%;max-height:90%;object-fit:contain;border-radius:4px;box-shadow:0 0 20px #00000080}.viewer-close,.viewer-prev,.viewer-next{position:absolute;background-color:#000c;border:none;color:#fff;cursor:pointer;font-size:2.5rem;padding:.5rem;border-radius:7px;transition:background-color .2s ease}.viewer-close:hover,.viewer-prev:hover,.viewer-next:hover{background-color:#2c2c2c}.viewer-close{top:20px;right:20px}.viewer-prev,.viewer-next{top:50%;transform:translateY(-50%)}.viewer-prev{left:20px}.viewer-next{right:20px}.scroll-top{position:fixed;bottom:40px;right:40px;width:48px;height:48px;border:none;border-radius:50%;background-color:#333;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.75;transition:opacity .2s ease,background-color .3s ease;z-index:1000}.scroll-top:hover{opacity:1}.day-mode .scroll-top{background-color:#f0f0f0;color:#333}.image-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:1}@media (max-width: 600px){.social-links{flex-direction:row;gap:10px;justify-content:flex-start}.social-link-container{padding:7px;justify-content:center}.social-link-text{display:none}.framework-list{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.framework-box{width:100px;height:100px}.framework-logo{font-size:30px}.skills{padding:10px}.carousel-image-container{height:230px;max-width:100%}.carousel button{font-size:1.8rem;margin:0 5px}.dot{width:12px;height:12px}.project-description{font-size:1rem;padding:0 10px}}@media (max-width: 400px){.app-header h2{font-size:18px}.social-link-container a{font-size:12px}}@media (max-width: 404px){.content-wrapper{max-width:95%}.profile-image{width:120px;height:120px}.app-header{margin-top:35px}.app-header h1{font-size:16px}.app-header h2{font-size:12px}.background-image{height:200px}.app-content{padding:20px 20px 0;margin-top:10px}}@media (min-width: 405px) and (max-width: 599px){.content-wrapper{max-width:90%}.profile-image{width:130px;height:130px}.app-header{margin-top:35px}.app-header h1{font-size:20px}.app-header h2{font-size:15px}.background-image{height:200px}.app-content{padding:20px 20px 0;margin-top:10px}}@media (min-width: 600px) and (max-width: 899px){.content-wrapper{max-width:90%}.app-header h1{font-size:24px}.app-header h2{font-size:18px}.profile-image{width:150px;height:150px}}@media (min-width: 900px) and (max-width: 1199px){.content-wrapper{max-width:70%}}@media (min-width: 1200px){.content-wrapper{max-width:960px}}.toggle{position:absolute;top:10px;right:10px;display:inline-block;width:60px;height:30px;padding:2px;border-radius:15px;z-index:10}.toggle:before,.toggle:after{content:"";display:table}.toggle:after{clear:both}.toggle-bg{position:absolute;top:-2px;left:-2px;width:100%;height:100%;background-color:#c0e6f6;border-radius:15px;border:2px solid #81c0d5;transition:all .1s cubic-bezier(.25,.46,.45,.94)}.toggle-input{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:15px;z-index:2;opacity:0;cursor:pointer}.toggle-switch{position:relative;width:24px;height:24px;margin-left:30px;background-color:#f5eb42;border:2px solid #e4c74d;border-radius:50%;transition:all .1s cubic-bezier(.25,.46,.45,.94)}.toggle-switch-figure{position:absolute;bottom:-8px;left:-30px;display:block;width:48px;height:18px;border:5px solid #d4d4d2;border-radius:10px;background-color:#fff;transform:scale(.4);transition:all .12s cubic-bezier(.25,.46,.45,.94)}.toggle-switch-figureAlt{position:absolute;top:2px;left:1px;width:1px;height:1px;background-color:#efeeda;border-radius:100%;border:2px solid #dee1c5;box-shadow:25px -5px 0 -2px #fcfcfc,45px -8px 0 -2px #fcfcfc,32px 3px 0 -3px #fcfcfc,50px 5px 0 -1px #fcfcfc,38px 12px 0 -3px #fcfcfc,27px 18px 0 -1px #fcfcfc,48px 15px 0 -2px #fcfcfc;transition:all .12s cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.toggle-switch-figureAlt:before{content:"";position:absolute;top:-4px;left:10px;width:4px;height:4px;background-color:#efeeda;border-radius:100%;border:2px solid #dee1c5}.toggle-switch-figureAlt:after{content:"";position:absolute;top:12px;left:9px;width:1px;height:1px;background-color:#efeeda;border-radius:100%;border:2px solid #dee1c5}.toggle-input:checked~.toggle-switch{margin-left:0;border-color:#dee1c5;background-color:#fffdf2}.toggle-input:checked~.toggle-bg{background-color:#484848;border-color:#202020}.toggle-input:checked~.toggle-switch .toggle-switch-figure{margin-left:20px;opacity:0;transform:scale(.1)}.toggle-input:checked~.toggle-switch .toggle-switch-figureAlt{transform:scale(1)}@media (max-width: 376px){.toggle{width:50px;height:25px}.toggle-switch{width:20px;height:20px;margin-left:20px}.toggle-switch-figure{width:40px;height:15px}}body,html{margin:0;padding:0;font-family:Arial,sans-serif;box-sizing:border-box}
