* {
  box-sizing: border-box;
  font-family: "Permanent Marker", cursive;
}

body {
  margin: 0;
  padding: 0;
}


section#score {
  width: 400px;
  display: flex;
  margin: 0 auto;
}

#board {
  width: 350px;
  height: 350px;
  margin: 0.5rem auto;
  background: linear-gradient(
    to bottom,
    #b4ddb4 0%,
    #83c783 17%,
    #52b152 33%,
    #008a00 67%,
    #005700 83%,
    #002400 100%
  );
}

#board > div {
  border: 1px solid black;
  float: left;
  width: 35px;
  height: 35px;
}

section#score div,
header#name,
footer {
  text-align: center;
  padding: 0.5em;
  background: linear-gradient(
    to bottom,
    #d0e4f7 0%,
    #73b1e7 34%,
    #0a77d5 92%,
    #0a77d5 92%
  );
  border: 2px solid #0557d5;
  border-radius: 10px;
  box-shadow: 1px 1px 5px 1px lightgray;
  margin: 0.5em auto;
  margin-bottom: 0;
  font-size: 1.15rem;
  height: 10vh;
}

.start {
  cursor: pointer;
}
section#score .start:hover {
  background: white;
  color: #0557d5;
}


section#score .stop {
  background: white;
  color: #a90329;
  border: 2px solid #a90329;
}

header#name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
}

.furry2,
.bitcoin {
  background-image: url("../images/furry2 (1).png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 50px;
  height: 50px;
}

.bitcoin {
  background-image: url("../images/bitcoin.png");
}

.furry {
  background-image: url("../images/furry2 (1).png");
  background-repeat: no-repeat;
  background-size: cover;
}

.coin {
  background-image: url("../images/bitcoin.png");
  background-repeat: no-repeat;
  background-size: cover;
}

section#over {
  width: 350px;
  margin: 0.5rem auto;
  z-index: 1;
  padding: 10px;
  background: linear-gradient(to bottom, #a90329 33%, #6d0019 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 2px solid black;
  box-shadow: 2px 2px 5px 2px lightgray;
}

section#over pre {
  font-size: 1.5rem;
  font-weight: bolder;
  color: white;
  margin: 10px;
}

section#over button {
  font-size: 1.5rem;
  font-weight: bolder;
  color: #6d0019;
  padding: 10px;
  border-radius: 20px;
  border: none;
  width: 80%;
  margin: 10px;
}

section#over button:hover {
  background-color: white;
  color: #0557d5;
}

section#over.invisible,
section#board.invisible,
section#score.invisible {
  display: none;
}

footer {
  width: 380px;
  height: 12vh;
  font-size: 1rem;
}

footer div a {
  text-decoration: none;
  color: #6d0019;
}

.author {
  text-decoration: underline;
}