#hamburger{display:flex;position:relative;color:var(--color-white);margin-right:2rem;z-index:100;& .hamburger-label{display:flex;text-transform:uppercase;font-size:1rem;cursor:pointer;border-radius:0;align-items:center;& .text{margin-right:.5rem;position:relative;top:36%;width:3.5rem;height:100%;overflow:hidden;letter-spacing:.075rem;& .open,.close{position:absolute;bottom:50%;transition:left .3s}& .open{left:.1818181818rem}& .close{left:100%}}& .circle{display:inline-block;border:1px solid white;height:35px;width:35px;border-radius:50%;position:relative;& .hamburger-stripes{top:50%;left:17%;width:65%;height:2px;background:var(--color-white);position:absolute;transition:.5s}& .hamburger-stripes:before{top:-.4rem}& .hamburger-stripes:after{top:.35rem}& .hamburger-stripes:before,.hamburger-stripes:after{content:"";position:absolute;width:100%;height:2px;background:var(--color-white);transition:.5s}}& .active-burger{background:var(--color-active);color:var(--color-black);border-color:transparent;& .hamburger-stripes{background:transparent}& .hamburger-stripes:before{top:40%;transform:rotate(135deg);background:var(--color-black)}& .hamburger-stripes:after{top:1px;transform:rotate(225deg);background:var(--color-black)}}}:has(.active-burger){& .text{& .open{left:100%}& .close,& .open{transition:left .3s}& .close{left:0}}}}@media (max-width:450px){#hamburger{margin-right:1rem;& .hamburger-label{& .circle{& .hamburger-stripes{top:49%}}}}}#logo{display:flex;align-items:center;gap:1rem;margin-left:2rem;position:relative;cursor:pointer;color:var(--color-white);& .logo-circle{display:flex;justify-content:center;align-items:center;font-family:Luxurious Script,cursive;font-weight:700;padding-right:.3rem;font-size:2.5rem;border:2px solid;border-radius:100%;width:3.5rem;color:var(--color-heading)}}@media (max-width:450px){#logo{gap:.5rem;margin-left:1rem}}#header{display:flex;align-items:center;position:absolute;width:100%;min-height:6rem;justify-content:center;background:transparent;top:0;& #logoLink{text-decoration:none;z-index:100;top:25%;left:0}& #hamburger,& #logoLink{animation:slide-logo-down 1s ease-in;position:absolute}& #hamburger{top:35%;right:0}}@keyframes slide-logo-down{0%{translate:0 -10rem}to{translate:0 0}}#marquee{height:100%;width:100%;& .wrapper{height:100%;width:90%;max-width:1536px;margin-inline:auto;position:relative;height:200px;margin-top:5rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0));.project{width:400px;height:200px;border-radius:6px;position:absolute;left:max(calc(200px * 8),100%);animation-name:scrollLeft;animation-duration:30s;animation-timing-function:linear;animation-iteration-count:infinite;filter:brightness(.8);&:hover{filter:brightness(1)}}.item1{animation-delay:calc(30s / 8 * (8 - 1) * -1)}.item2{animation-delay:calc(30s / 8 * (8 - 3) * -1)}.item3{animation-delay:calc(30s / 8 * (8 - 5) * -1)}.item4{animation-delay:calc(30s / 8 * (8 - 7) * -1)}&:hover .project{animation-play-state:paused}}}@keyframes scrollLeft{to{left:-370px}}.nav{display:none;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:10;background-color:rgba(20,20,20,.95);& .nav__links{display:flex;flex-direction:column;gap:1rem;font-size:4rem;list-style:none;text-align:center;a{text-decoration:none;color:var(--color-white);text-transform:uppercase}.nav__link:hover{cursor:pointer}.nav__link.active,.nav__link:hover{color:var(--color-active)}:first-child{animation:slide-in-left-0 .5s ease-out}:nth-child(2){animation:slide-in-left-1 .75s ease-out}:nth-child(3){animation:slide-in-left-2 .6s ease-out}:nth-child(4){animation:slide-in-left-2 .75s ease-out}:nth-child(5){animation:slide-in-left-1 .75s ease-out}}}.nav-open{display:flex;animation:open-menu .5s linear}@keyframes open-menu{0%{opacity:0}to{opacity:1}}.nav-close{animation:close-menu .5s linear;& .nav__links{:first-child{animation:slide-out-left-0 .5s ease-out}:nth-child(2){animation:slide-out-left-1 .75s ease-out}:nth-child(3){animation:slide-out-left-2 .6s ease-out}:nth-child(4){animation:slide-out-left-2 .75s ease-out}:nth-child(5){animation:slide-out-left-1 .75s ease-out}}}@keyframes close-menu{0%{display:flex;opacity:1}50%{opacity:.7}to{display:none;opacity:0}}@keyframes slide-in-left-0{0%{opacity:0;translate:-5vw 0}50%{opacity:.3}to{opacity:1;translate:0 0}}@keyframes slide-in-left-1{0%{opacity:0;translate:-10vw 0}50%{opacity:.3}to{opacity:1;translate:0 0}}@keyframes slide-in-left-2{0%{opacity:0;translate:-5vw 0}50%{opacity:.3}to{opacity:1;translate:0 0}}@keyframes slide-out-left-0{0%{opacity:1;translate:0 0}50%{opacity:.3}to{opacity:0;translate:-5vw 0}}@keyframes slide-out-left-1{0%{opacity:1;translate:0 0}50%{opacity:.3}to{opacity:0;translate:-10vw 0}}@keyframes slide-out-left-2{0%{opacity:1;translate:0 0}50%{opacity:.3}to{opacity:0;translate:-5vw 0}}@media (max-width:700px){.nav{& .nav__links{font-size:3rem}}}@media (max-width:550px){.nav{& .nav__links{font-size:2.5rem}}}@media (max-width:450px){.nav{& .nav__links{font-size:2rem}}}#projectCard{display:flex;gap:1rem;background-color:transparent;justify-content:space-between;animation-duration:1s;& .project-image-link{margin:0;padding:0;overflow:hidden;width:40%;& #project-image-container{display:flex;width:100%;height:13rem;border-radius:12px;overflow:hidden;& .projectCard-image{display:block;width:100%;margin-left:0;object-fit:cover;border-radius:12px;transition:all .7s;&:hover{transform:scale(1.05);transition-duration:1.1s}}}}& .content{display:flex;flex-direction:column;align-self:center;gap:1rem;width:60%;padding-right:1rem;& .project-created{color:var(--color-heading);font-size:1rem}& .projectCard-link{text-decoration:none;color:var(--color-white);width:-moz-fit-content;width:fit-content;& .project-title{font-size:1.8rem;line-height:1.5rem}}& .content-text{font-size:1rem;line-height:1.4rem;color:var(--color-text-darker);font-family:poppins,sans-serif;font-weight:100}}}@media (max-width:500px){#projectCard{flex-direction:column;align-items:center;& .content,& .project-image-link{width:100%}}}#readMoreCard{display:flex;flex-direction:column;gap:1rem;background-color:transparent;width:25vw;justify-content:space-between;margin-top:6rem;& .readMore-image-link{margin:0;padding:0;overflow:hidden;& #readMore-image-container{display:flex;width:100%;height:15rem;overflow:hidden;& .readMoreCard-image{display:block;width:100%;margin-left:0;background-size:cover;background-position:50%;background-repeat:no-repeat;transition:all .7s;&:hover{transform:scale(1.05);transition-duration:1.1s}}}}& .readMoreCard-bottom{display:flex;align-items:center;justify-content:center;gap:1rem;& .readMoreCard-link{display:inline;width:-moz-fit-content;width:fit-content;border:1px solid var(--color-border);margin-top:1rem;border-radius:20px;font-family:poppins,sans-serif;font-weight:300;padding:8px 15px;color:var(--color-heading);font-size:.9rem;letter-spacing:.15rem;text-box-trim:trim-end;white-space:preserve nowrap;text-decoration:none;text-transform:uppercase;z-index:3;background-color:transparent;transition:all .5s;&:hover{background-color:var(--color-readmore-hover)}}&>hr{border-top:1px solid var(--color-background-extra-light);width:35%;border-bottom:thin;border-left:none;border-right:none;margin-top:1rem}}& .content{display:flex;flex-direction:column;gap:1rem;padding:1.5vw .6vw;height:39%;& .content-title{font-size:1.8rem;line-height:1.5rem;min-height:3rem}& .content-text{font-size:1.2rem;line-height:1.6rem;color:var(--color-text-darker);font-family:poppins,sans-serif;font-weight:100}}}@media (max-width:500px){#readMoreCard{& .readMoreCard-bottom{margin-top:1rem}}}#socialMedia{display:flex;gap:1rem;align-items:center;height:-moz-fit-content;height:fit-content;& .linkedin,.certifications,.email,.github{width:1.5rem;border-radius:4px}}#footer{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:var(--color-white);border-top:1px solid var(--color-border);margin-left:1rem;margin-right:1rem;#socialMedia{align-self:flex-start;margin:1rem}#copyright{display:flex;align-items:center;align-self:center;margin:1rem;font-size:1.4rem;& .material-symbols-outlined{font-size:1rem;text-align:center}}}.landing{position:absolute;bottom:0;width:96%;align-self:center}@media (max-width:500px){#footer{& #socialMedia{margin-left:.5rem}}}