@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";html{font-family:Roboto,sans-serif;scroll-behavior:smooth}:root{--primary:#000;--secondary: rgb(24,24,27) ;--border: rgba(63 , 63 , 70 , .4);--title: rgb(244 244 245);--subtitle: rgb(161 161 170);--bgHeader: rgb(39 , 39 , 42);--blue: rgb(93 , 188 , 252);--iconhover:#d4d4d8;--shadow:rgb(30, 30, 36)}.light{--primary:rgb(250, 250, 250);--secondary:rgb( 255, 255, 255);--border: rgba(202 , 202 , 202 , .518);--title: rgb(39 39 42);--subtitle: rgb(82 82 91);--bgHeader: rgb(253 , 253 , 253);--blue: rgb(0 , 149 , 249);--iconhover:#333;--shadow:rgba(255, 255, 255, .8)}*{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none;color:initial;transition:.2s}li{list-style:none}::-webkit-scrollbar{width:.88rem}::-webkit-scrollbar-track{border:7px solid #292c3b;box-shadow:inset 0 0 2.5px 2px #00000080;border-radius:4px;background-color:#d4d4d8}::-webkit-scrollbar-thumb{background:#999;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#555}html{scrollbar-color:#9e4673 #3d4a59}button{all:unset;cursor:pointer}button:active{scale:.45}button:disabled{opacity:.4;cursor:not-allowed}body{background-color:var(--primary);color:#fff}.container{border:1px solid var(--border);width:90%;margin:auto;background-color:var(--secondary);padding:0 3rem}.line{border-top:2px solid var(--border);margin:3rem 0}.hidden{opacity:0;transition:all 1s;transform:translate(-100%);filter:blur(5px)}.hiddens{opacity:0;transition:all 1s;transform:translateY(100%);filter:blur(5px)}.show{transform:translateY(0);filter:blur(0);opacity:1}@media (prefers-reduced-motion){.hidden,.hiddens{transition:none}}.flex{display:flex;align-items:center}.justify-between{justify-content:space-between}.p-relative{position:relative}.p-absolute{position:absolute}.g-2{gap:2rem}.g-1{gap:10px}.scrool2top{background-color:#1976d2cc;width:2.6rem;height:2.6rem;border-radius:50%;text-align:center;position:fixed;bottom:2rem;right:3%;border:1px solid rgba(255,255,255,.2);color:#fff;transition:.3s}.scrool2top:hover{background-color:#1976d2}@media (max-width: 768px){.container{width:98%;padding:0 1.7rem}.scrool2top{width:2.2rem;height:2.2rem;font-size:1rem;opacity:.6}}.logo{width:70px}header{padding:0 8rem;position:fixed;width:100%;top:0;left:0;z-index:100;margin:auto;display:flex;align-items:center;justify-content:space-between;transition:background-color .3s ease-in-out,color .3s ease-in-out;background-color:var(--bgHeader);color:var(--title)}html.light header{background-color:var(--bgHeader);color:var(--title)}html.dark header{background-color:var(--bgHeader);color:var(--title)}@media (max-width: 760px){header{padding:0 4rem}}@media (max-width: 500px){header{padding:0 1rem}}header nav{background-color:var(--bgHeader);padding:.77rem 1.6rem;border-radius:55px;box-shadow:1px 1px 40px #313030}header ul{gap:16px}header ul li a{color:var(--title);opacity:.9;font-size:.88rem;font-weight:500;transition:all .2s}header ul li a:hover{color:var(--blue);opacity:1;font-size:.9rem}.fixed{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#282830cc;z-index:11;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.fixed .modal{width:85%;margin:auto;margin-top:2rem;border-radius:1rem;padding:1rem 2rem;background-color:var(--secondary);animation:move .5s 1}@keyframes move{0%{scale:0}60%{scale:1.2}to{scale:1}}.fixed .modal li{border-bottom:1px solid var(--border);padding-bottom:.77rem;padding-top:.5rem}.fixed .modal li:first-child{border-bottom:none;text-align:right;padding-bottom:.77rem;padding-top:.2rem}.fixed .modal li:last-child{border-bottom:none}.fixed .modal li a{font-size:1rem}.icon-list2,.mode{background-color:var(--bgHeader);display:flex;justify-content:center;align-items:center;height:2.4rem;width:2.4rem;border-radius:50%;text-align:center;color:var(--subtitle);border:1px solid rgba(244,165,96,.249);transition:.2s}header .icon-list2:hover,header .mode:hover{color:var(--title);border:1px solid rgba(244,165,96)}.icon-exit{font-size:1.3rem;cursor:pointer;color:var(--subtitle);transition:.2s}.icon-exit:hover{color:#dc143c}.icon-sun1{color:orange;border:orange}@media (max-width: 700px){header .icon{display:block}header nav{display:none}}@media (min-width: 700px){header .icon{display:none}}section.hero{padding-top:8rem}section .left-section h2{font-size:2.5rem;line-height:3.3rem;margin:20px 0;color:var(--title)}section .left-section p{color:var(--subtitle);font-size:1.1rem;line-height:1.6rem;margin-bottom:32px;font-weight:700}section .parent{display:inline-block}.hero .cv{padding:10px 3px;display:inline-block;background-color:var(--blue);border-radius:10px;margin-top:20px;font-size:larger}.hero .cv:hover{background-color:var(--iconhover)}section .parent .avatar{width:150px;border-radius:50%;border:1px solid orange;padding:5px;box-shadow:1px 1px 20px gray}.parent span{bottom:20px;right:15px;color:var(--blue);font-size:1.1rem}.hero .icons-hero{gap:1.3rem;justify-content:left}.icon{font-size:1.2rem;color:var(--subtitle)}.icon:hover{transition:.3s;font-size:1.2rem;color:var(--iconhover)}.light .hero h2{color:var(--title)}.textAnimation{font-size:35px;min-width:280px;overflow:hidden}@media (max-width:820px){.textAnimation{font-size:1.5rem!important}.textAnimation span{padding:7px}.textAnimation span:after{margin-top:5px}}.textAnimation span{position:relative;padding:5px}.textAnimation span:before{content:"Web Developer";color:var(--title);animation:words 20s infinite}.textAnimation span:after{content:"";background:var(--secondary);position:absolute;width:calc(100% + 8px);height:100%;border-left:3px solid var(--title);right:-8px;animation:cursor .75s infinite,typing 20s steps(14) infinite}@keyframes cursor{to{border-left:3px solid var(--title)}}@keyframes words{0%,20%{content:"Welcome 👋"}21%,40%{content:"I'm Youssef Saeed"}41%,60%{content:"<Frontend React/>"}61%,80%{content:"Web Developer"}81%,to{content:"From Cairo"}}@keyframes typing{10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{width:0}5%,20%,25%,40%,45%,60%,65%,80%,85%{width:calc(100% + 8px)}}@media (max-width:820px){section .left-section{text-align:center}section .left-section .icons-hero{display:block}section .left-section .icons-hero a{margin:0 10px}}main.flex{gap:2.64rem;align-items:flex-start}main section.left-section{flex-direction:column;gap:10px}main section.left-section button{background-color:#24252e;width:11rem;padding:.75rem 0;text-align:center;font-size:1.1rem;opacity:.5;border-radius:5px;transition:.3s}main section.left-section button:hover{opacity:1}main section.left-section button.active{opacity:1;font-weight:700;letter-spacing:.6px;padding:.8rem 0;border:1px solid var(--blue)}.light main section.left-section button.active{border:1px solid #000}main section.right-section.flex{flex-grow:1;justify-content:center;flex-wrap:wrap;column-gap:16px;row-gap:2rem;align-items:stretch}.card{box-shadow:-1px 1px 1px #00000029,1px 1px 1px #00000026;border:1px solid rgba(93,188,252,.3);border-radius:5px;transition:.3s;background-image:linear-gradient(#ffffff0d,#ffffff0d);display:flex;flex-direction:column;flex-grow:1 0;min-height:100%}.light .card,.light .card:hover{border:none}.card:hover{border:1px solid var(--blue);background-image:linear-gradient(#ffffff14,#ffffff14);rotate:1deg;scale:1.01;cursor:pointer}.light .card:hover{background-color:#f6f6f6}.card img{border-radius:5px 5px 0 0}.card .box{padding:1rem .4rem;display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;width:266px;height:100%}.card .box .title{color:var(--title)}.card .box .sub-title{color:var(--subtitle);font-size:.8rem;margin-top:.7rem;margin-bottom:1.1rem;display:flex;align-items:center;flex-grow:1}.card .box .icons{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.more{color:#7676e9}.card .icon-link,.card .icon-github{font-size:1.2rem;color:var(--subtitle)}.card .icon-link:hover,.card .icon-github:hover{font-size:1.25rem;color:var(--icon-hover)}.card a.link{font-size:.9rem;color:var(--blue);gap:4px;margin-right:12px}@media (max-width: 768px){main.flex{flex-direction:column;align-items:center}main section.left-section{flex-direction:row;flex-wrap:wrap;justify-content:center}main section.left-section button{width:7rem;padding:.8rem 0;font-size:.9rem}}#slideshow{margin:0 auto;padding-top:10px;height:350px;width:100%;box-sizing:border-box}.slideshow-title{font-family:Allerta Stencil;font-size:62px;color:#fff;margin:25% auto 0;text-align:center;letter-spacing:3px;font-weight:300}.sub-heading{padding-top:50px;font-size:18px}.sub-heading-two{font-size:15px}.sub-heading-three{font-size:13px}.sub-heading-four{font-size:11px}.sub-heading-five{font-size:9px}.sub-heading-six{font-size:7px}.sub-heading-seven{font-size:5px}.sub-heading-eight{font-size:3px}.sub-heading-nine{font-size:1px}.entire-content{margin:auto;width:190px;perspective:1000px;position:relative;padding-top:80px}.content-carrousel{width:100%;position:absolute;float:right;animation:rotar 15s infinite linear;transform-style:preserve-3d}.content-carrousel:hover{animation-play-state:paused;cursor:pointer}.content-carrousel figure{width:100%;height:120px;border:1px solid #3b444b;overflow:hidden;position:absolute}.content-carrousel figure:nth-child(1){transform:rotateY(0) translateZ(300px)}.content-carrousel figure:nth-child(2){transform:rotateY(40deg) translateZ(300px)}.content-carrousel figure:nth-child(3){transform:rotateY(80deg) translateZ(300px)}.content-carrousel figure:nth-child(4){transform:rotateY(120deg) translateZ(300px)}.content-carrousel figure:nth-child(5){transform:rotateY(160deg) translateZ(300px)}.content-carrousel figure:nth-child(6){transform:rotateY(200deg) translateZ(300px)}.content-carrousel figure:nth-child(7){transform:rotateY(240deg) translateZ(300px)}.content-carrousel figure:nth-child(8){transform:rotateY(280deg) translateZ(300px)}.content-carrousel figure:nth-child(9){transform:rotateY(320deg) translateZ(300px)}.content-carrousel figure:nth-child(10){transform:rotateY(360deg) translateZ(300px)}.shadow{position:absolute;box-shadow:0 0 20px #000;border-radius:1px}.content-carrousel img{image-rendering:auto;transition:all .3s;width:100%;height:100%}.content-carrousel img:hover{transform:scale(1.2);transition:all .3s}@keyframes rotar{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@media (max-width: 770px){#slideshow{height:250px}.slideshow-title{font-size:42px;margin-top:20%;letter-spacing:2px}.entire-content{width:160px;padding-top:50px}.content-carrousel figure{height:100px}.content-carrousel figure:nth-child(1){transform:rotateY(0) translateZ(200px)}.content-carrousel figure:nth-child(2){transform:rotateY(45deg) translateZ(200px)}.content-carrousel figure:nth-child(3){transform:rotateY(90deg) translateZ(200px)}.content-carrousel figure:nth-child(4){transform:rotateY(135deg) translateZ(200px)}.content-carrousel figure:nth-child(5){transform:rotateY(180deg) translateZ(200px)}.content-carrousel figure:nth-child(6){transform:rotateY(225deg) translateZ(200px)}.content-carrousel figure:nth-child(7){transform:rotateY(270deg) translateZ(200px)}.content-carrousel figure:nth-child(8){transform:rotateY(315deg) translateZ(200px)}.content-carrousel figure:nth-child(9){transform:rotateY(360deg) translateZ(200px)}.content-carrousel img:hover{transform:scale(1.05)}}@media (max-width: 580px){#slideshow{height:200px}.slideshow-title{font-size:36px;margin-top:15%;letter-spacing:1.5px}.entire-content{width:130px;padding-top:40px}.content-carrousel figure{height:80px}.content-carrousel figure:nth-child(1){transform:rotateY(0) translateZ(150px)}.content-carrousel figure:nth-child(2){transform:rotateY(45deg) translateZ(150px)}.content-carrousel figure:nth-child(3){transform:rotateY(90deg) translateZ(150px)}.content-carrousel figure:nth-child(4){transform:rotateY(135deg) translateZ(150px)}.content-carrousel figure:nth-child(5){transform:rotateY(180deg) translateZ(150px)}.content-carrousel figure:nth-child(6){transform:rotateY(225deg) translateZ(150px)}.content-carrousel figure:nth-child(7){transform:rotateY(270deg) translateZ(150px)}.content-carrousel figure:nth-child(8){transform:rotateY(315deg) translateZ(150px)}.content-carrousel figure:nth-child(9){transform:rotateY(360deg) translateZ(150px)}.content-carrousel img:hover{transform:scale(1.03)}}.icon-contact{color:var(--subtitle);margin-right:1rem;font-size:1.8rem}.title{font-size:2.1rem;color:var(--title);margin-bottom:1rem}.subtitle{color:var(--subtitle);margin-bottom:2rem;line-height:1.6rem}label{color:var(--subtitle)}#email,textarea{all:unset;background-color:#3f3f4626;border:1px solid rgb(63 63 70);width:16rem;padding:.5rem 1rem;margin-left:1rem;border-radius:5px;transition:.3s;font-size:1.1rem}#email:hover,textarea:hover{border:1px solid rgb(45 212 191)}.light #email,.light textarea{background-color:#fff;border:1px solid rgba(128,128,128,.451);color:#232324}.p1{display:flex;justify-content:center;align-items:center;margin-bottom:1rem!important}.p2{text-align:center;margin-bottom:3rem}.light #email:hover,.light textarea:hover{border:1px solid rgb(78 80 80)}textarea{min-height:9rem}.submit{background-color:#24252e;padding:.75rem 1rem;text-align:center;font-size:1.05rem;opacity:.5;border-radius:5px;transition:.3s;margin-top:1.8rem;border:1px solid rgb(63 63 70)}.submit:hover{scale:.9}.contact{justify-content:space-between;align-items:center}.light .success{color:var(--title)}@media (max-width:1055px){.contact-me{display:none}.hero{text-align:center}.icons-hero{display:block;margin:0 10px}.icons-hero a{margin:0 10px}@media (max-width:900px){.contact-me-2{display:none}}@media (max-width:900px){form{display:flex;flex-direction:column;width:100%}form .flex{flex-wrap:wrap;justify-content:start}form .animation{display:none}form button{width:30%}#email,textarea{width:100%;margin-left:0;padding:.5rem 0;margin-top:1rem}.contact{place-items:center}.submit{margin:20px auto 0}}}footer{justify-content:space-between;padding-bottom:1.5rem;flex-wrap:wrap;gap:25px}footer ul a{color:var(--subtitle);font-size:.9rem;font-weight:500}footer ul a:hover{color:var(--blue);font-size:.9rem;font-weight:900}footer p{color:#71717a;text-align:center}footer p span{color:var(--title)}footer p span:hover{color:var(--blue);cursor:pointer}@media (max-width:860px){footer{justify-content:center;align-items:center}footer ul{margin-bottom:1rem}}.headSection{text-align:center;font-size:2rem;margin-bottom:4rem}.skil{margin-bottom:2.2rem!important}.skils{margin-bottom:.5rem!important}.light .headSection{color:var(--title);text-align:center;font-size:2rem;margin-bottom:4rem}.headSection span{color:var(--blue)}.skills .flex{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;border-radius:20px}.skill:not(:last-child){flex-direction:column;justify-content:center;align-items:center;width:150px;height:150px;background-color:var(--bgHeader);box-shadow:1px 1px 40px #313030}.skill:not(:last-child):hover{scale:1.1;cursor:pointer;border:1px solid var(--blue)}.skill span{font-size:3rem;margin-bottom:10px;color:#1572b6}.skill p{font-size:1.5rem;color:#1572b6}a .flex{flex-direction:row;align-items:center;justify-content:center;gap:10px}a .flex p{font-size:2rem;margin-bottom:5px}.p44{color:#fff!important}.light .p44{color:var(--title)!important}@media (max-width: 768px){.mobile-hidden{display:none!important}}@media (min-width: 769px){.mobile-hidden{display:flex!important}}.more-button{display:flex!important}.more{width:150px}.app{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;padding:1rem;margin-bottom:2rem}.tag-list{width:95%;max-width:90vw;display:flex;flex-direction:column;gap:1rem;position:relative;padding:1.5rem 0;overflow:hidden}@media (max-width: 640px){.tag-list{width:100%;max-width:100vw}}.loop-slider .inner{display:flex;width:fit-content;animation-name:loop;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--direction);animation-duration:calc(var(--duration) * 2)}.tag{font-size:1rem;padding:.7rem;display:flex;align-items:center;gap:0 .2rem;color:#e2e8f0;background-color:#334155;border-radius:.4rem;margin-right:1rem;white-space:nowrap;box-shadow:0 .1rem .2rem #0003,0 .1rem .5rem #0000004d,0 .2rem 1.5rem #0006}.tag span{font-size:.9rem;color:#64748b}.fade{pointer-events:none;background:linear-gradient(90deg,var(--shadow),transparent 30%,transparent 70%,var(--shadow));position:absolute;top:0;right:0;bottom:0;left:0}@keyframes loop{0%{transform:translate(0)}to{transform:translate(-50%)}}