.playstation-input {
  width: 10em;
  height: 10em;
  background-color: #212121;
  border-radius: 50%;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0px -1px 1px #969696;
}

#cross p,
#triangle p {
  font-size: 30px;
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
  font-weight: 325;
  padding-bottom: 5px;
}

#cross p {
  color: rgb(124, 178, 232);
  transform: scaleX(1.5);
}

#triangle p {
  color: rgb(64, 226, 160);
}

#circle div,
#square div {
  top: 50%;
  left: 50%;
  transform: translate(50%, 0%);
  width: 50%;
  height: 50%;
  background-color: none;
}

#circle div {
  border-radius: 50%;
  border: solid 2px rgb(255, 102, 102);
}

#square div {
  border: solid 2px rgb(255, 105, 248);
}

#cross-title,
#circle-title,
#triangle-title,
#square-title {
  position: absolute;
  display: none;
  font-size: 13px;
  text-shadow: 0px 2px black;
}

#cross-title {
  color: rgb(124, 178, 232);
}

#circle-title {
  color: rgb(255, 102, 102);
}

#triangle-title {
  color: rgb(64, 226, 160);
}

#square-title {
  color: rgb(255, 105, 248);
}

#cross-input,
#circle-input,
#triangle-input,
#square-input {
  position: absolute;
  transform: translate(-50%, -50%);
}

#cross-input {
  top: 80%;
  left: 50%;
}

#circle-input {
  top: 50%;
  left: 80%;
}

#triangle-input {
  top: 20%;
  left: 50%;
}

#square-input {
  top: 50%;
  left: 20%;
}

.playstation-input button {
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  border: none;
  background-color: #323232;
  box-shadow:
    inset 0px 1px #969696,
    0px 2px black;
  transition: all 0.1s ease;
  cursor: pointer;
}

.playstation-input:hover {
  width: 12em;
  height: 12em;
}

.playstation-input:hover button {
  width: 4em;
  height: 4em;
}

#cross-input:hover #cross-title,
#triangle-input:hover #triangle-title {
  display: flex;
  top: 125%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#circle-input:hover #circle-title,
#square-input:hover #square-title {
  display: flex;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.playstation-input button:hover {
  filter: brightness(85%);
}

.playstation-input button:active {
  box-shadow: inset 0px 2px 2px black;
}

#cross-input:active {
  top: 81%;
}

#triangle-input:active {
  top: 21%;
}

#circle-input:active,
#square-input:active {
  top: 51%;
}

#cross:active p,
#triangle:active p {
  text-shadow: 0px 0px 10px white;
}

#circle:active div,
#square:active div {
  box-shadow:
    inset 0px 0px 10px -5px white,
    0px 0px 10px -5px white;
}

.playstation-input:has(#cross:active) {
  box-shadow: 0px -5px 10px rgb(124, 178, 232);
}

.playstation-input:has(#circle:active) {
  box-shadow: 0px -5px 10px rgb(255, 102, 102);
}

.playstation-input:has(#triangle:active) {
  box-shadow: 0px -5px 10px rgb(64, 226, 160);
}

.playstation-input:has(#square:active) {
  box-shadow: 0px -5px 10px rgb(255, 105, 248);
}