html {
    margin: 0;
    background-color: #333;
    color: #ccc;
    height: 100%;
}

body {
    padding: 1em;
    margin: 0 auto;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: 100%;
}

.card {
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: .5em;
    min-width: 300px;
    font-size: 1.2em;
}
button {
    border: 2px solid #ccc;
    background-color: #eee;
    border-radius: 3px;
    padding: .5em;
    font-family: inherit;
    font-size: 1em;
    cursor: pointer;
}
button:hover {
    border: 2px solid #bbb;
    background-color: #ddd;
}

.info {
    position: relative;
    border: 2px solid #888;
    border-radius: 3px;
    padding: .5em;
}

.info::after {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 0 50%;
    padding: 0 .25em;
    font-weight: bold;
    color: #000;
}

.group1 {
    border-color: #ff3366;
}

.group2 {
    border-color: #66cc66;
}

.group3 {
    border-color: #3366ff;

}

.group4 {
    border-color: #ffff66;
}

.group5 {
    border-color: #8066ff;
}

.group6 {
    border-color: #ff8066;
}

.group7 {
    border-color: #ff66ff;
}

.group8 {
    border-color: #66ffff;
}

.group9 {
    border-color: #6680ff;

}

.group1::after {
    content: "1";
    background-color: #ff3366;
}

.group2::after {
    content: "2";
    background-color: #66cc66;
}

.group3::after {
    content: "3";
    background-color: #3366ff;
}

.group4::after {
    content: "4";
    background-color: #ffff66;
}

.group5::after {
    content: "5";
    background-color: #8066ff;
}

.group6::after {
    content: "6";
    background-color: #ff8066;
}

.group7::after {
    content: "7";
    background-color: #ff66ff;
}

.group8::after {
    content: "8";
    background-color: #66ffff;
}

.group9::after {
    content: "9";
    background-color: #6680ff;
}