style.css

body {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;  
    
    background: snow;
    font-family: 'Passion One', cursive;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    user-select: none; 
    touch-action: manipulation;
}

section {
    overflow: hidden;
}

section.pads {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-gap: .1em;

    font-size: 5vmin;

    width: 100vmin;
    height: 100vmin;
}



section.pads .pad { 
    position: relative;
    background: silver;
    color: snow;
    transition: .3s ease-in;

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

section.pads div.pad:active,
section.pads div.pad.active {
    
    background: tomato;

    transition: .1s ease-out;
} 

section.machine {
    background: indigo;
    align-self: stretch;
    display: none;
}