@font-face {
    font-family: "Splatoon";
    src: url("Splatoon2.otf");
}

:root {
    --backgroud: #181818;
    --backgroud-ligter: #333333;
    --text: white;

    --bord-rad: 2em;

    --matchup-aa: #2cb721;
    --matchup-a: color-mix(in oklch, var(--matchup-aa), var(--matchup-n));
    --matchup-n: var(--backgroud);
    --matchup-d: color-mix(in oklch, var(--matchup-dd), var(--matchup-n));
    --matchup-dd: #c12d74;
}

html {
    font-family: "Splatoon", sans-serif;
    font-size: 10pt;

    color: var(--text);
    background: url("background.png");
}

table {
    width: max-content;
    border-spacing: .5em;
    line-height: 0;

    box-sizing: border-box;
    margin: .5em;
    border-radius: var(--bord-rad);
    background: var(--backgroud);
}

thead {
    top: .2em;
    position: sticky;
}
th {
    left: .2em;
    position: sticky;
}
thead td, th {
    width: 2em;
    border-radius: var(--bord-rad);
    background: var(--backgroud-ligter);
}
td {
    text-align: center;
    font-size: 20pt;
    font-family: "Splatoon", sans-serif;

    border-radius: var(--bord-rad);
    background: none;
}


img {
    width: 100%;
    object-fit: contain;
}
input[type=tel] {
    width: 100%;
    height: 100%;

    border: none;

    text-align: center;
    font-size: 20pt;
    font-family: "Splatoon", sans-serif;

    color: var(--text);
    background: none;
}