*
{
font-size: 3vh;
}
#screen
{
width: min(90vw,90vh * 3 / 4);
height: min(90vh,90vw * 4 / 3 );

padding: 0px;
margin: 0px;
}

#screen > div
{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
display:flex;
flex-wrap: wrap;
background-size:contain;
background-repeat:no-repeat;
border: 10px double goldenrod;
}

input[type="checkbox"] 
{
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

#screen div input[type="checkbox"]
{
width: 25%;
height: 25%;
display:inline-block;
}

#screen div input[type="checkbox"]:checked
{
  border:2px solid #dddd;
  background-color: #c903;
}

#result
{
    display:block;
    background-color: khaki;
    padding: 0px;
    margin: 0px;
}

#progress
{
    display: none;
    background-color:gainsboro;
    padding: 0px;
    margin: 0px;
}

.pointX:not(:checked) ~ #result
{
    display: none;
}

.pointX:not(:checked) ~ #progress
{
    display: block;
}

.point:checked ~ #result
{
    display: none;
}

.point:checked ~ #progress
{
    display: block;
}