common.css

@font-face {
    font-family: font;
    src: url(fontWoff2);
    unicode-range: U+F???;
}

:root {
    --background: #FDFDFD;
    --color:      #343A40;
    /* https://flatuicolors.com */
    --red:        #FC5C65BB;
    --orange:     #FD9644BB;
    --yellow:     #FED330BB;
    --green:      #26DE81BB;
    --blue:       #45AAF2BB;
    --purple:     #8C7AE6BB;
}

* {
    box-sizing: border-box;
    margin: 0;
}

a { color: #0366d6 }

a:not(:hover) { text-decoration: none }
a:not([href]) { cursor: auto }

blockquote {
    margin-left: 1rem;
    white-space: pre;
}

body {
    background: var(--background);
    color: var(--color);
    font: 16px font, system-ui, -apple-system, sans-serif;
}

caption { caption-side: bottom }

dd { margin: 1rem }
dt { font-weight: bold }

details .grid { padding-top: 1rem }

h1 { font-size: 1.75rem }

h1 a {
    float: right;
    margin-left: 1rem;
}

header {
    background: var(--color);
    position: sticky;
    top: 0;
    z-index: 9;
}

header a {
    color: var(--background);
    display: inline-block;
    font-size: 1.5rem;
    height: 2.75rem;
    line-height: 2.75rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 2.75rem;
}

header a:hover,
header a:not([href]) {
    background: var(--background);
    color: var(--color);
}

header img {
    border-radius: 50%;
    bottom: 0;
    height: 1.75rem;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 1.75rem;
}

header div { flex: 1 }
header nav { display: flex }

header nav, main {
    margin: auto;
    max-width: 1000px;
    width: 100%;
}

main {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    padding: 1rem;
}

summary {
    background: var(--color);
    border: 1px solid var(--color);
    color: var(--background);
    cursor: pointer;
    display: block !important;
    line-height: 2rem;
    padding: 0 .5rem;
}

summary:before {
    content: '';
    margin-right: .5rem;
}

summary:focus { outline: none }

summary:hover {
    background: inherit !important;
    color: inherit !important;
}

details[open] summary:before { content: '' }

summary::-webkit-details-marker, #symbols { display: none }

sup {
    font-size: .75em;
    line-height: 0;
}

table {
    border-spacing: 0;
    font-variant: tabular-nums;
}

tbody > :nth-child(even) { background: #eee }

tbody th { text-align: right }

tbody tr > :first-child { border-left: 1px solid var(--color) }
tbody tr > :last-child { border-right: 1px solid var(--color) }

td, th {
    border-bottom: 1px solid var(--color);
    line-height: 2rem;
    padding: 0 .5rem;
    text-align: left;
}

td img {
    border-radius: 50%;
    height: 1.5rem;
    margin-right: .5rem;
    vertical-align: middle;
    width: 1.5rem !important;
}

thead th {
    background: var(--background);
    border-bottom-width: 2px;
}

.bold { font-weight: bold }

.btn {
    border: solid 1px var(--color);
    color: var(--color);
    display: inline-block;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    padding: .5rem;
    user-select: none;
    white-space: nowrap;
}

.btn:hover {
    background: none;
    color: var(--color);
    cursor: pointer;
    text-decoration: none;
}

.card {
    align-items: end;
    border: solid 2px var(--color);
    color: #343a40;
    cursor: pointer;
    display: grid;
    grid-gap: .5rem;
    grid-template-columns: 1fr min-content;
    padding: .5rem;
    text-decoration: none;
    white-space: nowrap;
}

.card:hover {
    background: none !important;
    color: var(--color);
}

.card h2 {
    font-size: 1.25rem;
    grid-column: span 2;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card p { white-space: normal }

.color:nth-of-type(6n+1), .red    { background: var(--red)    }
.color:nth-of-type(6n+2), .orange { background: var(--orange) }
.color:nth-of-type(6n+3), .yellow { background: var(--yellow) }
.color:nth-of-type(6n+4), .green  { background: var(--green)  }
.color:nth-of-type(6n+5), .blue   { background: var(--blue)   }
.color:nth-of-type(6n+6), .purple { background: var(--purple) }

.grid {
    align-items: center;
    display: grid;
    grid-gap: 1rem;
}

/* TODO Need a dark version */
.me { background: var(--blue) !important }

.nav > * {
    color: inherit;
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    padding: 0 .5rem;
    text-decoration: none;
    white-space: nowrap;
}

.nav > .on,
.nav > :hover,
.nav > :not([href]) {
    background: var(--color);
    color: var(--background);
}

.pie {
    grid-column: span 2;
    grid-gap: 1rem !important;
    grid-template-columns: 2fr 1fr;
}

.pie h2 { text-align: center }

.pie li {
    align-items: center;
    display: grid;
    font-weight: bold;
    padding: .5rem;
    white-space: nowrap;
}

.pie path:nth-child(1) { fill: var(--red)    }
.pie path:nth-child(2) { fill: var(--orange) }
.pie path:nth-child(3) { fill: var(--yellow) }
.pie path:nth-child(4) { fill: var(--green)  }
.pie path:nth-child(5) { fill: var(--blue)   }
.pie path:nth-child(6) { fill: var(--purple) }

.pie span {
    display: block;
    font-size: .75rem;
    font-weight: normal;
}

.pie svg {
    align-self: center;
    transform: rotate(-90deg);
}

.pie ul {
    display: grid;
    list-style: none;
    padding: 0;
}

.right { text-align: right }

.scores a { color: var(--color) }

.scores td { white-space: nowrap }

.scores tr :nth-child(2) {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.span { grid-column: 1 / -1 }

.sticky th {
    position: sticky;
    top: 2.75rem;
}

.text-red { color: var(--red) }

#alert {
    background: var(--yellow);
    border: solid 1px var(--color);
    display: grid;
    grid-template-columns: min-content 1fr;
    padding: 1rem;
}

#alert:before { content: '' }

#chars {
    border-bottom: 1px solid var(--color);
    font-weight: bold;
    line-height: 2rem;
}

#header                { grid-template-columns: 1fr min-content min-content min-content }
#ideas, #index         { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
#scores > :first-child { grid-template-columns: 1fr min-content }
#trophies              { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) }

#hole thead a { float: right }

#hole .scores td { border-left: 0 }

#index > .grid {
    border: 2px solid var(--color);
    padding: 1rem;
}

#index .nav {
    display: flex;
    justify-content: flex-end;
}

#matrix {
    display: grid;
    grid-gap: .25rem;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
}

#matrix a {
    align-items: center;
    border: 1px solid var(--color);
    color: var(--color);
    display: flex;
    padding: .25rem;
    text-decoration: none;
}

#matrix input,
#matrix input.bash:not(:checked)       ~ .bash,
#matrix input.brainfuck:not(:checked)  ~ .brainfuck,
#matrix input.c:not(:checked)          ~ .c,
#matrix input.haskell:not(:checked)    ~ .haskell,
#matrix input.j:not(:checked)          ~ .j,
#matrix input.javascript:not(:checked) ~ .javascript,
#matrix input.julia:not(:checked)      ~ .julia,
#matrix input.lisp:not(:checked)       ~ .lisp,
#matrix input.lua:not(:checked)        ~ .lua,
#matrix input.nim:not(:checked)        ~ .nim,
#matrix input.perl:not(:checked)       ~ .perl,
#matrix input.php:not(:checked)        ~ .php,
#matrix input.python:not(:checked)     ~ .python,
#matrix input.raku:not(:checked)       ~ .raku,
#matrix input.ruby:not(:checked)       ~ .ruby,
#matrix input.rust:not(:checked)       ~ .rust,
#matrix input.swift:not(:checked)      ~ .swift { display: none }

#matrix input:checked + label,
#matrix label:hover {
    background: var(--color);
    color: var(--background);
}

#matrix label {
    cursor: pointer;
    padding: .25rem;
    text-align: center;
}

#matrix a:hover { background: var(--background) }

#matrix h3 { padding: .25rem 0 }

#matrix svg {
    height: 1.5rem;
    margin-right: .5rem;
    width: 1.5rem;
}

#me {
    position: relative;
    top: -50vh;
}

#profile {
    grid-row-gap: 0;
    grid-template-columns: min-content 1fr;
}

#profile img {
    border-radius: 2rem;
    grid-row: span 4;
    height: 6rem;
    width: 6rem;
}

#recent, #scores { max-width: 40rem }

#recent tr :nth-child(1),
#recent tr :nth-child(2) {
    max-width: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 50%;
}

#run > span { margin: 1rem }

#stats { grid-template-columns: repeat(4, 1fr) }

#stats div {
    border: 2px solid var(--color);
    display: grid;
    grid-gap: .5rem;
    padding: 1rem;
}

#wrapper {
    display: grid;
    grid-template-columns: 1fr 15rem;
    grid-template-rows: min-content 1fr;
}

#wrapper .scores { grid-row: span 2 }

@media (max-width: 34rem) {
    .wide { display: none }

    #about  td:nth-child(2),
    #scores td:nth-child(4) {
        border-right: 1px solid var(--color);
    }

    #stats { grid-template-columns: 1fr 1fr }

    #trophies, #wrapper { grid-template-columns: 1fr }
}

/* TODO https://github.com/JRaspass/code-golf/issues/119

@media (prefers-color-scheme: dark) {
    :root {
        --background: #343a40;
        --color: #fdfdfd;
    }

    a { color: #45aaf2 }

    tbody > :nth-child(even) { background: #444a50 }
}*/