@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/assets/fonts/abfec168c8990f67-s.woff2") format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/assets/fonts/81f44dd2e4d3cabf-s.p.woff2") format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/assets/fonts/3916ba59bc59a9e6-s.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("/assets/fonts/40d40f0f334d7ad1-s.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    margin: 0;
    background: #0a0a0a;
    color: #f5f5f5;
    font-family: "Nunito", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

.page {
    min-height: 100vh;
    background-image: url("/assets/images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
}

.header,
main {
    width: 100%;
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
    padding: 4.8rem;
}

/* HEADER */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 4.8rem;
    line-height: 1;
    font-weight: 700;
}

.nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 48rem;
}

.nav a {
    font-size: 3.6rem;
    line-height: 4rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color .15s;
}

.nav a:hover {
    color: #9ca3af;
}

.nav .donate {
    color: #ffce48;
}

.nav .donate:hover {
    color: #cca53a;
}

/* MAIN */

main {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 76.8rem;
    margin-top: 9rem;
    gap: 3.2rem;
}

.hero h1 {
    position: relative;
    margin: 0;
    font-size: 8rem;
    line-height: 1.375;
    font-weight: 700;
    text-transform: uppercase;
}

.hero p {
    margin: 0;
    font-size: 3.6rem;
    line-height: 4rem;
    font-weight: 400;
}

/* PROJECTS */

.projects {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.2rem;
}

.project {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 33.333333%;

    gap: 1.6rem;
    width: 100%;
    height: 100%;
    max-height: 24rem;

    padding: 3.2rem;

    border: 2px solid rgba(245,245,245,.1);
    border-radius: 2.4rem;

    background: rgba(10,10,10,.1);
    color: #f5f5f5;
}

.project-info {
    display: flex;
    gap: 1.6rem;
}

.project-info > img {
    display: block;
    width: 8rem;
    min-width: 8rem;
    height: 8rem;

    object-fit: fill;
    border-radius: 9999px;
}

.project-info > div {
    display: flex;
    flex-direction: column;
}

.project h2 {
    margin: 0;
    font-size: 3rem;
    line-height: 3.6rem;
    font-weight: 700;
}

.project p {
    margin: 0;
    font-size: 2.4rem;
    line-height: 3.2rem;
    font-weight: 400;
    opacity: .75;
}

/* SOCIAL */

.links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social {
    display: flex;
    align-items: center;

    border: 2px solid rgba(255,255,255,.2);
    border-radius: 9999px;

    padding-right: 1.6rem;
    min-height: 4rem;

    font-size: 1.8rem;
    font-weight: 600;

    transition: border-color .15s;
}

.social:hover {
    border-color: #bbc0fa;
}

.icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 4rem;
    height: 4rem;

    margin-left: -.4rem;

    border: 1px solid rgba(255,255,255,.4);
    border-radius: 9999px;

    background: #eff6ff;
    color: #0a0a0a;

    font-size: 2.4rem;
}

.avatars {
    display: flex;
    margin-left: 1rem;
    margin-right: .8rem;
}

.avatar {
    position: relative;
    margin-left: -.3rem;
}

.avatar:first-child {
    margin-left: 0;
}

.avatar img {
    display: block;
    width: 3.2rem;
    height: 3.2rem;

    object-fit: fill;
    border-radius: 9999px;
}

.status {
    position: absolute;
    right: 0;
    bottom: 0;

    width: .8rem;
    height: .8rem;

    border-radius: 9999px;
}

.status.online {
    background: #76f59e;
}

.status.idle {
    background: #fee96d;
}

.status.dnd {
    background: #f05b5d;
}

.status.offline {
    background: #777;
}

/* TABLET */

@media (max-width: 1023px) {
    .hero {
        margin-top: 3rem;
        max-width: 1024px;
    }

    .hero h1 {
        font-size: 6rem;
    }

    .hero p {
        font-size: 3.6rem;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .header,
    main {
        padding: 3rem;
    }

    .header {
        gap: 3rem;
    }

    .logo {
        font-size: 4rem;
    }

    .nav {
        max-width: none;
        width: auto;
        gap: 2rem;
    }

    .nav a {
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .hero {
        margin-top: 3rem;
        gap: 1rem;
    }

    .hero h1 {
        font-size: 4.5rem;
    }

    .hero p {
        font-size: 3rem;
        line-height: 3.6rem;
    }

    .projects {
        flex-direction: column;
    }

    .project {
        flex-basis: auto;
        max-height: none;
    }

    .project p {
        font-size: 2rem;
        line-height: 2.6rem;
    }

    .links {
        gap: 1rem;
    }
}