@import url('../CSS/fonts.css');

body{
    overflow-x: hidden;
    font-family: rubik;
    color: #ffffff;
    background-color: #000000;
    scroll-behavior: smooth;
}

html{
    scroll-behavior: smooth;
}

/* Keep section titles clear of the fixed navbar when jumping to them */
section,
#skills{
    scroll-margin-top: 80px;
}

a{
    color: #ffffff;
}

a:hover{
    color: #ffffff;
}

/*--- Navbar ---*/

.header_area .main-menu .navbar{
    padding: 0.5rem 3rem;
    z-index: 999;
    background-color: #000000;
}

.header_area .main-menu .navbar .navbar-brand{
    padding: 0 0rem 0 1rem;
}

.header_area .main-menu .navbar .navbar-brand img{
    height: 34px;
}

footer.footer-area .site-logo img{
    height: 40px;
}

.header_area .main-menu .nav-item .nav-link{
    position: relative;
    font: normal 400 14px/1 rubik;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 1.5rem 1.1rem;
    color: rgba(255, 255, 255, .65);
    transition: color .3s ease, text-shadow .3s ease;
}

.header_area .main-menu .nav-item .nav-link::after{
    content: '';
    position: absolute;
    left: 1.1rem;
    right: calc(1.1rem + 2px);
    bottom: 1rem;
    height: 1px;
    background: #ffffff;
    box-shadow: 0 0 8px #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.header_area .main-menu .nav-item .nav-link:hover,
.header_area .main-menu .nav-item .nav-link.active{
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, .8);
}

.header_area .main-menu .nav-item .nav-link:hover::after,
.header_area .main-menu .nav-item .nav-link.active::after{
    transform: scaleX(1);
}

.header_area .main-menu .navbar-toggler{
    border-color: rgba(255, 255, 255, .5);
}

.header_area .main-menu .navbar-toggler:focus{
    outline: none;
    box-shadow: 0 0 10px #ffffff;
}

/* "Solar view" link: shown only when JS/view-router.js finds a screen that can run it */
.header_area .main-menu .view-switch-item{
    display: none;
}

.can-solar .header_area .main-menu .view-switch-item{
    display: block;
    margin-left: .6rem;
    padding-left: .6rem;
    border-left: 1px solid rgba(255, 255, 255, .2);
}

.header_area .main-menu .view-switch-item .bi{
    font-size: 12px;
    margin-right: .2rem;
}

/*--- Landing ---*/

.home{
    position: relative;
}

.landing .home-wrap .home-inner{
    /* 1.jpg is 16:9 with empty space above the subject. Instead of zooming in
       (which upscales the photo and blurs it), keep it at its normal "cover"
       size and shift it up by 12vh; the strip left at the bottom is hidden by
       a fade to black, which also keeps the caption readable. */
    background-color: #000000;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, #000000 88%), url(../Img/1.jpg);
    background-size: 100% 100%, cover;
    background-position: center, center -12vh;
    background-repeat: no-repeat;
}

/* Sits low over the jacket so the face in the photo stays visible */
.caption{
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
    position: absolute;
    bottom: 9vh;
}

.caption h1{
    font-size: 4.5rem;
    font-weight: 500;
    text-shadow: .1rem .1rem .8rem black;
}

.caption h4{
    font-size: 2.5rem;
    font-weight: 400;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
    min-height: 4rem;
}

.caption h5{
    font-size: 1.7rem;
    font-weight: 400;
    text-shadow: .1rem .1rem .8rem black;
}

.typewrite > .wrap{
    border-right: 0.08em solid #ffffff;
}

/* Small lowercase lead-in before the typed words */
.caption .typed-prefix{
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: lowercase;
    color: rgba(255, 255, 255, .65);
    vertical-align: middle;
    margin-right: .3rem;
}

/* Shooting stars canvas (JS/stars.js): fixed behind the content, above the hero photo */
.shooting-stars{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

.btn-lg{
    border-radius: 1rem;
    border-width: medium;
    transition: box-shadow .2s ease;
}

.btn-lg:hover{
    box-shadow: 0px 10px 30px #ffffff;
}

/*--- Shared section titles ---*/

.container .section-title{
    padding: 0 2rem 3rem;
    width: 100%;
    max-width: 100%;
}

.section-title h1{
    font-size: 35px;
    font-weight: 500;
    width: 100%;
    max-width: 100%;
}

.section-title .para{
    padding-top: 2rem;
    margin-bottom: 0;
}

.card-title{
    font-weight: 500;
}

/*--- About ---*/

.about-area{
    padding: 7rem 1rem 5rem;
}

.about-area .about-image{
    height: 100%;
}

/* Stretch the photo to the full height of the text column (heading to buttons).
   about.png is 22.png with the empty space above the head cropped off, so the
   head lines up with the heading; cover trims the (empty) sides as needed. */
.about-area .about-image img{
    display: block;
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    object-position: center bottom;
}

.about-area .about-title h2 > span{
    display: block;
    font: normal bold 49px/ 60px rubik;
    letter-spacing: 2px;
    width: 100%;
    max-width: 100%;
}

.about-area .about-title .paragraph{
    max-width: 90%;
}

.about-area .about-title .paragraph > p{
    padding: .4rem 0;
}

.about-area .about-links .btn{
    margin: 0 1rem 1rem 0;
}

/*--- Services ---*/

.services-area{
    padding: 7rem 2rem 2rem;
}

.services-area .services{
    height: calc(100% - 4rem);
    padding: 2rem 0;
    margin: 2rem .5rem;
    transition: box-shadow .7s ease;
}

.services-area .services:hover{
    box-shadow: 0px 10px 30px #ffffff;
}

.services-area .services-img i{
    display: inline-block;
    font-size: 64px;
    line-height: 69px;
    height: 69px;
}

/*--- Experience ---*/

.experience-area{
    padding: 5rem 1rem;
}

.experience-area .timeline{
    max-width: 900px;
    margin: 0 auto;
}

.experience-area .company{
    padding: 2rem;
    margin-bottom: 2rem;
    transition: box-shadow .7s ease;
}

.experience-area .company:hover,
.project-area .our-project:hover,
.credentials-area .credential:hover{
    box-shadow: 0px 10px 30px #ffffff;
}

.company-head{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.company-head h4{
    font-weight: 500;
    margin-bottom: .25rem;
}

.company-head p{
    margin-bottom: 0;
}

.company-head .logo{
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #ffffff;
    filter: grayscale(1);
    transition: filter .7s ease;
}

.company:hover .company-head .logo,
.credential:hover .company-head .logo{
    filter: none;
}

.company-head .logo-fallback{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 26px;
}

/* Roles at the same company are joined by a vertical line (promotions) */
.experience-area .roles{
    margin-left: 27px;
    padding-left: 2rem;
    border-left: 2px solid #333333;
}

.experience-area .role{
    position: relative;
    padding-bottom: 1rem;
}

.experience-area .role:last-child{
    padding-bottom: 0;
}

.experience-area .role::before{
    content: '';
    position: absolute;
    left: calc(-2rem - 7px);
    top: .3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
}

.experience-area .role .card-title{
    margin-bottom: .25rem;
}

.experience-area .role-meta{
    font-size: .9rem;
}

.experience-area .role ul{
    padding-left: 1.2rem;
}

.experience-area .role li{
    padding: .2rem 0;
}

.experience-area h4 a:hover{
    text-decoration: none;
    text-shadow: 0 0 20px #ffffff;
}

/*--- Projects ---*/

.project-area{
    padding: 5rem 1rem;
}

.project-area .our-project,
.credentials-area .credential{
    height: 100%;
    padding: 2rem;
    border: 1px solid #333333;
    display: flex;
    flex-direction: column;
    transition: box-shadow .7s ease;
}

.project-area .our-project{
    cursor: pointer;
}

.project-area .our-project:focus{
    outline: none;
    box-shadow: 0px 10px 30px #ffffff;
}

.project-area .project-tag{
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-left: .5rem;
}

.project-area .our-project .card-text{
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-area .project-date{
    font-size: .9rem;
    margin-bottom: .5rem;
}

.project-link{
    margin-top: auto;
    font-weight: 500;
}

.project-link:hover{
    text-decoration: none;
    text-shadow: 0 0 20px #ffffff;
}

/*--- Credentials & skills ---*/

.credentials-area .credential{
    position: relative;
}

/* Crown on award / winning certificates */
.credentials-area .crown{
    position: absolute;
    top: -18px;
    right: -14px;
    width: 44px;
    height: 44px;
    transform: rotate(22deg);
    filter: drop-shadow(0 0 8px rgba(245, 197, 24, .7));
    pointer-events: none;
}

.credentials-area{
    padding: 5rem 1rem;
}

.credentials-area .skills-title{
    padding-top: 5rem;
}

.skills{
    max-width: 960px;
    margin: 0 auto;
}

.skills .skill{
    display: inline-block;
    margin: .4rem;
    padding: .5rem 1.2rem;
    border: 1px solid #ffffff;
    border-radius: 1rem;
    transition: box-shadow .2s ease;
}

.skills .skill:hover{
    box-shadow: 0px 5px 20px #ffffff;
}

.skills .skill-group{
    border-bottom: 1px solid #222222;
}

.skills .skill-group-toggle{
    width: 100%;
    padding: 1.2rem 0;
    background: none;
    border: 0;
    color: rgba(255, 255, 255, .65);
    font: normal 400 14px/1 rubik;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    cursor: pointer;
    transition: color .3s ease, text-shadow .3s ease;
}

.skills .skill-group-toggle:hover,
.skills .skill-group.open .skill-group-toggle{
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, .8);
}

.skills .skill-group-toggle:focus{
    outline: none;
}

.skills .skill-group-toggle:focus-visible{
    outline: 1px solid #ffffff;
}

.skills .skill-group-toggle .bi{
    font-size: 12px;
    transition: transform .3s ease;
}

.skills .skill-group.open .skill-group-toggle .bi{
    transform: rotate(180deg);
}

.skills .skill-group-count{
    color: #6c757d;
}

.skills .skill-group-body{
    display: none;
    padding-bottom: 1.5rem;
}

.skills .skill-group.open .skill-group-body{
    display: block;
}

/*--- Contact ---*/

.subscribe-us-area{
    padding: 5rem 1rem 0;
}

.subscribe-us-area .subscribe{
    padding: 0;
}

.contact-form{
    width: 100%;
    max-width: 560px;
}

.contact-form .input-textbox{
    padding: 0 0 1rem;
}

.contact-form .input-textbox .form-control{
    padding: 1rem;
    height: auto;
    border: 1px solid whitesmoke;
    border-radius: 0;
    background: transparent;
    color: white;
    font: normal 400 17px/24px rubik;
}

.contact-form .input-textbox .form-control:focus{
    box-shadow: 0 0 15px rgba(255, 255, 255, .6);
}

.contact-form .input-textbox .form-control::placeholder{
    color: whitesmoke;
}

.contact-form .form-hp{
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form .form-status{
    min-height: 1.5em;
    margin: 1rem 0 0;
    font-size: .95rem;
}

.contact-form .form-status.is-error{
    color: #ff8a8a;
}

/*--- "Interactive version" notice (small screens) ---*/

.view-notice{
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1500;
    max-width: calc(100vw - 2rem);
    padding: .7rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 1rem;
    background: rgba(0, 0, 0, .85);
    box-shadow: 0 5px 25px rgba(255, 255, 255, .25);
    color: #ffffff;
    font-size: 13px;
    letter-spacing: .5px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity .4s ease, transform .4s ease;
}

.view-notice.show{
    opacity: 1;
    transform: translate(-50%, 0);
}

.view-notice .bi{
    margin-right: .3rem;
}

/* Wrap between the two halves of the sentence, never mid-phrase */
.view-notice span{
    display: inline-block;
}

/*--- Project preview lightbox ---*/

.lightbox{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, .9);
}

.lightbox[hidden]{
    display: none;
}

.lightbox-dialog{
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: #000000;
    border: 1px solid #333333;
    box-shadow: 0px 10px 40px rgba(255, 255, 255, .25);
}

.lightbox-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #333333;
}

.lightbox-head .card-title{
    margin-bottom: 0;
}

.lightbox-head .project-date{
    font-size: .9rem;
    margin-bottom: .3rem;
}

.lightbox-actions{
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.lightbox-actions .btn{
    border-radius: 1rem;
    transition: box-shadow .2s ease;
}

.lightbox-actions .btn:hover{
    box-shadow: 0px 5px 20px #ffffff;
}

.lightbox-close{
    background: none;
    border: 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover{
    text-shadow: 0 0 20px #ffffff;
}

.lightbox-body{
    overflow-y: auto;
    padding: 2rem;
}

.lightbox-body .tableau{
    width: 100%;
    height: 70vh;
    min-height: 420px;
    border: 0;
    background: #ffffff;
    margin-bottom: 2rem;
}

.lightbox-body .cover{
    display: block;
    max-width: 100%;
    margin: 0 auto 2rem;
}

.lightbox-body .loading{
    text-align: center;
    color: #6c757d;
}

/* GitHub README, rendered for a dark background */
.readme{
    line-height: 1.6;
}

.readme h1, .readme h2, .readme h3, .readme h4{
    margin: 1.5rem 0 1rem;
    font-weight: 500;
}

.readme h1, .readme h2{
    padding-bottom: .4rem;
    border-bottom: 1px solid #333333;
}

.readme h1{ font-size: 1.8rem; }
.readme h2{ font-size: 1.4rem; }
.readme h3{ font-size: 1.15rem; }

.readme > :first-child,
.readme > :first-child h1{
    margin-top: 0;
}

.readme img{
    max-width: 100%;
    height: auto;
}

.readme a{
    text-decoration: underline;
}

.readme code{
    color: #ffffff;
    background: #1a1a1a;
    padding: .1rem .3rem;
}

.readme pre{
    background: #111111;
    border: 1px solid #333333;
    padding: 1rem;
    color: #ffffff;
}

.readme pre code{
    background: none;
    padding: 0;
}

.readme table{
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.readme th, .readme td{
    border: 1px solid #333333;
    padding: .4rem .8rem;
}

.readme blockquote{
    border-left: 3px solid #555555;
    padding-left: 1rem;
    color: #aaaaaa;
}

.readme .anchor,
.readme .octicon{
    display: none;
}

body.lightbox-open{
    overflow: hidden;
}

/*--- Footer ---*/

footer.footer-area{
    padding: 3rem 0 1rem;
}

footer.footer-area .social{
    padding-bottom: 1rem;
}

footer.footer-area .social a{
    padding: 0rem 2rem;
}

footer.footer-area .social a > i{
    font-size: 22px;
    color: #ffffff;
}

footer.footer-area .social a:hover > i{
    text-shadow: 0 0 20px #ffffff, 0 0 30px #ffffff;
}

footer.footer-area .copyrights{
    padding-top: 2rem;
}

/*--- Responsive ---*/

@media (max-width: 1199.98px){
    .header_area .main-menu .nav-item .nav-link{
        padding: 1.5rem .8rem;
    }

    .header_area .main-menu .nav-item .nav-link::after{
        left: .8rem;
        right: calc(.8rem + 2px);
    }
}

@media (max-width: 991.98px){
    .header_area .main-menu .navbar{
        padding: 0.5rem 1rem;
    }

    .header_area .main-menu .nav-item .nav-link{
        padding: 1rem;
    }

    .header_area .main-menu .nav-item .nav-link::after{
        left: 1rem;
        right: auto;
        width: 2rem;
        bottom: .6rem;
    }

    .about-area{
        padding: 6rem 1rem 3rem;
    }

    .about-area .about-title .paragraph{
        max-width: 100%;
    }

    .about-area .about-image img{
        max-width: 500px;
        height: auto;
        min-height: 0;
        margin: 0 auto;
        aspect-ratio: 1080 / 1084;
    }
}

@media (max-width: 575.98px){
    .caption h1{
        font-size: 3rem;
    }

    .caption h4{
        font-size: 1.6rem;
        min-height: 3rem;
    }

    .caption h5{
        font-size: 1.3rem;
    }

    .about-area .about-title h2 > span{
        font-size: 38px;
        line-height: 46px;
    }

    .container .section-title{
        padding: 0 0 2rem;
    }

    .section-title h1{
        font-size: 28px;
    }

    .services-area{
        padding: 5rem 1rem 1rem;
    }

    .experience-area .company,
    .project-area .our-project,
    .credentials-area .credential{
        padding: 1.5rem 1rem;
    }

    .experience-area .roles{
        margin-left: 6px;
        padding-left: 1.5rem;
    }

    .experience-area .role::before{
        left: calc(-1.5rem - 7px);
    }

    footer.footer-area .social a{
        padding: 0rem 1.2rem;
    }

    .view-notice{
        bottom: .8rem;
        width: max-content;
        padding: .5rem .9rem;
        font-size: 11.5px;
        letter-spacing: .2px;
        line-height: 1.4;
    }

    .lightbox{
        padding: 0;
    }

    .lightbox-dialog{
        height: 100%;
        border: 0;
    }

    .lightbox-head{
        padding: 1rem;
    }

    .lightbox-actions .btn{
        display: none;
    }

    .lightbox-body{
        padding: 1rem;
    }

    .lightbox-body .tableau{
        height: 60vh;
        min-height: 0;
    }
}