@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Nunito Sans,sans-serif}.App,body{margin:0;padding:0}.App{overflow:hidden;position:absolute;width:100%}.backdrop-dark{background-color:#02111b;height:auto;overflow:hidden;width:100vw}.circle{background-color:#bebebe;border-radius:50%}.bird,.circle{position:absolute}.bird:first-child{-webkit-animation:birdFlap 4s ease-in-out infinite alternate;animation:birdFlap 3s ease-in-out infinite alternate;-webkit-animation-delay:.4s;animation-delay:.4s}.bird:nth-child(2){-webkit-animation:birdFlap 5s ease-in-out infinite alternate;animation:birdFlap 4s ease-in-out infinite alternate;-webkit-animation-delay:0s;animation-delay:0s}.bird:nth-child(3){-webkit-animation:birdFlap 6s ease-in-out infinite alternate;animation:birdFlap 5s ease-in-out infinite alternate;-webkit-animation-delay:1s;animation-delay:1s}.bird:nth-child(4){-webkit-animation:birdFlap 4s ease-in-out infinite alternate;animation:birdFlap 3s ease-in-out infinite alternate;-webkit-animation-delay:3s;animation-delay:3s}.bird:nth-child(5){-webkit-animation:birdFlap 5s ease-in-out infinite alternate;animation:birdFlap 4s ease-in-out infinite alternate;-webkit-animation-delay:.6s;animation-delay:.6s}.bird:nth-child(6){-webkit-animation:birdFlap 6s ease-in-out infinite alternate;animation:birdFlap 5s ease-in-out infinite alternate;-webkit-animation-delay:2.2s;animation-delay:2.2s}.bird:nth-child(7){-webkit-animation:birdFlap 4s ease-in-out infinite alternate;animation:birdFlap 3s ease-in-out infinite alternate;-webkit-animation-delay:4s;animation-delay:4s}.bird:nth-child(8){-webkit-animation:birdFlap 5s ease-in-out infinite alternate;animation:birdFlap 4s ease-in-out infinite alternate;-webkit-animation-delay:1.5s;animation-delay:1.5s}.bird:nth-child(9){-webkit-animation:birdFlap 6s ease-in-out infinite alternate;animation:birdFlap 5s ease-in-out infinite alternate;-webkit-animation-delay:2.5s;animation-delay:2.5s}.bird:nth-child(10){-webkit-animation:birdFlap 5s ease-in-out infinite alternate;animation:birdFlap 4s ease-in-out infinite alternate;-webkit-animation-delay:3s;animation-delay:3s}.bird:nth-child(11){-webkit-animation:birdFlap 7s ease-in-out infinite alternate;animation:birdFlap 6s ease-in-out infinite alternate;-webkit-animation-delay:4s;animation-delay:4s}.circle:first-child{-webkit-animation:starsGlow 4s ease-in-out infinite alternate;animation:starsGlow 4s ease-in-out infinite alternate;-webkit-animation-delay:.4s;animation-delay:.4s}.circle:nth-child(2){-webkit-animation:starsGlow 5s ease-in-out infinite alternate;animation:starsGlow 5s ease-in-out infinite alternate;-webkit-animation-delay:0s;animation-delay:0s}.circle:nth-child(3){-webkit-animation:starsGlow 6s ease-in-out infinite alternate;animation:starsGlow 6s ease-in-out infinite alternate;-webkit-animation-delay:1s;animation-delay:1s}.circle:nth-child(4){-webkit-animation:starsGlow 4s ease-in-out infinite alternate;animation:starsGlow 4s ease-in-out infinite alternate;-webkit-animation-delay:3s;animation-delay:3s}.circle:nth-child(5){-webkit-animation:starsGlow 5s ease-in-out infinite alternate;animation:starsGlow 5s ease-in-out infinite alternate;-webkit-animation-delay:.6s;animation-delay:.6s}.circle:nth-child(6){-webkit-animation:starsGlow 6s ease-in-out infinite alternate;animation:starsGlow 6s ease-in-out infinite alternate;-webkit-animation-delay:2.2s;animation-delay:2.2s}.circle:nth-child(7){-webkit-animation:starsGlow 4s ease-in-out infinite alternate;animation:starsGlow 4s ease-in-out infinite alternate;-webkit-animation-delay:4s;animation-delay:4s}.circle:nth-child(8){-webkit-animation:starsGlow 5s ease-in-out infinite alternate;animation:starsGlow 5s ease-in-out infinite alternate;-webkit-animation-delay:1.5s;animation-delay:1.5s}.circle:nth-child(9){-webkit-animation:starsGlow 6s ease-in-out infinite alternate;animation:starsGlow 6s ease-in-out infinite alternate;-webkit-animation-delay:2.5s;animation-delay:2.5s}.circle:nth-child(10){-webkit-animation:starsGlow 5s ease-in-out infinite alternate;animation:starsGlow 5s ease-in-out infinite alternate;-webkit-animation-delay:3s;animation-delay:3s}.circle:nth-child(11){-webkit-animation:starsGlow 7s ease-in-out infinite alternate;animation:starsGlow 7s ease-in-out infinite alternate;-webkit-animation-delay:4s;animation-delay:4s}@-webkit-keyframes starsGlow{0%{box-shadow:0 0 50px 5px #ffffff08}to{box-shadow:0 0 50px 25px #ffffff25}}@keyframes starsGlow{0%{box-shadow:0 0 50px 5px #ffffff08}to{box-shadow:0 0 50px 25px #ffffff25}}@-webkit-keyframes birdFlap{0%{-webkit-transform:translateY(6px);transform:translateY(6px)}to{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes birdFlap{0%{-webkit-transform:translateY(6px);transform:translateY(6px)}to{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}.moon{overflow:hidden;position:absolute}.moon-group:hover{cursor:pointer}.moon-group.menu-animate:hover{cursor:default}.moon.fog-menu-animate{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:fog;animation-name:fog;cursor:pointer;z-index:14!important}.moon-group .menu-animate:first-child{-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:openMenu;animation-name:openMenu}.moon-group .menu-animate:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:openMenu;animation-name:openMenu}.moon-group .menu-animate:nth-child(3){-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:openMenu;animation-name:openMenu}.moon-group .menu-animate:nth-child(4){-webkit-animation-delay:.55s;animation-delay:.55s;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:openMenu;animation-name:openMenu}@-webkit-keyframes openMenu{to{border-radius:0;height:300vh;right:-25vw;width:50vw}}@keyframes openMenu{to{border-radius:0;height:300vh;right:-25vw;width:50vw}}@-webkit-keyframes fog{90%{height:600vh;right:-300vw;top:-300vh;width:600vw;z-index:20!important}to{background:hsla(0,0%,85%,.36);height:600vh;right:-300vw;top:-300vh;width:600vw;z-index:20!important}}@keyframes fog{90%{height:600vh;right:-300vw;top:-300vh;width:600vw;z-index:20!important}to{background:hsla(0,0%,85%,.36);height:600vh;right:-300vw;top:-300vh;width:600vw;z-index:20!important}}.exitImg{border-radius:50%;display:none;padding:10px;position:absolute;right:24px;top:26px;z-index:13}.exitImg.exitStyle:hover{background-color:#3f40453f;transition:.4s ease-in-out}.exitImg.exitStyle{-webkit-animation-delay:.7s;animation-delay:.7s;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:exitShow;animation-name:exitShow;display:block;opacity:0;transition:.2s ease-in-out}.darkMode{align-items:center;background-color:#fcfcfc;border-radius:33px;display:none;display:flex;flex-direction:row;height:36px;justify-content:flex-start;margin:20px 20px 20px 30px;overflow:hidden;padding:5px;position:absolute;top:12px;width:75px;z-index:13}.darkMode:hover{cursor:pointer}.darkMode .buttonCircle{background-color:#7e7e7e;border-radius:50%;height:39px;position:relative;width:39px}.backdrop-dark.darkMode{justify-content:flex-end!important}.darkMode.exitStyle{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:exitShow;animation-name:exitShow;opacity:0;transition:.2s ease-in-out}.buttonCircle img{-webkit-user-select:none;user-select:none}.menu{display:none;flex-direction:column;height:100vh;overflow:hidden;position:absolute;right:0;top:0;width:25vw;z-index:30}.menu.exitStyle{display:block}.menu-selector{display:none}.options{color:#fff;display:flex;flex-direction:column;font-family:Nunito Sans;font-size:2.5rem;font-weight:700;line-height:61px;margin:15vh 20px 20px;text-align:center}.options a{margin-top:3vh;transition:.1s ease-in-out}.options a:hover{color:#3f4045;transition:.2s ease-in-out}.menu-selector.exitStyle:first-child{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.menu-selector.exitStyle:first-child,.menu-selector.exitStyle:nth-child(2){-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:exitShow;animation-name:exitShow;display:block;opacity:0}.menu-selector.exitStyle:nth-child(2){-webkit-animation-delay:1.1s;animation-delay:1.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.menu-selector.exitStyle:nth-child(3){-webkit-animation-delay:1.2s;animation-delay:1.2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.menu-selector.exitStyle:nth-child(3),.menu-selector.exitStyle:nth-child(4){-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:exitShow;animation-name:exitShow;display:block;opacity:0}.menu-selector.exitStyle:nth-child(4){-webkit-animation-delay:1.3s;animation-delay:1.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.menu-selector.exitStyle:nth-child(5){-webkit-animation-delay:1.4s;animation-delay:1.4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.menu-selector.exitStyle:nth-child(5),.menu-selector.exitStyle:nth-child(6){-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:exitShow;animation-name:exitShow;display:block;opacity:0}.menu-selector.exitStyle:nth-child(6){-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.menu .socials{display:flex;flex-direction:row;justify-content:center;margin-top:7vh}.socials a{margin-left:15px;margin-right:15px;padding:6px}.socials a svg{fill:#fff;height:35px;transition:.1s ease-in-out;width:35px}.socials a:hover svg{fill:#3f4045;transition:.2s ease-in-out}.socials .menu-selector.exitStyle:first-child{-webkit-animation-delay:1.8s;animation-delay:1.8s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.socials .menu-selector.exitStyle:first-child,.socials .menu-selector.exitStyle:nth-child(2){-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:exitShow;animation-name:exitShow;display:block;opacity:0}.socials .menu-selector.exitStyle:nth-child(2){-webkit-animation-delay:1.9s;animation-delay:1.9s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.socials .menu-selector.exitStyle:nth-child(3){-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:exitShow;animation-name:exitShow;display:block;opacity:0}@-webkit-keyframes exitShow{to{opacity:1}}@keyframes exitShow{to{opacity:1}}a.exitStyle:hover{cursor:pointer}.backdrop-light{overflow:hidden;width:100vw}.sun{overflow:hidden;position:absolute}.sun-group:hover{cursor:pointer}.sun-group.menu-animate:hover{cursor:default}.sunfog-menu-animate{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:sunfog;animation-name:sunfog;cursor:pointer;z-index:14!important}.sun-group .menu-animate:first-child{-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:openMenu;animation-name:openMenu}.sun-group .menu-animate:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:openMenu;animation-name:openMenu}.sun-group .menu-animate:nth-child(3){-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:openMenu;animation-name:openMenu}.sun-group .menu-animate:nth-child(4){-webkit-animation-delay:.55s;animation-delay:.55s;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:openMenu;animation-name:openMenu}@-webkit-keyframes sunfog{90%{height:600vh;right:-300vw;top:-300vh;width:600vw}to{background:rgba(244,211,94,.36);height:600vh;right:-300vw;top:-300vh;width:600vw}}@keyframes sunfog{90%{height:600vh;right:-300vw;top:-300vh;width:600vw}to{background:rgba(244,211,94,.36);height:600vh;right:-300vw;top:-300vh;width:600vw}}.backdrop-light .exitImg.exitStyle:hover{background-color:#fcd53a;transition:.4s ease-in-out}.backdrop-light .socials a:hover svg{fill:#fcd53a;transition:.2s ease-in-out}.backdrop-light .options a:hover{color:#fcd53a;transition:.2s ease-in-out}.backdrop-light .socials a svg{fill:#faf0ca;transition:.2s ease-in-out}.backdrop-light .options a{color:#faf0ca;transition:.2s ease-in-out}.lightMode{align-items:center;background-color:#fcfcfc;border-radius:33px;display:none;display:flex;flex-direction:row;height:36px;justify-content:flex-end;margin:20px 20px 20px 30px;overflow:hidden;padding:5px;position:absolute;top:12px;width:75px;z-index:13}.lightMode:hover{cursor:pointer}.lightMode .buttonCircle{background-color:#f86e40;border-radius:50%;height:39px;position:relative;width:39px}.lightMode .buttonCircle img{padding:4px;-webkit-user-select:none;user-select:none}.lightMode.exitStyle{-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:exitShow;animation-name:exitShow;opacity:0;transition:.2s ease-in-out}.menu{position:fixed}a{color:#fff;text-decoration:none}.home-section{height:100vh;position:relative}.name{-webkit-margin-after:0;align-items:center;display:flex;justify-content:center;margin-block-end:0;-webkit-user-select:none;user-select:none;width:100%}.english p{-webkit-margin-after:-10px;-webkit-margin-before:5px;color:#fff;font-size:85px;font-weight:700;line-height:1;margin-block-end:-10px;margin-block-start:5px;padding:15px;text-align:right}.subTitle{-webkit-animation:showSub 3s ease-in-out infinite alternate;animation:showSub 3s ease-in-out infinite alternate;font-size:16px;font-weight:400;letter-spacing:1.2px;margin-bottom:30px;opacity:0}@-webkit-keyframes showSub{to{opacity:100%}}@keyframes showSub{to{opacity:100%}}.typeArabic{-webkit-margin-after:-10px;-webkit-margin-before:5px;color:#3f4045;font-family:Noto Sans Arabic,sans-serif!important;font-size:90px;font-weight:700;line-height:1;margin-block-end:-10px;margin-block-start:5px;padding:15px}.textHolder{flex-direction:column;height:100%;justify-content:center;position:absolute;-webkit-user-select:none;user-select:none;width:100%}.about-section,.textHolder{align-items:center;display:flex}.about-section{color:#fcfcfc;font-family:Montserrat;height:100vh;justify-content:space-evenly;margin-left:5vw;position:relative;width:90vw;z-index:10}.about-section .text{padding-top:70px}h1{font-size:80px;font-weight:700;line-height:105px;margin-bottom:-40px}h1,h3{font-family:Montserrat;font-style:normal}h3{font-size:36px;font-weight:500;line-height:43px}.extra-text{color:#5d737e}.about-section .text a{background-color:#5d737e;border-radius:40px;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:29px;padding:14px 28px;transition:.2s ease-in-out}.about-section .text .lightMode-color{background-color:#ee964b;color:#faf0ca}.about-section .text a:hover{background-color:#fcfcfc;color:#5d737e;transition:.3s ease-in-out}.about-section .text .lightMode-color:hover{background-color:#faf0ca;color:#ee964b}.picture{align-items:baseline;background:rgba(63,64,69,.54);border-radius:50%;display:flex;height:420px;margin-top:80px;overflow:hidden;-webkit-user-select:none;user-select:none;width:420px;z-index:2}.picture .personal-image{z-index:4}.picture .image-background{margin-left:-420px;z-index:3}.projects{align-items:center;display:flex;height:100vh;justify-content:center;position:relative;z-index:13}.dot-selection{display:block;position:relative;transition:.2s ease-in-out}.dotCollection{align-items:center;display:flex;flex-direction:row;justify-content:center}.projects h1{font-size:54px;font-weight:600;line-height:82px}.projects h1,.projects p{color:#fff;font-family:Montserrat;font-style:normal}.projects p{font-size:20px;font-weight:500;line-height:39px;margin-top:50px;width:486px}.projectCard{align-items:center;display:flex;flex-direction:row;justify-content:center;margin:70px}.projectCard div{margin-right:4vw}.projectCard img{margin-left:4vw}.projects-container{align-items:center;background:linear-gradient(180.01deg,hsla(0,0%,85%,.179) -9.62%,rgba(61,61,61,.94) 111.45%);border-radius:19px;box-shadow:0 4px 4px rgba(0,0,0,.25),-25px 25px 105px -8px #000;display:flex;flex-direction:column;justify-content:space-around;padding:20px;z-index:10}.projects-container img{border-radius:18px;-webkit-filter:drop-shadow(-22px 22px 20px rgba(0,0,0,.553));filter:drop-shadow(-22px 22px 20px rgba(0,0,0,.553));object-fit:contain;width:500px}.dot-selection.selected{transition:.3s ease-in-out}.one{margin-right:-50px}.one,.two{-webkit-filter:drop-shadow(-7px 3px 8px rgba(0,0,0,.39));filter:drop-shadow(-7px 3px 8px rgba(0,0,0,.39));padding:30px;transition:.3s ease-in-out;z-index:11}.two{margin-left:-50px}.two:hover{translate:10px}.one:hover,.two:hover{-webkit-filter:drop-shadow(-7px 3px 8px rgba(0,0,0,.39)) brightness(130%);filter:drop-shadow(-7px 3px 8px rgba(0,0,0,.39)) brightness(130%);transition:.3s ease-in-out}.one:hover{translate:-10px}.viewButton{background-color:#5d737e;border-radius:40px;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:29px;padding:10px 28px;transition:.2s ease-in-out}.viewButton:hover{background-color:#fff;color:#5d737e;cursor:pointer;margin-left:-8px;margin-right:-8px;padding-left:35px;padding-right:35px}.imgCont{display:block;width:600px}.imgCont #three{position:relative;transition:.3s ease-in-out!important;z-index:14}.imgCont #three:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.imgCont #one:hover,.imgCont #two:hover{-webkit-animation:none!important;animation:none!important;cursor:pointer;-webkit-transform:scale(1.08);transform:scale(1.08);transition:.3s ease-in-out!important}.imgCont #two{-webkit-animation:coolEffect1 4s infinite alternate;animation:coolEffect1 4s infinite alternate;margin-left:400px;margin-top:70px;width:300px}.imgCont #one,.imgCont #two{position:absolute;transition:.3s ease-in-out!important;z-index:12}.imgCont #one{-webkit-animation:coolEffect1 5s ease-in-out infinite alternate;animation:coolEffect1 5s ease-in-out infinite alternate;-webkit-animation-delay:.2s;animation-delay:.2s;margin-left:170px;margin-top:-140px;width:400px}@-webkit-keyframes coolEffect1{to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes coolEffect1{to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@-webkit-keyframes coolEffect2{to{-webkit-transform:translate(8px,-12px);transform:translate(8px,-12px)}}@keyframes coolEffect2{to{-webkit-transform:translate(8px,-12px);transform:translate(8px,-12px)}}.interests-section{height:100vh;position:relative}
/*# sourceMappingURL=main.d60af260.css.map*/