:root {
  --the-blue: #0c74b4;
  --the-grey: rgb(217, 223, 230);
}

/* #app_wrap {
 position: relative;
 margin: auto;
 margin-top: 30px;
 padding: 15px;
 align-items: center;
 max-width: 750px;
 box-shadow: inset darkgray 2px 4px 16px 8px;
 border: solid 1px white;
 border-radius: 15px;
 font-family: "Special Elite", cursive;
 font-size: 20px;
 display: flex;
 flex-flow: row nowrap;
} */

.app {
 position: relative;
 margin: auto;
 margin-bottom: 6px;
 padding: 15px;
 align-items: center;
 max-width: 750px;
 box-shadow: inset darkgray 2px 4px 16px 8px;
 border: solid 1px white;
 border-radius: 15px;
 font-family: "Special Elite", cursive;
 font-size: 20px;
}

#stats {
 left: 0;
 top: 5;
 padding-top: 4px;
 padding-left: 4px;
 position: absolute;
}

#round_stats, #number_of_rounds {
 font-size: 16px;
 margin: 0;
 padding: 0;
}
 
.overall-set-score {
  color: var(--the-blue);
  font-size: 16px;
  position: absolute;
  top: 20px;
  right: 10px;
}

.notes{
 display: block;
 font-size: 14px;
 text-align: center;
}

.start-header {
  text-align: center;
  margin: 0;
}

.btn {
  padding: 5px;
  background-color: var(--the-blue);
  color: wheat;
  width: 110px;
  height: 45px;
  border-radius: 20px;
  cursor: pointer;
  margin-left: 1px;
  font-weight: bold;
  font-size: 20px;
}
.btn:hover {
  background-color: rgba(12, 71, 126, 0.959);
}
.buttonWrapper {
  margin: auto;
  text-align: center;
  margin-bottom: 55px;
}

.start-btn {
 background-image: linear-gradient(rgb(79, 105, 179), var(--the-blue));
 border: none;
 border-radius: 28px;
 color: wheat;
 cursor: pointer;
 font-weight: bold;
 /* font-size: 18px; */
 height: 50px;
 width: 200px;
}
.start-btn:hover {
  transition: 0.2s all ease-in-out;
  /* font-size: 20px; */
  color: var(--the-blue);
  font-weight: bold;
  background: var(--the-grey);
  border: 2px solid var(--the-blue);
}

.replay-btn,
.start-btn,
.btn {
  font-family: "Special Elite", cursive;
  /* text-align: center; */
}

.score {
  width: fit-content;
  background-color: whitesmoke;
  margin: auto;
  border-radius: 5px;
  border: 1px black solid;
}

.small-font {
 font-size: 16px;
}

/* .icons, */
.icons {
 margin-top: 45px;
 padding: 0;
 text-align: center;
}

.img2,
.img1 {
  width: 25%;
}

.message,
.score {
  text-align: center;
  margin-bottom: 40px;
}

.hidden {
  transition-property: opacity, visibility;
  transition-duration: 1s, 0s;
  transition-delay: 0s, 0.8s;
  visibility: hidden;
  opacity: 0;
}
.visible {
  display: block;
}

.footer-info {
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
}
.footer-info > a {
  color: black;
  text-decoration: none;
}

@media (max-width: 400px) {
  .buttonWrapper {
    display: grid;
    justify-content: center;
  }

  .btn {
    margin-bottom: 5px;
  }
}