*{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;box-sizing:border-box;margin:0;padding:0;transition:color .1s,background-color .5s}body{--primary-color:#4fc6ce;--accent-01:#dbdbdb;--accent-02:#98b1ba;--accent-03:#26333a;--accent-04:#1a2328;background-color:var(--accent-04);height:100vh;color:var(--accent-01);justify-content:center;margin:0;padding:0;font-family:Calibri,sans-serif}body.light{--primary-color:#4fc6ce;--accent-01:#1d3a41;--accent-02:#225b60;--accent-03:#fff;--accent-04:#d5f3f9}.container{gap:5px;max-width:1300px;margin:0 auto;padding:50px;display:grid}.box{background-color:var(--accent-03);border-radius:25px}.navbar{text-align:center;z-index:5;cursor:pointer;text-transform:uppercase;color:var(--accent-02);grid-template-columns:1fr;grid-auto-rows:max-content;grid-auto-columns:max-content;gap:5px;font-weight:500;display:grid;position:sticky;top:50px}.navbar>div{margin:2px 0;padding:20px 0}.navbar ion-icon{margin:auto;font-size:32px}.navbar .active,.navbar .item:hover{color:var(--primary-color);opacity:1}.divider{width:100%;height:2px;margin:15px 0}.rtl{background:radial-gradient(ellipse at right, var(--accent-02), transparent 70%)}.profile{text-align:center;font-size:20px}.profile .header{clip-path:polygon(100% 0,100% 80%,80% 100%,20% 100%,0 80%,0 0);border-radius:25px 25px 0 0;width:100%;max-height:40vh}.profile .img{border:var(--accent-04) 8px solid;border-radius:35px;width:140px;margin:-90px auto 0;position:relative}.profile p{height:20px;margin-top:10px}.profile ul{margin:30px 0 80px;list-style-type:none}.profile ul li{margin:0 3px;display:inline}.profile .footer{position:sticky;top:calc(100vh - 100px)}.profile table{width:100%;padding-bottom:15px}.profile ion-icon{color:var(--accent-02);margin-bottom:-7px;transition:color .5s,border-color .5s,background-color .5s}.profile ul ion-icon{background-color:var(--accent-04);border-radius:10px;padding:20px}.profile ul ion-icon:hover{border-color:var(--accent-04);color:var(--primary-color)}.profile table ion-icon{border-radius:10px;padding:5px;transition:color .5s,background-color .5s}.profile td:hover ion-icon{background-color:var(--primary-color);color:var(--accent-04)}.content{padding:20px 15px 20px 20px}.content h2{font-size:2em}.content p{font-size:17px;line-height:1.5em}.content .wrapper{scroll-behavior:smooth;max-height:700px;padding-right:10px;overflow:auto}.content .wrapper::-webkit-scrollbar{width:5px;height:5px}.content .wrapper::-webkit-scrollbar-track{background-color:var(--accent-04)}.content .wrapper::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:5px}.colored{color:var(--primary-color)}.section{margin:30px auto}.achivements{background-color:var(--accent-04);border-radius:10px;grid-template-columns:1fr 1fr 1fr;gap:50px;margin-top:15px;margin-bottom:15px;padding:20px 30px;display:grid}.achivements h3{margin:auto;font-size:2.3em}.achivements ion-icon{color:var(--primary-color);margin:0 10px;font-size:.9em}.achivements p{color:var(--accent-02);line-height:1.2;font:15px}.skills{color:var(--accent-02);grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;display:grid}.skills>div{background-color:var(--accent-04);text-align:center;border:var(--accent-04) 3px solid;cursor:pointer;border-radius:10px;padding:20px;transition:border-color .5s}.skills>div:hover{border-color:var(--primary-color)}.skills ion-icon{color:var(--primary-color);font-size:32px}.skills .circle{background:conic-gradient(from 0deg, var(--primary-color) 0%, var(--primary-color) 0% var(--percent), var(--accent-03) var(--percent));border-radius:50%;width:60px;height:60px;margin:auto auto 5px;position:relative}.skills .circle:before{content:"";background-color:var(--accent-04);border-radius:50%;position:absolute;inset:8px}.skills .circle h4{text-align:center;font-size:1.2em;line-height:3;position:relative}.skills div:nth-child(7){background-color:inherit}.skills .progress-bar:first-child{margin-bottom:10px}.skills .progress-bar p{justify-content:space-between;display:flex}.skills progress{appearance:none;width:100%;height:10px}.skills progress::-webkit-progress-value{background-color:var(--primary-color);border-radius:10px}#rightPanel{transition:all .3s;position:relative}.more-skills>div img{width:40%;height:40%}.more-skills{color:var(--accent-02);grid-template-columns:1fr 1fr 1fr;gap:10px;display:grid}.more-skills>div{background-color:var(--accent-04);text-align:center;border:var(--accent-04) 3px solid;cursor:pointer;border-radius:10px;padding:0;transition:border-color .5s}.more-skills>div:hover{border-color:var(--primary-color)}.back-btn{background:var(--accent-04);color:var(--accent-02);cursor:pointer;border-radius:8px;padding:10px 18px;position:absolute;top:5px;right:30px}.back-btn:hover{background-color:var(--primary-color);color:var(--accent-04);border-color:var(--primary-color)}body.light .back-btn:hover,body.light .more-skills>div:hover{background-color:var(--accent-04);color:var(--primary-color);border-color:var(--primary-color)}.experience{margin:15px 0}.experience p{border-left:var(--accent-02) 2px solid;color:var(--accent-02);margin-left:17px;padding-left:20px}.experience h4{color:var(--primary-color);margin:10px;padding-left:25px;position:relative}.experience h4:before{content:"";background-color:var(--primary-color);border-radius:20px;width:14px;height:14px;position:absolute;top:5px;left:0}.experience .date{background-color:var(--accent-04);color:var(--accent-02);border-radius:4px;margin-top:20px;padding:5px 10px;font-size:14px;font-weight:400}.streak{border:var(--accent-04) 3px solid;border-radius:10px;grid-template-columns:1fr;width:100%;display:grid}.streak activity-graph{color:var(--accent-02);--activity-graph-text-color:var(--accent-02);--activity-graph-rounded:2px;--activity-graph-level-0-bg:var(--accent-04);--activity-graph-level-1-bg:#0e4545;--activity-graph-level-2-bg:#006c69;--activity-graph-level-3-bg:#25a0a7;--activity-graph-level-4-bg:#37c9d5;padding:10px 20px}body.light .streak activity-graph{--activity-graph-level-0-bg:#ebedf0;--activity-graph-level-1-bg:#9be9a8;--activity-graph-level-2-bg:#30c463;--activity-graph-level-3-bg:#30a14e;--activity-graph-level-4-bg:#216e39}.streak>div,.streak figure{overflow:auto}.streak table{border-spacing:2px}.top-row{justify-content:space-between;align-items:center;display:flex}.year-selector{background-color:var(--accent-04);color:var(--accent-02);border:2px solid var(--accent-04);cursor:pointer;border-radius:8px;margin:10px;padding:3px 6px;font-weight:500;transition:all .3s}.year-selector:hover,body.light .year-selector{background-color:var(--primary-color);color:var(--accent-04);border-color:var(--primary-color)}.coding-links a{background-color:var(--accent-02);color:var(--accent-02);border-radius:8px;justify-content:space-evenly;width:35px;height:35px;margin:5px;padding:2px;transition:background-color .5s,color .5s;display:inline-block}.coding-links img{width:100%;height:100%;padding:auto}.coding-links a:hover,body.light .coding-links a{background-color:var(--primary-color);color:var(--accent-04)}.projects{flex-direction:column;gap:10px;display:flex}.project{background:var(--accent-04);border-radius:15px;grid-template-columns:200px 1fr;margin:10px 0;padding:30px;display:grid}.left{flex-direction:column;gap:15px;display:flex}.left img{object-fit:cover;width:100px;height:100px}.right p{margin-bottom:20px;font-size:18px}.buttons{gap:20px;display:flex}.buttons button{background-color:var(--accent-03);color:var(--accent-02);cursor:pointer;border-radius:8px;padding:10px 25px}.buttons button:hover{background:var(--primary-color);color:var(--accent-04);border-color:var(--primary-color)}body.light .buttons button{background-color:var(--primary-color);color:var(--accent-04);border-color:var(--primary-color)}.contact{grid-template-columns:1fr 1fr;gap:10px;margin:20px 0;display:grid}.map{border-radius:10px;padding:3px;box-shadow:inset 0 0 0 3px #0366d64d}body:not(.light) .map{filter:invert(90%)sepia()hue-rotate(150deg)saturate()}.contact .input{background-color:var(--accent-04);border:var(--accent-04) 1px solid;border-color:var(--primary-color);width:100%;color:var(--accent-02);border-radius:5px;outline:none;line-height:3;transition:border-color .5s}.contact .input:hover,.contact .input:focus{border:var(--primary-color) 2px solid}.contact .submit{background-color:var(--accent-04);color:var(--accent-03);border:none;border-color:var(--primary-color);border-radius:5px;grid-column:span 2;justify-self:baseline;width:180px;height:auto;padding:12px 30px;transition:background-color .5s,filter .5s}.contact .input::placeholder,.contact .textarea::placeholder{color:var(--accent-03);filter:brightness(2);padding-left:10px}body.light .contact .input::placeholder,body.light .contact .textarea::placeholder{color:var(--accent-01)}.contact .submit:hover{background:var(--primary-color);color:var(--accent-04);border-color:var(--primary-color);cursor:pointer}body.light .contact .submit{color:var(--accent-01)}body.light .contact .submit:hover{background-color:var(--primary-color);color:var(--accent-01);border-color:var(--primary-color)}@media screen and (width>=1024px){.container{grid-template-columns:85px 430px 1fr}.skills div:nth-child(7){grid-column:span 2}.projects{grid-template-areas:"p1 p2""p3 p3"}}@media screen and (width>=768px) and (width<=1023px){.container{grid-template-columns:85px 1fr;max-width:650px}.content{grid-column:2/4}.achivements,.skills{grid-template-columns:1fr 1fr 1fr}.skills div:nth-child(7){grid-column:1/4}.projects{grid-template-columns:repeat(2,1fr);grid-template-areas:"p1 p2""p3 p3"}}@media screen and (width<=769px){.container{grid-template-columns:1fr;max-width:500px;padding:50px 20px 20px}.navbar{grid-template-columns:85px 1fr;display:inline-grid}.nav{grid-template-columns:1fr 1fr 1fr 1fr 1fr;padding:5px;display:inline-grid}.nav .divider,.nav p{display:none}.navbar>.div{box-shadow:0 10px 36px #00000029,0 0 0 1px #0000000f}.achivements{text-align:center;grid-template-columns:1fr 1fr}.skills{grid-template-columns:1fr 1fr}.skills div:nth-child(7){grid-column:1/3}.contact{grid-template-columns:1fr}}