*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;font-family:Oxanium,sans-serif;font-optical-sizing:auto;font-style:normal}body{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;overscroll-behavior:none}body:before{content:"";background-color:#d94d1526;mix-blend-mode:soft-light;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}body:after{content:"";background-image:url(/assets/noise-0L83OA_A.jpg);background-size:cover;background-repeat:repeat;mix-blend-mode:soft-light;opacity:.2;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none;z-index:2}@keyframes loop-up-down{0%{transform:translateY(-2rem)}50%{transform:translateY(0)}to{transform:translateY(-2rem)}}@keyframes circle-loading{0%{transform:scale(.5) translateY(3rem) rotate(180deg);border-radius:50%;background-color:orange}50%{transform:scale(1.3) translateY(-3rem) rotate(-180deg);border-radius:10%;background-color:purple}to{transform:scale(.5) translateY(3rem) rotate(180deg);border-radius:50%;background-color:#adff2f}}@keyframes enter-btn--intro{0%{transform:translateY(1rem);opacity:0;outline-width:0rem}to{transform:translateY(0);opacity:1;outline-width:.1rem;outline-offset:1rem}}#landing-page--container{width:100%;height:100%;z-index:30}.landing-page{background-color:#1e1e1e;width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0}.landing-page .circles{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2rem}.landing-page .circles .circle{width:5rem;height:5rem;animation-name:circle-loading;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}.landing-page .circles .circle--left{animation-delay:.3s}.landing-page .circles .circle--middle{animation-delay:.4s}.landing-page .circles .circle--right{animation-delay:.5s}.landing-page .enter-btn{animation-name:enter-btn--intro;animation-duration:.5s;animation-delay:.2s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;opacity:0;outline:auto;outline-color:#fff;outline-style:dashed;transition:all .2s ease-in}.landing-page .enter-btn:hover{translate:0 -.6rem}.landing-page .enter-btn button{padding:1.5rem 2rem;font-size:2rem;border:none;cursor:pointer}#skills--container{position:absolute;width:100%;height:100%;z-index:20}.skills{width:100%;height:100%;padding:2rem 20rem 10rem;overflow-x:hidden;background-color:#ff8438;display:flex;flex-direction:column;justify-content:start;align-items:center;gap:0}@media screen and (max-width: 1000px){.skills{padding:2rem 1rem}}.skills__heading{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:0;font-size:2.2rem;width:100%;margin:1rem 0}.skills__heading h2{color:#fff}.skills__heading button{padding:1rem;font-size:2.2rem;cursor:pointer;background-color:#fff;border:none;box-shadow:-.3rem .3rem .2rem #00000040;transition:all .2s ease-in-out}.skills__heading button:hover{transform:translateY(-.4rem)}.skills__heading button:active{transform:translateY(.4rem)}.skills--contents{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;position:relative}.skills--contents .skills--logo{position:absolute;top:-5rem;width:40rem;height:40rem;animation-name:loop-up-down;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}@media screen and (max-width: 1000px){.skills--contents .skills--logo{top:3rem;width:25rem;height:25rem}}.skills--contents .skills--logo img{object-fit:cover;width:100%;height:100%}.skills--contents .skill-list{width:100%;height:auto;margin-top:10rem;padding-top:25rem;padding-bottom:5rem;background:#f3f3f3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.skills--contents .skill-list>*:nth-child(2n){background-color:#454545cc}.skills--contents .skill-list>*:nth-child(odd){background-color:#e6e6e6cc}.skills__content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:2rem;font-size:2rem;width:20rem;height:20rem;color:#ff8438}@media screen and (max-width: 600px){.skills__content{width:10rem;height:10rem;font-size:1.2rem}}#contacts--container{position:absolute;width:100%;height:100%;z-index:20;background-color:#639}.contacts{width:100%;height:100%;padding:2rem 20rem 10rem;overflow-x:hidden;background-color:#ff8438;display:flex;flex-direction:column;justify-content:start;align-items:center;gap:0}@media screen and (max-width: 1000px){.contacts{padding:1rem}}.contacts__heading{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:0;font-size:2.2rem;width:100%;margin:1rem 0}.contacts__heading h2{color:#fff}.contacts__heading button{padding:1rem;font-size:2.2rem;cursor:pointer;background-color:#fff;border:none;box-shadow:-.3rem .3rem .2rem #00000040;transition:all .2s ease-in-out}.contacts__heading button:hover{transform:translateY(-.4rem)}.contacts__heading button:active{transform:translateY(.4rem)}.contacts--contents{width:100%;height:100%;position:relative;margin-top:15rem;padding-top:20rem;padding-bottom:5rem;background:#f3f3f3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0}@media screen and (max-width: 1000px){.contacts--contents{padding:10rem 0rem 2rem}}.contacts--contents .contacts--logo{position:absolute;top:-20rem;width:40rem;height:40rem;animation-name:loop-up-down;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}@media screen and (max-width: 1000px){.contacts--contents .contacts--logo{top:-10rem;width:20rem;height:20rem}}.contacts--contents .contacts--logo img{object-fit:cover;width:100%;height:100%}.contacts--contents h3{font-size:4rem}.contacts__links{width:30rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:0;border:.1rem dashed rgb(0,0,0);border-radius:5rem;padding:1rem 2rem;margin-top:4rem;margin-bottom:20rem}.contacts__link{width:5rem;height:5rem;cursor:pointer;opacity:.7}.contacts__link svg{object-fit:cover;width:100%;height:100%}.contacts .footer{width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0;font-size:2rem}#projects--container{position:absolute;width:100%;height:100%;z-index:20}.projects{width:100%;height:100%;padding:2rem 20rem 10rem;overflow-x:hidden;background-color:#ff8438;display:flex;flex-direction:column;justify-content:start;align-items:center;gap:0}@media screen and (max-width: 1000px){.projects{padding:2rem 1rem}}.projects__heading{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:0;font-size:2.2rem;width:100%;margin:1rem 0}.projects__heading h2{color:#fff}.projects__heading button{padding:1rem;font-size:2.2rem;cursor:pointer;background-color:#fff;border:none;box-shadow:-.3rem .3rem .2rem #00000040;transition:all .2s ease-in-out}.projects__heading button:hover{transform:translateY(-.4rem)}.projects__heading button:active{transform:translateY(.4rem)}.projects--contents{width:100%;height:auto;margin-top:10rem;padding-top:25rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;background-color:#fff;position:relative}@media screen and (max-width: 1000px){.projects--contents{padding-top:20rem}}.projects--contents .projects--logo{position:absolute;top:-15rem;width:40rem;height:40rem;animation-name:loop-up-down;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}@media screen and (max-width: 1000px){.projects--contents .projects--logo{top:-10rem;width:25rem;height:25rem}}.projects--contents .projects--logo img{object-fit:cover;width:100%;height:100%}.projects--list{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;gap:4rem;width:100%;height:100%;padding-bottom:10rem}.projects--list .project{background-color:#ff8438;border-radius:2.6rem}.projects--list .project__content{width:60rem;height:60rem;padding:2rem;display:flex;flex-direction:column;justify-content:start;align-items:center;gap:0}@media screen and (max-width: 1000px){.projects--list .project__content{width:30rem;height:30rem}}.projects--list .project__content .img-wrapper{width:100%;height:60%;overflow:hidden;border-radius:2rem;margin-bottom:2rem;filter:grayscale(100%)}.projects--list .project__content .img-wrapper img{object-fit:fill;width:100%;height:100%;transition:all .2s ease-in}.projects--list .project__content .img-wrapper img:hover{scale:1.1}.projects--list .project__content h3{font-size:3rem;color:#fff;margin-bottom:6rem}.projects--list .project__btns{width:100%;display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;gap:0}.projects--list .project__btns a{text-decoration:none;width:40%;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0}.projects--list .project__btns button{width:100%;font-size:3rem;font-weight:600;border:none;border-radius:1rem;padding:.5rem 1rem;cursor:pointer;color:#ff8438}@media screen and (max-width: 1000px){.projects--list .project__btns button{font-size:1.2rem}}.joystick-wrapper{position:fixed;bottom:0;width:100%;min-height:10%;max-height:auto;display:flex;justify-content:center;align-items:center;z-index:10}.joystick-heading{color:#e5ffe1;opacity:.6}.joystick-moves{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.joystick-move{width:15rem;height:15rem;display:flex}.joystick-move .column{display:flex;flex-direction:column;justify-content:center}.joystick-move .column img{width:5rem;height:5rem;background-color:#77f561;filter:invert(82%) sepia(98%) hue-rotate(190deg);opacity:.3;border-radius:50%;padding:.5rem;transition:scale .2s ease-in-out;margin:0;cursor:pointer}.joystick-move .column img:hover{scale:1.2}.joystick-move .column img:active{scale:1}.joystick-move .up-down img{margin:1rem 0}.joystick-speed{display:flex;flex-direction:column;justify-content:center;align-items:center}.joystick-speed img{width:5rem;height:5rem;background-color:#77f561;filter:invert(82%) sepia(98%) hue-rotate(190deg);opacity:.3;border-radius:50%;padding:.5rem;transition:scale .2s ease-in-out;margin:1.2rem 2rem;cursor:pointer}.joystick-speed img:hover{scale:1.2}.joystick-speed img:active{scale:1}.joystick-zoom{display:flex;flex-direction:column;justify-content:center;align-items:center}.joystick-zoom img{width:5rem;height:5rem;background-color:#77f561;filter:invert(82%) sepia(98%) hue-rotate(190deg);opacity:.3;border-radius:50%;padding:.5rem;transition:scale .2s ease-in-out;margin:1.2rem 2rem;cursor:pointer}.joystick-zoom img:hover{scale:1.2}.joystick-zoom img:active{scale:1}#my-canvas-wrapper{position:fixed;width:100%;height:100%}#my-canvas{width:100%;height:100%}canvas{display:block;width:100vw;height:100vh}#about-me--container{position:absolute;width:100%;height:100%;z-index:20}.about-me{width:100%;height:100%;padding:2rem 20rem 10rem;overflow-x:hidden;background-color:#ff8438;display:flex;flex-direction:column;justify-content:start;align-items:center;gap:0}@media screen and (max-width: 1000px){.about-me{padding:2rem}}.about-me__heading{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:0;font-size:2.2rem;width:100%;margin:1rem 0}.about-me__heading h2{color:#fff}.about-me__heading button{padding:1rem;font-size:2.2rem;cursor:pointer;background-color:#fff;border:none;box-shadow:-.3rem .3rem .2rem #00000040;transition:all .2s ease-in-out}.about-me__heading button:hover{transform:translateY(-.4rem)}.about-me__heading button:active{transform:translateY(.4rem)}.about-me__contents{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;width:100%;background-color:#fff;position:relative;margin-top:15rem;padding-top:20rem}@media screen and (max-width: 1000px){.about-me__contents{margin-top:8rem;padding-top:10rem}}.about-me__contents .BP89--logo{position:absolute;top:-20rem;width:40rem;height:40rem;animation-name:loop-up-down;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}@media screen and (max-width: 1000px){.about-me__contents .BP89--logo{top:-10rem;width:20rem;height:20rem}}.about-me__contents .BP89--logo img{object-fit:cover;width:100%;height:100%}.about-me__contents .para{display:flex;flex-direction:column;justify-content:start;align-items:start;gap:2rem;font-size:2.2rem;font-weight:600;padding:5rem;line-height:4rem}@media screen and (max-width: 1000px){.about-me__contents .para{font-size:1.6rem;line-height:2rem;padding:1rem 1rem 4rem}}.about-me--snippet{color:#5a8bee}.about-me--snippet-hassen{color:#f8a62b}