*{margin:0;padding:0;box-sizing:border-box}html,body,#root,.App{width:100%;height:100%}h1,h2,h3,h4,p,span,body,main{transition:.3s}.light-mode span{transition:20ms}.langage-card span,main h1,main h2,main h3,main h4,main p,main span{transition:0ms}:root{--main-color: black;--secondary-color: #1c1c1e;--hover-color: #0202ee;--input-color: #2fd159;--slider-bg: #39383d;--line-color: #2c2c2e94;--text-color: white;--link-color: #0b72d8;--link-hover: #0d58a3;--input-bg: #3b3b3f;--arrow-position: -50px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}a,a:active,a:visited,a:hover{text-decoration:none;color:var(--text-color)}body{background-color:var(--main-color);color:var(--text-color);overflow-x:hidden;width:100dvw}.App{display:flex;align-items:center;justify-content:center}.card-container{background-color:var(--secondary-color);border-radius:10px;margin-top:40px}header{position:fixed;display:flex;flex-direction:column;height:100dvh;width:100dvw;max-width:780px;left:0;padding:0 15px}header h1{margin:20px 0;color:var(--text-color)}header .highlight{background-color:var(--input-bg)!important}main{position:absolute;min-height:100dvh;height:max-content;width:100dvw;top:0;left:100%;background-color:var(--main-color);z-index:2;display:none;flex-direction:column;justify-content:flex-start}.show{left:0;display:flex}.side{right:20%}@media screen and (min-width: 781px){header{left:0;width:390px;border-right:1px solid var(--line-color);z-index:3}main,.show{width:calc(100% - 390px);right:0;left:auto;align-items:center}}.image-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.image-container img{width:30%;border-radius:50%;margin-bottom:20px}#presentation,#activity{max-width:1010px;width:calc(100% - 30px);background-color:var(--secondary-color);border-radius:10px;padding:10px 15px 15px;margin:15px auto}#presentation h4,#activity h4{margin-bottom:5px;font-size:1.1rem}@media screen and (min-width: 781px){.image-container img{width:15%}}#profile-card{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:70px;background-color:var(--secondary-color);border-radius:10px;padding:0 15px;gap:0px;font-family:Arial,Helvetica,sans-serif}#profile-card:hover{cursor:pointer;background-color:var(--hover-color)}.profile-image{height:80%;border-radius:50%}.presentation{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:70%}.presentation h2{font-size:1.3rem;font-weight:100;letter-spacing:.5px}.presentation span{font-size:.9rem}.light-mode{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:40px;padding-left:15px;gap:0px;font-family:Arial,Helvetica,sans-serif;border-top-left-radius:10px;border-top-right-radius:10px;cursor:default!important}.light-mode img{height:70%}.light-mode span{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:70%}.light-mode .right-part{border:none}.switch{position:relative;display:inline-block;height:28px;width:50px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--slider-bg);-webkit-transition:.4s;transition:.4s;border-radius:34px;width:100%!important}.slider:before{position:absolute;content:"";height:25px;width:25px;background-color:#fff;-webkit-transition:.4s;transition:.4s;border-radius:50%;top:5.36%;left:3%}#light-input:checked+.slider{background-color:var(--input-color)}#light-input:checked+.slider:before{-webkit-transform:translateX(21.5px);-ms-transform:translateX(21.5px);transform:translate(21.5px)}.langage-card{border-bottom-left-radius:10px;border-bottom-right-radius:10px;cursor:default!important}#lang{color:var(--text-color);background-color:var(--secondary-color);border:1px solid var(--line-color);border-radius:10px;padding:3px 10px}.card-container .card{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:40px;padding-left:15px;gap:0px;font-family:Arial,Helvetica,sans-serif}.card-container .card:hover{cursor:pointer;background-color:var(--hover-color)}.card-container a:first-child .card{border-top-left-radius:10px;border-top-right-radius:10px}.card-container a:last-child .card{border-bottom-left-radius:10px;border-bottom-right-radius:10px}.card-container a:first-child .right-part{border:none}.card-image{height:70%}.card-container .card span{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:70%}.right-arrow{width:15px}.right-part{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:87%;height:100%;border-top:1px solid var(--hover-color);padding-right:15px}.top-page{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:25px;width:100%;margin:30px 0}.top-page>div{width:15%}.top-page h2{text-align:center;width:70%}.back-button a{display:flex;align-items:center;justify-content:flex-start;color:var(--link-color)}.back-button a:hover{text-decoration:underline}.back-button span{padding-bottom:5px}.back-button img{height:25px}.hidden{display:none}@media screen and (min-width: 781px){.top-page{justify-content:center}.top-page h2{width:100%}}#comment-section{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 15px;max-width:780px;width:100%}#comment-section h2{font-size:1.3rem;text-align:center}#giscus{margin-top:30px}#contact-container{padding:0 15px;max-width:780px;width:100%}#contact-container>.card-container{margin-top:20px}#contact-container h3{margin:15px 0}#contact-form{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;background-color:var(--secondary-color);margin-top:20px;border-radius:10px;padding:10px 15px}#contact-form label{font-size:1.2rem}#contact-form input,#form-message{width:100%;height:35px;background-color:var(--secondary-color);border:none;border-bottom:1px solid var(--line-color);color:var(--text-color);font-size:1.1rem;font-size:1rem}#contact-form input:focus,#form-message:focus{outline:none}#form-message{height:100px;padding-top:10px;font-family:Arial,Helvetica,sans-serif;resize:vertical}#form-button{height:30px;width:80px;background-color:var(--input-color);color:#fff;border:none;border-radius:15px;margin-top:5px;margin-bottom:5px;cursor:pointer;text-shadow:0px 0px 5px #000000}#form-button:hover{background-color:#29aa4b}#form-button:disabled{background-color:gray}#skill-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:20px;margin-bottom:50px;gap:20px;max-width:780px;width:100%}.skill-card-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding:0 15px;gap:20px}.skill-card-container:first-child>.skill-card>img{width:108px;height:auto}.skill-card-container:last-child>.skill-card:last-child{background-color:#b33;background:radial-gradient(circle,red,#00f)}.hidden{opacity:0}@keyframes fade{0%{opacity:0}50%{opacity:1}to{opacity:0}}.skill-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:200px;border:none;border-radius:10px;z-index:3}.skill-card>img{height:68px;margin-bottom:10px}.skill-card:before,.skill-card:after{content:"";background:var(--secondary-color);width:calc(100% - 5px);height:calc(100% - 5px);position:absolute;border-radius:10px;z-index:-1}.React{background:#31529b;background:linear-gradient(90deg,#31529b,#00b3ff)}.Vue{background:#42b883;background:linear-gradient(90deg,#42b883,#35495e)}.ThreeJS,.NextJS{background-color:#292929;background:linear-gradient(90deg,#292929,#ddd2d2)}.Laravel{background-color:#b33;background:linear-gradient(90deg,#b33,#970707)}.Firebase{background-color:#ffc400;background:linear-gradient(90deg,#ffc400,#ff6f00)}.Sass{background-color:#ce679a;background:linear-gradient(90deg,#ce679a,#bb407e)}.NodeJS{background-color:#21a366;background:linear-gradient(90deg,#21a366,#177046)}#exp-section{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:780px;width:100%;min-height:100dvh}strong{font-weight:600}#exp-section h1{letter-spacing:1.5px;color:#fff;font-weight:400;font-size:2.4em}#timeline-content{margin-top:50px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%}.timeline{border-left:4px solid var(--link-color);border-bottom-right-radius:4px;border-top-right-radius:4px;background:fade(white,3%);color:fade(white,80%);letter-spacing:.5px;position:relative;line-height:1.2em;font-size:1.03em;padding:0 10px 50px 30px;margin-bottom:20px;list-style:none;text-align:left;font-weight:100;width:95%}.timeline h3,.timeline h4{letter-spacing:1.5px;font-weight:400}.timeline h3{font-size:1.3em}.timeline h4{font-size:1.1em;margin-bottom:10px}.timeline .event{border-bottom:1px dashed fade(white,10%);padding-bottom:(50px * .5);margin-bottom:25px;position:relative;background-color:var(--secondary-color);padding:40px 20px 20px;border-radius:10px}.timeline .event:last-of-type{margin-bottom:0;border:none}.timeline .event:before,.timeline .event:after{position:absolute;display:block;top:0}.timeline .event:before{top:10px;left:20px;color:fade(white,40%);content:attr(data-date);text-align:left;font-weight:100;font-size:.8em;min-width:120px}.timeline .event:after{background-color:var(--link-color);border-radius:50%;height:12px;width:12px;content:"";left:-38px;top:5px}.timeline .event li{list-style-position:inside;font-size:.9rem}.timeline-desktop{background:var(--primary-color);height:100dvh;padding:0 50px;display:none}.timeline-desktop .card{position:relative;width:100%}.timeline-desktop .card:nth-child(odd){padding:30px 0 30px 30px}.timeline-desktop .card:nth-child(2n){padding:30px 30px 30px 0}.timeline-desktop .card:before{content:"";position:absolute;width:50%;border:solid var(--link-color)}.timeline-desktop .card:nth-child(odd):before{left:0;top:-4.6px;bottom:-4.5px;border-width:5px 0 5px 5px;border-radius:50px 0 0 50px}@media only screen and (max-width: 400px){.timeline-desktop .card:nth-child(odd):before{top:-5px;bottom:-5px}}.timeline-desktop .card:nth-child(2n):before{right:0;top:0;bottom:0;border-width:5px 5px 5px 0;border-radius:0 50px 50px 0}.timeline-desktop .card:first-child:before{border-top:0;border-top-left-radius:0}.timeline-desktop .card:last-child:nth-child(odd):before{border-bottom:0;border-bottom-left-radius:0}.timeline-desktop .card:last-child:nth-child(2n):before{border-bottom:0;border-bottom-right-radius:0}.info{display:flex;flex-direction:column;background:var(--secondary-color);color:gray;border-radius:10px;padding:30px 20px 15px}.title{color:var(--text-color);position:relative}.title:before{content:"";position:absolute;width:10px;height:10px;background:var(--link-color);border-radius:999px;border:3px solid var(--link-color)}.title:after{position:absolute;top:-18px;left:0;color:fade(white,40%);content:attr(data-date);text-align:left;font-weight:100;font-size:.8em;min-width:120px;width:100%}.timeline-desktop .card:nth-child(2n)>.info>.title:after{text-align:end}.timeline-desktop .card h4{color:var(--text-color)}.timeline-desktop .card ul{list-style-position:inside;list-style-type:circle;font-size:.9rem}.timeline-desktop .card:nth-child(2n) ul{text-align:start;direction:rtl}.timeline-desktop .card:nth-child(2n)>.info>.title,.timeline-desktop .card:nth-child(2n)>.info>h4{text-align:right}.timeline-desktop .card:nth-child(odd)>.info>.title:before{left:-55px}.timeline-desktop .card:nth-child(2n)>.info>.title:before{right:-55px}@media screen and (min-width: 1000px){.timeline{display:none}.timeline-desktop{display:block}}#project-section{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 15px;margin-bottom:50px}#project-container{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:15px;padding-top:15px;border-radius:10px}.project-card-container{width:370px;max-width:780px;min-height:320px;height:fit-content;background-color:var(--secondary-color);padding:10px 15px 35px;border-radius:10px;position:relative}.project-card-container img{width:100%;border-radius:10px}.project-card-container .card-skills{display:flex;flex-direction:row;align-items:center;justify-content:space-around;margin:5px 0}.project-card-container .card-skills img{width:30px}.project-card-container h3{margin-bottom:5px}.project-link,.project-link:visited{color:var(--link-color);position:absolute;bottom:10px;left:15px}.project-link:hover{color:var(--link-color);text-decoration:underline}#not-found h3{text-align:center}