@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap);:root{--color-primary:hsla(0,0%,100%,.7);--color-secondary:#564779;--color-tertiary:#9d6c82;--color-background-dark:#1a1a1a;--color-background-on-hover:#252525;--gradient-1:linear-gradient(to right,var(--color-secondary),var(--color-tertiary))}*{margin:0;padding:0}*,:after,:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%;scroll-behavior:smooth}@media screen and (max-width:1300px){html{font-size:58.2%}}@media screen and (max-width:540px){html{font-size:55%}}@media screen and (max-width:430px){html{font-size:51%}}body{background-color:#1a1a1a;background-color:var(--color-background-dark);color:hsla(0,0%,100%,.7);color:var(--color-primary);font-family:Playfair Display;font-size:1.6rem;font-weight:300;line-height:1.6}.section{border-bottom:1px solid var(--color-secondary);margin-bottom:5rem;min-height:100%;padding:6rem 0}.section-intro .container{align-items:center;display:flex;gap:3rem;justify-content:space-between}.section-intro__text-box{align-items:flex-start;display:flex;flex-direction:column;gap:2rem}.section-intro__text-box .button{margin-top:4rem}.section-intro__image{border-radius:5px;-webkit-filter:grayscale(100);filter:grayscale(100);transition:all .5s;width:30%}.section-intro__image:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}@media screen and (max-width:850px){.section-intro .container{flex-direction:column-reverse;justify-content:center;text-align:center}.section-intro__text-box{align-items:center}.section-intro__image{width:60%}}.section-about{align-items:center;display:flex;justify-content:center;position:relative}.section-about:before{background-image:url(/static/media/section-about-background-image.fbdddcd882337153fded.jpg);background-position:50%;background-size:cover;content:"";display:block;-webkit-filter:grayscale(100%);filter:grayscale(100%);height:100%;position:absolute;right:0;top:0;width:100%;z-index:-1}.section-skills .container{align-items:center;display:flex;flex-direction:column;gap:8rem}.section-skills .skills{grid-row-gap:7rem;display:grid;grid-template-columns:repeat(3,1fr);row-gap:7rem;width:100%}@media screen and (max-width:1155px){.section-skills .skills{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:650px){.section-skills .skills{grid-template-columns:1fr}}.section-projects .container{align-items:center;display:flex;flex-direction:column;gap:5rem;justify-content:center}.section-projects .projects{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(4,1fr)}@media screen and (max-width:1155px){.section-projects .projects{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:650px){.section-projects .projects{grid-template-columns:1fr}}.section-contact .container{align-items:center;display:flex;flex-direction:column;gap:5rem}.section-contact form{width:50%}@media screen and (max-width:1155px){.section-contact form{width:60%}}@media screen and (max-width:650px){.section-contact form{width:100%}}.on-scroll-animation{-webkit-animation:on-scroll-animation 2s;animation:on-scroll-animation 2s}@-webkit-keyframes on-scroll-animation{0%{-webkit-filter:blur(8px);filter:blur(8px);opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-filter:blur(0);filter:blur(0);opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes on-scroll-animation{0%{-webkit-filter:blur(8px);filter:blur(8px);opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}to{-webkit-filter:blur(0);filter:blur(0);opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}.header{position:relative}.header .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;padding:2rem 0}.header .container:after{background-image:var(--gradient-1);content:"";display:block;flex:0 0 100%;height:1px;margin-top:1.2rem;width:100%}.nav__list{display:flex;gap:1.3rem;list-style:none}.nav__item{border-radius:3px;cursor:pointer;font-size:1.9rem;font-weight:300;letter-spacing:.7px;transition:all .3s}.nav a:link,.nav a:visited{color:var(--color-primary);display:inline-block;padding:1rem 1.4rem;text-decoration:none}.nav__item:hover{background-color:var(--color-background-on-hover);-webkit-transform:translateY(-5px);transform:translateY(-5px)}.nav__item:hover a{color:var(--color-tertiary)}.nav__icon{align-items:center;background-color:var(--color-tertiary);border-radius:3px;cursor:default;display:flex;height:4rem;justify-content:center;position:fixed;right:3.5rem;top:1rem;transition:all .3s;-webkit-user-select:none;user-select:none;width:4rem;z-index:50}.nav__icon img{height:2rem;width:2rem}.nav__icon:hover{-webkit-transform:translateY(-3px);transform:translateY(-3px)}@media screen and (max-width:650px){.nav{background-color:var(--color-background-dark);height:100%;position:fixed;right:0;top:0;width:50%;z-index:10}.nav__icon{right:1.2rem}.nav__list{flex-direction:column;width:50%}}.container{margin:0 auto;width:85%}.container--text-box{align-items:center;background-color:var(--color-background-dark);border-radius:4px;cursor:default;display:flex;flex-direction:column;font-size:2.2rem;gap:3rem;justify-content:center;letter-spacing:1px;padding:5rem 8rem;width:50%}@media screen and (max-width:1155px){.container{width:90%}}@media screen and (max-width:650px){.container{width:95%}.container--text-box{padding:3rem;width:98%}}.logo{align-items:center;cursor:default;display:flex;gap:1rem;justify-content:center;margin-bottom:4px;transition:all .4s;-webkit-user-select:none;user-select:none}.logo h4{font-family:Segoe UI;font-weight:500}.logo svg{-webkit-filter:grayscale(100%);filter:grayscale(100%);height:2rem;transition:all .4s;width:2rem}.logo:hover{-webkit-transform:translateY(-6px) scale(1.1);transform:translateY(-6px) scale(1.1)}.logo:hover svg{-webkit-filter:none;filter:none}.heading{cursor:default}.heading--primary{font-size:4.9rem;font-weight:500;line-height:7rem}.heading--primary span{-webkit-background-clip:text;background-clip:text;background-image:var(--gradient-1);color:transparent;display:inline-block;transition:all .6s}.heading--primary span:hover{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.heading--secondary{font-size:4.8rem;transition:all .5s}.heading--secondary:hover{-webkit-background-clip:text;background-clip:text;background-image:var(--gradient-1);color:transparent;-webkit-transform:translateY(-1rem) scale(1.05) skewX(5deg);transform:translateY(-1rem) scale(1.05) skewX(5deg)}.heading--small{color:hsla(0,0%,80%,.675);display:block;font-size:1.2rem;font-weight:300;letter-spacing:1px;text-transform:uppercase;width:70%}@media screen and (max-width:650px){.heading--primary{font-size:3.4rem;line-height:5rem}.heading--secondary{font-size:4rem}}@media screen and (max-width:430px){.heading--secondary{font-size:3.7rem}}.button:link,.button:visited{align-items:center;border-radius:2px;display:flex;font-size:2.6rem;gap:8px;justify-content:center;padding:.6rem 2rem;text-decoration:none}.button svg{fill:var(--color-primary);height:1.5rem;width:1.5rem}.button:hover{-webkit-transform:translateY(-.5rem) scale(1.05);transform:translateY(-.5rem) scale(1.05)}.button:active{-webkit-transform:translateY(4px);transform:translateY(4px)}.button--primary{background-color:var(--color-secondary);color:var(--color-primary);transition:all .4s}.button--primary:hover{background-color:var(--color-tertiary);gap:20px}.button--primary:active{gap:10px}.skill-progress{cursor:default;width:80%}.skill-progress__label{border-bottom:1px solid var(--color-secondary);font-size:2rem;font-weight:500;margin-bottom:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.skill-progress__progress-bar{background-color:hsla(0,0%,100%,.1);border-radius:2px}.skill-progress__progress{background-image:var(--gradient-1);padding:3px 1rem;transition:all .6s 1s}.skill-progress__progress--css-sass,.skill-progress__progress--html,.skill-progress__progress--javascript,.skill-progress__progress--mongodb,.skill-progress__progress--node-express,.skill-progress__progress--react{width:99%}.skill-progress__progress--python{width:65%}@media screen and (max-width:650px){.skill-progress{width:100%}}.project-card{align-items:center;border:1px solid hsla(0,0%,100%,.2);border-radius:4px;display:flex;flex-direction:column}.project-card,.project-card__heading,.project-card__image{transition:all .5s}.project-card__image{-webkit-filter:grayscale(100%);filter:grayscale(100%);width:100%}.project-card__heading{font-size:3rem}.project-card__description{margin-bottom:2rem;padding:0 3rem}.project-card>div{align-items:center;cursor:default;display:flex;flex-direction:column;gap:2rem;justify-content:space-between;margin-bottom:auto}.project-card:hover{border-color:var(--color-secondary);-webkit-transform:translateY(-1rem) scale(1.02);transform:translateY(-1rem) scale(1.02)}.project-card:hover .project-card__image{-webkit-filter:grayscale(0);filter:grayscale(0)}.project-card__link{color:var(--color-secondary);transition:all .3s}.project-card__link:hover{color:var(--color-tertiary)}.project-card:hover .project-card__heading{background-clip:text;-webkit-background-clip:text;background-image:var(--gradient-1);color:transparent}.social-link{align-items:center;border-radius:50%;display:flex;height:4.5rem;justify-content:center;transition:all .3s;width:4.5rem}.social-link svg{fill:var(--color-primary);height:3rem;width:3rem}.social-link:hover{background-color:var(--color-primary);-webkit-transform:translateY(-5px);transform:translateY(-5px)}.social-link:hover svg{fill:#000}.form{align-items:stretch;display:flex;flex-direction:column;gap:2rem;justify-content:center}.form button,.form input,.form textarea{background-color:transparent;border:1px solid var(--color-secondary);border-radius:4px;color:inherit;font:inherit;outline:none;padding:1rem 2rem;resize:none;transition:all .7s}.form button:focus,.form input:focus,.form textarea:focus{background-color:hsla(0,0%,80%,.05);border-color:var(--color-tertiary)}.form button{cursor:pointer;transition:all .3s}.form button:hover{border-color:var(--color-tertiary);-webkit-transform:translateY(-5px);transform:translateY(-5px)}.form textarea{height:23rem;width:100%}
/*# sourceMappingURL=main.bf391552.css.map*/