:root {
  --theme: #490f0b;
  --theme-light: #ffeeed;
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #f5f5f5;
}

h1 {
  color: var(--theme);
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  text-align: center;
  padding: 0px 0px 15px;
}

hr {
  display: block;
  border: 0;
  border-top: 5px solid var(--theme);
  color: var(--theme);
}

.startToRunTable {
  padding-top: 30px;
  margin-left: auto;
  margin-right: auto;
  color: var(--theme);
  font-family: "Open Sans", sans-serif;
  text-align: center;
  font-size: 9pt;
}

#sideHeader {
  padding: 0 15px 0;
  color: #f5f5f5;
  background-color: var(--theme);
}

#topHeader {
  padding-bottom: 15px;
}

td {
  margin: auto;
  padding: 15px;
}

.done {
  background-color: #ededed;
  color: #dbdbdb;
}

.startToRunTable td {
  cursor: pointer;
  user-select: none;
}

#arrow {
  cursor: pointer;
  width: 50px
}
#arrow:hover {
  transition: transform 500ms;
  transform: scale(1.05);
}

.total-km {
  background-color: var(--theme-light);
}

.special-marathon {
  background-image: repeating-linear-gradient(
    to right,
    #a2682a 0%,
    #be8c3c 8%,
    #be8c3c 18%,
    #d3b15f 27%,
    #faf0a0 35%,
    #ffffc2 40%,
    #faf0a0 50%,
    #d3b15f 58%,
    #be8c3c 67%,
    #b17b32 77%,
    #bb8332 83%,
    #d4a245 88%,
    #e1b453 93%,
    #a4692a 100%
  );
  background-size: 200%;
  color: var(--theme);
  font-weight: bold;
  position: relative;
  overflow: hidden;
  animation: MoveBackgroundPosition 6s ease-in-out infinite;
}

.special-marathon:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to right,
    #a2682a 0%,
    #be8c3c 8%,
    #be8c3c 18%,
    #d3b15f 27%,
    #faf0a0 35%,
    #ffffc2 40%,
    #faf0a0 50%,
    #d3b15f 58%,
    #be8c3c 67%,
    #b17b32 77%,
    #bb8332 83%,
    #d4a245 88%,
    #e1b453 93%,
    #a4692a 100%
  );
  background-size: 200%;
  z-index: -1;
  animation: MoveBackgroundPosition 6s ease-in-out infinite;
}
@keyframes MoveBackgroundPosition {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.cutback {
  background-color: var(--theme-light);
}

.special-spa {
  background-image: repeating-linear-gradient(
    to right,
    #707070 0%,
    #8e8e8e 8%,
    #999999 18%,
    #b5b5b5 27%,
    #d1d1d1 35%,
    #e8e8e8 40%,
    #d1d1d1 50%,
    #b5b5b5 58%,
    #999999 67%,
    #8e8e8e 77%,
    #707070 83%,
    #808080 88%,
    #919191 93%,
    #707070 100%
  );
  background-size: 200%;
  color: var(--theme);
  font-weight: bold;
  position: relative;
  overflow: hidden;
  animation: MoveBackgroundPosition 6s ease-in-out infinite;
}

.special-spa:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    to right,
    #707070 0%,
    #8e8e8e 8%,
    #999999 18%,
    #b5b5b5 27%,
    #d1d1d1 35%,
    #e8e8e8 40%,
    #d1d1d1 50%,
    #b5b5b5 58%,
    #999999 67%,
    #8e8e8e 77%,
    #707070 83%,
    #808080 88%,
    #919191 93%,
    #707070 100%
  );
  background-size: 200%;
  z-index: -1;
  animation: MoveBackgroundPosition 6s ease-in-out infinite;
}

@media only screen and (min-width: 768px) {
  .startToRunTable {
    font-size: large;
  }

  hr {
    width: 60%;
    margin: auto;
  }

  td {
    padding: 40px;
  }

  td:hover {
    background-color: #ededed;
  }
  #arrow {
    width: 100px;
  }
}