@font-face{font-family:PlayfairDisplay;src:url("../themes/portfolio/assets/fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf") format("truetype");font-weight:800}
@font-face{font-family:Poppins;src:url("../themes/portfolio/assets/fonts/Poppins/Poppins-Bold.ttf") format("truetype");font-weight:800}
@font-face{font-family:Poppins;src:url("../themes/portfolio/assets/fonts/Poppins/Poppins-Regular.ttf") format("truetype");font-weight:400}
section{margin-bottom:20vh;z-index:10}
.vertical-decorationLine{width:100px;height:0.5px;background-color:white}
.arrow-link{display:flex;align-self:center;width:min-content}
.arrow-link svg{margin-left:15px;padding:0.2rem}
.arrow-link p{margin:0;width:max-content}
.arrow-link:hover{cursor:pointer}
.arrow-link:hover svg path{stroke:#ff5e4c}
body{background-color:#333;margin:0 6vw;overflow-x:hidden}
h1{font-family:PlayfairDisplay;font-weight:800;font-size:3.8rem;color:rgba(255,255,255,0.9);margin:1rem 0;letter-spacing:0.1rem}
h2{font-family:Poppins;font-weight:800;font-size:3rem;color:rgba(255,255,255,0.9);margin:30px 0;letter-spacing:0.04rem}
h3{font-family:PlayfairDisplay;font-weight:800;font-size:2.5rem;line-height:2rem;color:rgba(255,255,255,0.9);margin:15px 0;letter-spacing:0.1rem}
h4{font-family:Poppins;font-weight:800;font-size:1.9rem;line-height:2rem;color:rgba(255,255,255,0.9);margin:15px 0;letter-spacing:0.04rem}
h5,input{font-family:PlayfairDisplay;font-weight:800;font-size:1.25rem;line-height:2rem;color:rgba(255,255,255,0.9);margin:0;letter-spacing:0.05rem}
h6{font-family:Poppins;font-weight:800;font-size:1.25rem;line-height:1.5rem;color:rgba(255,255,255,0.9);margin:10px 0;letter-spacing:0.03rem}
p,button,textarea{font-family:Poppins;font-weight:400;font-size:1rem;line-height:2rem;color:white;margin:10px 0}
a{text-decoration:none;color:white}
a:hover p{color:#ff5e4c}
a:hover h3{color:#ff5e4c}
a:hover h6{color:#ff5e4c}
.landingPage{margin:20vh 0 40vh 0;display:flex;height:60vh;width:100%}
.landingPage-claim{display:flex;flex-direction:column}
.landingPage-claim h3{margin-bottom:40px}
.landingPage-claim h3:first-child{margin:50px 0 100px 0}
.landingPage-claim h3>p{display:inline-block;margin:0 0 0 10px;line-height:0}
.landingPage-claim .arrow-link{margin:auto 0 10px 0;align-self:start}
.landingPage-claim .arrow-link p{color:#ff5e4c}
.landingPage img{height:100%;max-width:500px;object-fit:cover;margin:0 3vw 0 auto}
.introduction-content{margin-left:5vw}
.introduction-content>p{margin:45px 0 20px 0;width:80%}
.hero{margin:0 -7vw 25vh -7vw;height:100vh;width:100vw;display:flex;-webkit-display:flex;align-items:end;-webkit-align-items:end;background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed}
.hero-content{display:flex;padding:0 7vw 5vh 7vw;height:20vh;z-index:100;flex-direction:column;justify-content:flex-end}
.hero-content h1{font-size:6rem;margin:0}
.hero-content h4{margin:0 0 150px 0;width:fit-content}
.hero-scroll{display:flex;width:min-content;padding:5px 0}
.hero-scroll:hover{cursor:pointer}
.hero-scroll:hover svg path{stroke:#ff5e4c !important}
.hero-scroll:hover p{color:#ff5e4c !important}
.hero-scroll p{margin-right:15px}
.hero .FadeIn{display:inline-block}
.hero .FadeOut{display:none}
.portfolio-current-wrapper{display:grid;width:100%;height:auto;grid-template-columns:50% auto;grid-template-rows:repeat(2,1fr) min-content;column-gap:100px;grid-template-areas:"img ." "img description" "img references"}
.portfolio-current-wrapper img{grid-area:img;object-fit:cover;object-position:top;max-height:500px;width:100%}
.portfolio-current-wrapper-description{grid-area:description;height:100%}
.portfolio-current-wrapper-description p{display:inline-block;font-family:Poppins;font-weight:400;font-size:1.2rem}
.portfolio-current-wrapper-references{grid-area:references;font-size:0.8rem;margin:0}
.portfolio-current-details{width:70%;margin:70px 0 10px 0}
.portfolio-current-navigation{height:100%;display:flex;margin-top:20px}
.portfolio-current-navigation a{display:flex;align-self:center}
.portfolio-current-navigation a svg{margin-left:15px;padding:0.2rem}
.portfolio-current-navigation a p{margin:0}
.portfolio-current-navigation a:hover svg path{stroke:#ff5e4c}
.portfolio-overview{display:flex;gap:5%;margin-top:50px;flex-wrap:wrap}
.portfolio-overview-project{margin-top:50px;width:30%;transition:margin-top 0.5s}
.portfolio-overview-project h5{margin-bottom:3px}
.portfolio-overview-project img{width:100%;height:250px;object-fit:cover}
.portfolio-overview-project p{font-size:0.8rem;line-height:1.3rem}
.portfolio-overview-project:hover{margin-top:35px}
.portfolio-overview-project:hover p{color:white}
.portfolio-overview-project:first-child{display:none}
.skills-single{margin-bottom:300px;width:60%}
.skills-single:nth-child(even){margin-left:30%}
.skills-single-wrapper{margin:40px 0 0 80px}
.skills-single-wrapper a p{color:#ff5e4c}
.skills-single-wrapper a svg path{stroke:#ff5e4c}
.skills-single-wrapper-technologies p{color:#ff5e4c;font-size:0.85rem}
.skills-single-wrapper-technologies-container{display:flex;width:60%}
.skills-single-wrapper-technologies-container-item{margin:0 35px 20px 0px;display:flex;flex-direction:column;align-items:center}
.skills-single-wrapper-technologies-container-item img{width:80px;height:80px;margin:0 5px;object-fit:contain;-webkit-filter:grayscale(100%);filter:grayscale(100%);transition:filter 0.5s}
.skills-single-wrapper-technologies-container-item p{padding:0 -5px;opacity:0;transition:opacity 0.5s;color:white}
.skills-single-wrapper-technologies-container-item:hover img{-webkit-filter:grayscale(0);filter:grayscale(0)}
.skills-single-wrapper-technologies-container-item:hover p{opacity:1}
#aboutMe-hero{justify-content:flex-end}
#aboutMe-hero-content{align-items:flex-end}
#aboutMe-hero-content h1,#aboutMe-hero-content h4,#aboutMe-hero-content p{color:#333}
#aboutMe-hero-content svg path{stroke:#333}
.aboutMe-education,.aboutMe-work{margin-bottom:100px}
.aboutMe-education-single,.aboutMe-work-single{display:none;margin:20px 0 50px 40px}
.aboutMe-education-single:nth-child(3),.aboutMe-work-single:nth-child(3){display:block}
.aboutMe-education-single h4,.aboutMe-work-single h4{margin:0 !important;display:inline-block}
.aboutMe-education-single p,.aboutMe-work-single p{margin-top:20px;width:50%}
.aboutMe-education .arrow-link,.aboutMe-work .arrow-link{padding-left:40px}
.aboutMe-education .arrow-link p,.aboutMe-work .arrow-link p{color:#ff5e4c}
.aboutMe-education .show,.aboutMe-work .show{display:block}
.aboutMe-education #education-toggle-up,.aboutMe-work #education-toggle-up{display:none}
.aboutMe-education #work-toggle-up,.aboutMe-work #work-toggle-up{display:none}
.aboutMe-languages{margin-bottom:100px}
.aboutMe-languages h2{margin-bottom:50px}
.aboutMe-languages-single{display:flex;align-items:flex-end;margin:0 0 40px 40px}
.aboutMe-languages-single h4{margin:0 40px 0 0}
.aboutMe-languages-single p{margin:0}
.aboutMe-interests p{width:70%}
.contact{background-color:#ff5e4c;margin:20vh -7vw 0 -7vw;padding:10vh 7vw 20vh 7vw}
.contact-form{display:inline-block;width:min-content}
.contact-form .contact-form-field,.contact-form h5{width:max-content;display:inline-block;margin:0 10px 15px 0}
.contact-form textarea{display:block;width:500px;background-color:#ff5e4c;border:solid white 2px;border-radius:10px;padding:4px 8px}
.contact-form textarea:focus{outline:none}
.contact-form input{background-color:#ff5e4c;border:none;background:linear-gradient(#fff,#fff) center bottom 2px / 100% 2px no-repeat;padding:10px 0;height:1.2em;line-height:2em}
.contact-form input:focus{outline:none}
.contact-form .form-name{width:270px}
.contact-form .form-name input{width:100%;background:linear-gradient(#fff,#fff) center bottom 2px / 100% 2px no-repeat}
.contact-form .form-email{width:340px}
.contact-form .form-email input{width:100%;background:linear-gradient(#fff,#fff) center bottom 2px / 100% 2px no-repeat}
.contact-form .form-phone{width:160px}
.contact-form .form-phone input{width:100%;background:linear-gradient(#fff,#fff) center bottom 2px / 100% 2px no-repeat}
.contact-form-send button{background-color:#ff5e4c;border:none;display:flex;align-self:center;width:min-content;margin-left:auto;margin-right:10px;transition:margin-right 0.5s}
.contact-form-send button :text{padding:30px 0}
.contact-form-send button svg{margin-left:15px;padding-top:0.4rem}
.contact-form-send button:hover{cursor:pointer;margin-right:0}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,0.7) !important}