@import url("./reset.css");
@import url("https://fonts.googleapis.com/css2?family=Agdasima:wght@400;700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

:root {
    /* Flexoki base */
    --fl-black: #100f0f;
    --fl-950: #1c1b1a;
    --fl-900: #282726;
    --fl-850: #343331;
    --fl-800: #403e3c;
    --fl-700: #575653;
    --fl-600: #6f6e69;
    --fl-500: #878580;
    --fl-300: #b7b5ac;
    --fl-200: #cecdc3;
    --fl-150: #dad8ce;
    --fl-100: #e6e4d9;
    --fl-50: #f2f0e5;
    --fl-paper: #fffcf0;

    /* Flexoki red */
    --fl-red-50: #ffe1d5;
    --fl-red-100: #ffcabb;
    --fl-red-200: #f89a8a;
    --fl-red-300: #e8705f;
    --fl-red-400: #d14d41;
    --fl-red-600: #af3029;
    --fl-red-800: #6c201c;
    --fl-red-950: #261312;

    /* Flexoki orange */
    --fl-orange-50: #ffe7ce;
    --fl-orange-100: #fed3af;
    --fl-orange-200: #f9ae77;
    --fl-orange-300: #ec8b49;
    --fl-orange-400: #da702c;
    --fl-orange-600: #bc5215;
    --fl-orange-800: #71320d;
    --fl-orange-950: #27180e;

    /* Flexoki yellow */
    --fl-yellow-50: #faeec6;
    --fl-yellow-100: #f6e2a0;
    --fl-yellow-200: #eccb60;
    --fl-yellow-300: #dfb431;
    --fl-yellow-400: #d0a215;
    --fl-yellow-600: #ad8301;
    --fl-yellow-800: #664d01;
    --fl-yellow-950: #241e08;

    /* Flexoki green */
    --fl-green-50: #edeecf;
    --fl-green-100: #dde2b2;
    --fl-green-200: #bec97e;
    --fl-green-300: #a0af54;
    --fl-green-400: #879a39;
    --fl-green-600: #66800b;
    --fl-green-800: #3d4c07;
    --fl-green-950: #1a1e0c;

    /* Flexoki cyan */
    --fl-cyan-50: #ddf1e4;
    --fl-cyan-100: #bfe8d9;
    --fl-cyan-200: #87d3c3;
    --fl-cyan-300: #5abdac;
    --fl-cyan-400: #3aa99f;
    --fl-cyan-600: #24837b;
    --fl-cyan-800: #164f4a;
    --fl-cyan-950: #101f1d;

    /* Flexoki blue */
    --fl-blue-50: #e1eceb;
    --fl-blue-100: #c6dde8;
    --fl-blue-200: #92bfdb;
    --fl-blue-300: #66a0c8;
    --fl-blue-400: #4385be;
    --fl-blue-600: #205ea6;
    --fl-blue-700: #1a4f8c;
    --fl-blue-800: #163b66;
    --fl-blue-850: #133051;
    --fl-blue-900: #12253b;
    --fl-blue-950: #101a24;

    /* Flexoki purple */
    --fl-purple-50: #f0eaec;
    --fl-purple-100: #e2d9e9;
    --fl-purple-200: #c4b9e0;
    --fl-purple-300: #a699d0;
    --fl-purple-400: #8b7ec8;
    --fl-purple-600: #5e409d;
    --fl-purple-800: #3c2a62;
    --fl-purple-950: #1a1623;

    /* Flexoki magenta */
    --fl-magenta-50: #fee4e5;
    --fl-magenta-100: #fccfda;
    --fl-magenta-200: #f4a4c2;
    --fl-magenta-300: #e47da8;
    --fl-magenta-400: #ce5d97;
    --fl-magenta-600: #a02f6f;
    --fl-magenta-800: #641f46;
    --fl-magenta-950: #24131d;
}

/*h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}*/

body {
    background-color: var(--fl-900);
    color: var(--fl-paper);
    padding: 2em 8%;

    font-family:
        Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
        sans-serif;
}

header {
    color: var(--fl-paper);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
}

header > .site-name {
    font-size: 3rem;
    margin: 0;
    font-weight: 600;
}

header > nav {
    font-size: 2rem;
    padding-top: 1px;

    ul {
        display: flex;
        gap: 1em;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    a {
        text-decoration: none;
    }
}

.hero {
    display: flex;
    gap: 2em;
    align-items: stretch;

    .hero-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .hero-head {
        font-size: 60pt;
        margin: 0;
    }

    .hero-subline {
        font-size: 36pt;
        margin: 0;
    }

    .hero-list {
        list-style: none;
        padding: 0;
        margin: 0.5em 0;
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .cta-btn {
        display: inline-block;
        align-self: flex-start;
        margin-top: 0.5em;
        padding: 0.6em 2.5em;
        background-color: var(--fl-200);
        color: var(--fl-black);
        text-decoration: none;
        font-size: 1.4rem;
        border-radius: 4px;
    }

    .hero-card {
        flex: 0 0 35%;
        background-color: var(--fl-blue-950);
        border-radius: 1.5em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25em;
        font-size: 2rem;
        text-align: center;
        padding: 2em;
    }

    .colours {
        animation: color-change 7s infinite;
    }
}

footer {
    color: var(--fl-300);
    text-align: center;
    padding: 1.5em;
    font-size: 1.1rem;
    margin-top: 2em;
}

@keyframes color-change {
    0% {
        color: var(--fl-red-400);
    } /* red */
    12.5% {
        color: var(--fl-orange-400);
    } /* orange */
    25% {
        color: var(--fl-yellow-400);
    } /* yellow */
    37.5% {
        color: var(--fl-green-400);
    } /* green */
    50% {
        color: var(--fl-cyan-400);
    } /* cyan */
    62.5% {
        color: var(--fl-blue-400);
    } /* blue */
    75% {
        color: var(--fl-purple-400);
    } /* purple */
    87.5% {
        color: var(--fl-magenta-400);
    } /* magenta */
    100% {
        color: var(--fl-red-400);
    } /* red (loop) */
}

.code {
    font-family: "Fira Code", monospace;
    font-weight: 400;
    font-style: normal;
}

.about-page {
    display: flex;
    flex: 1;
    gap: 4em;
}

.about {
    max-width: 750px;
    text-wrap: pretty;
    
}

p {
    max-width: 600px;
    text-wrap: pretty;
}

a {
    text-decoration-color: var(--fl-red-400);
    text-decoration-style: dashed;
    text-underline-offset: 8px;
}

a:link    { color: var(--fl-paper); }
a:visited { color: var(--fl-paper); }
a:hover   { color: var(--fl-paper); }
a:active  { color: var(--fl-paper); }

/* shared page header */
.page-title {
    font-size: 48pt;
    margin: 0 0 0.1em;
}

.page-intro {
    font-size: 1.4rem;
    color: var(--fl-300);
    margin: 0 0 2em;
}

/* developers page */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1.5em;
}

.dev-card {
    background-color: var(--fl-blue-950);
    border-radius: 1em;
    padding: 1.5em;
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
}

.dev-avatar {
    flex-shrink: 0;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background-color: var(--fl-blue-700);
    color: var(--fl-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.dev-info h2 {
    margin: 0 0 0.1em;
    font-size: 1.4rem;
}

.dev-role {
    color: var(--fl-cyan-400);
    font-size: 0.95rem;
    margin: 0 0 0.6em;
}

.dev-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    list-style: none;
    padding: 0;
    margin: 0.8em 0 0;

    li {
        background-color: var(--fl-blue-800);
        border-radius: 100em;
        padding: 0.2em 0.8em;
        font-size: 0.85rem;
        color: var(--fl-200);
    }
}

.join-us {
    margin-top: 3em;
    padding: 2em;
    background-color: var(--fl-blue-950);
    border-radius: 1em;
    max-width: 600px;

    h2 { margin: 0 0 0.4em; }
    p  { margin: 0; color: var(--fl-300); }
}

/* resources page */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 2em;
}

.resource-category {
    h2 {
        font-size: 1.4rem;
        margin: 0 0 1em;
        display: flex;
        align-items: center;
        gap: 0.5em;
        color: var(--fl-200);

        i { color: var(--fl-cyan-400); }
    }
}

.resource-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2em;

    li { border-left: 2px solid var(--fl-blue-700); padding-left: 1em; }

    a { font-size: 1.1rem; }
}

@media (max-width: 768px) {
    body {
        padding: 1.2em 5%;
    }

    /* header: stack name above nav, wrap nav links */
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75em;
    }

    header > nav {
        font-size: 1.1rem;
        width: 100%;

        ul {
            flex-wrap: wrap;
            gap: 0.5em 1em;
        }
    }

    /* hero: single column, hide the card */
    .hero {
        flex-direction: column;

        .hero-head    { font-size: 36pt; }
        .hero-subline { font-size: 22pt; }
        .hero-card    { display: none; }
    }

    /* page titles */
    .page-title { font-size: 30pt; }

    /* team grid: single column */
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* resources grid: single column */
    .resources-grid {
        grid-template-columns: 1fr;
    }

    /* about page: stack image below text */
    .about-page {
        flex-direction: column;

        img { width: 100%; height: auto; }
    }
}