*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --white-dimmed: #ededed;
    --black-raisin: #252627;
    --yellow-crayola: #f4d35e;
    --cadet-blue: #39A2AE;
    --ming: #28737B;

    --font-lexend: 'Lexend Mega', sans-serif;
    --font-monserrat: 'Montserrat', sans-serif;
    --font-source-code: 'Source Code Pro', monospace;

    /* Base Font */
    font-family: var(--font-monserrat);

    /* Root Color */
    background-color: var(--black-raisin);

    color: var(--black-raisin);
}

body {
    margin: 0;
}

main {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 2px;
}

header {
    display: flex;

    background-color: var(--cadet-blue);
    min-width: 100vw;
    min-height: 10vh;

    /* border-bottom: 3px solid var(--yellow-crayola); */

    border-radius: 0 0 20px 20px;
}

.heading {
    position: -webkit-sticky;
	position: sticky;
	top: 0;
    z-index: 999;
}

header > h1 {
    font-family: var(--font-source-code);
    padding-left: 2rem;
}

/* Sections */

section {
    transform-style: preserve-3d;
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.5);
  }

  section.parallax {
      display: flex;
      flex-direction: column;
  }

  section.parallax > h1 {
      font-size: 3rem;
      text-align: center;
  }

.parallax::after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateZ(-1px) scale(1.5);
    background-size: 100%;
    z-index: -1;
}

.bg::after {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('/assets/images/pexels-photo-2330137.webp');
    background-size: cover;
    filter: blur(3px);
}

/* Cards */

.no-parallax.card-container {
    background-color: var(--white-dimmed);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

.card {
    box-shadow: 9px 9px 14px -4px #bbb ;
    padding: 2rem;
    margin: 2rem;
    max-width: 300px;
    border-radius: 20px;
    color: var(--black-raisin);
    border: #fefefe solid 1px;
}

/* .card:hover::after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(299deg, rgba(254,254,254,1) 4%, rgba(235,235,235,1) 40%, rgba(237,237,237,1) 66%, rgba(254,254,254,1) 91%);
    opacity: 1;
    transition: opacity 150ms ease-in-out;
} */

.card-header {
    background-color: var(--cadet-blue);
    height: 10%;
}

/* Portfolio */

.portfolio-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cadet-blue);
    margin: 0 auto;
    padding: 3em 0;
    height: 10vh;
}

.portfolio-heading > h1 {
    color: var(--white-dimmed);
    font-size: 4em;
}

section.no-parallax.portfolio {
    justify-content: space-around;
}

section.portfolio .project-image {
    text-align: center;
}

section.portfolio .project-image img {
    width: 80%;
    transition: transform 150ms ease-in;
}

section.portfolio .project-image img:hover {
    transform: scale(1.1);
}

body > main > section.no-parallax.portfolio > div.project-description {
    max-width: 40%;
}

section.no-parallax.portfolio > div.project-description > p{
    font-size: 2rem;
    color: var(--black-raisin);
    padding: 5%;
}

/* Portfolio | Project Eventually */

section.no-parallax.portfolio.project-eventually {
    background-color: #9ad2cb;
}

section.no-parallax.portfolio.project-eventually > div.project-description  > div > h1 {
    font-family: Pacifico;
    font-weight: 400;
    font-size: 5rem;
    color: #de6b48;
    text-shadow: var(--black-raisin) 2px 2px 4px;
}

/* Portfolio | Project Spotlight */

section.no-parallax.portfolio.project-spotlight {
    flex-direction: row-reverse;
    background-color: var(--white-dimmed);
}

section.no-parallax.portfolio.project-spotlight > div.project-description  > div > h1 {
    font-family: Rubik;
    font-weight: 400;
    font-size: 5rem;
    color: #e5af04;
    /* text-shadow: var(--black-raisin) 2px 2px 4px; */
}

body > main > section.no-parallax.portfolio.project-spotlight > div.project-description {
    padding-left: 5em;
}

/* Logos */

.logo {
    width: 5rem;
    padding-left: 1em;
    align-self: center;
}

.logo.inverted {
    filter: invert();
}

.logo.inverted.branding {
    width: 30%;
}

/* Footer */

footer {
    background-color: var(--ming);
    height: 10vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: var(--white-dimmed);
}

/* Media Queries */

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

    section.parallax > h1 {
        width: 80%;
        text-align: center;
        font-size: 2rem;
    }

    .no-parallax.card-container {
        height: fit-content;
    }

    section.no-parallax.portfolio {
        display: flex;
        flex-direction: column;
        max-height: fit-content;
    }

    section.no-parallax.portfolio * {
        width: 100vw;
    }

    section.no-parallax.portfolio>div.project-image {
        width: 40%;
        margin: 0 auto;
        padding: 2%;
    }

    body > main > section.no-parallax.portfolio > div.project-description {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        
    }

    body > main > section.no-parallax.portfolio > div.project-description p{
        font-size: 1.5rem;
    }

    body > main > section.no-parallax.portfolio.project-eventually {    
        padding-top: 5vh;
    }

    body > main > section.no-parallax.portfolio.project-eventually > div.project-description {
        padding: 1em;
    }

    section.no-parallax.portfolio.project-eventually > div.project-description > p {
        margin-bottom: 0;
        margin-top: 0;
        padding: 5%;
        padding-left: 0;
    }

    section.no-parallax.portfolio > div.project-description > .project-title h1 {
        margin: 0 auto;
    }

    body > main > section.no-parallax.portfolio.project-spotlight > div.project-description {
        padding: 1em;
        /* height: 100vh; */
    }

    body > main > section.no-parallax.portfolio.project-spotlight > div.project-image {
        width: 70%;
    }

    section.no-parallax.portfolio.project-spotlight {
        flex-direction: column;
    }

    footer {
        height: fit-content;
    }
    
    footer p {
        padding-left: 2rem;
        align-self: auto;
    }

    .logo {
        width: 20%;
        padding-left: 1em;
        align-self: center;
    }
}