* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}  

.centered,
header,
main,
footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
min-height: 100dvh;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
background-position: center;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}

header {
  background-color: #fff4;
  width: 100dvw;
  height: 10dvh;
  border-bottom: solid 2px #000;
  font-size: 2.5rem;
  text-align: center;
}  

main {
  background-color: #0002;
  width: calc(70dvw + 2px);
  min-height: 80dvh;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* padding-top: 20px; */
  border-left: solid 2px #000;
  border-right: solid 2px #000;
}  

footer {
  background-color: #fff4;
  width: 100dvw;
  height: 5dvh;
  border-top: solid 2px #000;
}  

#result,
section#again {
  display: none;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}  

#againBtns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}  

#result > p {
  width: 70dvw;
  text-align: center;
  margin: 20px 0;
  font-weight: bold;
  font-size: 1.5rem;
}  

table {
  background-color: #fff6;
}  

table#matchesTotal {
  background-color: #fff6;
}  

td,
th {
  border: solid 1px #fff3;
  padding: 10px 0;
  text-align: center;
  width: 35dvw;
}  

#player1Sets,
#player2Sets,
#gamesPlayer1,
#gamesPlayer2 {
  font-weight: bold;
}  

#gamesPlayer1,
#gamesPlayer2 {
  color: #00d;
}  

aside#messageTable {
  width: calc(100% - 0px);
  border: solid 1px #000;
  padding: 10px 0;
  text-align: center;
  background-color: #fff9;
  color: #c00;
  font-weight: bold;
  font-size: 1.5rem;
  margin-top: 20px;
}  

.savingButtons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 0 0;
  /* width: calc(100% - 10px); */
}  

.savingButtons2 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 0 0;
}  

.savingButtons button,
.savingButtons2 button{
  padding: 10px;
  font-size: 1.1rem;
  margin: 5px 0px 0px 0px;
  padding: 10px 0;
  font-size: 1.1rem;
  width: 18%;
}  

#againYes {
  background-color: #0f09;
}  

#againNo {
  background-color: #f009;
}  

section {
  padding: 5px;
}  

section#again p {
  margin: 10px 0;
}  

section#dataInput {
  width: 70dvw;
}  

section#dataInput label {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: nowrap;
  line-height: calc( 2.4rem + 10px );
  font-size: 1.35rem;
  font-weight: bold;
}  

section#dataInput label input {
  width: 100%;
  margin: 0 0px;
  padding: 10px;
  width: 35dvw;
  font-size: 1.35rem;
}  

#sendBtn {
  width: 100%;
  padding: 10px;
  font-size: 1.2rem;
}  

main section#dataInput p {
  font-size: 0.75rem;
  margin: 20px 0 0 0;
}  

#result {
  font-size: 1.35rem;
}  

#matches {
  font-size: 1.35rem;
  margin: 5px 0 0 0;
}  

.buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70dvw;
}  

.innerButtons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 10px);
}  


button#againYes,
button#againNo {
  margin: 5px 0px 0px 0px;
  padding: 10px 0;
  width: 45%;
  font-size: 1.1rem;
}  

button#setPlus1,
button#setPlus2,
button#gamePlus1,
button#gamePlus2,
button#setMinus1,
button#setMinus2,
button#gameMinus1,
button#gameMinus2,
button#resetSets,
button#resetGames,
button.savingButton2,
button.loadingButton2 {
  margin: 5px 0px 0px 0px;
  padding: 10px 0;
  font-size: 1.1rem;
  width: 18%;
}  

.savingButtons > div {
  width: 18%;
  padding: 10px 0;
}  

.savingButtons > div > label {
  font-weight:lighter;
  font-style: italic;
}  

#selectFile {
  display: none;
}  

.myUploadStyle {
  border: 1px solid #aaa;
  border-radius: 10px;
  background-color: #e6e6e6;
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  justify-content: center !important;
  align-items: center !important;
  font-weight: normal !important;
  font-size: 1.1rem !important;
}  

.myUploadStyle:hover {
  background-color: #bbb;
}  

#result button {
  padding: 10px;
  font-size: 1.1rem;
}  

.signsButton {
  font-size: 2rem;
}  

#again p {
  text-align: center;
  margin-top: 5px;
  font-size: 1.5rem;
  font-weight: bold;
}  

#again button {
  padding: 10px;
  font-size: 1.2rem;
}  


#matchesPlayer1,
#matchesPlayer2 {
  font-weight: bold;
  color: #00d;
}  

table,
button,
input {
  border-radius: 10px;
}  

table {
  margin: 5px 0 0 0;
}  

#divOverlay {
  width: 100dvw;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fffd;
  position: fixed;
  top: 0;
  left: 0;
  color: #c00;
  font-size: 3rem;
  text-align: center;
}  

@media (max-width: 600px) {
  section#dataInput {
    width: 75%;
  }
}