:root {
    --boxsize: 640px;
    --pixelsize: 10px;
}

body {
    background-color: rgb(35, 35, 35);
    color: white;
}

header {
    text-align: center;
    font-size: 4vw;
}

#lable {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    font-size: 250%;
    margin-top: 15%;
}

#box {
    min-width: var(--boxsize);
    max-width: var(--boxsize);
    min-height: var(--boxsize);
    max-height: var(--boxsize);
    background-color: black;
    margin: auto;
    border: 16px solid gray;
    position: relative;

}

.pixel {
    min-width: var(--pixelsize);
    max-width: var(--pixelsize);
    min-height: var(--pixelsize);
    max-height: var(--pixelsize);
    position: absolute;
}


#typecontainer {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: var(--boxsize);
    margin: auto;
}

.TypeButton {
    padding: 10px 20px;
    text-align: center;
    background-color: rgb(70, 70, 70);
    border: 8px solid rgb(30,30,30);
    color: white
}

.TypeButton:hover {
    border: 8px solid rgb(50,50,50);
}

#settings {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: var(--boxsize);
    margin: auto;
}

#curselect {
    text-align: center;
    font-size: 2vw;
}