@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Poppins:wght@300;600;700&display=swap";*,:after,:before{padding:0;margin:0;box-sizing:border-box}:root{--background-color: black;--font-color: #ced4da }.light-mode{--background-color: white;--font-color: #475569}body{font-family:Montserrat,sans-serif;background-color:var(--background-color);color:var(--font-color);overflow-x:hidden}html{scroll-behavior:smooth}.body{padding-top:400px;margin-bottom:20px}.container{padding:0 5%}img{max-width:100%}a{text-decoration:none;color:var(--font-color)}@media (min-width: 768px){.body{padding-top:300px}.container{padding:0 10%}}.nav-section{position:fixed;width:100%;background-color:var(--background-color);z-index:10000}.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 5%;box-shadow:#2123261a 0 10px 10px -10px}.navigation{display:flex;width:70%;justify-content:flex-end;align-items:center}.nav .desktop-nav{display:none}.nav h2{letter-spacing:1px;font-size:18px}.nav li{padding:10px}.nav li:hover{box-shadow:var(--font-color) 0 2px 8px 0}.time{display:flex;align-items:center}.time span{margin:0 20px}.time p{font-size:14px;font-weight:600}.mobile-nav{position:relative}.mobile-navigation{background-color:var(--background-color);position:absolute;width:350px;left:-250px;top:40px;padding:10px;border:1px solid var(--font-color)}.mobile-navigation.active{right:400px}.mobile-navigation li{display:block}.mobile-nav button{background-color:transparent;color:inherit;border:none}.line{padding:5px;border-top:1px solid #ced4da;border-bottom:1px solid #ced4da}.theme{cursor:pointer}.blur{filter:blur(2px)}@media (min-width: 768px){.nav{padding:20px 10%}.nav h2{letter-spacing:1px;font-size:25px}.navigation{display:flex;width:70%;justify-content:space-between;align-items:center}.nav .desktop-nav{display:block}.nav .desktop-nav li{display:inline-block;margin-right:50px}.mobile-nav{display:none}.time p{font-size:18px;font-weight:600}}.display-photo{text-align:center;padding-top:130px;padding-bottom:50px}.display-photo h1{font-size:27px;font-weight:600;letter-spacing:1px;margin-bottom:20px}.resume-btn{box-shadow:var(--font-color) 0 0 0 1px,var(--background-color) 7px 7px 0 -1px,var(--font-color) 7px 7px;margin-bottom:20px;border:none;background-color:transparent;color:var(--font-color);padding:8px 14px;display:inline-flex;flex-direction:row;align-items:center;margin-left:15px;margin-top:20px;font-size:13px;transition:all .25s ease-in-out}.resume-btn:hover{box-shadow:var(--font-color) 0 0 0 1px,var(--background-color) 12px 12px 0 -1px,var(--font-color) 12px 12px}.background{margin-bottom:80px}.background h2{border-bottom:1px solid var(--font-color);padding-bottom:20px;letter-spacing:1px;margin-bottom:40px}.background-text .first-p{border-bottom:1px solid var(--font-color);margin-bottom:40px}.background-text p{padding-bottom:40px;line-height:30px}.display-background{display:flex;flex-direction:column-reverse}.display-background div{width:100%}.img-div{display:none}.img-div img{object-fit:none}.display-background img{border:1px solid var(--font-color);height:500px}.skills-container{overflow:hidden;padding:40px 0;white-space:nowrap;border-top:1px solid var(--font-color);border-bottom:1px solid var(--font-color)}@keyframes carouselAnim{0%{transform:translate(0)}to{transform:translate(-100%)}}.skills-slider{display:inline-block;animation:30s carouselAnim infinite linear}.skills-container:hover .skills-slider{animation-play-state:paused}.skills-container p{display:inline-block;margin:0 20px;text-transform:uppercase;font-size:20px}@media (min-width: 768px){.display-photo h1{font-size:60px;font-weight:500;letter-spacing:1px;margin-bottom:20px}.resume-btn{box-shadow:var(--font-color) 0 0 0 1px,var(--background-color) 7px 7px 0 -1px,var(--font-color) 7px 7px;margin-bottom:20px;border:none;background-color:transparent;color:var(--font-color);padding:8px 30px;display:inline-flex;flex-direction:row;align-items:center;margin-left:50px;margin-top:50px}.display-background{display:flex;flex-direction:row}.img-div{margin-left:50px;text-align:center;align-self:center}.img-div img{width:auto}}.project-section{padding-top:100px;width:800px;margin:0 auto;max-width:100%}.project-section h1{text-align:center;margin-bottom:50px;text-transform:uppercase;font-size:30px;letter-spacing:1px}.project h2{margin-bottom:20px;font-size:18px}.project{display:flex;flex-direction:column;justify-content:space-around;align-items:center;margin-bottom:100px;gap:60px}.project-img-div{width:100%}.project-details{width:100%;text-align:center;font-size:14px;line-height:30px}.project-details h3{margin-bottom:20px;display:inline-block;margin-right:5px;font-size:15px}.project-details span{display:inline-flex;align-items:center;margin-right:8px}.skillset{margin-bottom:80px}.skillset h2,.contact h2{padding-bottom:20px;border-bottom:1px solid var(--font-color);letter-spacing:1px}.skillset p,.contact p{padding-top:30px;width:600px;max-width:100%;line-height:25px}.skillset h3{margin-top:35px;margin-bottom:14px}.skillset button{padding:8px;margin-bottom:8px;margin-right:8px;outline:none;background-color:transparent;color:var(--font-color);border:1px solid var(--font-color)}@media (min-width: 768px){.project{display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin-bottom:100px;gap:60px}.project:nth-child(2n){flex-direction:row-reverse}}.contact h3{margin:20px 0}.contact p,.social-media{margin-bottom:20px}.social-media a,.social-media h3{display:inline-block;margin:0 5px}.social-media a{text-decoration:underline}form{width:400px;max-width:100%;text-align:center;margin:50px 0}form textarea{width:400px;max-width:100%;padding:20px;margin-bottom:20px;background-color:transparent;border:1px solid var(--font-color);color:var(--font-color);outline:none;border-radius:8px;transition:all .3s ease-in-out}textarea:hover{padding-left:25px}::placeholder{color:var(--font-color)}form button{padding:8px 30px;background-color:transparent;border:1px solid var(--font-color);color:var(--font-color);border-radius:5px;transition:all .3s ease-in-out}form button:hover{background-color:var(--font-color);color:var(--background-color)}