img.logo {
    border-radius: var(--pico-border-radius);
}

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

form a[role="button"] {
    width: 100%;
}

i.owner {
    color: var(--pico-color-amber-200);
}

.template {
    display: none;
}

a.group {
    text-decoration: none;
}

.group-owner, .group i {
    margin-left: .5em;
}

.group-owner {
    color: var(--pico-color-zinc-500);
}

.music-count {
    font-weight: 900;
    color: var(--pico-color-zinc-500);
    margin-left: .5em;
}

article.message {
    &::before {
        margin-right: .5em;
        font-family: remixicon;
    }
    &.debug::before {
        content: "\eb06";
        color: var(--pico-color-zinc-500);
    }
    &.info::before {
        content: "\ee58";
        color: var(--pico-color-indigo-600);
    }
    &.success::before {
        content: "\eb80";
        color: var(--pico-color-green-500);
    }
    &.warning::before {
        content: "\eca0";
        color: var(--pico-color-amber-200);
    }
    &.error::before {
        content: "\eca0";
        color: var(--pico-color-red-500);
    }
}

.form-error::before  {
    margin-right: .5em;
    font-family: remixicon;
    content: "\eca0";
}

#hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle 50vh at 4rem 50%,
        var(--pico-primary-background),
        color-mix(in hsl, var(--pico-primary-background), var(--pico-background-color) 10%) 20%,
        color-mix(in hsl, var(--pico-primary-background), var(--pico-background-color) 30%) 40%,
        color-mix(in hsl, var(--pico-primary-background) 30%, var(--pico-background-color)) 60%,
        color-mix(in hsl, var(--pico-primary-background) 10%, var(--pico-background-color)) 80%,
        var(--pico-background-color));
    display: grid;
    align-items: center;
    padding: 4rem;

    .big-logo {
        font-size: 8rem;
    }
    h1 {
        font-size: 4rem;
        font-weight: 900;
    }
}