/* Original canberkelmal.dev visual rules, with readable class names. */
body{background-color:#302929;margin:0}
*,body{box-sizing:border-box}
.navbar{align-items:center;background-color:#302929;border-bottom:1px solid #514f4f;display:flex;justify-content:space-between;padding:3rem 1rem .5rem;position:-webkit-sticky;position:sticky;top:0;transition:all .5s ease-in-out;width:100%;z-index:1000}
.navbar .navbar-menu{align-items:center;display:flex;justify-content:center;margin:0 auto;transition:all .5s ease-in-out;width:65%}
.navbar .navbar-menu ul{display:flex;justify-content:space-around;list-style:none;width:100%}
.navbar .navbar-menu ul li{color:#fefefe;cursor:pointer;font-family:Tahoma,Arial,sans-serif;font-size:1.3rem;font-weight:500;letter-spacing:.2rem;letter-spacing:.1rem;margin:0 .5rem;text-decoration:none;text-transform:uppercase;transition:all .5s ease-in-out}
.navbar .navbar-menu ul li:hover{color:#c07a6e}
.navbar-scrolled{padding-top:20px;transition:all .5s ease}
.navbar-scrolled .navbar-menu{align-items:center;display:flex;justify-content:center;transition:all .5s ease-in-out;width:60%}
@media screen and (min-width:320px)and (max-width:480px){.navbar .navbar-menu{width:100%}
.navbar .navbar-menu ul{align-items:center;flex-direction:row;justify-content:center!important;letter-spacing:0;width:0}
.navbar .navbar-menu ul li{align-items:center;font-size:1rem;letter-spacing:0;position:relative;right:20px}
.navbar-scrolled{padding-top:20px;transition:all .5s ease}
.navbar-scrolled .navbar-menu{align-items:center;display:flex;justify-content:center;transition:all .5s ease-in-out;width:100%}
}
.about{box-sizing:border-box;gap:40px;margin:60px 0 0;padding:120px 20px}
.about,.about .about-image{align-items:center;display:flex;height:100%;justify-content:center;width:100%}
.about .about-image{border-radius:50%;max-width:25%;overflow:hidden}
.about .about-image img{border-radius:50%;height:100%;object-fit:cover;transition:all 5s ease-in-out;width:100%}
.about .about-image img:hover{transform:scale(1.2)}
.about .about-title{display:flex;flex-direction:column;text-align:start;width:75%}
.about .about-title h1{color:#fefefe;font-size:2.5rem;font-weight:600;letter-spacing:.2rem;margin-bottom:10px!important;margin-top:0!important}
.about .about-title h3{color:#fefefe;font-size:1.5rem;font-weight:400;letter-spacing:.2rem;margin-bottom:0!important;margin-top:0!important}
.about .about-title p{color:#fefefe;font-size:1.1rem;font-weight:400;letter-spacing:.2rem;width:80%}
.about .about-title p .about-highlight{color:#c07a6e;font-size:1.1rem;font-weight:400;letter-spacing:.2rem}
.about .about-title .resume-link{background-color:#0000;border:1px solid #fefefe;border-radius:5px;color:#fefefe;cursor:pointer;font-size:1.2rem;padding:15px 40px;text-align:center;text-decoration:none;transition:all .3s ease-in-out;width:30%}
.about .about-title .resume-link:hover{background-color:#fefefe;color:#000}
@media screen and (min-width:320px)and (max-width:480px){.about{flex-direction:column;gap:20px;padding:20px}
.about .about-image{max-width:50%}
.about .about-title,.about .about-title .resume-link,.about .about-title .about-subtitle{width:100%}
}
@media screen and (min-width:481px)and (max-width:1024px){.about{flex-direction:column;gap:20px;padding:20px 0}
.about .about-image{max-width:50%}
.about .about-title{width:100%}
.about .about-title .resume-link{margin:0 auto;width:100%}
.about .about-title .about-subtitle{width:100%}
}
@media screen and (min-width:1025px)and (max-width:1280px){.about{gap:20px;padding:20px 20px 0}
.about .about-image{max-width:30%}
.about .about-title{width:100%}
.about .about-title .resume-link{width:70%}
}
.projects{background-color:#262525;padding:4rem 0;width:100%}
.projects .projects-wrapper{display:flex;flex-direction:column;height:100%;margin:0 auto;max-width:70%;text-align:center;width:100%}
.projects .projects-wrapper .projects-heading{color:#fefefe;font-size:2.5rem;font-weight:600;letter-spacing:.2rem;margin-bottom:40px;margin-top:0!important;text-transform:uppercase}
.projects .projects-wrapper .project-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:space-between;margin:0 auto;padding:0 1rem;width:100%}
@media screen and (max-width:768px){.projects{padding:2rem 0}
.projects-heading{margin-bottom:10px!important}
.projects-wrapper{max-width:100%!important;width:100%!important}
}
.project-card{align-items:center;border:1px solid #ccc;border-radius:12px;box-shadow:0 2px 8px #00000042;cursor:pointer;display:flex;flex-direction:column;margin-bottom:20px;max-width:49%;transition:all .3s ease-out;width:100%}
.project-card .project-image{border-radius:12px 12px 0 0;height:33%;width:100%}
.project-card .project-image img{border-radius:12px 12px 0 0;height:100%;margin-top:0;object-fit:cover;opacity:.8;transition:all .3s ease-out;width:100%}
.project-card h1{font-size:1.5rem;font-weight:700;margin:.5rem 0;text-transform:uppercase}
.project-card .project-description p{font-size:1rem;font-weight:400;padding:5px}
.project-card .project-info{display:flex;justify-content:space-between;margin:.5rem 0;width:100%}
.project-card .project-info .project-technologies{align-items:center;display:flex;flex-direction:column;font-family:Tahoma,Arial,sans-serif;margin:.5rem;width:50%}
.project-card .project-info .project-technologies .project-heading,.project-card .project-info .project-technologies .project-subtitle{color:#fff;font-family:Tahoma,Arial,sans-serif}
.project-card .project-info .project-play{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin:.5rem 0;width:50%}
.project-card .project-info .project-play .project-heading{color:#fff}
.project-card .project-info .project-play .project-links{align-items:center;display:flex;justify-content:space-around;width:60%}
.project-card .project-info .project-play .project-links a{color:#000;display:flex;flex-direction:column;font-size:1.5rem;font-weight:500;text-decoration:none}
.project-card .project-info .project-play .project-links a i{margin:0 .5rem}
.project-card .project-info .project-play .project-links a i img{width:75%}
.project-card:hover{transform:scale(1.05)}
.project-card:hover .project-image img{opacity:1}
@media screen and (min-width:320px)and (max-width:480px){.project-card{height:50%;margin-bottom:20px;max-width:100%;width:100%}
.project-card .project-image{border-radius:12px 12px 0 0;height:100%;object-fit:cover;width:100%}
.project-card .project-image img{border-radius:12px 12px 0 0;height:100%;width:100%}
.project-card .project-text{height:100%;padding:1rem;width:100%}
.project-card .project-text h1{font-size:1.5rem;font-weight:500;margin:.5rem 0}
.project-card .project-description p{font-size:1rem;font-weight:400;margin:.1rem 0}
.project-card .project-info{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin:.5rem 0;width:100%}
.project-card .project-info .project-technologies{align-items:center;display:flex;flex-direction:column;margin:.5rem;width:50%}
.project-card .project-info .project-technologies .project-heading{color:#fff}
.project-card .project-info .project-technologies .project-subtitle{color:#fff;font-size:14px}
.project-card .project-info .project-play{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin:.5rem 0;width:50%}
.project-card .project-info .project-play .project-heading{color:#fff;font-size:18px}
.project-card .project-info .project-play .project-links{align-items:center;display:flex;gap:20px;justify-content:space-around;width:100%}
.project-card .project-info .project-play .project-links a{color:#000;display:flex;flex-direction:column;font-size:1.5rem;font-weight:500;gap:20px;text-decoration:none}
.project-card .project-info .project-play .project-links a i,.project-card .project-info .project-play .project-links a i img{width:100%}
}
@media screen and (min-width:481px)and (max-width:1023px){.project-card{height:100%;margin-bottom:20px;max-width:48%;width:100%}
.project-card .project-image{border-radius:12px 12px 0 0;height:100%;object-fit:cover;width:100%}
.project-card .project-image img{border-radius:12px 12px 0 0;height:100%;opacity:.5;width:100%}
.project-card .project-text{height:100%;padding:1rem;width:100%}
.project-card .project-text h1{font-size:1.5rem;font-weight:500;margin:.5rem 0}
.project-card .project-description p{font-size:1rem;font-weight:400;margin:.5rem 0}
.project-card .project-info{align-items:center;display:flex;justify-content:space-between;margin:.5rem 0;width:100%}
.project-card .project-info .project-technologies{align-items:center;display:flex;flex-direction:column;margin:.5rem;width:50%}
.project-card .project-info .project-technologies .project-heading{color:#fff;font-size:16px}
.project-card .project-info .project-technologies .project-subtitle{color:#fff;font-size:14px;margin-bottom:0!important;margin-top:0!important}
.project-card .project-info .project-play{align-items:center;display:flex;flex-direction:column;justify-content:space-between;margin:.5rem 0;width:50%}
.project-card .project-info .project-play .project-heading{color:#fff;font-size:16px}
.project-card .project-info .project-play .project-links{align-items:center;display:flex;justify-content:center;padding-right:10px;width:100%}
.project-card .project-info .project-play .project-links a{color:#000;display:flex;flex-direction:column;font-size:1.5rem;font-weight:500;gap:20px;text-decoration:none}
.project-card .project-info .project-play .project-links a i{width:100%}
.project-card .project-info .project-play .project-links a i img{width:80%}
}
.contact{display:flex;padding:10% 0;width:100%}
.contact .contact-title{display:flex;flex-direction:column;gap:20px;width:100%}
.contact .contact-title .contact-heading{color:#fefefe;font-size:2.5rem;font-weight:600;letter-spacing:.2rem;margin-bottom:10px!important;margin-top:0!important;text-transform:uppercase}
.contact .contact-title .contact-subtitle{color:#fefefe;font-size:1.5rem;font-weight:400;letter-spacing:.2rem;margin-top:0!important}
.contact .contact-title .contact-link{background-color:#0000;border:1px solid #fefefe;border-radius:5px;color:#fefefe;cursor:pointer;font-size:1.2rem;margin:0 auto;padding:15px 40px;text-align:center;text-decoration:none;transition:all .3s ease-in-out;width:20%}
.contact .contact-title .contact-link:hover{background-color:#fefefe;color:#000}
@media screen and (min-width:320px)and (max-width:480px){.contact{flex-direction:column;gap:20px;padding:20px 20px 40px}
.contact .contact-title{width:100%}
.contact .contact-title .contact-heading{font-size:2rem}
.contact .contact-title .contact-subtitle{font-size:1.2rem}
.contact .contact-title .contact-link{font-size:1rem;width:100%}
}
@media screen and (min-width:481px)and (max-width:1023px){.contact{flex-direction:column;gap:20px;padding:20px 20px 40px}
.contact .contact-title .contact-heading{font-size:2rem}
.contact .contact-title .contact-subtitle{font-size:1.2rem}
.contact .contact-title .contact-link{font-size:1rem;width:50%}
}
@media screen and (min-width:1024px)and (max-width:1366px){.contact{flex-direction:column;gap:20px;padding:20px 20px 0}
.contact .contact-title .contact-heading{font-size:2rem}
.contact .contact-title .contact-subtitle{font-size:1.2rem}
.contact .contact-title .contact-link{font-size:1rem;width:25%}
}
.footer{background-color:#333;color:#fff;padding:4.8rem 0;text-align:center;width:100%}
.footer .footer-up-arrow{cursor:pointer;transition:all .3s ease-in-out;width:2%}
.footer .footer-icons{align-items:center;border-bottom:1px solid gray;display:flex;gap:20px;justify-content:center;margin:0 auto;padding:1rem 0;width:25%}
.footer .footer-icons .footer-icon{cursor:pointer;height:3rem;transition:all .3s ease-in-out;width:3rem}
.footer .footer-icons .footer-icon:hover{transform:translateY(-5px)}
.footer .footer-icons .footer-icon img{height:35px;object-fit:contain;width:40px}
.App{font-family:Tahoma,Arial,sans-serif;margin:0 auto;text-align:center;width:70%}
@media screen and (min-width:320px) and (max-width:480px){.App{width:100%}
}
h1,h3,p{color:#d3d1d1;font-family:Tahoma,Arial,sans-serif}