* {
  margin: 0px;
  padding: 0px;
}

body {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)),
    url(badminton.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family:
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: bold;
}
.scoreContainer {
  background-color: #ffe8cc;
  width: 80%;
  max-width: 400px;
  margin: 100px auto;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  box-shadow: 8px 8px 8px 1px rgba(65, 65, 65, 0.8);
  transition: transform 0.3s ease-in-out;
}
.scoreContainer:hover {
  transform: scale(1.05);
}

#point {
  font-size: 5em;
}
button {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  color: rgb(28, 27, 27);
  font-weight: bold;
  font-size: 1.2em;
  width: 200px;
  margin-bottom: 5px;
  border-radius: 5px;
}
.btns {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  display: flex;
  width: 80%;
  justify-content: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.btn1 {
  width: 40%;
  background-color: #4caf50;
  border: 1px solid grey;
  transition: transform 0.3s ease-in-out;
}
.btn2 {
  width: 40%;
  background-color: #d84343;
  border: 1px solid grey;
  transition: transform 0.2s ease-in-out;
}
.save {
  border: 1px solid grey;
  transition: transform 0.3s ease-in-out;
  color: antiquewhite;
  background-color: #6d4c41;
}
.btn1:hover {
  transform: scale(1.03);
}
.btn2:hover {
  transform: scale(1.03);
}
.save:hover {
  transform: scale(1.03);
}
.btn1:active {
  transform: scale(0.95);
}
.btn2:active {
  transform: scale(0.95);
}
.save:active {
  transform: scale(0.95);
}
.hist {
  color: #7a6e6a;
}