/* reset */
/* :: means pseudo-element */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------------------- utility components --------------- */
:root {
    font-size: 62.5%;

    /* custom properties */

    --primary-color: #6C3681;
    --primary-color-m: rgba(113, 56, 135, 0.5);
    --secondary-color: #1D5C66;
    --secondary-color-m: rgba(29, 92, 102, 0.5);
    --tertiary-color: #00B8B2;
    --body-color: #f7ede2;
    --font-color: #1C1D35;

    --background-img: url('images/background.jpg');
}

body {
    font-family: "Baloo Tamma 2", cursive;
    line-height: 1.8;
    color: var(--font-color);
}

li {
    list-style: none;
    font-size: calc(1.2rem + 0.5vw);
    /* line-height: 1.6; */
}

img {
    width: 100%;
    object-fit: cover;
}

a:link, 
a:visited {
    color: var(--font-color);
    text-decoration: none;
    font-size: 1.5rem;
    cursor: pointer;
}

p {
    color: white;
    font-family: 'Indie Flower', cursive;
    font-size: calc(1.5rem + 0.2vw);
    letter-spacing: 0.15rem;
    line-height: 1.6;
}
/* ---------------------- Generic-use Classes --------------- */
.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.generic-padding {
    padding: 6rem calc(3rem + 4vw);
}

.text-center {
    text-align: center;
}

.w-100 {
    width: 100%;
}
/* ---------------------- main styling --------------- */

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
}
/* >>>>>> Main Nav Header <<<<<<< */
header#header {
    height: 100vh;
    background-image: var(--background-img);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    justify-content: flex-start;
}

nav#main-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(3vw + 3vh);
    background-color: var(--secondary-color-m);
}

ul.nav--links {
    height: 100%;
    width: 100%;
    justify-content: center;
}

ul.nav--links li a {
    position: relative;
    padding: 0.2rem 3vw;
    font-size: calc(1.3rem + 0.4vw);
    font-weight: 500;
    border-right: 1px solid white;
    color: white;
}

ul.nav--links li a:nth-child(1) {
    border-left: 1px solid white;
}

ul.nav--links li a:link::before,
ul.nav--links li a:visited::before,
ul.nav--links li a:link::after,
ul.nav--links li a:visited::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background-color: white;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
}

ul.nav--links li a:link::before,
ul.nav--links li a:visited::before {
    top: 0;
    transform-origin: left;
}

ul.nav--links li a:link::after,
ul.nav--links li a:visited::after {
    bottom: 0;
    transform-origin: right;
}

ul.nav--links li a:hover::before,
ul.nav--links li a:active::before,
ul.nav--links li a:hover::after,
ul.nav--links li a:active::before {
    transform: scaleX(1); /* makes the styling appear */
}

/* >>>>>> Showcase/Hero Section <<<<<<< */

div.showcase__content {
    background-color: var(--primary-color-m);
    padding: calc(2rem + 2vw) 6rem;
    height: max-content;
    width: max-content;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease-in-out;
    animation: hero 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes hero {
    0% {
        transform: translateX(100rem) rotate(360deg);
        opacity: 0;
    }

    100% {
        transform: translateX(0);    
        opacity: 1;
    }
}

.showcase__title {
    font-size: calc(2rem + 3vw);
}

.showcase__para {
    font-size: calc(1.5rem + 1vw);
}

.showcase__link:link,
.showcase__link:visited {
    position: relative;
    color: white;
    padding: 1rem 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.2rem;
    width: 9rem;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.showcase__link:link::after,
.showcase__link:visited::after {
    position: absolute;
    content: '';
    background-color: var(--secondary-color);
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s;
}

.showcase__link:hover::after,
.showcase__link:active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.showcase__stack--list {
    justify-content: flex-start;
    align-items: flex-start;
}

.showcase__stack--list li {
    padding-right: 1.5rem;
    font-size: 1.5rem;
}
  
.showcase__stack--list li i {
    font-size: 2.5rem;
}

#typescript {
    margin-top: 1.75px;
    border-radius: 2.8px;
    width: 22px;
    height: 23px;
    background-color: white;
    font-weight: 600;
    font-size: 15px;
    color: #462354;
    text-align: end;
    padding-top: 3px;
    padding-right: 1.5px;
}

.tooltip {
    position: relative;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    top:24px;
    left: 10%;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }



#hire-me-container {
    position: fixed;
    z-index: 4;
    right: 0;
    bottom: 0;
    padding: 1.5rem 4rem;
    background-color: var(--secondary-color);
}

#hire-me-btn {
    text-decoration: none;
    
   
    border: none;
    cursor: pointer;
    font-size: 2rem;
    font-family: "Baloo Tamma 2", sans-serif;
    color: white;
    font-weight: 600;
}

/* >>>>>> projects Section <<<<<<< */
article#project {
    background-color: var(--secondary-color);
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding-top: 2rem;
}

#project .projects:nth-child(even) {
    background-color: var(--primary-color);
}

#project .projects:nth-child(odd) {
    background-color: var(--secondary-color);
}

.projects {
    justify-content: center;
    width: 100%;
}

.project__header h2 {
    font-size: calc(3rem + 1vw);
    color: white;
    text-transform: uppercase;
}

/* projects__img (project samples) */
.projects__img {
    flex-basis: 40rem;
}

#recipe-img {
    height: 560px;
    overflow-y: scroll;
}

/* projects__content */
.projects__content {
    flex-basis: 50rem;
    color: white;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.projects__content__title {
    text-transform: uppercase;
    font-size: calc(2rem + 0.66667vw);
}

.projects__content__subtitle {
    font-size: calc(1.5rem + 0.66667vw);
}

.projects__content__para {
    margin-bottom: 2rem;
    font-family: "Baloo Tamma 2", cursive;
    letter-spacing: 0;
}

.projects__content .showcase__stack--list {
    justify-content: center;
    margin-bottom: 2rem;
}

/* --------- CRM Project ------------ */
/* .projects:nth-child(3)  */
.projects:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*  projects__video */
.projects:nth-child(3) .projects__video {
    margin-bottom: 3rem;
}

video {
    max-width: 100%;
    height: auto;
  }

.projects:nth-child(3) .projects__content {
    width: 80%;
    padding-bottom: 0;
    flex-basis: 20rem;
    flex-grow: 1;
}

.projects__content--list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.projects__content--list div {
    flex-basis: 20rem;
    flex-grow: 1;
    padding-inline-end: 1rem;
}

.projects:nth-child(3) .projects__content__para {
    margin-bottom: 0;
    font-family: "Baloo Tamma 2", cursive;
    letter-spacing: 0;
}

.projects:nth-child(4) .projects__links {
    justify-content: space-between;
}

/* ---------- Gereral classes used under Projects */
.projects__content--rolesList {
    padding-left: 3rem;
    margin-bottom: 2rem;
}

.projects__content--rolesList li {
    list-style-type: disc;
    font-size: 1.8rem;
}

.projects__links {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.projects__links .link-button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    height: 36px;
    width: 45%;
    text-align: center;
    line-height: 34px;
    color: var(--font-color);
    background-color: var(--tertiary-color);
    transition: background-color 0.2s ease-in-out 0s, opacity 0.2s ease-in-out 0s;
    padding: 0.3rem 2rem;        
}

.link-button:hover {
    color: #ffffff;
    opacity: 0.5;
}

/* >>>>>> About Me Section <<<<<<< */
section#about-me {
    background-color: var(--secondary-color);
    justify-content: center;
}

.about-me__content {
    flex-basis: 90rem;
}

.about-me__content {
    position: relative;
    border: 2px solid #ddd;
    padding: 6rem 4rem;
    color: white;
}

.about-me__content--title {
    position: absolute;
    top: 0;
    font-size: 4rem;
    line-height: 1;
    margin: -2rem auto 0; /* half of font-size */
    background-color: var(--secondary-color);
    padding: 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

/* >>>>>>> Contacts Page <<<<<< */
section#contact {
    height: 100vh;
    background-image: url('https://images.unsplash.com/photo-1557264322-b44d383a2906');
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    justify-content: center;
    position: relative;
}

.contact__form {
    flex-basis: 80rem;
    display: flex;
    flex-direction: column;
}

.contact__form input,
.contact__form textarea {
    border: none;
    border-bottom: 1px solid white;
    background-color: var(--primary-color-m);
    color: white;
    font-family: 'Indie Flower', cursive;
    font-size: 1.5rem;
    letter-spacing: 0.25rem;
    font-weight: 600;
    padding: 2rem;
}

.contact__form textarea {
    height: 30vh;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 1; /* Firefox */
  }

input[type=submit] {
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    font-family: "Baloo Tamma 2", cursive;
    font-size: 2rem;
    font-weight: 500;
}

input[type=submit]:hover,
input[type=submit]:active {
    background-color: var(--primary-color);
}

/* >>>>>> Footer <<<<<<< */
footer {
    background-color: var(--tertiary-color);
    padding: 2rem 0;
    justify-content: center;
}

.footer--social {
    justify-content: space-evenly;
}

.footer--social a {
    /* 20px => 2rem => {1rem + [(10/1500) * 100]} => dynamic value */
    font-size: calc(1.2rem + 0.3vw);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2;
    padding: 0 calc(1rem + 0.66667vw);
    transition: color 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* active state is for mobile use when cannot hover and can only click */
.footer--social a:hover,
.footer--social a:active {
    color: var(--secondary-color);
}

/* -------------------------- media screens ------------------------------ */
@media screen and (min-width: 1510px) {
    body {
        width: 1510px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1040px) {

    .projects__card {
        margin-bottom: 3rem;
    }
}

@media screen and (min-width: 910px) {

    .hidden-xl {
        display: none;
    }

}

@media screen and (max-width: 910px) {

    .projects__content--list {
        flex-direction: column;
    }

}

@media screen and (max-width: 610px) {
    header {
        position: absolute;
        justify-content: flex-end;
    }

    nav#main-nav {
        width: 30rem;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;
        right: -10rem;
        background-color: var(--secondary-color);
    }

    .nav--hamburger {
        width: 5rem;
        height: 5rem;
        position: fixed;
        top: 2rem;
        right: 3rem;
        cursor: pointer;
        background-color: var(--secondary-color);
        padding: 1rem;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .line {
        width: 100%;
        height: 0.3rem;
        background-color: white;
        border-radius: 0.2rem;
        transition: all 0.4s ease-in-out;
    }

    ul.nav--links {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
    }

    ul.nav--links li {
        margin-bottom: 4vh;
        margin-left: 6vw;
}
    
    .clicked {
        width: 30rem;
        height: 100%;
        position: fixed;
        top: 0;
        left: 50%;
        background-color: var(--secondary-color);
        z-index: -1;
    }

    .clicked .line-1 {
        transform: rotateZ(-405deg) translate(-0.8rem, 0.6rem);
        /* translate(x-axis, y-axis) */
    }

    .clicked .line-2 {
        opacity: 0;
    }

    .clicked .line-3 {
        transform: rotateZ(405deg) translate(-0.8rem, -0.6rem);
    }

    ul.nav--links li {
        opacity: 0;
    }

    ul.nav--links li:nth-child(1) {
        transition: all 0.5s ease-in-out 0.2s;
    }

    ul.nav--links li:nth-child(2) {
        transition: all 0.5s ease-in-out 0.4s;
    }

    ul.nav--links li:nth-child(3) {
        transition: all 0.5s ease-in-out 0.6s;
    }

    ul.nav--links li:nth-child(4) {
        transition: all 0.5s ease-in-out 0.8s;
    }

    ul.nav--links li.fade {
        opacity: 1;
    }

    .projects__content__title {
        font-size: calc(1.2rem + 2vw);
    }

    .projects:nth-child(3) .projects__content {
        width: 100%;
    }

    .projects:nth-child(3) .projects__content__para {
        margin-bottom: 2rem;
    }

    .projects__content {
        padding-left: 0;
    }
}

@media screen and (max-width: 460px) {
    header#header {
        justify-content: center;
    }
  
}