.topbar-section{display:flex;justify-content:space-between;align-items:center;background-color:var(--body_background);color:var(--body_color);box-shadow:0 2px 5px #00000037;position:sticky;height:10vh;padding:0 2rem}.topbar-section>label{font-weight:700;font-size:1.2rem;text-transform:uppercase}.topbar-section>nav{display:flex;align-items:center}.topbar-section>nav>ul{display:flex;list-style:none}.topbar-section>nav>ul>li{padding:0 1.3rem}.topbar-section>nav>ul>li>a{padding:12px 1.5rem;color:var(--link_color);text-decoration:none}.topbar-section .nav-btn{padding:5px;cursor:pointer;background:transparent;border:none;outline:none;color:var(--body_color);visibility:hidden;opacity:0;display:none}.active{padding:12px 1.5rem;background-color:#6a67673d;border-radius:25px}.color-mode-small-screen{display:none}.color-mode-large-screen{border:none;outline:none;background:transparent;margin-left:2rem;font-size:1rem}@media screen and (max-width: 1023px){.topbar-section{z-index:999}.topbar-section>.color-mode-small-screen{display:block;border:none;outline:none;background:transparent;font-size:1rem;z-index:999}.topbar-section>nav{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;background-color:var(--body_background);z-index:999;transition:1s;transform:translateY(-100vh)}.topbar-section>nav>ul{flex-direction:column;gap:3.5rem}.topbar-section>nav>.color-mode-large-screen{display:none}.topbar-section .nav-btn{visibility:visible;opacity:1;display:block}header .responsive_nav{transform:none}nav .nav-close-btn{position:absolute;top:2rem;right:2rem}}.portfolio-section{padding:1rem 20vw 5vw 20vw;display:flex;flex-direction:column;gap:2rem;height:100%}.git-icon{color:var(--body_color)}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.project-grid>.project-card{display:flex;align-items:center;gap:1rem;height:180px}.project-grid>.project-card>img{object-fit:contain;border-radius:5px}.project-grid>.project-card>.project-info>.mb{margin-bottom:.5rem}.project-grid>.project-card:hover{transform:scale(1.009)}@media screen and (max-width: 1023px){.portfolio-section{padding:3rem 5vw 40px 5vw;height:100%}.project-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem}}.skeleton{border-radius:3px;display:inline-block;line-height:100%;width:100%;background-color:#fff;background-size:1000px 1000px;background-image:var(--skeleton_effect);animation:placeholder 1.5s infinite linear forwards}@keyframes placeholder{0%{background-position:-500px 0}to{background-position:500px 0}}.skeleton.circle{border-radius:50%}.main-section{display:grid;grid-template-columns:1fr 2fr;justify-content:center;align-items:center;justify-items:stretch;gap:5rem;height:80vh}.main-section .profile-img{text-align:end;border-radius:50%}.main-section .profile-img>img{object-fit:cover;width:200px;height:200px;border-radius:50%;padding:6px;background:linear-gradient(var(--body_background2),var(--body_background2)) padding-box,linear-gradient(135deg,#0c4676,#64b5f6) border-box;border:4px solid transparent}.main-section .introduction{line-height:1.5}.main-section .introduction>.greeting{color:#64b5f6;font-weight:700;margin-bottom:10px}.main-section .introduction>h1{font-size:25px;font-weight:700;margin-bottom:10px}.main-section .introduction>p{font-size:20px;font-weight:500;text-align:justify;word-spacing:2px;max-width:700px}.main-section .introduction>p>span{color:#64b5f6}@media screen and (max-width: 768px){.main-section{padding-top:3rem;grid-template-columns:1fr;gap:5rem;height:100%}.main-section .profile-img{text-align:center}.main-section .profile-img>img{width:200px;height:200px}.main-section .introduction{margin:0 3rem;padding-bottom:1rem}.main-section .introduction .greeting{font-size:20px}.main-section .introduction>h1{font-size:27px}.main-section .introduction>p{font-size:20px;text-align:start}}.Blog-section{padding:1rem 20vw 5vw 20vw;display:flex;flex-direction:column;gap:2rem;height:100%;background-color:var(--body_background2)}.Blog-section>.mainbanner{position:relative;overflow:hidden;border-radius:5px}.Blog-section>.mainbanner>img{transition:transform .3s ease-in-out;border-radius:10px}.Blog-section>.mainbanner:hover{transform:scale(1.009)}.Blog-section>.mainbanner>.banner-overlay{left:0;right:0;position:absolute;background:#00000080;border-radius:5px;border:1px solid rgba(255,255,255,.585);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;bottom:0;margin:20px;padding:20px;z-index:100;color:#fff}.Blog-section>.blog-post>.cards-container{display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:1rem}.Blog-section>.blog-post>.cards-container>.cards{margin:1rem 0}.Blog-section>.blog-post>.cards-container>.cards img{width:100%;object-fit:cover;border-radius:5px;margin-bottom:.5rem}.Blog-section>.blog-post>.cards-container>.cards:hover{transform:scale(1.009)}@media screen and (max-width: 1023px){.Blog-section{padding:1rem 10vw 5vw 10vw}.Blog-section>.mainbanner>img{height:200px}.Blog-section>.mainbanner h2{font-size:15px}.Blog-section>.mainbanner h3{font-size:10px}}.about-section{padding:1rem 20vw 5vw 20vw;display:flex;flex-direction:column;gap:2rem;margin:1rem 0}.about-section hr{max-width:3rem;background-color:#64b5f6;height:3px;border:0}.about-section>.intro>p{letter-spacing:1px;word-spacing:1px;font-style:1.1rem;line-height:1.8}.about-section>.intro>p>em{color:#64b5f6;font-style:normal}.item{margin-bottom:2rem}.accord-outer-content{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1rem;background-color:var(--accordion-title);color:var(--body_color);box-shadow:0 2px 5px #00000037}.accord-outer-content>span{font-size:1rem;font-weight:500;display:flex;align-items:center;gap:5px}.accord-outer-content:hover{background-color:#d2dee72f}.accord-inner-content{background-color:#b10808;color:#0ff;max-height:0;overflow:hidden;transition:max-height .5s ease}.accord-inner-content-show{background-color:var(--accordion-inner);height:auto;max-height:999;transition:max-height .5s ease;padding:1rem;display:flex;gap:2rem}.skills-cont{display:flex;flex-wrap:wrap;gap:1rem}.skills-cont>span{padding:10px 20px;background-color:var(--accordion-title);color:var(--body_color)}.language-cont{display:flex;flex-wrap:wrap;gap:1rem}.language-cont>span{padding:10px 20px;background-color:var(--accordion-title);color:var(--body_color)}@media screen and (max-width: 768px){.about-section{padding:1rem 1rem 5vw 1rem}.accord-outer-content{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.accord-outer-content>span{gap:1rem;font-size:1.2rem;font-weight:700}.accord-inner-content-show{display:flex;flex-direction:column}.accord-inner-content-show>img{height:200px}.accord-inner-content-show>ul{padding-left:15px}.accord-inner-content-show>ul>li{font-size:1.2rem}}:root{--body_background: white;--body_background2: rgba(246, 242, 242, .937);--body_color: black;--link_color: rgba(0, 0, 0, .901);--skeleton_effect: linear-gradient( 100deg, #e8e8e8 20%, #b3b0b0 50%, #e8e8e8 60% );--accordion-title: rgba(249, 250, 251, .963);--accordion-inner: rgb(255, 255, 255);font-family:Arial,sans-serif}[data-theme=dark]{--body_background: rgba(31, 42, 48, .95);--body_background2: #1a1d24;--body_color: white;--link_color: rgba(255, 255, 255, .901);--skeleton_effect: linear-gradient(124deg, rgba(81,78,78,1) 20%, rgba(179,176,176,1) 50%, rgba(81,78,78,1) 60%);--accordion-title: rgba(205, 222, 233, .12);--accordion-inner: rgba(205, 222, 233, .074)}*{transition:all .5ms ease-in-out;margin:0%;padding:0%;box-sizing:border-box;transition:all .1s ease-out}#root{color:var(--body_color);background-color:var(--body_background2);scroll-behavior:smooth}footer{background-color:var(--body_background);color:var(--color);box-shadow:5px 2px #00000037;position:relative;height:10vh;width:100%;display:flex;justify-content:space-evenly;align-items:center}footer>.footer-section{display:flex;justify-content:center;align-items:center;gap:1.5rem}footer>.footer-section>.social-links{display:flex;gap:1.5rem}footer>.footer-section>span{font-size:1.2rem;font-weight:600}footer>div>span{font-size:1.2rem;font-weight:600}footer a{color:var(--link_color);text-decoration:none;font-size:1.2rem}@media screen and (max-width: 1023px){footer{padding-bottom:2rem;height:100%;position:relative;padding:2rem 0 0;height:25vh;flex-direction:column;gap:1.5rem}footer>span{font-weight:800}footer>.footer-section{flex-direction:column;gap:1.5rem}footer>.footer-section>.social-links{gap:3rem}}