@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";body[data-theme=light]{background-color:#fff;color:#000}body[data-theme=light] h2,body[data-theme=light] p,body[data-theme=light] .info h2,body[data-theme=light] .info p,body[data-theme=light] .personal_info h3{color:#000}body[data-theme=light] .seprator{color:#1876c9;background-color:#fff}body[data-theme=light] li a,body[data-theme=light] #skills .left .info p,body[data-theme=light] #skills .left .info h3,body[data-theme=light] .start h3,body[data-theme=light] .start p,body[data-theme=light] .start button{color:#000}body[data-theme=light] .project-tag{background-color:#1876c9;color:#fff}body[data-theme=light] .start h3,body[data-theme=light] .start p{color:#fff}body[data-theme=light] .start button{border:1px solid #ffffff;color:#fff}body[data-theme=light] .error-message{color:#e53935}body[data-theme=light] .confirm-message_success{color:#4caf50}body[data-theme=dark]{background-color:#000;color:#fff}body[data-theme=dark] h2,body[data-theme=dark] p,body[data-theme=dark] .info h2,body[data-theme=dark] .info p,body[data-theme=dark] .personal_info h3{color:#fff}body[data-theme=dark] .seprator{color:#1876c9;background-color:#000}body[data-theme=dark] li a,body[data-theme=dark] #skills .left .info p,body[data-theme=dark] .start h3,body[data-theme=dark] .start p,body[data-theme=dark] .start button{color:#fff}body[data-theme=dark] .start button{border:1px solid #ffffff}body[data-theme=dark] .project-card{background-color:#000}body[data-theme=dark] .project-tag{background-color:#1876c9}body[data-theme=dark] .error-message{color:#e53935}body[data-theme=dark] .confirm-message_success{color:#4caf50}body[data-theme=dark] .modal-content{background-color:#fff}body[data-theme=dark] label{color:#000}#theme-toggle{margin:20px;padding:10px 20px;cursor:pointer}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}body{height:100vh;background:#212529}@media screen and (max-width: 780px){body{font-size:14px}}@media screen and (max-width: 480px){body{font-size:12px}}@media screen and (max-width: 320px){body{font-size:10px}}#about{display:flex;justify-content:space-between;align-items:center;gap:80px;padding:0 50px}#about img{width:280px;border-radius:50%}.personal_info{display:flex;flex-direction:column}.personal_info h3{display:flex;justify-content:center;color:#fff;font-size:32px;font-weight:600;margin-bottom:10px}.personal_info p{color:#ccc;font-size:14px;display:flex;padding-left:60px;padding-right:60px}.personal_info button{margin-top:30px}@media screen and (max-width: 1200px){#about{flex-direction:column;align-items:center;gap:40px;padding:0 30px}#about img{width:240px}.personal_info h3{font-size:28px}.personal_info p{font-size:13px}}@media screen and (max-width: 780px){#about{flex-wrap:wrap;justify-content:center;gap:20px;padding:0 20px}#about img{width:200px}.personal_info h3{font-size:24px}.personal_info p{font-size:12px}}@media screen and (max-width: 480px){#about{flex-direction:column;align-items:center;gap:10px;padding:0 10px}#about img{width:160px}.personal_info h3{font-size:20px}.personal_info p{font-size:11px}}@media screen and (max-width: 320px){#about{flex-direction:column;align-items:center;gap:5px;padding:0 5px}#about img{width:140px}.personal_info h3{font-size:18px}.personal_info p{font-size:10px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1}.modal-content{background:#fff;padding:20px;border-radius:15px;position:relative;width:600px}.modal-content form{display:flex;flex-direction:column;align-items:center;justify-content:center}.modal-content form input,.modal-content form textarea{width:100%;padding:10px;margin:10px 0;border-radius:5px;border:1px solid}.modal-content form textarea{resize:vertical;min-height:100px}.modal-content form .send-button{background:#1876c9;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;transition:background .3s ease}.close-button{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;cursor:pointer}.error-message{color:#e53935;font-weight:700;margin-top:10px}.confirmation-message_success{color:#4caf50;font-weight:700;margin-top:10px}@media (max-width: 768px){.modal-content{width:80%;padding:15px}.modal-content form{width:100%}.modal-content form input,.modal-content form textarea{font-size:1rem}.send-button{padding:10px 20px;font-size:.9rem}}@media (max-width: 576px){.modal-content{width:95%;padding:10px}.modal-content form{width:100%}.modal-content form input,.modal-content form textarea{font-size:.9rem}.send-button{padding:8px 16px;font-size:.85rem}}@media (max-width: 320px){.modal-content{width:100%;padding:8px}.modal-content form{width:100%}.modal-content form input,.modal-content form textarea{font-size:.85rem;padding:8px}.send-button{padding:6px 12px;font-size:.8rem}}footer{position:relative;background:#1c1c1c;padding:80px 50px 40px;margin-top:100px}footer .start{display:flex;align-items:center;justify-content:space-around;position:absolute;background-color:#1876c9;padding:30px 25px;border-radius:15px;width:70%;top:-21%;left:15%}footer .start p{font-size:13px;width:35%}footer .start button{background:#1876c9;border:1px solid #000000;cursor:pointer;padding:8px 20px;border-radius:100px;transition:all .3s ease}footer .cols{display:flex;align-items:start}footer .cols .about-col{flex:3}footer .cols .about-col h3{color:#1876c9;margin-bottom:20px}footer .cols .about-col p{color:#ccc;font-size:13px;margin-bottom:5px}footer .cols .links-col{flex:3}footer .cols .links-col h4{color:#fff;margin-bottom:20px}footer .cols .links-col a{display:block;text-decoration:none;color:#fff;font-size:14px;line-height:26px;transition:color .3s ease}footer .cols .links-col a:hover{color:#1876c9}footer .cols .news-col{flex:3}footer .cols .news-col h4{color:#fff;margin-bottom:20px}footer .cols .news-col p{color:#7b7b7b;font-size:15px}footer .cols .news-col form{width:100%;margin-top:20px;position:relative}footer .cols .news-col form input{width:100%;background:#212529;border:none;padding:13px;border-radius:100px;font-weight:400;font-size:13px}footer .cols .news-col form button{display:flex;align-items:center;justify-content:center;width:45px;height:45px;background:#1876c9;border:none;border-radius:50%;position:absolute;top:0;right:0;cursor:pointer;transition:background-color .3s ease}footer .cols .news-col form button:hover{background-color:#1876c9}footer .cols .news-col form button i{font-size:26px}@media screen and (max-width: 1100px){footer{margin-top:150px}footer .start{width:90%;left:5%;top:-20%}footer .cols{display:flex;flex-wrap:wrap}footer .cols .about-col,footer .cols .links-col,footer .cols .news-col{flex-basis:50%}}@media screen and (max-width: 650px){footer .start{top:-8%}footer .start p{display:none}footer .cols{display:flex;flex-wrap:wrap}footer .cols .about-col,footer .cols .links-col,footer .cols .news-col{flex-basis:100%}footer .cols .about-col{margin-bottom:40px}footer .cols .links-col{margin-bottom:20px}}@media screen and (max-width: 480px){footer{padding:40px 20px}footer .start{width:100%;left:0;top:-10%;padding:20px 15px}footer .start p{display:none}footer .start button{padding:6px 15px}footer .cols{display:flex;flex-wrap:wrap}footer .cols .about-col,footer .cols .links-col,footer .cols .news-col{flex-basis:100%}footer .cols .about-col{margin-bottom:30px}footer .cols .links-col{margin-bottom:20px}}@media screen and (max-width: 375px){footer{padding:30px 15px}footer .start{width:100%;left:0;top:-10%;padding:15px 10px}footer .start p{display:none}footer .start button{padding:5px 10px}footer .cols{display:flex;flex-wrap:wrap}footer .cols .about-col,footer .cols .links-col,footer .cols .news-col{flex-basis:100%}footer .cols .about-col{margin-bottom:20px}footer .cols .links-col{margin-bottom:15px}}@media screen and (max-width: 320px){footer{padding:20px 10px}footer .start{width:100%;left:0;top:-10%;padding:10px 5px}footer .start p{display:none}footer .start button{padding:4px 8px}footer .cols{display:flex;flex-wrap:wrap}footer .cols .about-col,footer .cols .links-col,footer .cols .news-col{flex-basis:100%}footer .cols .about-col{margin-bottom:15px}footer .cols .links-col{margin-bottom:10px}}nav{display:flex;flex-direction:column;justify-content:center;height:auto;padding:20px 50px;position:relative}nav h1{color:#1876c9;font-weight:600;text-align:center;margin-bottom:15px}nav ul{display:flex;justify-content:center;width:100%;margin:0}nav ul li{list-style:none}nav ul li a{text-decoration:none;color:#fff;font-size:16px;margin-right:25px;transition:color .3s ease}nav ul li:hover a{color:#1876c9}nav ul li:last-child a{margin:0}nav .nav-header{display:flex;justify-content:center;align-items:center;width:100%;padding:0 20px}nav .nav-button-container{position:static}@media screen and (max-width: 780px){nav button{display:none}}@media screen and (max-width: 650px){nav{padding:20px 50px}nav ul{align-items:center}nav ul li{margin-bottom:10px}}@media screen and (max-width: 480px){nav{padding:20px}nav ul li a{font-size:12px;margin-right:15px}}@media screen and (max-width: 320px){nav{padding:10px}ul li a{font-size:10px;margin-right:5px}}.info{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.info h2{font-size:32px;color:#fff;font-weight:600}.info h2 span{color:#1876c9;text-decoration:underline}.info p.title{font-size:44px;font-weight:600;color:#fff;margin-top:8px}.info img{width:200px;height:200px;margin-top:100px}@media screen and (max-width: 780px){.info h2{font-size:24px!important}.info p.title{font-size:36px!important}}@media screen and (max-width: 650px){.info{height:150px;display:flex;justify-content:start}.info h2{font-size:20px!important}.info p.title{font-size:28px!important}.info img{margin-top:40px;width:150px;height:150px}}@media screen and (max-width: 480px){.info h2{font-size:19px!important}.info p.title{font-size:18px!important}.info img{width:120px;height:120px}}@media screen and (max-width: 320px){.info h2,.info p.title{font-size:16px!important}.info img{width:100px;height:100px}}.seprator{margin:50px 50px 30px;padding:10px 20px;background:#383e45;display:inline-block;color:#1876c9;border-radius:12px}@media screen and (max-width: 780px){.seprator{margin:40px 40px 20px;padding:8px 16px}}@media screen and (max-width: 480px){.seprator{margin:30px 30px 15px;padding:6px 12px}}@media screen and (max-width: 320px){.seprator{margin:20px 20px 10px;padding:4px 8px}}#skills{display:flex;justify-content:space-around;padding:0 50px;margin-bottom:50px}#skills button{margin-top:30px}#skills .right{height:120px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}#skills .right .item{display:flex;align-items:center;justify-content:center;background:#383e45;width:100px;height:75px;border-radius:10px}#skills .right .item i{font-size:34px;color:#fff}@media screen and (max-width: 1100px){#skills{display:flex;gap:20px}#skills .left{width:500px}}@media screen and (max-width: 650px){#skills{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:120px}#skills .right{display:flex;justify-content:space-between}}@media screen and (max-width: 480px){#skills{flex-direction:column;align-items:center;padding:0 20px;margin:0}#skills .right{width:100%;justify-content:center}#skills .right .item{width:40px;height:40px}#skills .right .item i{font-size:28px}}@media screen and (max-width: 320px){#skills{flex-direction:column;align-items:center;padding:0 10px;margin:0}#skills .right{width:100%;justify-content:center}#skills .right .item{width:40px;height:40px}#skills .right .item i{font-size:24px}}.project-content{padding:20px}.project-title{text-align:center;margin-bottom:20px}.project-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.project-card{background-color:#f9f9f9;border:1px solid #ddd;border-radius:8px;padding:20px;width:250px;height:350px;text-align:center;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.project-card img{max-width:100%;height:auto;border-radius:4px}.github-icon{margin-left:5px}.project-tags{margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center}.project-tag{display:inline-block;background-color:#eee;border-radius:4px;padding:5px 10px;margin:2px}.project-links{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:0 10px;text-align:center;height:0;overflow:hidden;transition:height .6s ease-in-out,padding .6s ease-in-out;z-index:1;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}.project-card:hover .project-links{height:120px;padding:10px}.project-links a{background-color:#1876c9;color:#fff;padding:10px 15px;border-radius:5px;text-decoration:none;margin:5px;z-index:2;display:flex;align-items:center;width:100%;justify-content:center}.project-links a:hover{background-color:#0056b3}@media screen and (max-width: 780px){.project-card{width:200px;height:300px}.project-card img{width:100%;height:auto}.project-links{height:0;padding:0 5px}.project-card:hover .project-links{height:100px;padding:5px}.project-links a{padding:8px 10px;font-size:14px}}@media screen and (max-width: 480px){.project-card{width:160px}.project-card img{width:100%;height:auto}.project-links{height:0;padding:0 5px}.project-card:hover .project-links{height:80px;padding:5px}.project-links a{padding:6px 8px;font-size:12px}.project-tags{margin-top:5px}.project-tag{padding:3px 7px;font-size:12px}}@media screen and (max-width: 320px){.project-card{width:140px}.project-card img{width:100%;height:auto}.project-links{height:0;padding:0 5px}.project-card:hover .project-links{height:70px;padding:5px}.project-links a{padding:5px 7px;font-size:10px}.project-tags{margin-top:5px;display:flex;flex-wrap:wrap;justify-content:center}.project-tag{padding:2px 5px;font-size:10px;margin:1px}}.theme-toggle{background-color:#1876c9;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .3s ease,color .3s ease;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;position:absolute;right:0;top:20px}@media screen and (max-width: 780px){.theme-toggle{padding:8px 16px;font-size:14px}}@media screen and (max-width: 480px){.theme-toggle{padding:6px 12px;font-size:12px}}@media screen and (max-width: 320px){.theme-toggle{padding:4px 8px;font-size:10px}}