/* Colour Varaiables */
:root {
    --accent: #7c3aed;
    --accent2: #3b82f6;
    --background: #0a0f1a;
    --text: #e7eef9;
    --mutedText: #9fb0c6;
    --outline: #ffffff0d;
    --backgroundGradient: #7c3aed26;
    --backgroundGradient2: #22d3ee1f;
    --backgroundGradient3: #0a0f1ad9;
    --backgroundGradient4: #0a0f1aa6;
    --glass: #ffffff0f;
    --darkGlass: #0d1626;
    --shadow: #0206178c;

}


/* Global Styles */
* {
    scroll-behavior: smooth;
    color: inherit;
    text-decoration: none;
}

/* Used to give the canvas a fixed position */
#animatedBackground {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: transparent;
}

/* Font styling and background colour */
body {
    margin: 0;
    font-family: Helvetica;
    background: radial-gradient(1200px 1200px at 20% -10%, var(--backgroundGradient), transparent 60%),
                radial-gradient(1200px 1200px at 120% 10%, var(--backgroundGradient2),transparent 50%),
                var(--background);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Needed an offset for anchor points due to fixed navigation bar */
section, #home, h2 {
    scroll-margin-top: 100px;
}

/* Sets all bold text to purple */
strong {
    color: var(--accent);
}

/* Added negative space between sections for legibility and readability */
section {
    margin: 3rem 0;
}

/* Additional font styling for code snippet-style text */
.mono {
    font-family: monospace;
    background: black;
    border-radius: 6px;
    padding: 0.20rem 0.40rem;
}

/* Parent div for navbar. Contains the entire block */
.navWrap {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(var(--backgroundGradient3), var(--backgroundGradient4));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--outline);
}

/* Contains all blocks for the main content of the nav bar */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
}

/* Did not want this to be purple */
.nav strong {
    color: var(--text);
}

/* Block for name, logo and tag */
.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Muted text for tag */
.brand small {
    color: var(--mutedText);
}

/* Styling to make the 'logo' sit in a square that matches brand colours */
.logo {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    font-weight: 700;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 10px;
}

/* Aligning and styling the list containing internal links */
nav li {
    list-style: none;
    display: inline;
}

/* Appropriate gaps between links, muted text */
nav a {
    text-decoration: none;
    font-weight: 600;
    color: var(--mutedText);
    margin-left: 0;
    margin-right: 1.5rem;
}

/* Adds purple on hovering over links */
nav a:hover {
    color: var(--accent);
}

/* Hamburger menu; invisible while in desktop view */
.hamburger {
    display: none;
    cursor: pointer;
}

/* Creates the bars for the hamburger menu */
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: white;
}

/* Container for all content. Squishes the page for styling */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Hero: short introduction. */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: center;
    margin-top: 0rem;
}

.hero h1 {
    font-size: 2rem;
    margin: 0.25rem 0;
}

/* Sets all altText classes to have muted text. Added this when I realised I was using it a fair bit. */
.altText {
    color: var(--mutedText);
}

/* Tag alignment and separation */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Adds glassy looks to tags */
.tag {
    background: var(--glass);
    padding: 0.25rem 0.5rem;
    border-radius: 100px;
    color: var(--mutedText);
    font-weight: 700;
    font-size: 0.90rem;
    backdrop-filter: blur(3px);
}

/* Floating card containers found throughout the webpage. Ended up using this for most information sources */
.floatingCard {
    background: var(--darkGlass);
    padding: 1.25rem;
    border: 2px solid var(--glass);
    border-radius: 15px;
    box-shadow: 0px 10px 50px var(--shadow);
}

/* Generic text styling below */
.floatingCard h2 {
    margin-top: 0rem;
    padding-top: 0rem;
}

.floatingCard h3 {
    margin-top: 0rem;
}

.floatingCard p {
    margin: 0.25rem 0rem;
}

.floatingCard ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.floatingCard li {
    line-height: 3rem;
    position: relative;
    padding-left: 1.5rem;
    margin-left: 0;
}

/* Wanted custom bullet points */
.floatingCard li::before {
    content: "•";
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Text styling for each of the skills dropdown boxes */
#skills ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}


#skills li {
    line-height: 2.5;
    position: relative;
    padding-left: 1.5rem;
    margin-left: 0;
}

/* Custom bullet points */
#skills li::before {
    content: "•";
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Gap between buttons and tags */
.ezButtons {
    margin-top: 1rem;
}

/* Purple/active button styling */
.button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    background: var(--accent); 
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    margin-right: 0.5rem;
    cursor: pointer;
    border-color: transparent;
}

/* Glass button styling */
.invisButton {
    display: inline-block;
    margin-top: 0.5rem;
    background: transparent;
    border: 1px solid var(--glass);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    backdrop-filter: blur(3px);
}

/* 3 different grid styles below, to save hand writing the same thing for multiple containers */
.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.grid-2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(3, 1fr));
}

.grid-3 {
    display: grid;
    gap: 1rem;
    grid-template-columns: 2fr 1fr;
}

/* Same styling as floating cards for dropdown boxes */
details {
    border: 1px solid var(--glass);
    border-radius: 10px;
    padding: 0.75rem;
    background-color: var(--darkGlass);
    margin-top: 0.5rem;
}

/* Bigger font size and pointer cursor on hover, to show interaction */
summary {
    cursor: pointer;
    font-weight: 700;
}

/* Toolbar: filtering menu */
.toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0.5rem 0 1rem;
}

/* Same styling as glass button */
.toolbtn {
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--glass);
    background: transparent;
    color: var(--text);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

/* Changes active filter button to purple */
.toolbtn[aria-pressed="true"] {
    background: var(--accent);
}

/* Styling for the search bar */
.search {
    flex: 1;
    min-width: 180px;
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--glass);
    background: transparent;
    color: var(--text);
}

/* Displays project cards in a grid */
.proj {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Styling for 3 top projects displayed in mobile mode */
.displayedProjects {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--glass);
    border-radius: 10px;
    background-color: var(--darkGlass);
}

.displayedProjects h3 {
    margin: 0.5rem 0;
}

.displayedProjects .tags {
    justify-content: flex-start;
    margin-top: auto;
}

/* Identical styling for hidden projects */
.hiddenProjects {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--glass);
    border-radius: 10px;
    background-color: var(--darkGlass);
}

.hiddenProjects h3 {
    margin: 0.5rem 0;
}

.hiddenProjects .tags {
    justify-content: flex-start;
    margin-top: auto;
}

/* This is the short tag under the project title */
.metaText {
    color: var(--Text);
    font-size: 0.9rem;
}

/* Show more button, identical styling to invisible button */
.invisButton-2 {
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    background: transparent;
    border: 1px solid var(--glass);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    backdrop-filter: blur(3px);
    cursor: pointer;
}

/* Centers button. Also hides it in desktop view */
.showMore {
    display: none;
    justify-content: center;
    align-items: center;
}

/* Vertical form layout */
.contactForm {
    display: grid;
    gap: 0.5rem;
}

/* Identical styling to search bar */
.input {
    padding: 0.5rem 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--glass);
    background: transparent;
    color: var(--text);
    font-family: inherit;
}

/* Did not want purple text */
#contact strong {
    color: var(--text);
}

/* Footer size and styling */
.footer {
    margin-top: 3rem;
    padding: 1rem 0;
    text-align: center;
    color: var(--mutedText);
    font-size: 0.9rem;
    background: linear-gradient(var(--backgroundGradient3), var(--backgroundGradient4));
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--outline);
}

/* Tablet Styles */
@media (max-width:768px) {

    /* Hides the navigation links on tablet view */
    .nav-menu {
        display: none;
    }

    /* Shows the navigation links when active (interacts with JavaScript) */
    .nav-menu.active {
        display: block;
        position: absolute;
        text-align: center;
        top: 55px;
        left: 0;
        padding: 0;
        width: 100%;
        background: linear-gradient(var(--backgroundGradient3), var(--backgroundGradient4));
        border-bottom: 1px solid var(--outline);
        backdrop-filter: blur(10px);
        z-index: 1001;
    }

    /* Aligns hamburger icon */
    .hamburger {
        display: block;
    }

    /* Hides middle bar, changes top and bottom bar into an 'x' to exit */
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Changes all grids into a single column */
    .grid, .grid-2, .grid-3, .proj {
        grid-template-columns: 1fr;

    }

    /* Hides hidden projects until 'show more' button is selected */
    .proj .hiddenProjects {
        display: none;
    }

    /* Reveals 'show more' button */
    .showMore {
        display: flex;
    }

    /* Single column for hero, centers text */
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Makes the footer closer to the main content in tablet mode */
    .footer  {
        margin-top: 0rem;
    }
}

/* Mobile Styles
Ran into an issue when testing on my actual phone where the nav menu would cover the content.
All other 'tablet' view styles worked */
@media (max-width: 452px) {
    .nav-menu.active {
        top: 75px;
    }
}