/* Smooth scrolling to help navigation */
html {
    scroll-behavior: smooth;
}

/* Styling of the font, background, text colour and padding the page at the edges */
body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    background-color: #222222;
    color: white;
    padding-left: 5vh;
    padding-right: 5vh;
}

/* Keeping the hero section full height */
.hero {
    min-height: 100vh;
}

/* Styling the nav bar to be centered and defining the gap between links */
nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
}

/* Extra spacing for the nav links */
.nav-link {
    padding: 10px 20px;
    margin: 10px;
}

/* Removing default style for links */
a {
    text-decoration: none;
    color: white;
}

/* Larger font and spacing for the main greeting and smaller for the sub greeting */
.greeting {
    padding-top: 20vh;
    font-size: 5rem;
    font-weight: 400;
    margin-bottom: 2vh;
}

.sub-greeting {
    font-size: 2rem;
    font-weight: 300;
    color: #a9a9a9;
    margin-top: 0;
}

/* Sizing the icons and spacing them out */
.connect-link {
    font-size: 2.4rem;
    padding: 8px;
}

/* Styling the look and animation of the down arrow */
#down {
    font-size: 5vh;
    color: #787878;
    position: absolute;
    bottom: 20px;
    left: 50%;
    animation: bounce 2s infinite;
}

/* Bounce animation for down and up arrow */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-20px);
    }
    60% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Restyling H2+H3 to be larger font and more space */
h2 {
    font-size: 2.8rem;
    font-weight: 400;
    margin-bottom: 20px;
}

#about h3 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 20px;
}

/* Restyling the paragraph text to be larger and have a lighter weight */
p {
    font-size: 1.1rem;
    font-weight: 300;
}

/* Displaying the grid for the tech stack with gaps inbetween */
.tech-stack {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 720px;
}

/* Styling the indiviudal tech stack items for the border, centering and spacing */
.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    border: 1px solid #3b3b3b;
    border-radius: 10px;
    font-size: 0.95rem;
}

/* Spacing the icons away from the text */
.tech-item i {
    margin-bottom: 20px;
}

/* Creating the section divider as a line across the page */
.section-divider {
    width: 100%;
    height: 1px;
    background-color: #3b3b3b;
    margin-top: 50px;
    margin-bottom: 50px;
    clear: right;
}

/* Floating the projects to the right */
#projects {
    float: right;
}

/* Defining the max width for the project items*/
.project-item {
    max-width: 55vw;
}

/* Altering the H3 Style for the project section */
.project-item h3 {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0px;
}

/* Styling the project item H5 as a subheading */
.project-item h5 {
    margin-top: 5px;
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 0px;
}

/* Displaying the images of the projects next to the text */
.project-image {
    transform: translate(-500px, 175px);
}

/* Defining the max width for the project showcase images to be the full width of the section */
.project-showcase {
    max-width: 55vw;
}

/* Clearing the float of the projects section to resolve display conflict */
#contact {
    clear: right;
}

/* Styling the contact links to the center */
.contact-links {
    display: flex;
    justify-content: center;
    gap: 18px;
}

/* Styling the look and animation of the up arrow */
#up {
    font-size: 5vh;
    color: #787878;
    position: relative;
    left: 50%;
    animation: bounce 2s infinite;
    margin: 50px 0 25px 0;
}

/* Media query for responsive design */
@media screen and (max-width: 600px) {
    /* Adjusting the nav bar spacing */
    .nav-link {
        padding: 0px;
        margin: 0px;
    }

    /* Removing the padding for a better display */
    .greeting {
        padding-top: 0px;
    }

    /* Changing the grid column count for better display */
    .tech-stack {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hiding images in the project section */
    .project-image, .project-showcase {
        display: none;
    }
    
}