#skocko {
    --socket: clamp(22px, 8vmin, 160px);
    --bigger-gap: clamp(4px, 3vmin, 60px);
    --gap: clamp(3px, 1.5vmin, 12px);

    display: grid;
    grid-template-areas:
        "guesses hints"
        "code    code"
        "palette palette";
    grid-template-columns: auto auto;
    gap: var(--gap);
    max-height: 100%;
    overflow-y: auto;
}

#guesses,
#hints {
    display: grid;
    gap: var(--gap);
}

#guesses {
    grid-area: guesses;
}

#hints {
    grid-area: hints;
}

.guess,
.hint {
    display: flex;
    gap: var(--gap);
}

.socket,
.option {
    width: var(--socket);
    height: var(--socket);
    background: #fff;
    border: 1px solid #aaa;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background .2s, box-shadow .2s;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .025);
}

.hint .socket,
.hit,
.almost {
    border-radius: 50%;
}

.hit {
    background: #ff0000;
}

.almost {
    background: #ffff00;
}

.code {
    grid-area: code;
    display: flex;
    justify-content: center;
    gap: var(--gap);
    padding-top: var(--bigger-gap);
}

.secret {
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #999;
    background: #fff;
    font-size: calc(var(--socket) * 0.5);
}

.palette {
    grid-area: palette;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    padding-top: var(--bigger-gap);
}

#delete {
    font-family: 'Anton', sans-serif;
    font-size: calc(var(--socket) * 0.4);
    line-height: 1;
    width: var(--socket);
    height: var(--socket);
    background: #fff;
    border: 1px solid #aaa;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: background .2s, box-shadow .2s;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .025);
}

.green {
    background: #8ebe0048 url('../img/0.png?v=0.1') center/contain no-repeat;
}

.red {
    background: #E22D2D48 url('../img/1.png?v=0.1') center/contain no-repeat;
}

.blue {
    background: #008C9E48 url('../img/2.png?v=0.1') center/contain no-repeat;
}

.yellow {
    background: #F8CA0048 url('../img/3.png?v=0.1') center/contain no-repeat;
}

.purple {
    background: #99339448 url('../img/4.png?v=0.1') center/contain no-repeat;
}

.brown {
    background: #BABABA48 url('../img/5.png?v=0.1') center/contain no-repeat;
}

@media(max-width:420px) {
    .topbar {
        flex-wrap: wrap;
    }
}