/* import Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* Colour Pallete:
From: https://colorhunt.co/palette/00354500454a3c6562ed6363 */

:root {
    --color-primary-dark: #00454A;
    --color-primary-light: #3C6562;
    --color-secondary: #003545;
    --color-highlight: #ED6363;
    --color-highlight-raise: #b94c4c;
    --color-text-light: #ededed;
}

/* Apply smooth-scrolling */

html {
    scroll-behavior: smooth;
    scroll-padding: 4rem;
}

/* apply 0 margin to all page elements unless otherwise stated */
* {
    margin: 0;
}

/* General Styles */

body {
    font-family: 'Rubik', sans-serif;
    color: var(--color-text-light);
}

section {
    padding: 5vw 10vw 5vw 10vw;
}

h1,
h2 {
    font-family: 'Arvo', serif;
    font-weight: 400;
    letter-spacing: .15rem;
}

p {
    font-size: 1.1rem;
    letter-spacing: .02rem;
    line-height: 2rem;
    color: #202020
}

/* classes for section titles and text */

.title-wrapper {
    margin: 2rem 0 2rem 0;
}

.text-wrapper {
    margin-bottom: 2rem;
}

/*class to increase font weight */
.heavy-text {
    font-weight: 600;
}

.accent-text {
    color: var(--color-highlight-raise);
}

.link-text {
    color: var(--color-primary-dark);
}

/* flex class */

.flex {
    display: flex;
}

/* buttons */

.button {
    background-color: transparent;
    padding: .8rem;
    border: .15rem solid var(--color-text-light);
    border-radius: .5rem;
    font-family: 'Rubik', sans-serif;
    letter-spacing: .05rem;
    color: var(--color-text-light);
    font-size: 1.2rem;
    /* transition to return to button default state after hover */
    transition: 0.2s ease-out;
    width: 100%;
    max-width: 200px;
    /* remove hyperlink decoration */
    text-decoration: none;
    text-align: center;
}

.button-accent {
    background-color: var(--color-secondary);
    border: .15rem solid var(--color-secondary);
}

.button:hover {
    background-color: var(--color-text-light);
    color: var(--color-secondary);
    border: .15rem solid var(--color-text-light);
    /* transition to smooth into highlight on hover */
    transition: 0.2s ease-in;
}

/* Navigation */

#nav {
    position: sticky;
    top: 0;
    /* z-index at 100 to ensure appears over other page content */
    z-index: 100;
    background-color: var(--color-secondary);
    padding: 24px 48px;
    /* wrap child divs along row */
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
}

#nav-logo-container,
#nav-menu-icon-container {
    color: var(--color-text-light);
    flex: 1 0 50%;
    align-content: center;
}

#nav-menu-icon-container {
    font-size: 2.6rem;
    text-align: right;
}

#nav-links-container {
    justify-content: center;
    flex-basis: 100%;
    height: 0vh;
    transition: height 0.5s ease-in;
}

#nav-links {
    list-style-type: none;
    padding: 40px 0;
    text-align: center;
    font-size: 1.2rem;
    line-height: 3.6rem;
}

/* remove anchor styling on nav links */

#nav-links a {
        text-decoration: none;
        color: var(--color-text-light);
}

/* Styling to toggle navigation menu open and closed */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/:checked */
/* https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2 */

#menu-toggle {
    /* hide checkbox input */
    display: none
}

/* increase height of nav links container when input checked to reveal menu */
#menu-toggle:checked + #nav-links-container {
    height: 50vh;
}

/* Main Styles */

/* Background video for hero from tutorial https://www.w3schools.com/howto/howto_css_fullscreen_video.asp */

.bg-video {
    position: absolute;
    left: 0;
    mix-blend-mode: multiply;
}

/* Hero */

#hero {
    position: relative;
    /* calculate height of section minus navbar */
    height: calc(100vh - 104.8px);
    /* backup bg colour if browser can't support gradient */
    background-color: var(--color-primary-light);
    /* create gradient background from root colours */
    background: linear-gradient(60deg, var(--color-primary-dark), var(--color-primary-light));
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    padding: 0 5vw 0 10vw;
    overflow: hidden;
}

#hero-main-title {
    flex-flow: column wrap;
    justify-content: center;
    min-height: 80vh;
    flex: 1;
    /* z-index to bring above video */
    z-index: 1
}

#hero-text-wrapper p {
    color: var(--color-text-light);
}

/* add space above text and buttons in hero */

#hero-button-wrapper,
#hero-text-wrapper {
    margin-top: 40px;
}

#hero-button-wrapper {
    display: flex;
    flex-flow: row wrap;
}

/* add space between buttons in hero*/

#hero-button-wrapper .button {
    margin-right: 1.5rem;
    width: auto;
}

#hero-title {
    font-size: 7vh;
}

/* About */

#about {
    flex-flow: row-reverse wrap;
    padding: 80px 5vw 5vh;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
}

#about-content {
    flex-flow: column wrap
}

#about-image-wrapper {
    padding-top: 2rem;
    width: 50vh;
    height: 50vh;
    background-color: var(--color-primary-dark);
    overflow: hidden;
    filter: drop-shadow(0 0 0.5rem rgb(80, 80, 80));
}

#about-image-wrapper,
#about-content {
    flex: 1 0 60%;
}

#about-image-wrapper img {
    width: 100%;
}

#about-text {
    text-align: center;
}

#about-text > h2 {
    color: var(--color-secondary);
    font-weight: 600;
    margin: .83em 0;
}

#tech-stack {
    flex-basis: 100%;
    margin: 24px 0;
    padding: 12px 0;
}

/* set icon list styles for all about and contact sections */

#tech-stack-list,
#socials-list {
    list-style-type: none;
    padding-left: 0;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

/* set class for icons */

.icon {
    padding: 6px;
    color: var(--color-secondary);
    font-size: 7vh;
    text-align: center;
}

#about-buttons {
    display: flex;
    width: 100%;
    justify-content: center;
}

#about-buttons .button {
    border: solid var(--color-primary-dark);
    color: var(--color-primary-dark);
}

#about-buttons .button:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
}

/* Portfolio */

#portfolio {
    flex: 1;
    flex-direction: column;
    padding: 80px 5vw 5vh 5vw;
    overflow: hidden;
    min-height: 90vh;
    background-color: var(--color-secondary);
    align-items: center;
    text-align: center;
}

.title-wrapper > h2 {
    color: var(--color-text-light);
    font-size: 2.2rem;
}

.text-wrapper > p {
    color: var(--color-text-light);
}

/* portflio cards styles */

#portfolio-cards {
    flex-flow: row wrap;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    /* set spacing between cards */
    gap: 2rem;
}

.card {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: end;
    max-width: 380px;
    min-height: 60vh;
    background-color: var(--color-secondary);
    border-radius: 20px;
    filter: drop-shadow(0 0 0.5rem rgb(30, 30, 30));
    /* transition for hover overlay effect */
    transition: 0.3s;
    cursor: pointer;
    overflow: hidden;
    align-items: center;
    gap: 1.2rem;
}

/* highlight card when hovered to indicate interactivity */
.card:hover {
    background-color: var(--color-primary-light);
    filter: drop-shadow(0 0 1.5rem #1e1e1e);
}

/* add margin to button bottom */
.card a {
    margin-bottom: 25px;
}

.card-img {
    align-self: center;
    position: absolute;
    height: 100%;
    /* Set image opacity to create overlay effect */
    opacity: 60%;
    z-index: -1;
}

.card-text h3 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 3rem;
}

.card-text p {
    margin-top: 2rem;
    color: var(--color-text-light);
}

.card-text {
    padding: 2vh 2vw;
    /* give text container a contrasting background for better visibility */
    background-color: hsla(195, 100%, 8%, 0.9)

}

/* Testimonials */

#testimonials {
    background-color: var(--color-primary-light);
    padding: 5vh 5vw;
    margin: 10vh 0 5vh 0;
    flex-direction: column;
    justify-content: center;
    filter: drop-shadow(0 0 0.5rem rgb(30, 30, 30));
}

#testimonials > h2 {
    margin-bottom: 2rem;
}

#testimonials .title-wrapper
#testimonials .text-wrapper {
    text-align: center;
}

.testimonial {
    max-width: 350px;
}

.testimonial p {
    color: var(--color-text-light);
    font-size: 1rem;
}

.testimonial a {
    text-decoration: none;
    font: 600 1.2rem 'Rubik', serif;
    background-color: var(--color-text-light);
    padding: 0.5rem;
    border-radius: .2rem;
}

.quote-name {
    text-align: right;
    line-height: 2.2rem;
}

#testimonials-container {
    gap: 2rem;
    justify-content: space-evenly;
    flex-flow: row wrap;
    margin-bottom: 5vh;
}

/* Contact */

/* Contact section styling and flex properties */
#contact {
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-flow: column wrap;
    max-width: 90vw;
    max-height: 80vh;
}

#contact .title-wrapper > h2,
#contact .text-wrapper > p,
#contact #socials > p {
    color: var(--color-primary-dark);
}

#contact-form {
    background-color: var(--color-primary-light);
    color: var(--color-text-light);
    padding: 30px;
}

/* flexbox styles for layout */

#contact .title-wrapper,
#contact .text-wrapper,
#socials {
    max-width: 500px;
    flex: 0 0 30%;
    align-self: flex-start;
}

/* add padding to right of contact text */
#contact .text-wrapper {
    padding-right: 5vw;
}

#contact-form-container {
    min-width: 250px;
    max-width: 500px;
    flex: 1 0 100%;
    align-self: flex-end;
}

/* end flex styles */

/* Contct form input styling */
#contact-form .text-input,
#contact-form .list-input {
    background-color: var(--color-text-light);
    color: #202020;
    border: 1px solid var(--color-text-light);
    border-radius: .15rem;
    width: 100%;
    padding: 0 5px;
    margin: 5px 0 25px 0;
    box-sizing: border-box;
}

/* set height of inputs */

#contact-form input {
    height: 30px
}

/* set height of textarea and remove resizing */

#contact-form textarea {
    height: 150px;
    resize: none;
}

#socials-list .icon > a {
    color: var(--color-secondary);
}

/* Footer */

#footer {
    max-height: 60px;
    max-width: 100vw;
    padding: 2vh 5vw 2vh 5vw;
    background-color: var(--color-secondary);
}

/* footer list styling */

#footer-links {
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    gap: .8rem;
    padding-left: 0;
}

#footer-links li {
    list-style-type: none;
}

#footer-links li > a,
#footer-links li > p {
    text-decoration: none;
    color: var(--color-text-light);
}

#footer-links h1,
#footer-links p {
    font-size: 1rem;
}

/* Media Queries */

/* for screen sizes below 480px (Mobile) */

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

    /* reduce logo size */
    #nav-logo {
        font-size: 5vw;
    }

    /* reduce hero title type size */
    #hero-title {
        font-size: 5vh;
    }

    /* custom styling for hero buttons on mobile devices */
    #hero-button-wrapper :nth-child(1) {
        background-color: var(--color-text-light);
        color: var(--color-primary-dark);
    }

    #hero-button-wrapper :nth-child(2) {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
    }

    #hero-button-wrapper .button {
        max-width: 150px;
        max-height: 50px;
        font-size: 1rem;
        margin-top: 10px;
    }

    /* reduce about image size on smaller devices */

    #about-image-wrapper {
        max-width: 80vw;
        height: 80vw;
    }

    /* adjust flex basis of text stack icons to arrange into grid */
    #tech-stack-list .icon {
        flex-basis: 33%;
    }

    /* resize form button to fill form width */
    #submit-button {
        display: block;
        max-width: 100%;
    }
}

/* Styling for medium sized devices and below */

@media screen and (max-width: 1024px) {
    /* Change flex direction of contact form to stack vertically */
    #contact {
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        max-height: 100%;
    }

    /* Revert flex properties of content */

    #contact .title-wrapper,
    #contact .text-wrapper,
    #contact-form-container,
    #socials {
        flex: 1 0 auto;
        align-self: center;
    }

    /* align text center */

    #contact .title-wrapper,
    #contact .text-wrapper {
        text-align: center;
    }

    /* Justify socials icons evenly */

    #socials-list {
        justify-content: space-between;
    }

    /* Change contact form order in flex */

    #socials {
        order: 1;
        /* Add margin above */
        margin-top: 2rem;
    }

    /* Remove part of testimonials pragraph text to reduce height of section */

    .extra-text {
        display: none;
    }
}

/* Custom styling for laptop sizes and above */

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

    /* show navigation links in navbar */

    /* hide menu icon */

    #nav-menu-icon-container {
        display: none;
    }

    #nav-logo-container {
        flex: 1 0 auto;
    }

    #nav {
        flex-direction: row;
    }
    
    #nav-links-container {
        flex: 2;
        height: 100%;
    }

    #nav-links {
        display: flex;
        margin: 0;
        padding: 0;
        justify-content: space-evenly;
    }

    #nav-links li {
        float: left;
    }

    /* Align items right in About content section */

    #about-content {
        flex: 1 0 60%;
        justify-content: flex-start;
    }

    /* align about text and button to left */

    #about-text {
        text-align: left;
    }

    #about-buttons {
        justify-content: left;
    }

    /* contact form change order in flex */

    #contact-form-container {
        order: 1;
    }

    /* adjust font-size of heading text for contact section */
    
    #contact .title-wrapper > h2 {
        font-size: 1.8rem;
    }

    #contact .title-wrapper > h2 span {
        font-size: 3.6rem;
    }

    /* Align social icons to start */

    #socials-list {
        justify-content: flex-start;
        /* set gap between icons */
        gap: 2rem;
    }

}