python – Windows Like Security Screen for Linux (mockup)

Ubuntu and other Linux variants do not have a Windows like CTRL + ALT + DEL screen, so I figured I’ll make one myself. My plan is to make a HTML version, render that with the PyQt Web engine, and then when the keys CTRL + ALT + DEL are pressed the program launches.

Preview it:
https://codepen.io/aangeletakis/pen/YzprZxX?editors=1100

How could I improve on it before I start on the application portion?

<style>
:root{
  --interface-width:10%;
  --cancel-btn-border-width: 2px;
  --ui-text-color:white;
  outline: none;
  user-select: none;
}
body {
  background: #005A9E;
  padding: 0px;
}

.userInterface {color:var(--ui-text-color);}
.center {
  width: var(--interface-width);
  transform: translate(-55%, -65%);
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: auto;
}
.optionsList {
  color:var(--ui-text-color);
  list-style:none;
  
}
.optionsList li{margin-left: 0; padding-left: 0;}
.optionsList li button{
  border:none;
  color: inherit;
  background:none;
  outline: none;
  --optionPadding:25px;
  padding-top: var(--optionPadding);
  padding-bottem: var(--optionPadding);
  cursor: pointer;
}
.optionsList li button:hover{opacity: 0.75;}
.cancelBtn {
  transform:   translate(calc(50%  - var(--interface-width) - 3%), 0%);
  border:      var(--cancel-btn-border-width) solid transparent;
  background:  #337BB1;
  color:var(--ui-text-color);
  margin-top:30px;
  --cancel-btn-lr-padding: 40px;
  padding-right: var(--cancel-btn-lr-padding);
  padding-left:  var(--cancel-btn-lr-padding);
  padding-top: 7px;
  padding-bottom: 7px;
  outline: 0;
}
.cancelBtn:hover {
  border: var(--cancel-btn-border-width) solid lightblue;
}
</style>
<body>
  <div class="userInterface center">
    <ul class="optionsList">
      <li><button>Lock</button></li>
      <li><button>Switch user</button></li>
      <li><button>Sign out</button></li>
      <li><button>System manager</button></li>
    </ul>
    <button class="cancelBtn">Cancel</button>
  <div>
</body>