.section-arriba {
    background: rgb(235, 233, 233);
    background-image: url(../img/bg.png );
}

.section-abajo {
    background: white;
    -webkit-box-shadow: inset 20px -189px 23px -180px rgb(196, 196, 196), inset 20px 189px 23px -180px rgb(196, 196, 196);
    -moz-box-shadow: inset 20px -189px 23px -180px rgb(196, 196, 196), inset 20px 189px 23px -180px rgb(196, 196, 196);
    box-shadow: inset 20px -189px 23px -180px rgb(196, 196, 196), inset 20px 189px 23px -180px rgb(196, 196, 196);
}

.img-code {
    max-width: 300px;
    height: auto
}

.list-group,
.list-group-item {
    border-radius: 10px;
    background-color: #fffefe71 !important
}

.list-group {
    background-color: transparent !important
}

.lista {
    background-color: #2b2b2b;
    padding: .6em;
    border-radius: 10px
}

.lista h4 {
    color: aliceblue
}

.list-group-item span {
    font-weight: bold
}

.btn {
    margin: 1em auto
}

.header {
    min-height: 100vh;
    align-items: center;
    align-self: center;
    align-content: center;;
}

@keyframes comenzar-animation{
    20% {
      transform: translate(0, 0) rotate(5.5deg);
    }
    40% {
      transform: translate(0, 6px) rotate(-5.5deg);
    }
    60% {
      transform: translate(0, -6px) rotate(5.5deg);
    }
    80% {
      transform: translate(0, 3px) rotate(-5.5deg);
    }
    0%,
    100% {
      transform: translate(0, 0) rotate(0);
    }
  }

.comenzar{
    animation-name: comenzar-animation;
  animation-duration: 1.8s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

#back_to_top {
    display: none;
    position: fixed;
    bottom: 3em;
    right: 30px;
    z-index: 99;
  }
  
  #back_to_top:hover {
    background-color: #555; /* Add a dark-grey background on hover */
  }

  .sangria{
    text-indent: 20px;
  }

  #tiempo, #distancia, #x, #y{
    width: 7em !important;
  }