body{background-color:#000;color:#fff;font-family:sans-serif}.navbar{width:100%;height:90px;background-color:#000;position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;border-bottom:1px solid white;z-index:1000}.navbar a{text-decoration:none;color:#fff;margin:20px;font-size:22px;cursor:pointer;position:relative}.navbar a:after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background-color:#fff;transform:scaleX(0);transform-origin:left;transition:transform .6s ease-in-out}.navbar a:hover:after{transform:scaleX(1)}.home{display:flex;justify-content:space-evenly;align-items:center;height:650px}.home h1{font-family:monospace}.logo img{width:250px;height:250px;border-radius:50%;cursor:pointer;transition:transform .5s ease;object-fit:cover;object-position:center}.logo img:hover{transform:scale(1.1)}.skils{background-color:#fff;color:#000;width:100%;height:500px;margin-top:80px;border-radius:12px;scroll-margin-top:150px}.skils h1{text-align:center;padding-top:30px;font-size:40px}.skil{display:flex;justify-content:center;align-items:center;height:330px;transform:translate(-100%);transition:transform 1.2s ease,opacity .6s ease;opacity:0}.skil.show{transform:translate(0);opacity:1}.skil div{display:flex;align-items:center;justify-content:center;flex-direction:column;color:#c7c6c6;background-color:#2e2f2a;width:180px;height:165px;margin:30px;padding:10px;border-radius:14px;cursor:pointer;transition:.5s ease-in-out}.skil div svg{font-size:60px}.skil div p{font-size:20px}.skil div:nth-child(1):hover{color:#f16529}.skil div:nth-child(2):hover{color:#36acdd}.skil div:nth-child(3):hover{color:#f7e025}.skil div:nth-child(4):hover{color:#66dbfb}.Abouts{margin:50px 120px;scroll-margin-top:120px}.Abouts h1:nth-child(1){text-align:center;font-size:40px;width:100%}.Abouts h1{width:355px;font-size:55px}.Abouts p{font-size:25px}.Abouts span:nth-child(1){color:#36acdd}.Abouts span:nth-child(2){color:#36acdd}.about{transform:translateY(25%);transition:transform 1.2s ease,opacity .6s ease;opacity:0}.about.show{transform:translateY(0);opacity:1}.projects{background-color:#fff;color:#000;width:100%;height:600px;margin:80px 0;border-radius:12px;scroll-margin-top:90px;border:1px solid black}.projects h1{text-align:center;margin-top:40px}.project-page{display:flex;justify-content:center;align-items:center;height:450px;gap:25px}.project-page svg{font-size:24px;cursor:pointer}.project-items{position:relative;display:flex;justify-content:center;align-items:center;margin:30px 0;height:420px;width:620px;overflow:hidden}.project-descripton{opacity:0;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;background-color:#00000080;position:absolute;top:0;left:0;border-radius:8px;width:525px;height:320px;gap:20px;transition:.8s,opacity .6s ease}.project-descripton button{width:90px;height:40px;color:#000;background-color:#f5f5f5;border:1px;border-radius:4px;cursor:pointer}.project-descripton button a{text-decoration:none}.project{width:525px;height:320px;display:flex;justify-content:center;align-items:center;object-fit:cover;border:2px solid lightgray;cursor:pointer;border-radius:10px;margin:50px;transform:translateY(20px);transition:.8s,opacity .6s ease;opacity:0}.project.show{opacity:1;transform:translateY(0)}.project.show:hover .project-descripton{opacity:1}.project img{width:525px}.description{text-align:center;width:100%}.description h1{font-size:20px}.description a{color:#000}.contact{width:100%;height:520px;background-color:#000}.contact h1:nth-child(1){text-align:center;margin-top:55px}.contact div h1{margin-top:50px}.contact span{font-size:40px}.contact-text{margin-top:80px}.contact-text-h1{transform:translateY(-80px);opacity:0;transition:1.2s,opacity .6s ease}.contact-text-h1.show{transform:translateY(-10px);opacity:1}.location{display:flex;justify-content:center;align-items:center;transform:translateY(50px);opacity:0;transition:1.2s,opacity .6s ease}.location.show{transform:translateY(0);opacity:1}.location svg{font-size:30px}.location p{font-size:25px;margin:10px}.social-links{display:flex;justify-content:center;align-items:center;margin-top:50px}.social-links a{display:flex;justify-content:center;align-items:center;color:#fff;width:50px;height:50px;margin:10px;border-radius:50%;cursor:pointer;transition:.5s}.social-links a svg{font-size:25px}.social-links a:nth-child(1){background-color:#ea4335}.social-links a:nth-child(2){background-color:#000;border:2px solid white}.social-links a:nth-child(3){background-color:#0a8cd2}.social-links a:nth-child(4){background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}footer{width:100%;height:60px;border-top:2px solid white;text-align:center}@media (max-width:769px){.skils{height:650px}.skil.show{display:grid;grid-template-columns:repeat(2,0fr)}.projects{height:1090px}.project-page{grid-template-columns:repeat(1,1fr)}}@media (max-width:1024px){.projects{height:1090px}.project-page{grid-template-columns:repeat(1,1fr)}.skils{scroll-margin-top:120px}.contact{scroll-margin-top:130px}}@media (max-width:432px){.home{text-align:center;flex-direction:column-reverse;margin-top:60px}.navbar a{font-size:19px}.skils{height:auto}.skil.show{display:grid;grid-template-columns:repeat(1,0fr);height:auto}.projects{height:auto}.project,.project-descripton{width:270px;height:180px}.project-image{border:none}.project img{width:270px;height:175px;border-radius:10px;border-bottom:1px solid lightgray;object-fit:cover}.Abouts h1{width:190px;font-size:38px}.Abouts p{font-size:14px;width:200px;text-align:center;margin-left:-24px}}@media (max-width:426px){.home{text-align:center;flex-direction:column-reverse;margin-top:60px}.navbar a{font-size:19px}.skils{height:auto}.skil.show{display:grid;grid-template-columns:repeat(1,0fr);height:auto}.projects{height:auto}.project,.project-descripton{width:270px;height:180px}.project-image{border:none}.project img{width:270px;height:175px;border-radius:10px;border-bottom:1px solid lightgray;object-fit:cover}.Abouts h1{width:190px;font-size:38px}.Abouts p{font-size:14px;width:200px;text-align:center;margin-left:-24px}}@media (max-width:376px){.navbar a{font-size:17px}.project,.project img,.project-descripton{width:250px;height:175px}}