:root{--bg-color: #fff;--text-color: #000}[data-theme=dark]{--bg-color: #000;--text-color: #fff}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{transition:background-color .4s,color .4s;background-color:var(--bg-color);color:var(--text-color)}#root{height:100vh;display:flex;flex-direction:column}#back-to-top-btn{width:50px;height:50px;position:fixed;bottom:80px;right:80px;z-index:1;cursor:pointer;border-radius:5px;background-color:var(--text-color);color:var(--bg-color);font-size:30px}#back-to-top-btn:hover{opacity:.8}@media (max-width: 800px){#back-to-top-btn{bottom:0;right:0}}footer{text-align:center;font-size:.9rem;color:var(--text-color);margin:40px 0;font-weight:700}header{display:flex;flex-direction:column;align-items:center}.typing{font-family:monospace;white-space:nowrap;overflow:hidden}.typing#name{animation:show-cursor 0s forwards,typing-name 2s steps(14) forwards,hide-cursor 0s 2s forwards}.typing#job-title{width:0;animation:show-cursor 0s 2s forwards,typing-job-title 2s 2s steps(18) forwards,hide-cursor 0s 4s forwards}.profile-pic{width:150px;height:150px;border-radius:50%;border:2px solid var(--text-color);object-fit:cover;margin-top:15px}@keyframes typing-name{0%{width:0}to{width:14ch}}@keyframes typing-job-title{0%{width:0}to{width:18ch}}@keyframes show-cursor{to{border-right:.15em solid var(--text-color)}}@keyframes hide-cursor{to{border-right:none}}.content-container{flex:1;display:grid;grid-template-columns:15% 70% 15%;grid-template-areas:"Sidebar Content ."}main{grid-area:Content;display:flex;flex-direction:column}.skills-container{display:grid;grid-template-columns:repeat(3,auto);gap:20px}section>h2{margin-bottom:20px}hr{margin:25px 0}ul{padding-left:1.5rem}.experience-container{display:grid;grid-template-columns:1fr auto;margin-bottom:20px;font-size:1.2rem}.education-container{font-size:1.2rem}@media (max-width: 800px){.skills-container{display:flex;flex-direction:column}}.tech-card{display:flex;align-items:center;border:1px solid var(--text-color);border-radius:10px;padding:10px}.tech-card>.logo{width:50px;height:50px}.tech-card>.name{margin-left:10px}.projects-container{display:flex;flex-direction:column;row-gap:20px;align-items:center}.load-more-btn{padding:.5em 1em;margin-top:1em;cursor:pointer;background-color:var(--text-color);border:none;color:var(--bg-color);border-radius:4px;font-size:1rem;max-width:550px}.load-more-btn:hover{opacity:.8}.project-card{display:flex;flex-direction:column;border-radius:7px;box-shadow:0 0 3px var(--text-color);padding:20px;width:100%;max-width:550px;max-height:550px}.project-card>a>img{width:100%;max-width:450px;max-height:450px}.contact-form{display:flex;flex-direction:column}.required{color:red}form>input,form>textarea{margin-bottom:20px;max-width:400px}form>textarea{resize:none}form>button{background-color:var(--text-color);border:none;color:var(--bg-color);border-radius:4px;padding:.5em 1em;cursor:pointer;font-size:1rem;max-width:400px}aside{grid-area:Sidebar;margin-left:20px;position:sticky;top:0;align-self:start}nav{display:flex;flex-direction:column;row-gap:25px}nav>a{text-decoration:none;color:inherit;font-size:1.5rem}nav a:hover{opacity:.8}.emoji{font-size:30px}@media (max-width: 800px){aside{margin-left:0}a>span.label{display:none}}#settings-bar{display:flex;flex-direction:row-reverse;column-gap:25px;margin-top:25px;margin-right:25px}.theme-btn,.language-btn{all:unset;font-size:30px;cursor:pointer}.theme-btn:hover,.language-btn:hover{opacity:.8}@media (max-width: 700px){#settings-bar{flex-direction:column;align-items:end;margin-top:5px;margin-right:5px}}
