@import"https://fonts.googleapis.com/css2?family=Concert+One&display=swap";*{padding:0;margin:0;box-sizing:border-box}html{scroll-behavior:smooth}header{height:100vh;display:flex;flex-direction:column;align-items:flex-end;overflow:hidden}header .head{margin-top:2rem;display:flex;flex-wrap:wrap;width:100%;align-items:center;justify-content:space-between}header .head a{text-decoration:none;color:#000}header .head a h1{margin-left:70px;font-family:Concert One,sans-serif;font-weight:400;font-size:40px;font-style:normal;transition:transform .2s ease}header .head a h1:hover{transform:scale(1.2)}header .head nav{display:flex;width:50%;align-items:center}header .head nav ul{list-style:none;display:flex;align-items:center;width:100%;justify-content:space-evenly}header .head nav ul li a{position:relative;text-decoration:none;color:#c1b7b7;font-size:20px;font-family:sans-serif}header .head nav ul li a:after{content:"";position:absolute;top:20px;width:0;height:2px;background-color:#ff3232;left:0;transition:.4s}header .head nav ul li a:hover:after{width:100%}header .head nav ul li a:hover{color:#000}header .main{display:flex;align-self:center;margin-top:6%;width:100%;justify-content:space-between;align-items:center}header .main .social{display:flex;flex-direction:column;justify-content:space-evenly;position:fixed;width:2.5rem;height:15rem;background-color:#ffcc40b7;border-top-right-radius:10px;border-bottom-right-radius:10px;transition:transform .3s ease}header .main .social:hover{transform:scale(1.05)}header .main .social a{font-size:30px;padding-left:5.5px;color:#000}header .main .introduction{width:75%;align-self:flex-end;margin-left:auto;display:flex;justify-content:space-between}header .main .introduction .design{width:20rem;overflow:hidden}header .main .introduction .design .div-1{height:300px;width:300px;background-color:#ffcc40;border-radius:50%;position:relative;left:8rem}header .main .introduction .design .div-2{height:200px;width:200px;background-color:#ff8b0698;border-radius:50%;position:relative;left:14rem;bottom:4rem}header .main .introduction .intro{width:65%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;border-radius:10px;transition:transform .3s ease}header .main .introduction .intro:hover{transform:scale(1.03)}header .main .introduction .intro .intro-1{margin-top:20px}header .main .introduction .intro .intro-1 p{font-size:40px;font-family:sans-serif;line-height:1;word-wrap:break-word;overflow-wrap:break-word}header .main .introduction .intro .intro-1 p span{color:#ff6b51}header .main .introduction .intro .intro-1 .role{font-size:20px;line-height:1.5}header .main .introduction .intro img{width:250px;border-radius:50%;box-shadow:#00000017 0 2px 1px,#00000017 0 4px 2px,#00000017 0 8px 4px,#00000017 0 16px 8px,#00000017 0 32px 16px}@media (max-width: 1024px){header .main .introduction{flex-direction:column;align-items:flex-start}header .main .introduction .design{width:100%;display:flex;justify-content:center}header .main .introduction .design .div-1,header .main .introduction .design .div-2{display:none}header .main .introduction .design header .main .introduction .intro{width:90%;margin-bottom:20px}@media (max-width: 768px){header .head a h1{margin-left:20px;font-size:30px}header .head nav ul li a{font-size:18px}header .main .social{width:2rem;height:12rem}header .main .social a{font-size:25px}header .main .introduction .intro .intro-1 p{font-size:30px}header .main .introduction .intro .intro-1 .role{font-size:18px}header .main .introduction .intro img{width:200px}nav ul{display:inline-block}}@media (max-width: 480px){header .head{align-items:center}header .head a h1{margin-left:0;font-size:25px}header .head nav{width:100%;justify-content:flex-end}header .head nav ul{flex-direction:column;align-items:center}header .head nav ul li{margin:10px 0}header .head nav ul li a{font-size:16px}header .main .introduction{width:100%;flex-direction:column;align-items:center}header .main .introduction .design{width:90%}header .main .introduction .intro{width:90%}header .main .introduction .intro .intro-1 p{font-size:20px}header .main .introduction .intro .intro-1 .role{font-size:16px}header .main .introduction .intro img{width:150px}}}#about{width:100%;display:grid;justify-content:center;padding:20px}#about .container{display:flex;width:100%;justify-content:space-evenly;padding:20px;box-shadow:#00020026 0 10px 50px;border-radius:10px;transition:transform .3s ease}#about .container img{border-radius:10px;height:500px}#about .container .right-col{margin-left:20px;width:50%}#about .container .right-col h2{padding-top:0;font-size:50px;text-align:center;font-family:Concert One,sans-serif;font-weight:400;font-size:60px;font-style:normal}#about .container .right-col p{margin-top:20px;word-wrap:break-word;overflow-wrap:break-word;font-size:20px;font-family:sans-serif}#about .container .right-col p span{color:#ff3232}#about .container .right-col .tabs{display:flex;flex-direction:column}#about .container .right-col .tabs .tab-val{margin-top:20px;display:flex;justify-content:space-between;width:50%;flex-wrap:wrap}#about .container .right-col .tabs .tab-val p{font-size:20px;font-family:sans-serif;cursor:pointer}#about .container .right-col .tabs .tab-content{margin-top:20px}#about .container .right-col .tabs .tab-content ul{list-style:none}#about .container .right-col .tabs .tab-content ul li{font-size:25px}#about .container .right-col .tab-content{display:none}#about .container .right-col .active-content{display:inline-block}#about .container .right-col .tabs .tab-val .tab-link{position:relative}#about .container .right-col .tabs .tab-val .tab-link:after{content:"";position:absolute;left:0;width:0;top:21px;background-color:#ff3232;height:2.5px;transition:.3s}#about .container .right-col .tabs .tab-val .tab-link.active-link:after{width:50%}#about .container:hover{transform:translateY(-15px)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#236345;border-radius:100px}::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width: 1024px){#about .container{flex-direction:column;align-items:center}#about .container img{height:auto;width:80%}#about .container .right-col{width:80%;margin-left:0;text-align:center}#about .container .right-col .tabs .tab-val{width:100%}}@media (max-width: 768px){#about .container img{width:100%;margin-bottom:20px}#about .container .right-col h2{font-size:40px}#about .container .right-col p,#about .container .right-col .tabs .tab-val p{font-size:18px}#about .container .right-col .tabs .tab-content ul li{font-size:20px}}@media (max-width: 480px){#about .container .right-col h2{font-size:30px}#about .container .right-col p,#about .container .right-col .tabs .tab-val p{font-size:16px}#about .container .right-col .tabs .tab-content ul li{font-size:18px}}#skill{display:flex;flex-direction:column;margin-top:10rem;justify-content:center;align-items:center}#skill a{font-size:40px;border-radius:10px;margin-top:30px;box-shadow:#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px,#0a254059 0 -2px 6px inset;padding:10px;transition:.3s;text-decoration:none;color:#000}#skill a:hover{background-color:#ffda37a4;transform:translateY(-4px)}#skill h2{font-size:50px;text-align:center;font-family:Concert One,sans-serif;font-weight:400;font-size:60px;font-style:normal}#skill .skill-header{width:90%;box-shadow:#0000003d 0 3px 8px;border-radius:10px;display:flex;flex-direction:column;padding:20px;transition:.2s}#skill .skill-header:hover{transform:translateY(-10px)}#skill .skill-content{display:flex;flex-wrap:wrap;margin-top:20px;justify-content:space-around;padding:20px;width:90%;align-self:center}#skill .skill-content .container{width:20%;height:15rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;box-shadow:#63636333 0 2px 8px;transition:.3s}#skill .skill-content .container:hover{transform:translateY(-5px);background-color:#ff9b18}#skill .skill-content .container .icons{font-size:8rem}#skill .skill-content .container p{margin-top:50px;font-size:36px;font-family:sans-serif}@media (max-width: 1024px){#skill .skill-content .container{width:30%;height:12rem}#skill a{font-size:30px;padding:8px}#skill h2{font-size:45px}#skill .skill-content .container .icons{font-size:6rem}#skill .skill-content .container p{font-size:28px;margin-top:30px}}@media (max-width: 768px){#skill .skill-content .container{width:45%;height:10rem}#skill a{font-size:25px;padding:6px}#skill h2{font-size:40px}#skill .skill-content .container .icons{font-size:5rem}#skill .skill-content .container p{font-size:24px;margin-top:20px}}@media (max-width: 480px){#skill .skill-content .container{width:90%;height:8rem}#skill a{font-size:20px;padding:4px}#skill h2{font-size:35px}#skill .skill-content .container .icons{font-size:4rem}#skill .skill-content .container p{font-size:20px;margin-top:10px}}#contact{padding-bottom:5rem;display:grid}#contact .container{padding:20px;margin-top:5rem;border-radius:10px;justify-self:center;display:flex;flex-direction:column;width:90%;box-shadow:#0000003d 0 3px 8px;transition:.3s}#contact .container:hover{transform:translateY(-10px)}#contact .container .inner-container{display:grid;grid-template-columns:repeat(2,1fr)}#contact .container .inner-container .left{display:flex;flex-direction:column;justify-content:center;align-items:center}#contact .container .inner-container .left p{font-size:30px;font-family:sans-serif;margin:20px}#contact .container .inner-container .left a{padding:10px 20px;border-radius:10px;border:2px solid black;text-decoration:none;font-weight:400;font-size:20px;font-family:sans-serif;transition:.3s;color:#000}#contact .container .inner-container .left a:hover{transform:translateY(-5px);background-color:#ff9225}#contact .container .inner-container .right{display:grid;border-left:3px solid black}#contact .container .inner-container .right form{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:20px}#contact .container .inner-container .right form input{font-family:sans-serif;font-size:20px;padding:10px;width:70%;margin:20px 0;border-radius:10px}#contact .container .inner-container .right form textarea{font-size:15px;font-family:sans-serif;min-width:30rem;max-width:30rem;min-height:10rem;max-height:10rem;border-radius:10px;padding:5px}#contact .container .inner-container .right form .formbtn{width:10rem;transition:.3s;cursor:pointer}#contact .container .inner-container .right form .formbtn:hover{transform:translateY(-3px);background-color:#ff9225}#contact h2{margin-top:10px;text-align:center;font-family:Concert One,sans-serif;font-weight:400;font-size:50px;font-style:normal}@media (max-width: 1024px){#contact .container .inner-container{grid-template-columns:1fr}#contact .container .inner-container .right{border-left:none;border-top:3px solid black;margin-top:20px}#contact .container .inner-container .right form textarea{min-width:100%;max-width:100%}#contact .container .inner-container .left p{font-size:25px}#contact .container .inner-container .left a{font-size:18px}}@media (max-width: 768px){#contact .container .inner-container .left p{font-size:20px}#contact .container .inner-container .left a{font-size:16px}#contact h2{font-size:40px}}@media (max-width: 480px){#contact .container .inner-container .left p{font-size:18px}#contact .container .inner-container .left a{font-size:14px}#contact .container .inner-container .right form input{width:100%}#contact .container .inner-container .right form textarea{min-width:100%;max-width:100%}#contact h2{font-size:30px}}#portfolio{display:flex;justify-content:center;margin:5rem 0 0}#portfolio .container{width:90%;border-radius:10px;margin:2rem 0;box-shadow:#0000003d 0 3px 8px;transition:.2s}#portfolio .container:hover{transform:translateY(-10px)}#portfolio .container .btn{display:flex;justify-content:center;text-decoration:none}#portfolio .container .btn button{margin:20px 0;padding:5px;border-radius:10px;border:2px solid black;font-size:20px;transition:.2s;cursor:pointer}#portfolio .container .btn button:hover{transform:translateY(-2px);background-color:#f80}#portfolio .container h2{text-align:center;font-family:Concert One,sans-serif;font-weight:400;font-size:50px;font-style:normal;margin-top:20px}.project-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:50px;padding:20px}.project{border-radius:10px;position:relative;overflow:hidden}.project img{width:100%;border-radius:10px;display:block;transition:transform .5s}.layer{width:100%;height:0%;background:linear-gradient(#0009,#f80);border-radius:10px;position:absolute;left:0;bottom:0;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 40px;text-align:center;font-size:14px;transition:height .5s}.layer h3{font-weight:500;font-size:40px;margin-bottom:20px;font-family:sans-serif}.layer a{margin-top:20px;color:#ff004f;text-decoration:none;font-size:18px;line-height:60px;background:#fff;width:60px;height:60px;border-radius:50%}.layer p{font-family:sans-serif;font-size:30px}.project:hover img{transform:scale(1.1)}.project:hover .layer{height:100%}@media (max-width: 1024px){#portfolio .container h2{font-size:45px}.layer h3{font-size:35px}.layer p{font-size:25px}}@media (max-width: 768px){#portfolio .container h2{font-size:40px}.layer h3{font-size:30px}.layer p{font-size:20px}}@media (max-width: 480px){#portfolio .container h2{font-size:35px}.layer h3{font-size:25px}.layer p{font-size:18px}.layer a{font-size:16px;line-height:50px;width:50px;height:50px}}