.body{font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#040720;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{overflow-x:hidden}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;font-family:sans-serif;font-size:16px}.nav-links{width:100%;display:flex;flex-direction:row;justify-content:flex-end;gap:20px;position:fixed;top:30px;right:120px}.nav-links li{list-style:none}.nav-links li a{text-decoration:none;font-family:Arial;font-weight:400;color:#f0ead6;font-size:16px;padding:10px;cursor:pointer}.nav-links li a:hover{color:#0ff}.hamburger{display:none}.content{margin-left:220px}.hero-content{text-align:center;padding:100px 200px;margin-bottom:290px;margin-top:90px}#name{color:#0ff;margin-bottom:10px}.hero-content h1{font-size:60px;margin-bottom:20px}#stack{opacity:.5}.description{max-width:42%;font-family:Times New Roman,Times,serif;font-size:larger;text-align:left;a {font-weight: 500; color: #646cff; text-decoration: inherit;} a:hover {color: #535bf2;} body {margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; font-family: sans-serif; font-size: 16px;} .nav-links {width: 100%; display: flex; flex-direction: row; justify-content: flex-end; gap: 20px; position: fixed; top: 30px; right: 120px;} .nav-links li {list-style: none;} .nav-links li a {text-decoration: none; font-family: Arial; font-weight: 400; color: #F0EAD6; font-size: 16px; padding: 10px; cursor: pointer;} .nav-links li a:hover {color: #00FFFF;} .content {margin-left: 220px;} .hero-content {text-align: center; padding: 100px 200px; margin-bottom: 290px; margin-top: 90px;} #name {color: #00FFFF; margin-bottom: 10px;} .hero-content h1 {font-size: 60px; margin-bottom: 20px;} #stack {opacity: .5;} .description {max-width:42%; font-family: "Times New Roman",Times,serif; font-size: larger; text-align: left;} .hero-content button {background-color: #000; color: #00FFFF; padding: 24px 30px; border-radius: 5px; border: 1px solid ; margin-top: 50px;} .hero-content button:hover {color: #fff; cursor: pointer;} .btton {background-color: #000; color: #00FFFF; padding: 8px 25px; border-radius: 5px; border: 1px solid ;} .btton:hover{color: #fff; cursor: pointer;} .content-group {display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 6px;} .svg{max-height: 2px; max-width: 4px; position: fixed; top: 30px; left: 30px;} .spanname {color: #00FFFF; font-size: medium;} .about-section {text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column;} .line {width: 30%; height: 2px; background-color: #00FFFF; margin: 10px 0;} .about-content {max-width: 800px; padding: 20px;} .about-content p {text-align: left; margin: 10px 0;} #my_image {max-width: 450px; max-height: 350px; border-radius: 50%; object-fit: cover; margin: 10px 20px;} .displayRow {display: flex; flex-direction: row; align-items: center; justify-content: space-between;} .image {text-align: right;} .Skills2 {text-align: left; margin-right: 720px; margin-bottom: 90px;} .new_line {background-color: #00FFFF; width: 4%; margin-right: 950px; height: 2px; margin-bottom: 10px;} #headline {margin-right: 900px;} .Experience{margin-top: 250px;} .experience-section {padding: 20px; text-align: center; margin-top: 90px;} .experience-item {margin: 2px 400px; padding: 20px;} .experience-item h3 {font-size: 18px; margin-bottom: 35px;} .experience-date {font-weight: bold; margin-bottom: 5px;} .experience-description {font-size: 16px; line-height: 1.5; margin-left: 370px; width: 50%; text-align: left;} .line2 {width: 30%; height: 2px; background-color: #00FFFF; margin: 10px 0;} .new_line2 {background-color: #00FFFF; width: 9cqh; height: 2px; position: relative; bottom: 30px; left: 120px;} .contactSection {text-align: center; margin-top: 550px;} .line3 {width: 50%; height: 2px; background-color: #00FFFF; margin-left: 410px; margin-bottom: 20px;} .contactSection h1 {font-family: "Times New Roman",Times,serif; font-weight: 1200; font-size: x-large; margin-top: 80px; margin-bottom: 40px;} .contactSection button {background-color: #000; color: #00FFFF; padding: 12px 35px; font-size: large; font-style: initial; border-radius: 5px; border: 4px solid ;} .icons {display: flex; gap: 30px; flex-direction: row; justify-content: center; align-items: center; margin: 50px; font-size: x-large;} .grid {display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr); grid-gap: 10px;} .Work {margin-top: 900px;} #project_header{text-align: center; margin-bottom: 10px;} .line4 {width: 30%; height: 2px; background-color: #00FFFF; margin: 10px 0;} .work-section {display: flex; padding: 20px; flex-wrap: wrap; justify-content: center; align-items: center; gap: 50px; width: 93%;} .work-box {width: 500px; height: 350px; margin-bottom: 120px; border-radius: 25px;} .Work_image {object-fit: cover; width: 100%; height: 100%; opacity: .9;} .reactIcons * {margin-left: 8px;} .image-container {position: relative; object-fit: contain; object-fit: cover; width: 100%; height: 100%; opacity: .9;} .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); color: white; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s;} .overlay button {display: flex; margin-left: 90px; padding: 15px 59px; background-color: #000; color: #00FFFF; border: 1px solid #00FFFF ; border-radius: 10px; margin-top: 20px;} .overlay button:hover {color: white; border: 1px solid #F0EAD6 ;} .overlay p {margin-top: 50px; margin-bottom: 100px; width: 90%; text-align: center; font-family: "Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif; font-weight: 900; font-size: large;} .image-container:hover .overlay {opacity: 1; visibility: visible;} .project_class {text-align: center; color: white;} .move-off-screen {transform: translateX(100%); opacity: 0; transition: transform 1s,opacity 1s;} .move-in {transform: translateX(0); opacity: 1; transition: transform 1s,opacity 1s;}}.description *{margin:0;padding:0;box-sizing:border-box}.description :root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#040720;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.hero-content button{background-color:#000;color:#0ff;padding:24px 30px;border-radius:5px;border:1px solid;margin-top:50px}.hero-content button:hover{color:#fff;cursor:pointer}.btton{background-color:#000;color:#0ff;padding:8px 25px;border-radius:5px;border:1px solid}.btton:hover{color:#fff;cursor:pointer}.content-group{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:6px}.svg{max-height:2px;max-width:4px;position:fixed;top:30px;left:30px}.spanname{color:#0ff;font-size:medium}.about-section{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}.line{width:30%;height:2px;background-color:#0ff;margin:10px 0}.about-content{max-width:800px;padding:20px}.about-content p{text-align:left;margin:10px 0}#my_image{max-width:450px;max-height:350px;border-radius:50%;object-fit:cover;margin:10px 20px}.displayRow{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.image{text-align:right}.Skills2{text-align:left;margin-right:720px;margin-bottom:90px}.new_line{background-color:#0ff;width:4%;margin-right:950px;height:2px;margin-bottom:10px}#headline{margin-right:900px}.Experience{margin-top:250px}.experience-section{padding:20px;text-align:center;margin-top:90px}.experience-item{margin:2px 400px;padding:20px}.experience-item h3{font-size:18px;margin-bottom:35px}.experience-date{font-weight:700;margin-bottom:5px}.experience-description{font-size:16px;line-height:1.5;margin-left:370px;width:50%;text-align:left}.line2{width:50%;height:2px;background-color:#0ff;margin:9px 430px}.new_line2{background-color:#0ff;width:9cqh;height:2px;position:relative;bottom:30px;left:120px}.contactSection{text-align:center;margin-top:550px}.line3{width:30%;height:2px;background-color:#0ff;margin:0 auto}.contactSection h1{font-family:Times New Roman,Times,serif;font-weight:1200;font-size:x-large;margin-top:80px;margin-bottom:40px}.contactSection button{background-color:#000;color:#0ff;padding:12px 35px;font-size:large;font-style:initial;border-radius:5px;border:4px solid}.icons{display:flex;gap:30px;flex-direction:row;justify-content:center;align-items:center;margin:50px;font-size:x-large}.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);grid-gap:10px}.Work{margin-top:900px}#project_header{text-align:center;margin-bottom:10px}.line4{width:50%;height:2px;background-color:#0ff;margin-left:410px;margin-bottom:20px}.work-section{display:flex;padding:20px;flex-wrap:wrap;justify-content:center;align-items:center;gap:50px;width:93%}.work-box{width:500px;height:350px;margin-bottom:120px;border-radius:25px}.Work_image{object-fit:cover;width:100%;height:100%;opacity:.9}.reactIcons *{margin-left:8px}.image-container{position:relative;object-fit:contain;object-fit:cover;width:100%;height:100%;opacity:.9}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;color:#fff;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s}.overlay button{display:flex;margin-left:90px;padding:15px 59px;background-color:#000;color:#0ff;border:1px solid #00FFFF;border-radius:10px;margin-top:20px}.overlay button:hover{color:#fff;border:1px solid #F0EAD6}.overlay p{margin-top:50px;margin-bottom:100px;width:90%;text-align:center;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;font-weight:900;font-size:large}.image-container:hover .overlay{opacity:1;visibility:visible}.project_class{text-align:center;color:#fff}.move-off-screen{transform:translate(100%);opacity:0;transition:transform 1s,opacity 1s}.move-in{transform:translate(0);opacity:1;transition:transform 1s,opacity 1s}.move-off-Screen{transform:translateY(-100%);opacity:0;transition:transform 3s,opacity 1s}.moveIn{transform:translateY(0);opacity:1;transition:transform 1.5s,opacity 1s}@media screen and (max-width:1040px){*{margin:0;padding:0;box-sizing:border-box;max-width:350px}#root{max-width:360px;margin:0 auto}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:14px}.svg{left:120px;top:20px}.nav-links{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100vh;background:rgba(0,0,0,1);position:absolute;top:0;left:-100%;z-index:1;transition:.3s}.nav-links.active{left:4px}.hamburger{display:initial;position:fixed;top:0;z-index:100;background:rgba(0,0,0,9)}.nav-links li a{padding:10px 5px}.content{margin-left:10px}.overlay p{margin-top:1px}.overlay button{padding-bottom:px;margin:5px}.hero-content{padding:40px 20px;margin-bottom:150px;margin-top:50px}.hero-content h1{font-size:40px;margin-bottom:10px;max-width:420px;text-align:left}.description{max-width:410px;font-size:smaller}.experience-section{margin-left:2px;border-bottom:2px solid #00FFFF}.experience-item{margin:2px 10px;padding:10px}.experience-item h3{font-size:16px;margin-bottom:34px}.experience-description{font-size:14px;margin-left:20px;min-width:80%;text-align:left}.contactSection{margin-top:250px;margin-left:35px;min-width:90px}.contactSection h2{text-align:center;border-bottom:2px solid #00FFFF}.contactSection button{border:1px solid #00FFFF}.about-content{max-width:100%;padding:10px;text-align:left}.about-section #About{border-bottom:2px solid #00FFFF}#headline{margin-left:70px;text-align:left;width:60%;margin-top:30px}#headline span{display:flex;flex-direction:row}.Skills2{text-align:left;margin:50px}.Work h1{border-bottom:2px solid #00FFFF;padding:3px}#my_image{max-width:200px;max-height:200px;border-radius:50%;object-fit:cover;margin:10px auto}.displayRow{display:flex;flex-direction:column;gap:-20px;justify-content:center}.image{position:relative;top:00px}.new_line{margin-left:900px;min-width:90px;margin-top:16px}.contactSection{margin-right:90px}.line2,.line4,.line3,.line{display:none}}