html,
body{
    margin: 0;
    padding: 0;
    height: 100dvh;
    width: 100%;
    box-sizing: border-box;
    display: flex;
}

*,
*::before,
*::after{
    box-sizing: inherit;
}

body{
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

label{
    font-family:cursive;
    font-size:x-large;
    font-weight: 900;
}

input{
    accent-color: orange;
    width: 100%;
}

#container{
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    height: 80dvh;
    flex-direction: row;
    aspect-ratio: 1/1;
}

.pixel-grid{
    flex:1;
    display: flex;
    flex-direction: column;
}

.cell{
    outline:1px solid rgba(0, 0, 0, 0.1);
    flex: 1;
    pointer-events: all;
}

.cell.active{
    background-color:black;
}

@media screen and (max-width: 600px){
    #container{
    height:80dvw;}
}