/* @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap');

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");


:root {
    --almost-black: #1b1b1b;
    --light-accent: #a76eff;
}


body {
    padding: 0;
    margin: 0;

    color: white;
    /* background: linear-gradient(0deg, #0e003b, #07001c);
    background-attachment: fixed; */
    background-color: black;
}

.body {
    margin-inline: auto;
    padding-inline: 1rem;
    max-width: 120ch;
}

header,
main {
    font-family: "Merriweather", sans-serif;
    font-optical-sizing: auto;
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
}

footer {
    height: 10ch;
}


p {
    margin: 0.5rem;
    padding: 1rem;
}

hr {
    border: none;
    border-top: 0.4rem dotted #afafaf;
}


.body > header > nav {
    margin-block: 1rem;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    background: linear-gradient(90deg, transparent, var(--almost-black));

    border: 1px solid #353535;
    border-radius: 4rem 1rem 1rem 4rem;
}

.nav-buttons {
    padding: 0.5rem;
    
    display: inline-flex;

    font-size: 1.2rem;
}

.nav-buttons > a[href] {
    margin-inline: 0.1rem;
    padding: 0.5rem 0.8rem;

    flex-grow: 1;

    text-align: center;
    color: #ffffffb0;

    border-radius: 0.2rem;
}

.nav-buttons > a[href]:hover {
    background-color: #ffffff20;
    color: white;
}


img.logo {
    margin: 0.5rem;

    display: inline-block;

    height: 2rem;
    background-color: white;
    border-radius: 4rem;
    border: 0.15rem solid white
}


.highlighted {
    margin: 0.5rem;

    border: 0.3rem dotted var(--light-accent);
    border-radius: 0.5rem;
}


.youtube-video {
    margin-inline: auto;

    position: relative;

    width: 100%;
    aspect-ratio: 16/9;
    max-width: 100%;
}

.youtube-video iframe {
    width: 100%;
    height: 100%;

    border-radius: 1rem;
}


.communities {
    display: grid;
    /* grid-template-columns: 1fr; */
}

.community {
    margin: 0.5rem;

    background-color: var(--almost-black);

    border: 1px solid #353535;
    border-radius: 0.5rem;

    color: white;
    text-decoration: none;
}

.community:hover {
    border-color: #6b6b6b;
}

.community header {
    --clr-stripe-a: #212121;
    --clr-stripe-b: var(--almost-black);

    margin-bottom: 1rem;
    padding: 1rem;

    background-color: var(--almost-black);
    background-image: linear-gradient(
        135deg,
        var(--clr-stripe-a) 25%,
        var(--clr-stripe-b) 25%, var(--clr-stripe-b) 50%,
        var(--clr-stripe-a) 50%, var(--clr-stripe-a) 75%,
        var(--clr-stripe-b) 75%, var(--clr-stripe-b) 100%
    );
    background-size: 2rem 2rem;

    border-radius: 0.5rem;

    text-shadow: 0rem 0.2rem 0.4rem rgb(0 0 0 / 80%);
}

.community__platform {
    margin-right: 0.75ch;

    display: inline-block;

    font-family: "Winky Sans", sans-serif;
    font-size: 1.2rem;
    color: grey;
}
.community__title {
    display: inline-block;
    font-family: "Winky Sans", sans-serif;
    font-optical-sizing: auto;
    font-size: 1.2rem;
    font-weight: normal;
    font-style: normal;
}

.community__location {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-size: 0.8rem;
    font-weight: lighter;
    font-style: normal;

    color: #b17fff;
}