* {
    box-sizing: border-box
}

body {
    font-family: sans-serif;
    margin: 20px 10px;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
h1,
h2 {
    text-align: center;
}

.small-text {
    font-size: .9rem;
}

.control {
    border-color: #ccc;
    max-width: 970px;
    padding: 10px;
    border-radius: 10px;
    margin: 12px auto;
}

input[type="radio"]:checked + label {
    font-weight: bold;
}

label {
    display: inline-block;
    margin: 0 2px;
}
legend {display: inline-block;
padding: 0 7px;}
.checkElem {
    outline: 3px dashed red;
}
.test {
    border: 2px solid #ccc;
    padding: 10px;
    margin: 15px 0;}
.grid {
    display: grid;
    max-width: 970px;
    margin: 20px auto;
}
[class^="grid-item"] {
    padding: 15px;
}
.grid-item1,
.grid-item10 {
    background-color: #f90;
}
.grid-item4, .grid-item9 {background-color: #4d96eb;}
.grid-item3,
.grid-item8,
.grid-item10 {
    background-color: #ff0;
}

.grid-item5 {
    background-color: #ff9ff8;
}


.grid-item7 {
    background-color: #cdb1f8;
}

.grid-item2,
.grid-item11 {
    background-color: #1dbf61;
}

.grid-item6 {
    background-color: #8efaf6;
}

.grid-item12 {
    background-color: #82ffc0;
}