* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.badeen-display-regular {
  font-family: "Badeen Display", system-ui;
  font-weight: 400;
  font-style: normal;
}
.ibm-plex-sans {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

body {
  position: relative;
}

main {
  position: absolute;
  width: 100%;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.controls {
  margin-top: 1em;
}
.inner-btn {
  display: flex;
  height: 60px;
  width: 200px;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 30px;
  border: 3px solid black;
  background-color: white;
  transition: 200ms ease-in;
  position: relative;
  z-index: 1;
}
.inner-btn:hover {
  background-color: #eee;
  box-shadow: 0 10px 0 0 black;
}
.inner-btn:active {
  background-color: #ddd;
  transform: translateY(4px);
  box-shadow: 0 4px 0 0 black;
}
h1 {
  font-size: 20rem;
  display: flex;
  justify-content: center;
  transition: 200ms ease-in;
}
h1 > span {
  display: inline-block;
  transition: 200ms ease-in;
  transform: translateY(0);
  cursor: pointer;
}
h1:hover {
  transform: translateY(-10px);
}
h1 > span.locked {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 0.1em;
}
#p  { transform: translateY(10px); }
#c  { transform: translateY(0); }
#k  { transform: translateY(-6px); }
#t1 { transform: translateY(-17px); }
#b  { transform: translateY(-12px); }
#o  { transform: translateY(-24px); }
#t2 { transform: translateY(-37px); }