:root{--primary-color: rgb(79, 126, 255);--action-color: rgb(48, 88, 199);--primary-bg: rgb(20, 20, 25);--primary-border: rgb(30, 40, 60);--primary-text: white;--secondary-text: rgb(190, 190, 190)}*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}body{background-color:var(--primary-bg)}.nav{width:1200px;max-width:1200px;border:2px solid var(--primary-border);border-radius:30px;display:flex;padding:8px;justify-content:center;align-items:center;margin-inline:calc(50% - 600px);position:sticky;top:10px;background-color:#141419b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:10px;z-index:100}.nav-logo{position:absolute;left:30px;color:var(--primary-text);display:flex;align-items:center;gap:10px;text-decoration:none;font-size:20px}.nav-logo img{height:45px}.nav-logo-text{font-family:Audiowide,sans-serif}.nav-links{display:flex;gap:10px}.nav-link{font-size:18px;text-decoration:none;color:var(--secondary-text);padding:10px 20px;position:relative;z-index:10;transition:color .2s ease}.nav-link:before{content:"";box-sizing:border-box;padding:10px 20px;background-color:var(--primary-border);position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;border-radius:10px;transition:transform .15s ease;transform:scale(0);transform-origin:center 10px}.nav-link:hover{color:var(--primary-color)}.nav-link:hover:before{transform:scale(1)}.content{padding-inline:calc(50% - 600px)}.hero{display:flex;flex-direction:column;align-items:center;gap:30px;padding-block:30px}.hero-title{color:var(--primary-color);font-size:40px}.hero-description{color:var(--secondary-text);font-size:18px;width:60%;margin-inline:20%;text-align:center;line-height:25px}.section-btns{display:flex;gap:20px}.btn{background-color:var(--action-color);color:var(--primary-text);font-size:18px;border-radius:30px;padding:10px 20px;text-decoration:none;border:2px solid var(--action-color);transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}.action-btn{background-color:transparent;border:2px solid var(--primary-border);color:var(--primary-text)}.btn:hover{transform:translateY(-5px);box-shadow:0 5px 10px var(--primary-border)}.footer{border-top:2px solid var(--primary-border);padding-block:30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin-top:50px}.footer-content{color:var(--secondary-text);font-size:15px;line-height:28px}.footer-content a{color:var(--primary-color);text-decoration:none}.footer-content a:hover{text-decoration:underline}.footer-icons{display:flex;gap:30px}.footer-img{width:25px!important}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background-color:var(--secondary-text);border-radius:10px;border:2px solid var(--primary-bg)}::-webkit-scrollbar-thumb:hover{background-color:var(--primary-text)}@media (max-width: 1200px){.nav{width:calc(100% - 50px);margin-inline:25px}.nav-logo{left:15px}.content{padding-inline:25px}}@media (max-width: 750px){.nav-logo-text{display:none}.nav-links{gap:0px}.nav-link{padding:5px 10px;font-size:16px}}.home{display:flex;gap:100px;padding-block:100px}.home-content{flex:3;gap:30px;display:flex;flex-direction:column}.home-title{color:var(--primary-color);font-size:40px;margin-bottom:20px}.section-description{color:var(--secondary-text);line-height:30px;font-size:18px}.section-description a{color:var(--primary-color);text-decoration:none}.section-description a:hover{text-decoration:underline}.home-img{flex:1;display:flex;flex-direction:column;gap:30px;align-items:center}.section-img-caption{color:var(--secondary-text);font-size:14px;line-height:22px}.home-img img{width:80%;border-radius:100%;border:2px solid var(--primary-border)}.sections{display:flex;flex-direction:column;gap:50px}.section{border-radius:20px;padding-block:30px;display:flex;gap:100px;align-items:center}.section-content{display:flex;flex-direction:column;gap:30px;flex:3}.section-title{color:var(--primary-text);font-size:25px}.section-imgs{flex:1;display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.featured-section-imgs{display:flex;gap:15px;justify-content:start;flex-direction:row}.section-img{position:relative}.section-img img{width:40px;height:40px;position:relative}.single-img{width:200px!important;height:200px!important;border-radius:30px}.img-hover{position:absolute;top:-35px;left:50%;padding:5px 10px;background-color:var(--primary-border);text-align:center;color:var(--primary-text);font-size:14px;font-weight:700;border-radius:30px;transform:scale(0) translate(-50%);transform-origin:left 20px;transition:transform .3s ease;white-space:nowrap}.img-hover:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:var(--primary-border) transparent transparent transparent}.hovered{transform:scale(1) translate(-50%)}@media (max-width: 750px){.home{flex-direction:column;gap:30px;padding-block:30px}.home-content{gap:10px}.home-img img{width:150px}.home-img{flex-direction:row}.section{flex-direction:column}}body{overflow-x:hidden}.project-wrap{overflow:hidden}.project{display:flex;flex-direction:column;align-items:center;padding-top:30px;gap:15px}.project-name{color:var(--primary-text);font-size:25px}.project-img{display:flex;gap:15px}.project-description{color:var(--secondary-text);width:80%;margin-inline:10%;text-align:center;line-height:25px;font-size:18px}.project-info{display:flex;gap:15px;align-items:center}.project-tag{border-radius:5px;background-color:var(--primary-border);color:var(--secondary-text);padding:5px;font-size:14px}.project-info a{color:var(--primary-color);text-decoration:none}.project-info a:hover{text-decoration:underline}.project-frame{border:none;max-width:1000px;width:106vh;height:60vh;max-height:550px;border-radius:10px;border:2px solid var(--primary-border);background-color:#fff}.project-content{display:flex;gap:30px;align-items:center}.project-btn{width:40px;height:40px;padding:8px;cursor:pointer;border-radius:10px;border:none;color:var(--primary-text);background-color:var(--action-color);font-size:16px;transition:transform .3s ease,box-shadow .3s ease}.project-btn:hover{transform:translateY(-5px);box-shadow:0 5px 10px var(--primary-border)}.project-number{text-align:center;color:var(--secondary-text);margin-top:15px;margin-bottom:30px}.project-link{color:var(--primary-color);text-decoration:none}.project-link:hover{text-decoration:underline}.list{display:flex;flex-direction:column;gap:10px;color:var(--secondary-text);list-style-position:inside}.list-link{color:var(--primary-color);text-decoration:none;font-size:18px}.list-link:hover{text-decoration:underline}.archive-section-title{padding-block:30px;color:var(--primary-text)}.skill-functions{display:flex;padding-bottom:30px;gap:50px;justify-content:center;position:relative}.skill-filters{display:flex;gap:10px}.skill-sort,.skill-filter{border-radius:30px;background-color:var(--primary-color);color:var(--primary-text);font-size:18px;padding-block:10px;width:130px;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;cursor:pointer}.skill-sort{position:absolute;left:0}.skill-sort option{background-color:var(--primary-border)}.skill-filter{background-color:var(--primary-bg);border:2px solid var(--primary-border)}.skill-selected{background-color:var(--primary-border)}.skills{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.skill-card{padding:15px 20px;border-radius:10px;display:flex;flex-direction:column;gap:15px;background-color:var(--primary-border);min-width:270px;flex:1;max-width:calc(25% - 15px);text-decoration:none;transition:transform .3s ease}.skill-card:hover{transform:translateY(-5px) scale(1.03)}.skill-img{width:40px}.skill-content{display:flex;gap:20px;color:var(--secondary-text);align-items:center}.skill-text{display:flex;flex-direction:column;gap:5px}.skill-name{color:var(--primary-text)}.skill-status{font-size:15px}.skill-level{display:flex;color:var(--secondary-text);justify-content:space-between;gap:5px;width:100%;align-items:center}.skill-bar{background-color:var(--primary-bg);border-radius:10px;width:100%;overflow:hidden;height:12px}.skill-progress{background-color:var(--primary-color);color:var(--primary-text);text-align:right;padding-inline:5px;height:100%}
