/* Credit to benscott.dev ||  https://github.com/bscottnz/portfolio-site */

@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap);

*,*::before,*::after{
    margin:0;padding:0;box-sizing:inherit
}

html{
    box-sizing:border-box;
    font-size:62.5%;
    scroll-behavior:smooth
}

@media (max-width: 1500px){html{font-size:57.25%}}
@media (max-width: 1200px){html{font-size:50%}}
@media (max-width: 770px){html{font-size:43.75%}}
@media (max-width: 615px){html{font-size:40%}}
@media (max-width: 350px){html{font-size:35%}}

body{
    min-height:100vh;
    color:#fafafa;
    font-family:montserrat, sans-serif;
    background-color:#1a1a1a;
    overflow-x:hidden
}

li{
    list-style:none
}

a{
    text-decoration:none;
    color:inherit
}

button{
    border:none;
    outline:none;
    background-color:transparent;
    color:inherit
}


.hero{
    position:relative;
    display:flex;
    height:100vh;
    width:100%;
    z-index:999
}

.canvas{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    width:100%;
    height:100vh;
    background-color:#1a1a1a;
    overflow:hidden
}

.connecting-dots{
    height:100%;
    width:100%
}

/* ===================== HEADING ===================== */

.heading{
    position:relative;
    align-self:center;
    justify-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    line-height:normal;
    width:fit-content;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    color:#fafafa;
    font-weight:300;
    z-index:999
}

.heading__line-1{animation-name:moveInLeft}

.heading__line-1 span{
    color: rgba(252, 58, 74);
    font-weight:400
}

.heading__line-2{animation-name:moveInRight}

.heading__line-1,.heading__line-2{
    font-size:6rem;
    background-color:rgba(26,26,26,0.25);
    animation-duration:1.4s;
    animation-timing-function:cubic-bezier(0.21, 1.11, 0.81, 0.99)
}

@media (max-width: 700px){.heading__line-1,.heading__line-2{font-size:5rem;text-align:center;margin-left:4rem;margin-right:4rem}}
@media (max-width: 550px){.heading__line-1,.heading__line-2{font-size:5rem}}

.heading-cta{
    position:relative;
    display:flex;
    align-items:center;
    margin-top:2.4rem;
    padding:0.8rem 3rem;
    width:27.5rem;
    height:4.8rem;
    background-color:rgba(26,26,26,0.6);
    border:2px solid rgba(252, 58, 74);
    border-radius:2px;
    color:rgba(252, 58, 74);
    font-size:2.4rem;
    font-weight:500;
    cursor:pointer;
    animation:moveInBottom 0.7s 1.2s;
    animation-fill-mode:backwards;
    animation-timing-function:cubic-bezier(0.21, 1.11, 0.81, 0.99)
}

@media (max-width: 1500px){.heading-cta{width:auto}}
@media (max-width: 700px){.heading-cta{margin-top:1.8rem}}
@media (max-width: 550px){.heading-cta{padding:0.8rem 2rem}}

.heading-cta:before,.heading-cta:after{
    content:'';
    position:absolute;
    top:-2px;left:-2px;
    width:27.5rem;
    height:4.8rem;
    border-radius:3px;
    border:2px solid rgba(252, 58, 74);
    filter:blur(0);
    transform-origin:50%;
    z-index:-1;
}

@media (max-width: 1500px){.heading-cta:before,.heading-cta:after{width:27.8rem}}
@media (max-width: 1200px){.heading-cta:before,.heading-cta:after{width:28.5rem;border:2px solid transparent}}

.heading-cta:hover{
    transform:translateY(-2px)}
    
.heading-cta:hover:before,.heading-cta:hover:after{
    border-color:transparent;
    filter:blur(2px);
    transform:scaleX(1.3) scaleY(2.2);
    transition:800ms transform ease, 1900ms blur ease, 700ms border-color ease;
    pointer-events:none
}

.heading-cta:hover:after{transition-delay:150ms}

.heading-cta:active{transform:translateY(-1px)}

.heading__arrow{
    display:inline-block;
    height:24px;
    width:24px;
    margin-left:15px;
    transform:rotate(90deg);
    fill:rgba(252, 58, 74);
    transition:all 0.3s
}

@media (max-width: 770px){.heading__arrow{height:20px;width:20px}}
@media (max-width: 615px){.heading__arrow{margin-left:10px}}
@media (max-width: 550px){.heading__arrow{height:16px;width:16px}}

.main-bg{
    height:100vh;
    position:fixed;
    top:0;
    width:100%;
    background-color:royalblue
}

/* ===================== NAV BAR ===================== */

.navigation{
    display:flex;
    margin-right:10rem;
    font-size:2rem;
    font-weight:500;
    letter-spacing:1px
}

@media (max-width: 1200px){.navigation{margin-right:3rem}}@media (max-width: 700px){.navigation{margin-right:0}}

.navigation-bar{
    position:sticky;
    position:-webkit-sticky;
    top:0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    height:6rem;
    border-bottom:1px solid #1a1a1a;
    background-color:rgba(40,40,40,0.95);
    backdrop-filter:blur(8px);
    box-shadow:0 4px 4px rgba(0,0,0,0.3);
    z-index:99999999999
}

@media (max-width: 700px){.navigation-bar{justify-content:center}}

.navigation__item{transition:all 0.2s}

.navigation__item:not(:last-child){margin-right:3rem}

.navigation__item--active{color:rgba(252, 58, 74)}
.navigation__item:hover{color:rgba(252, 58, 74)}

/* ===================== ABOUT SECTION ===================== */

.about{
    width:1300px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
}

@media (max-width: 1500px){.about{width:1100px}}
@media (max-width: 1200px){.about{width:auto}}

.about__heading:before{
    position:absolute;
    content:'';
    border-bottom:18px solid rgba(252, 58, 74, 0.5);
    width:16rem;
    display:block;
    margin:0 auto;
    position:relative;
    left:3.5rem;
    top:6.3rem;
    z-index:-1
}

@media (max-width: 770px){.about__heading:before{border-bottom:14px solid rgba(252, 58, 74, 0.5)}}

.about__content{
    display:flex;
    gap: 20rem;
    width:100%;
    margin-left: 200px;
}

@media (max-width: 1300px){.about__content{flex-direction:column;gap: 0px;margin-left: 0px}}

/* ===================== Left side of About section (includes profile pic and bio) ===================== */
.profile{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    font-weight:500;
    left:-300px;
    opacity:0;
    transition:all 1.1s;
    gap: 10px;
}

@media (max-width: 1301px){.profile{margin-bottom:10rem;left:0;opacity:1}}
@media (max-width: 1000px){.profile{margin-bottom:7rem}}

.profile__picture{
    height:40rem;
    width: 30rem;
    margin-bottom:4rem;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    background-image: url("./imgs/ps.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0 0 30px 15px rgba(11, 92, 155, 0.5);
}

.profile__picture img{
    transition:all 1.1s
}

/* ===================== The bio paragraph under profile picture ===================== */
.profile__blurb{
    display: flex;
    text-align: center;
    font-size:1.8rem;
    width:500px;
    line-height:1.8
}

#profilepicture {
    border-radius: 10px;
    margin-bottom: 10px;
}

@media (max-width: 600px){.profile__blurb{width:80vw;margin-left:auto;margin-right:auto}}

.profile__fade-in{
    opacity:1;
    transform:translateX(300px)
}

@media (max-width: 1300px){.profile__fade-in{transform:translateX(0)}}

/* ===================== SKILLS (NEXT TO PROFILE PICTURE) ===================== */
.skills{
    display:flex;
    justify-content:center
}

.skills__row{
    display:flex;
    flex-direction:column;
    justify-content:center
}

.skills__row:not(:last-child){
    margin-right:35px
}

@media (max-width: 410px){.skills__row:not(:last-child){margin-right:15px}}
@media (max-width: 300px){.skills__row:not(:last-child){margin-right:10px}}

.skills__item{
    opacity:0;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-evenly;
    height:100px;
    width:160px;
    border:double 3px transparent;
    border-image-slice:1;
    border-width:3px;
    background-image:linear-gradient(#1a1a1a, #1a1a1a),radial-gradient(circle at top left, #51a2e9, rgba(252, 58, 74));
    border-radius:10px;
    background-origin:border-box;
    background-clip:content-box, border-box;
    transition:transform 0.2s, opacity 1.2s;overflow:hidden
}

@media (max-width: 1500px){.skills__item{height:90px;width:145px}}
@media (max-width: 1300px){.skills__item{opacity:1;border-width:2px}}
@media (max-width: 1000px){.skills__item{height:80px;width:130px}}
@media (max-width: 600px){.skills__item{height:70px;width:115px}}
@media (max-width: 500px){.skills__item{height:60px;width:100px}}
@media (max-width: 410px){.skills__item{height:50px;width:80px}}
@media (max-width: 340px){.skills__item{height:45px;width:70px}}

.skills__item:not(:last-child){
    margin-bottom:3rem
}

@media (max-width: 410px){.skills__item:not(:last-child){margin-bottom:15px}}

.skills__item img{
    height:60px;
    width:auto;
    transition:all 0.2s
}

@media (max-width: 1500px){.skills__item img{height:55px}}
@media (max-width: 1000px){.skills__item img{height:50px}}
@media (max-width: 600px){.skills__item img{height:45px}}
@media (max-width: 500px){.skills__item img{height:35px}}
@media (max-width: 410px){.skills__item img{height:26px}}

.skills__item-name{
    font-size:1.2rem;
    font-weight:600;
    line-height:1;
    transition:all 0.2s;
    letter-spacing:1px
}

@media (max-width: 1200px){.skills__item-name{font-size:1.4rem}}

.skills__item-fade-in{
    opacity:1
}

.skills__item--js img{
    border-radius:5px
}

.skills__item--webpack img{
    border-radius:50%
}

@keyframes moveInLeft{
    0%{opacity:0;transform:translateX(-10rem)
    }
    100%{opacity:1;transform:translateX(0)
    }
}
@keyframes moveInRight{
    0%{opacity:0;transform:translateX(10rem)
    }
    100%{opacity:1;transform:translateX(0)
    }
}
@keyframes moveInBottom{
    0%{opacity:0;transform:translateY(4rem)
    }
    100%{opacity:1;transform:translateY(0)}
}
@keyframes bounce{
    0%{transform:translateY(0)}
    50%{transform:translateY(-1rem)}
    100%{transform:translateY(0)}
}
@keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}

/* ===================== CONTACT SECTION ===================== */

.contact{
    position:relative;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    width:500px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:10;
    margin-bottom:10rem
}
@media (max-width: 700px){.contact{width:400px}}
@media (max-width: 470px){.contact{width:330px}}
@media (max-width: 400px){.contact{width:260px}}

.contact__heading{
    margin-top:-4rem !important;
    margin-bottom:6rem !important
}
.contact__heading:before{
    position:absolute;content:'';
    border-bottom:18px solid rgba(252, 58, 74, 0.5);
    width:37rem;
    display:block;
    margin:0 auto;
    position:relative;
    left:2.5rem;
    top:6.5rem;
    z-index:-1
}
@media (max-width: 770px){.contact__heading:before{border-bottom:14px solid rgba(252, 58, 74, 0.5)}}

.contact__text{
    font-size:1.8rem;
    margin-bottom:6rem
}

.contact__form{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}

.contact__form-name,.contact__form-email{
    margin-bottom:6px;
    padding:1rem;
    height:4rem
}

.contact__form-message{
    height:12rem;
    padding:1rem
}

.contact__form-submit-2{
    align-self:flex-start;
    margin-top:0 !important
}

.contact__form-submit{
    align-self:flex-start;
    position:relative;
    padding:0.6rem 1rem;
    width:fit-content;
    font-size:1.6rem;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:3px;
    z-index:9;
    cursor:pointer
}

.contact__form-submit:hover{
    color:#1a1a1a;
    font-weight:700
}

.contact__form-submit:after{
    position:absolute;
    content:'';
    border-bottom:2px solid #ff4d5a;
    width:calc(100% + 2rem);
    left:-14%;top:0.5rem;
    display:block;
    margin:0 auto;
    position:relative;
    transform-origin:bottom;
    transition:all 0.2s;
    z-index:-1
}

.contact__form-submit:hover:after{
    transform:scaleY(17.5)
}

@media (max-width: 1500px){.contact__form-submit:hover:after{transform:scaleY(16.5)}}
@media (max-width: 1200px){.contact__form-submit:hover:after{transform:scaleY(14)}}
@media (max-width: 770px){.contact__form-submit:hover:after{transform:scaleY(12.5)}}

.contact input,.contact textarea{
    width:500px;
    resize:none;
    border:none;
    color:inherit;
    background-color:#282828;
    font-size:1.6rem;
    font-family:monserrat, sans-serif;
    border-left:2px solid transparent;
    border-radius:0
}

@media (max-width: 700px){.contact input,.contact textarea{width:400px}}
@media (max-width: 470px){.contact input,.contact textarea{width:330px}}
@media (max-width: 400px){.contact input,.contact textarea{width:260px}}

.contact input:focus,.contact textarea:focus{outline:none}

.contact input::placeholder,.contact textarea::placeholder{
    color:rgba(250,250,250,0.6);
    opacity:1
}

.contact input :-ms-input-placeholder,.contact textarea :-ms-input-placeholder{
    color:rgba(250,250,250,0.6)
}

.contact input ::-ms-input-placeholder,.contact textarea ::-ms-input-placeholder{
    color:rgba(250,250,250,0.6)
}

.contact__form-error-submit{
    margin-top:1.5rem;
    height:7rem;width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center
} */

 .form-error{
    align-self:start;
    font-size:1.6rem;
    font-weight:500;
    line-height:1.5
}

.form-error>*{
    display:none
}

.input-error{
    border-left:2px solid #ff4d5a !important
}

/* ===================== FOOTER ===================== */

.footer{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    height:160px;
    background-color:#282828
}

.socials{
    display:flex;
    margin-bottom:20px;
    gap: 3rem;
}

.socials a{
    cursor:pointer;
    transition:all 0.2s;
}

.socials a:hover{transform:scale(1.2)}

.socials img{height:100%}

.copyright{
    color:#fafafa;
    font-size:10px;
    font-weight:500}
    
.return-home{
    position:absolute;
    top:-25px;
    width:40px;
    height:45px;
    margin-right:auto;
    margin-left:auto;
    left:0;
    right:0;
    text-align:center;
    background-color:rgb(89, 158, 226, 0.8);
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite
}

.return-home:hover{
    cursor:pointer;
    animation-name:bounce;
    -moz-animation-name:bounce
}

.return-home svg{width:100%}

.projects{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
}

.projects__heading:before{
    position:absolute;
    content:'';
    border-bottom:18px solid rgba(252, 58, 74, 0.5);
    width:22.5rem;
    display:block;
    margin:0 auto;
    position:relative;
    left:3.5rem;
    top:6.3rem;
    z-index:-1
}

@media (max-width: 770px){.projects__heading:before{border-bottom:14px solid rgba(252, 58, 74, 0.5)}}

.project{
    position:relative;
    display:flex;
    margin-bottom:14rem;
    justify-content:flex-start;
}

@media (max-width: 560px){.project{margin-bottom:12rem}}
@media (max-width: 440px){.project{margin-bottom:10rem}}

.project__image-container{
    position:relative;
    height:70rem;
    width:100rem;
    background-color:rgba(44, 44, 44, 0.4);
    transition:all 0.2s;
    cursor:pointer
}

@media (max-width: 1100px){.project__image-container{height:64rem;width:90rem}}
@media (max-width: 970px){.project__image-container{height:58rem;width:80rem}}
@media (max-width: 900px){.project__image-container{height:54rem;width:75rem}}
@media (max-width: 700px){.project__image-container{height:48rem;width:64rem}}
@media (max-width: 560px){.project__image-container{height:40rem;width:52rem}}
@media (max-width: 440px){.project__image-container{height:30rem;width:39rem}}

.project__image-container:hover{transform:scale(0.95)}

.project__image-image{width:90%;position:relative}

.project__image-image img{width:100%}

.project__info{
    position:relative;
    top:10rem;
    height:fit-content;
    padding:1rem;
    z-index:9999999
}

@media (max-width: 1000px){.project__info{width:fit-content}}
@media (max-width: 700px){.project__info{background-color:rgba(26,26,26,0.5)}}
@media (max-width: 560px){.project__info{top:4rem}}
@media (max-width: 440px){.project__info{top:2rem}}
@media (max-width: 400px){.project__info{top:0}}

.project__title{
    position:relative;
    z-index:66;
    font-size:3.5rem
}

@media (max-width: 900px){.project__title{font-size:3rem}}
@media (max-width: 820px){.project__title{font-size:2.7rem}}
@media (max-width: 550px){.project__title{font-size:2.5rem}}
@media (max-width: 400px){.project__title{font-size:2.2rem}}

.project__description{
    position:relative;
    margin-top:3rem;
    font-size:1.8rem;
    font-weight:500;
    z-index:999909999
}

@media (max-width: 560px){.project__description{margin-top:2rem}}

.project__live-2{
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:3px;
    line-height:1;
    text-transform:uppercase;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:fit-content;
    padding:1rem 1.2rem;
    position:relative;
    margin-top:3rem;
    cursor:pointer
}

@media (max-width: 560px){.project__live-2{margin-top:2rem}}

.project__live-2:after{
    position:absolute;
    content:'';
    height:2px;
    background-color:rgba(252, 58, 74);
    width:100%;
    bottom:1px;
    display:block;
    transform-origin:bottom;
    transition:all 0.25s;
    z-index:-1
}

.project__live-2:hover{color:#1a1a1a}

.project__live-2:hover:after{height:100%}

.project__live,.project__code{
    position:relative;
    margin-top:3rem;
    padding:0.6rem 1rem;
    width:fit-content;
    font-size:1.6rem;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:3px;
    z-index:9;
    transition:all 0.2s;cursor:pointer
}

@media (max-width: 560px){.project__live,.project__code{margin-top:2rem}}

.project__live:hover,.project__code:hover{color:#1a1a1a;font-weight:700}

.project__live:after,.project__code:after{
    position:absolute;
    content:'';
    border-bottom:2px solid rgba(252, 58, 74);
    width:calc(100% + 2rem);
    left:-10%;
    top:0.5rem;
    display:block;
    margin:0 auto;
    position:relative;
    transform-origin:bottom;
    transition:all 0.2s;
    z-index:-1
}

.project__live:hover:after,.project__code:hover:after{transform:scaleY(17.5)}

@media (max-width: 1500px){.project__live:hover:after,.project__code:hover:after{transform:scaleY(16.5)}}
@media (max-width: 1200px){.project__live:hover:after,.project__code:hover:after{transform:scaleY(14)}}
@media (max-width: 770px){.project__live:hover:after,.project__code:hover:after{transform:scaleY(12.5)}}

.project__code:after{width:calc(100% + 2rem);left:-8%}.project-left{
    align-self:flex-start;
    margin-left:22rem
}

@media (max-width: 1700px){.project-left{margin-left:11rem}}
@media (max-width: 1500px) and (min-width: 0px){.project-left{margin-left:2rem}}

.project-left .project__info{
    left:-3rem;
}


@media (max-width: 800px){.project__image-container{width:60rem;height:40rem;}}
@media (max-width: 600px) and (min-width: 401px){.project__image-container{width:50rem;height:30rem;}}
@media (max-width: 450px){.project__image-container{width:40rem;height:25rem;}}
@media (min-width: 1600px){.project-left .project__info{margin-right: 10rem;}}
@media (max-width: 800px){.project-left .project__info{margin-right:-3rem;left:-1rem}}
@media (max-width: 770px){.project-left .project__info{margin-right:-4rem}}
@media (max-width: 700px) and (min-width: 601px){.project-left .project__info{margin-right:2rem}}
@media (max-width: 600px){.project-left .project__info{margin-right:-6rem}}
@media (max-width: 599px) and (min-width:451px){.project-left .project__info{margin-right:0rem}}
@media (max-width: 450px){.project-left .project__info{margin-left:40px;left:-10rem;margin-right:-7rem}}

.project-right{
    align-self:flex-end;
    margin-right:22rem
}

@media (max-width: 1700px){.project-right{margin-right:11rem}}
@media (max-width: 1500px){.project-right{margin-right:0}}

.project-right .project__info{
    right:-6rem;
    margin-left:-2rem
}

@media (max-width: 800px){.project-right .project__info{margin-left:6rem;right:-1rem}}
@media (max-width: 770px){.project-right .project__info{margin-left:8rem}}
@media (max-width: 700px) and (min-width: 601px){.project-right .project__info{margin-left:4rem}}
@media (max-width: 600px){.project-right .project__info{margin-left:2rem}}
@media (max-width: 450px){.project-right .project__info{margin-right:40px;right:-10rem;margin-left:-7rem}}

.maid{
    display:flex;
    align-items:center;
    justify-content:left
}

.sixela{
    display:flex;
    align-items:center;
    justify-content:flex-end
}

.fighter{
    display:flex;
    align-items:center;
    justify-content:flex-start
}

.section-heading{
    position:relative;
    font-size:5.5rem;
    font-weight:700;
    margin-top:9rem;
    margin-bottom:13rem;
    z-index:9999
}

@media (max-width: 1200px){.section-heading{margin-bottom:10rem}}
@media (max-width: 1000px){.section-heading{margin-top:6rem}}