* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgb(238, 240, 242);
  font-size: 24px;
  min-width: 23.5rem;
}

h4 {
  margin: 2rem 1rem 1rem 1rem;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
}

.card {
  display: inherit;
  border: 0.1rem solid rgb(229, 231, 232);
  background-color: white;
  border-radius: 0.9rem;
}

.card div {
  padding: 2rem 1.5rem;
  border-left: 0.1rem solid rgb(229, 231, 232);
}

p {
  font-weight: bold;
}

strong {
  color: rgb(79, 70, 229);
}
span {
  color: rgb(107, 114, 128);
  font-size: 20px;
}

a img {
  margin-bottom: -0.35rem;
}

a {
  font-size: 1rem;
  border: 0.1rem solid transparent;
  padding: 0.25rem 0.35rem;
  border-radius: 0.9rem;
}

.arrow-up {
  background-color: rgb(220, 252, 231);
  color: rgb(64, 127, 84);
}

.arrow-down {
  background-color: rgb(254, 226, 226);
  color: rgb(153, 27, 27);
}

br {
  display: none;
}

@media only screen and (max-width: 909px) {
  body {
    font-size: 20px;
  }

  a {
    display: block;
    text-align: center;
    margin-top: 1rem;
  }
}

@media only screen and (max-width: 676px) {
  body {
    font-size: 24px;
  }
  .card {
    display: block;
  }
  .card div {
    border-bottom: 0.1rem solid rgb(229, 231, 232);
  }
  .card p {
    padding-bottom: 1rem;
  }
  a {
    margin-left: 2rem;
    position: relative;
    display: inline;
  }
  #odd {
    right: -1rem;
  }
}