:root {
    --bg-colour: #000000;

    --dark-grey: #232323;
    --light-grey: #606060;
    --light-grey-selected: #c4c4c4;
    
    --accent-colour: #ff532c;

    --text-white: #d6d6d6;
    --text-orange: #d28827;
    --text-blue: #187da8;
    --text-red: red;
    --text-green: green;
    --text-grey: grey;

    --text-orange-darker: #724913;

    --page-padding-left: 14%;
    --page-padding-right: 14%;

    --border-colour: #242424;

    --spacing-small: 12px;
    --spacing-medium: 38px;
    --spacing-large: 64px;

    --sans-font: Arial, 'Poppins', sans-serif;
    --mono-font: 'Roboto Mono', monospace;

    --header-height: 50px;

    --heading-size: 3rem;

    /* New styling 14/01/2025 */
    --bg-colour: #121212;
    --dark-grey: #2b2b2b;

}

body {
    /* height: 100vh; */
    /* overflow-x: scroll; */
    padding-top: var(--header-height);
}

header {
    height: var(--header-height);
    padding: 2px var(--spacing-small);
    background-color: var(--dark-grey);
    padding-left: var(--page-padding-left);
    padding-right: var(--page-padding-right);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.4) 1.95px 1.95px 2.6px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    font-size: 1.2rem;
}

header .header-nav {
    display: flex;
    gap: var(--spacing-medium);
}


header .header-link {
    color: var(--text-white);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

header .header-link > img {
    height: 1.6em;
    object-fit: contain;
}

header .header-link:hover {
    color: var(--text-orange);
}

header .go-to-tracker {
    background-color: var(--text-orange);
    color: var(--bg-colour);
    padding: 8px 16px;
    height: 100%;
    border-radius: 8px;
    border: none;
    display: flex;
    gap: var(--spacing-small);
    align-items: center;
}

header .go-to-tracker .icon {
    font-size: 0.9rem;
}

main {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    padding-top: var(--spacing-medium);
    gap: var(--spacing-medium);
    padding-bottom: var(--spacing-large);
}

section {
    padding-left: var(--page-padding-left);
    padding-right: var(--page-padding-right);
}

table {
    width: 100%;
    border-spacing: 0;
}

table th {
    background-color: var(--dark-grey);
    text-align: left;
    color: var(--text-white);
}

footer {
    border-top: 2px solid var(--border-colour);
    padding: var(--spacing-medium);
    padding-left: var(--page-padding-left);
    padding-right: var(--page-padding-right);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
}


footer .ed {
    display: flex;
    justify-content: center;
    gap: var(--spacing-medium);
}

footer .ed-image {
    width: 5rem;
    height: 5rem;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
    
}

footer .ed-desc {
    max-width: 25rem;
    font-size: 1.2rem;
    color: grey;
    width: max-content;
}




::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #0000; 
}

::-webkit-scrollbar-thumb {
    background: #262626; 
}

::-webkit-scrollbar-thumb:hover {
    background: #1c1c1c; 
}


.heading {
    font-size: var(--heading-size);
}








/* Form Styles */

.form input,
.form select,
.form textarea {
    background-color: var(--border-colour);
    font-size: inherit;
    font-family: inherit;
    padding: 4px;
    border: none;
    padding: 6px;
    border: 2px solid var(--dark-grey);
    color: var(--text-white);
}

.form input[type=text],
.form input[type=email] {
    max-width: 400px;
}

.form textarea {
    resize: vertical;
    min-height: 6rem;
    width: 100%;
}

.form button[type=submit] {
    background-color: var(--text-orange);
    font-family: inherit;
    font-size: inherit;
    color: black;
    padding: 8px 16px;
}


@media screen and (max-width: 1000px) {
    :root {
        --page-padding-left: 8%;
        --page-padding-right: 8%;
    }
}

@media screen and (max-width: 800px) {
    :root {
        --page-padding-left: 6%;
        --page-padding-right: 6%;
    }
    html {
        font-size: 8pt;
    }
    header .header-link > img {
        height: 1.9em;
    }
    .header-nav {
        position: fixed;
        top: 100%;
        left: 0;
        height: calc(100vh - var(--header-height));
        width: 100vw !important;
        transition: 0.4s opacity ease-in;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-large);
        background-color: var(--bg-colour);
        opacity: 0;
    }

    .header-nav > a {
        font-size: 1.6rem;
    }

    .header-nav.open {
        top: var(--header-height);
        opacity: 1;
    }


    .mobile-menu-toggle {
        cursor: pointer;
        padding: 0;
        width: 2em;
        height: 1.5em;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: transparent;
        border: none;
    }

    .mobile-menu-toggle .bar {
        width: 100%;
        height: 2px;
        border-radius: 10px;
        background-color: var(--text-orange);
        transition: 0.2s ease-out;
    }

    .mobile-menu-toggle.open .bar:first-child {
        height: 0.2em;
        transform: translateY(0.65em) rotate(45deg);
    }
    .mobile-menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.open .bar:last-child {
        height: 0.2em;
        transform: translateY(-0.65em) rotate(-45deg);
    }

    footer .ed {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: var(--spacing-small);
    }

    footer .ed .ed-image {
        width: 8rem;
        height: 8rem;
    }
}