@import url(https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&family=Ubuntu+Sans+Mono:ital,wght@0,400..700;1,400..700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Bungee+Outline&display=swap);@import url(https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Righteous&display=swap);@import url(https://fonts.googleapis.com/css2?family=Electrolize&display=swap);@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap);@import url(https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;background-color:#000;background-image:radial-gradient(circle at top,#146d70,#084446,#062b2f 50%,#04161a 90%);background-size:cover;font-family:Kanit,sans-serif;font-style:normal;font-weight:auto;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}header{align-items:center;background-color:initial;color:#fff!important;display:flex;justify-content:space-between;padding:1%!important;position:fixed;transition:background-color .3s,-webkit-backdrop-filter .3s;transition:background-color .3s,backdrop-filter .3s;transition:background-color .3s,backdrop-filter .3s,-webkit-backdrop-filter .3s;width:100%;z-index:1000}.header.glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#42434633;color:#000}header h1{color:#1ed0d6!important;font-size:5%;margin:0}nav ul{display:flex;list-style:none;margin:0;padding:0}nav ul li{margin-right:20px}nav ul li a{color:#fff;text-decoration:none}nav ul li a:hover{color:#2debeb!important}.hero{background-color:rgba(0,0,0,.103);overflow:hidden;padding:20% 0;text-align:center}.hero,.hero-content{align-items:center;display:flex;height:100vh;position:relative}.hero-content{height:auto;justify-content:space-between;margin:0 auto;width:100%;z-index:1}.hero-text{display:flex;flex-direction:column;width:100%}.hero-text .fade-line{opacity:0;transform:translateX(-20px);transition:opacity 1s ease-in-out,transform 1s ease-in-out}.hero-text .fade-line.fade-in{opacity:1;transform:translateX(0)}.hero-image{opacity:0;transform:translateX(60px);transition:opacity 1s ease-in-out,transform 1s ease-in-out;width:100%}.hero-image.fade-in{opacity:1;transform:translateX(0)}.hero-image img{background-image:url();max-width:100%}.hero-content h1{font-weight:300;margin-bottom:3%}.hero-content .small,.hero-content h1{color:#f9f9f9;font-family:Montserrat,sans-serif;font-size:300%;position:relative;text-align:left;z-index:1}.hero-content .small{font-weight:600}.hero-content .big{font-size:150%;font-weight:800}.hero-content p{color:#fff;font-family:Montserrat,sans-serif;font-size:130%;font-weight:500;font-weight:200;text-align:left;text-shadow:2px 2px 5px #494d8680;z-index:2}.hero-content .glow-hero-text{-webkit-text-fill-color:#0000;background:linear-gradient(90deg,#4781ff,#00fff2);-webkit-background-clip:text;margin-bottom:2%;position:relative;text-align:left;z-index:1}.bg-image{opacity:.6;pointer-events:none;position:absolute;transition:transform 3s ease,filter .2s ease-in-out;width:50%;z-index:-1}.glow-image{display:inline-block;filter:drop-shadow(0 0 25px rgb(0,0,0));transition:filter .3s ease-in-out}@media (max-width:768px){.hero-content{flex-direction:column;text-align:center}.hero-image,.hero-text{width:100%}}.bg-image:nth-child(3){left:-42%;top:2%}.bg-image:nth-child(2){left:83%;top:-50%}.about-me{background-color:rgba(0,0,0,.103);color:#fff;height:100hv;padding:10% 5%;text-align:center;width:100hv}.about-me-content{align-items:center;display:flex;font-weight:200;justify-content:space-between;margin:0 auto;max-width:100%;overflow:hidden}.about-me h1{font-family:Bungee Outline,sans-serif;font-size:250%;font-weight:600}.about-me-text{flex:1 1;font-size:120%;font-style:normal;font-weight:200;text-align:left}.about-me-text p{background:linear-gradient(#021e25,#001f18de) padding-box,linear-gradient(145deg,#0000 35%,#07c1f0,#79009e) border-box;border:1px solid #ffffff0f;border-radius:16px;box-shadow:0 4px 30px #0000001a;font-family:Montserrat,sans-serif;font-size:90%;line-height:170%;margin:0 5%;padding:4%;width:100%}.about-me-image{flex:1 1;overflow:hidden;text-align:right}.glow-image-white{display:inline-block;filter:saturate(2) hue-rotate(8deg) contrast(130%) drop-shadow(0 0 5px rgb(0,67,78));transition:filter .3s ease-in-out}.fade-left,.fade-right{opacity:0;transition:opacity 5s,transform 3s}.fade-left{transform:translateX(-50px)}.fade-right{transform:translateX(200px)}.fade-in .fade-left,.fade-in .fade-right{opacity:1;transform:translateX(0)}.about-me-image img{max-width:100%}@media (max-width:600px){.about-me-text p{font-size:.9em}.about-me-text h2{font-size:1.2em}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-up{opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s}.fade-in .fade-up{animation:fade-in-up 1s ease forwards;opacity:1;transform:translateY(2)}.resume{padding-top:4%}.button{background:rgba(0,0,0,.247);background-size:400%;border:#0000;border-radius:1.5rem;color:#fff;cursor:pointer;font-size:90%;font-weight:400;height:3rem;overflow:hidden;padding:0 2rem;position:relative;transition:all .2s cubic-bezier(.23,1,.32,1)}.button:hover:before{transform:scaleY(1)}.button-content{position:relative;z-index:1}.button:before{background:linear-gradient(82.3deg,#a3098f 10.8%,#0c9b94 94.3%);border-radius:inherit;content:"";height:inherit;left:0;outline:none;position:absolute;top:0;transform:scaleY(0);transform-origin:bottom;transition:all .6s cubic-bezier(.23,1,.32,1);width:100%}.button:focus{outline:none}.button:active{scale:.9}.projects{align-items:center;background-color:rgba(0,0,0,.103);color:#fff;justify-content:center;padding:10% 2% 2%;text-align:center}.projects .section-title{font-family:Bungee Outline,sans-serif;font-size:270%;font-weight:600;margin-bottom:5%}.project-section{align-items:center;margin-bottom:4%;opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}.project{align-items:center;background-color:initial;border-radius:25px;border-radius:15px;display:flex;justify-content:space-between;max-width:100%;padding:3%}.project-content{background:linear-gradient(#204d47,#00181b) padding-box,linear-gradient(145deg,#0000 35%,#0cf5bb,#b521f0) border-box;border:1px solid #ffffff0f;border-radius:16px;box-shadow:0 4px 30px #0000001a;flex:1 1;margin:3%;padding:1%}.project-content .title{color:#d7d7f5;font-size:170%;font-weight:300;padding:1% 5% 0;text-align:left}.project .hover-image-container{border-radius:10px;height:5%;overflow:hidden;position:relative;width:100%}.project .image{border-radius:10px;display:block;height:5%;transition:filter .5s ease;width:100%}.project .overlay{align-items:flex-end;background:linear-gradient(180deg,#023b3b,#0000);color:#fff;display:flex;font-optical-sizing:auto;font-weight:300;height:100%;justify-content:center;opacity:0;padding:3%;transform:translateY(20px);transition:opacity 1.5s ease,transform 1.5s ease;width:100%;z-index:1}.project .overlay,.project .overlay:before{border-radius:10px;bottom:0;left:0;position:absolute;right:0;top:0}.project .overlay:before{background:url(/myportfolio/static/media/stargif.99d270a850bc9ea18590.gif) no-repeat 50%;background-size:contain;content:"";filter:hue-rotate(90deg);opacity:.1;padding:60% 70%;z-index:-1}.project .overlay h2{font-family:Rowdies,sans-serif;font-weight:300}.project .hover-image-container:hover .image{filter:blur(10px);opacity:.3}.project .hover-image-container:hover .overlay{opacity:1;transform:translateY(0)}.project .text{font-size:1em;height:100%;padding:10% 2%;position:absolute;width:100%;z-index:10}.project .tools img{height:30%;width:30%}.project .tools{display:flex;justify-content:space-between;padding:0 3% 1%}.contact-details li{font-size:5vw;padding:1%}.contact{background-color:rgba(0,0,0,.103);color:#fff;padding:1% 2% 0;text-align:center}.contact h1{font-family:Bungee Outline,sans-serif;font-size:270%;font-weight:600}.contact-content{display:flex;flex-wrap:wrap;gap:30%;justify-content:center}.contact-details{border-radius:10px;padding:2%;width:100%}.contact .list-unstyled{height:100%;width:90%}.contact-details h2{color:#c7c7c7;font-size:1.8em;margin-bottom:3%}.contact .con-title{color:#c7c7c7;font-family:"Recursive",sans-serif;font-size:1.2em;font-weight:400;padding:0 20%}.contact .container{height:50%;padding:1% 0 8%;vertical-align:center}.contact .container,.contact .container ul{align-items:center;display:flex;justify-content:center}.contact .container ul{flex-wrap:wrap;gap:15px;list-style-type:none;margin:0;padding:0}.contact .container ul li{background:#004d46;border-radius:41px;box-shadow:10px -10px 20px #0b272259,-10px 10px 20px #0218138e;display:inline-block;margin:15px;text-align:center;text-decoration:none;vertical-align:middle;width:12%}.container ul li:hover{background:#111f1d;box-shadow:inset -10px 10px 20px #0c1615d2,inset 10px -10px 20px #0e1b19;transition:background 1s}.container ul li i{color:#fff;font-size:35px;padding-top:55px}.container ul li a{color:inherit;text-decoration:none}.container ul li a:hover{color:inherit}@media (max-width:768px){.contact-details li{font-size:7vw}.contact .container ul{gap:10px}.contact .container ul li{width:14%}.contact .con-title{font-size:100%;padding:0}.container ul li:hover{background:#4c8d77;box-shadow:inset -10px 10px 20px #000,inset 10px -10px 20px #0e0f1b;transition:background 1s}}.skills{align-items:center;background-color:rgba(0,0,0,.103);color:#fff;flex-direction:column;height:100vh;height:100%;justify-content:center;padding:2%;text-align:center}.skills h1{font-family:Bungee Outline,sans-serif;font-size:250%;font-weight:600;margin:3% 0 5%;padding:3%}.skill-icons{display:flex;flex-wrap:wrap;justify-content:center}.skill-container{margin:0 2%;position:relative}.skill{background-color:#08131138;border-radius:25%;height:10%;margin:2%;overflow:hidden;padding:2%;position:relative;transition:transform .5s ease;width:10%}.skill.shine:before{animation:shine 3s ease-in-out infinite;background:linear-gradient(0deg,#0000,#c8c8c81a,#0000);content:"";height:100px;margin-left:-200px;position:absolute;transform:rotate(30deg);width:1000px}@keyframes shine{0%,to{margin-top:-100px}50%{margin-top:800px}}.skill:hover{background-color:#4e4d6d33;transform:scale(1.1)}.skill img{height:90%;margin-bottom:10%;width:90%}.skill-list{background-color:#fff;bottom:-100px;display:none;left:0;padding:2%;position:absolute;width:100%}.skill-list ul{list-style-type:none;padding:0}.skill-container:hover .skill-list{display:block}footer{background-color:#0000005d;bottom:0;color:#fff;padding:20px 0;position:relative;text-align:center;width:100%}footer p{margin:0}@media (max-width:768px){.about-me-content,.hero-content{flex-direction:column}.about-me-image,.about-me-text,.hero-image,.hero-text{max-width:100%}}.project-section{display:flex;justify-content:space-between;margin-bottom:30px}.project-content{margin-bottom:15px;width:calc(50% - 15px)}@media (max-width:768px){.project-section{flex-direction:column}.project-content{width:100%}.hero{flex-direction:column;height:100%}.hero-text{font-size:70%;width:100%}.bg-image:nth-child(3){left:0;top:0}.bg-image:nth-child(2){left:80%;top:50%}}@media (max-width:600px){body{font-size:14px}h1{font-size:2em}h2{font-size:1.4em}.project .overlay,.project .text,p{font-size:.9em}.skill img{width:100%}.hero-content .glow-hero-text{-webkit-text-fill-color:#3effe5;background:none}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.star-field{height:100%;pointer-events:none;position:fixed;width:100%}.star{animation:twinkling 3s infinite;border-radius:50%;height:1.5px;position:absolute;width:1.5px}.colored-star,.star{background-color:#fff}@keyframes twinkling{0%{opacity:0}50%{opacity:1}to{opacity:0}}
/*# sourceMappingURL=main.dd5728a7.css.map*/