.key { min-height: 3.4375rem; /*3.4375*16 = 55px*/ /* rem is a value relative to the default font size of the teg 1rem is 16px in our case */ background-color: black; color: white; padding: 0.5rem; /*spacing inside the button*/ margin: 0.2rem; /*spacing outside the button*/ border-radius: 0.2rem; /*rounded corners*/ font-size: 1.5rem; cursor: pointer; flex: 1; position: relative; } .key.active { animation: pulse 1s; /* position (4 lines) : */ position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; /* to compensate .key style: */ padding: -0.5rem; margin: -0.2rem; /* to center content vertically and horizontally: */ display: flex; align-items: center; justify-content: center; transform-origin: center; } /* held: while key is physically pressed */ .key.held { background-color: red; } /* demo icon toggle */ .demoIcon { cursor: pointer; user-select: none; font-size: 1.25rem; color: gray; } .demoIcon.active { color: red; } @keyframes pulse { 0% { background-color: black; transform: scale(100%); } 30% { transform: scale(130%); } 80% { transform: scale(130%); } 100% { background-color: red; transform: scale(100%); } } .row { display: flex; /* flex-direction: row; - default value that's why or divs arranged in a row. Flex is a style for containers to align/justify elements inside them in different ways. */ } .key.Tab { flex: 1.3; } .row-1 .key { min-height: 1rem; /* rewrite min-height from .key */ font-size: 0.7rem; } /* removed special Shift highlight */ .langSwitcher { display: flex; } .topPanel { display: flex; justify-content: center; /* center horizontally */ align-items: center; /* vertical align */ gap: 0.5rem; margin-bottom: 1rem; } /* demo toggle styled to match .lang buttons */ .demoToggle { width: 2rem; height: 2rem; border-radius: 1rem; cursor: pointer; display: flex; justify-content: center; align-items: center; color: black; background-color: transparent; } .demoToggle.active { background-color: red; color: white; } .demoToggle:hover { opacity: 0.7; } .lang { width: 2rem; height: 2rem; border-radius: 1rem; cursor: pointer; display: flex; /* flex-direction: row; -- by default */ justify-content: center; /* position of element related to main flex-direction (row) -- horizontal alignment */ align-items: center; /* position of element related to additional flex-direction (column) -- vertical alignment */ } .lang:hover { opacity: 0.7; } .langSwitcher .active { background-color: red; color: white; } /* specified keys */ /* 1st row */ .key.Backspace { flex: 1.8; } /* 2nd row */ .key.Tab { flex: 1.8; } /* 3d row */ .key.CapsLock { flex: 2; } .key.Enter { flex: 1.9; } /* 4th row */ .key.ShiftLeft { flex: 2.5; } .key.ShiftRight { flex: 1.5; } /* 5th row */ .key.Space { flex: 8; } /* main page styling */ body { display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 100vh; margin: 0; /* by default body has margin 8px, we don't need it */ padding-left: 8px; padding-right: 8px; } header { text-align: center; } main { width: 100%; } footer { text-align: center; } a { text-decoration: none; /* removed underline */ } a:visited { color: blue; } .socialLinks a { display: inline-block; margin: 0.5rem; }