:root{
    --size: 5;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    max-width: 900px;
    min-width: 200px;
    margin: auto;
    width: 100%;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
}

header details > * {
    display: inline;
}

header details summary{
    cursor: pointer;
    margin-right: 0.5em;
}

#main {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(var(--size), 1fr);
    @media screen and (max-width: 500px){
            grid-template-columns: repeat(1, 1fr);
    }
}


#main span{
    background-color: rgba(0,0,0, 0.1);
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2px;
    position: relative;
    overflow: hidden;
}

#main span::before {
    content: "✅";
    font-size: 15em;
    z-index: -1;
    position: absolute;
    opacity: 0%;
    height: 100%;
    display: flex;
    align-items: center;
}

#main span[contenteditable=true]{
    border: 1px solid blue;
}

#main span[contenteditable=false]{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

#main span[checked][contenteditable=false]:hover::before,
#main span[checked][contenteditable=false]::before {
    opacity: 20%;
}
#main span[contenteditable=false]:hover::before{
    opacity: 10%;
}