style.css

@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');

*{
  padding: 0;
  margin: 0;
  background-color: rgb(180, 153, 255);
  font-family: 'Caveat Brush', cursive;
  color: white;
}

h1{
  text-align: center;
  margin-top: 30px;
  font-size: 45px;
}

h2{
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 30px;
}

.picker{
  width: 100%;
  display: flex;
  justify-content: center;
}

.picker p{
  width: 100px;
  padding: 7px 0px;
  border: 2px solid rgb(50, 0, 156);
  font-size: 30px;
  margin: 0 25px;
  border-radius: 3px;
  background-color: rgb(183, 87, 251);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: 0.3s ease 0s;
}

.picker p:hover{
  background-color: rgb(164, 45, 249);
}

.button{
  width: 100%;
  text-align: center;
  margin: 35px 0;
  font-size: 30px;
  display: flex;
  justify-content: center;
}

.button p{
  width: 120px;
  padding: 7px 0px;
  border: 2px solid rgb(50, 0, 156);
  border-radius: 37px;
  background-color: rgb(249, 76, 247);
  cursor: pointer;
  user-select: none;
  transition: 0.3s ease 0s;
  margin: 0 15px;
}

.button p:hover{
  background-color: rgb(171, 0, 168);
}

.display{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;

}

.display p{
  font-size: 30px;
  width: 35%;
  text-align: center;
}

.winer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.winer p{
  font-size: 35px;
  width: 35%;
  text-align: center;
}