style.css

@import url('https://fonts.googleapis.com/css2?family=Micro+5&family=Pixelify+Sans:wght@550&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.gameWindow {
  background-color: rgb(107, 136, 145);
  /* background-color: lightblue; */
  position: absolute;
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.8);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  max-width: 100%;
  max-height: 100%;
}

.birb {
  position: absolute;
  background-color: rgb(159, 159, 35);
  height: 50px;
  width: 50px;
  left: 175px;
}

.pipes {
  position: absolute;
  background-color: rgb(88, 137, 15);
  width: 60px;
}

body {
  background-color: rgb(73, 68, 68);
}

.title {
  text-align: center;
  color: aliceblue;
  font-family: 'Micro 5', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  text-shadow: 5px 5px rgba(0, 0, 0, 0.784);
  left: 50%;
  transform: translate(0%, -20%);
}

.startbtn {
  /* Looks  */
  background-color: rgb(132, 50, 91);
  color: white;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 150px;
  height: 50px;
  border-radius: 10px;

  /* center the div */
  position: fixed;
  inset: 0px;
  max-width: 100vw;
  max-height: 100dvh;

  margin: auto;
}

.btnfront {
  display: block;
  background-color: hotpink;
  transform: translateY(-8px);
  color: white;

  will-change: transform;
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  /* Font */
  font-family: 'Micro 5', sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 40px;
  border-radius: 10px;

  justify-content: baseline;
}

.startbtn:hover .btnfront {
  transform: translateY(-12px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.startbtn:active .btnfront {
  transform: translateY(-2px);
  transition: transform 34ms;
}