:root {
    --pico-font-family-sans-serif: Exo, sans-serif;
    --pico-font-weight: 450;
}

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, .gold {
    color: var(--pico-color-amber-200);
}

.template {
    display: none;
}

a.group, a.running {
    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 calc(100vw - 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;
    grid-template-rows: 1fr min-content;
    align-items: center;
    padding: 4rem;

    .big-logo {
        font-size: 8rem;
    }

    h1 {
        font-size: 4rem;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.header-title {
  font-weight: 900;
}

i.i {
    margin-right: .5em;
}
i.hl, .me {
    color: var(--pico-primary);
}

footer {
    text-align: center;
    font-weight: 350;
}

td.c, th.c {
    text-align: center;

    input {
        margin: 0;
    }
}

table select {
    margin-bottom: 0;
}

.podium {
    > :first-child {
        font-weight: 900;
        font-size: 1.25em;
        &::marker {
            color: var(--pico-color-amber-200);
        }
    }
    > :nth-child(2) {
        font-weight: 800;
        font-size: 1.1em;
        &::marker {
            color: var(--pico-color-grey-300);
        }
    }
    > :nth-child(3) {
        font-weight: 600;
        font-size: 1.1em;
        &::marker {
            color: var(--pico-color-sand-300);
        }
    }
    .score {
        margin-left: .5em;
    }
}


.score {
    font-weight: 900;
    color: var(--pico-color-zinc-500);
}
.correct {
    .score, i {
    color: var(--pico-color-lime-200);}
}
.wrong {
    .score, i {
    color: var(--pico-color-red-500);}
}

table.results, table.musics {
    white-space: nowrap;
}
.sc i {
    margin-right: .5em;
}

@media (width < 576px) {
    [role="group"] {
        display: grid;
        & > :first-child {
            border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0 !important;
        }
        & > :not(:first-child) {
            margin-left: 0 !important;
            margin-top: calc(var(--pico-border-width) * -1);
        }
        & > :last-child {
            border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius) !important;
        }
    }
}