:root {
    --size: 5;
    --blocksize: calc(min(100vh - 50px, 100vw) / var(--size) - 26px);
    --textsize: calc(var(--blocksize) / 15);
}

body {
    height: 100%;
    overflow: hidden;
}

.outer {
    margin: auto;
    width:fit-content;
}

#grid {
    display: grid;
    grid-template-columns: repeat(var(--size), auto);
}

.button {
    visibility: hidden;
    position: absolute;
}

.text {
    display: block;
    width: var(--blocksize);
    height: var(--blocksize);
    margin: 5px;
    border-width: 3px;
    text-align: center;
    background-color: pink;
    border-color: gray;
    border-radius: 5px;
    border-style: solid;
    font-size: var(--textsize);
}

input {
    /*margin-right: -5px;*/
    border-radius: 5px;
    border-width: 2px;
    /*border-right-width: 0px;*/
    padding-right: 0px;
    margin-bottom: 5px;
}

button {
    /*margin-left: -5px;*/
    border-radius: 5px;
    border-width: 2px;
    /*border-left-width: 0px;*/
    padding-left: 0px;
    margin-bottom: 5px;
}

.hidden {
    visibility: hidden;
    display: none;
}



#entry00:checked ~ #label00 {
    background-color: green;
}


#entry10:checked ~ #label10 {
    background-color: green;
}


#entry20:checked ~ #label20 {
    background-color: green;
}


#entry30:checked ~ #label30 {
    background-color: green;
}


#entry40:checked ~ #label40 {
    background-color: green;
}


#entry01:checked ~ #label01 {
    background-color: green;
}


#entry11:checked ~ #label11 {
    background-color: green;
}


#entry21:checked ~ #label21 {
    background-color: green;
}


#entry31:checked ~ #label31 {
    background-color: green;
}


#entry41:checked ~ #label41 {
    background-color: green;
}


#entry02:checked ~ #label02 {
    background-color: green;
}


#entry12:checked ~ #label12 {
    background-color: green;
}


#entry22:checked ~ #label22 {
    background-color: green;
}


#entry32:checked ~ #label32 {
    background-color: green;
}


#entry42:checked ~ #label42 {
    background-color: green;
}


#entry03:checked ~ #label03 {
    background-color: green;
}


#entry13:checked ~ #label13 {
    background-color: green;
}


#entry23:checked ~ #label23 {
    background-color: green;
}


#entry33:checked ~ #label33 {
    background-color: green;
}


#entry43:checked ~ #label43 {
    background-color: green;
}


#entry04:checked ~ #label04 {
    background-color: green;
}


#entry14:checked ~ #label14 {
    background-color: green;
}


#entry24:checked ~ #label24 {
    background-color: green;
}


#entry34:checked ~ #label34 {
    background-color: green;
}


#entry44:checked ~ #label44 {
    background-color: green;
}