@import"https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css";.app{display:flex;flex-direction:column;min-height:100vh}main{flex:1}.loading{display:flex;justify-content:center;align-items:center;min-height:50vh;font-size:1.5rem;color:#fff}footer{position:relative;background-color:#000;color:#fff;width:100%;text-align:center;padding:10px;margin-top:auto;box-shadow:0 0 5px #00000080}footer a{color:#fff;text-decoration:underline;transition:opacity .3s}footer a:hover{opacity:.8}header>nav{position:fixed;display:flex;align-items:center;justify-content:flex-end;background-color:#000;color:#fff;width:100%;padding:20px;box-shadow:0 0 5px #00000080;transition:all .2s ease-in;z-index:1000;top:0}header>nav.scroll{background-color:#f00c;padding:15px 20px}header>nav>a:first-child{font-size:2rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:700;letter-spacing:1.5px;margin-right:auto;color:#fff;text-decoration:none;cursor:pointer}header>nav>a:not(:first-child){position:relative;font-weight:700;font-size:1.2rem;text-decoration:none;color:#fff;margin:10px;transition:opacity .2s ease-in-out;cursor:pointer}header>nav>a:not(:first-child):hover:before{width:100%}header>nav>a:not(:first-child):active{opacity:.8}header>nav>i{font-size:2.5rem;cursor:pointer;margin-left:5px;transition:transform .2s ease-in-out}header>nav>i:hover{transform:scale(1.1)}header>nav>a:before{content:"";position:absolute;width:0;height:100%;left:0;top:calc(50% + 2px);transform:translateY(-50%);border-bottom:2px solid white;transition:width .25s ease-in-out}#mobile-burger{position:fixed;width:80%;height:100%;text-align:center;right:-100%;top:0;background-color:#000;box-shadow:0 0 5px #00000080;visibility:hidden;transition:.3s ease-in-out;z-index:1001}#mobile-burger.active{visibility:visible;right:0}#mobile-burger i{position:relative;font-size:2.5rem;color:#fff;padding:5px;width:100%;text-align:right;cursor:pointer}#mobile-burger>ul{list-style:none}#mobile-burger>ul>li{font-size:1.5rem;padding:20px 0;cursor:pointer}#mobile-burger>ul>li>a{color:#fff;text-decoration:none}section{padding:20px}section>div:has(hr){position:relative;display:inline-block;width:max-content}section>.title{text-align:center;margin-top:80px}section h1{position:relative;font-size:2.2rem;text-align:center}section>.title p{display:inline-block;position:relative;color:#ff4500}section>.title p:before,section>.title p:after{content:"";position:relative;display:inline-block;height:1.5px;width:40px;background-color:#ff4500;top:-.25em}section>.title p:before{margin-right:5px}section>.title p:after{margin-left:5px}section.contact{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fffaf0;color:#000}section.contact img{width:300px;height:300px;-webkit-user-select:none;user-select:none}section .info{position:relative;display:flex;width:100%;margin:20px 0;justify-content:space-around;align-items:center}section .items{position:relative;display:flex;flex-direction:column;justify-content:space-around;gap:20px}section .items a{color:#00f}section .items a:active{color:#00008b}section .items{display:flex;flex-direction:column;justify-content:center;font-size:1.2rem;gap:15px}section .item{display:flex;align-items:center;gap:5px}section .item>div{display:flex;flex-direction:column;justify-content:center}section .item>i{font-size:2rem}section.form{position:relative;left:50%;transform:translate(-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;margin-bottom:50px}section.form form{display:flex;flex-direction:column;gap:20px;width:100%;max-width:600px;margin:20px 0 5px}.form-group{display:flex;flex-direction:column}.form-group label{margin-bottom:5px;font-weight:700;color:#fff}section.form form input,section.form form textarea{display:block;width:100%;padding:10px;margin:5px 0;font-size:.9rem;border:1px solid #ccc;border-radius:4px}section.form form input:focus,section.form form textarea:focus{outline:2px solid lightskyblue}section.form form textarea{min-height:150px;resize:vertical}section.form form input[type=submit]{background-color:#90ee90;color:#000;font-size:1rem;font-weight:700;border:none;box-shadow:0 0 10px #ffffff80;cursor:pointer;transition:.3s}section.form form input[type=submit]:hover{opacity:.8;box-shadow:0 0 10px #00000080}section.form form input[type=submit]:active{transform:translateY(2px)}section.form form input[type=submit]:disabled{opacity:.6;cursor:not-allowed}.success-message{background-color:#4caf50;color:#fff;padding:15px;margin:10px 0;border-radius:4px;text-align:center}.error-message{background-color:#f44336;color:#fff;padding:15px;margin:10px 0;border-radius:4px;text-align:center}@media only screen and (max-width:768px){section.contact img{display:none}section .info{flex-direction:column;gap:20px}section .details{gap:20px}section .items{font-size:1rem}section .item{gap:10px}section .item>i{font-size:1.5rem}}@property --degree{syntax: "<angle>"; inherits: false; initial-value: 90deg;}section{display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:center;gap:3rem;min-height:80vh;width:100vw;padding:0 10%;color:#fff}section#intro{justify-content:flex-start;background:url(/images/black.jpg) no-repeat center center fixed;background-size:cover;height:100vh}section#intro h1{font-size:6rem;background:linear-gradient(var(--degree),orangered,orange,yellow,lightgreen,lightblue);text-align:left;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:rotate 5s linear infinite}section#intro h2{font-size:2.5rem;font-weight:700;margin:1rem 0}section#intro h2.dynamic-role{color:red}section#intro h2.dynamic-role:after{content:"|";display:inline-block;animation:blink 1s linear infinite}section#about{color:#000;flex-direction:column;gap:1rem;background:#f0f0f0}section#about .about-me{display:flex;justify-content:center;align-items:center;gap:3rem;width:100%}section#about .about-me>div{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}section#about h1{font-size:3rem;font-weight:700;margin:1rem 0}section#about p{font-size:1.2rem;font-weight:500;text-align:justify;margin:1rem 0;line-height:1.5}section#about a{color:#00f;text-decoration:underline}section#about img{height:clamp(100px,40vw,500px);width:auto;border-radius:5px;aspect-ratio:9 / 16;object-fit:cover;border:1px solid black}section#coding{background:#000000e6}section#coding h1{font-size:3rem;font-weight:700;margin:1rem 0 2rem}section#coding progress{position:relative;width:100%;height:1rem;margin:.75rem 0 1.5rem;border-radius:.5rem;appearance:none}section#coding progress:before{content:attr(value) "%";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-shadow:0 0 .5rem black;-webkit-user-select:none;user-select:none;pointer-events:none}section#coding progress::-webkit-progress-bar{background:#d3d3d3;border-radius:.5rem}section#coding progress::-webkit-progress-value{background:#ff4500;border-radius:.5rem}section#social-media{flex-direction:column;justify-content:center;align-items:flex-start;background:#2f4f4f}section#social-media h1{font-size:3rem;font-weight:700;margin:1rem 0 2rem}section#social-media>.socials{display:flex;justify-content:space-between;align-items:center;width:100%}section#social-media>.socials>div{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}section#social-media i:not(#arrow-up){font-size:10rem;cursor:pointer;transition:all .3s ease-out}section#social-media i:not(#arrow-up):hover{transform:translateY(-.5rem);opacity:.8}section div.btn{display:flex;align-items:center;justify-content:center;width:max-content;gap:5px;position:relative;padding:1rem 2rem;margin:2rem 0;font-size:1.5rem;font-weight:500;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff;background:red;border:2px solid red;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .3s ease-out}section div.btn:hover{background:transparent}section div.btn>button{border:none;background:none;color:#fff;font-size:1.5rem;cursor:pointer}section div.btn>i{font-size:2rem}section img{position:relative;height:auto;width:clamp(100px,20vw,200px);border-radius:50%;aspect-ratio:1 / 1;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none}@keyframes rotate{0%{--degree: 0deg}25%{--degree: 90deg}50%{--degree: 180deg}75%{--degree: 270deg}to{--degree: 360deg}}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}@media only screen and (max-width:768px){section{padding:0 5%}section#social-media>.socials{flex-direction:column;gap:2rem}section img{display:none}}h1{width:100%;text-align:center;font-size:2rem;padding:10px 0;margin-top:80px}hr{border:1px solid white;margin:10px auto;width:80%}.intro{padding:20px;color:#fff}.intro>h2{font-size:1.5rem;margin-bottom:5px}.intro a{color:#fff;text-decoration:underline;transition:opacity .2s}.intro a:hover{opacity:.8}div.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:30px;justify-content:center;padding:20px 30px}div.projects>.repo{display:flex;flex-direction:column;justify-content:space-between;background:#343434;padding:15px;border-radius:5px;cursor:pointer;box-shadow:0 0 5px #0003;transition:box-shadow .3s;min-height:150px}div.projects>.repo:hover{box-shadow:0 0 5px #ffffff80}div.projects>.repo>div{margin-bottom:10px}div.projects>.repo h3.name{font-size:1.3rem;margin-bottom:10px;color:#4a9eff}div.projects>.repo p.description{font-size:1rem;color:#ddd;line-height:1.5}.language-info{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.language-badge{display:inline-block;background:#4a9eff33;color:#4a9eff;padding:4px 10px;border-radius:12px;font-size:.85rem;border:1px solid #4a9eff}.loading{text-align:center;padding:50px;font-size:1.5rem}@media only screen and (max-width:768px){div.projects{grid-template-columns:1fr}}*{margin:0;padding:0;box-sizing:border-box}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background-color:#a9a9a9;border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:gray;cursor:pointer}html,body{height:100%;scroll-behavior:smooth}body{font-family:Verdana,Geneva,Tahoma,sans-serif;background-color:#000000e6;color:#fff;overflow-x:hidden;margin:0}#root{min-height:100vh;display:flex;flex-direction:column}.show-mobile{display:none}@media only screen and (max-width:768px){.hide-mobile{display:none}.show-mobile{display:block}}