:root {
  --outfit-3: Outfit;
  --epilogue-2: Epilogue;
  --mm-custom-color-4: #7ED321;
  --mm-custom-color-5: #f7f9f9;
  --mm-custom-color-1: #0E223B;
  --mm-custom-color-2: #7ED321;
  --mm-custom-color-3: #808893;
  --td_grid_border_color: #ededed;
  --td_black: #222;
  --td_text_color: #111;
  --td_default_google_font_1: 'Open Sans', 'Open Sans Regular', sans-serif;
  --td_default_google_font_2: 'Roboto', sans-serif;
  --td_theme_color: #d62264;
  --td_slider_text: rgba(214,34,100,0.7);
  --td_mobile_gradient_one_mob: rgba(0,0,0,0.9);
  --td_mobile_gradient_two_mob: rgba(0,0,0,0.8);
  --td_mobile_text_active_color: #d62264;
  --td_login_hover_background: #d62264;
  --td_login_hover_color: #ffffff;
  --td_login_gradient_one: rgba(0,0,0,0.8);
  --td_login_gradient_two: rgba(0,0,0,0.8);
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.container {
  display: grid;
  place-content: center;
  min-height: 200px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}

.conversion-container {
  display: grid;
  place-content: center;
  grid-template-columns: 1fr;
}

.conversion-container>span {
  font-size: 32px;
  padding: 0px 5px;
  font-family: var(--epilogue-2);
  outline: none;
  white-space: nowrap;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #80889391;
  border-radius: 5px;
  padding: 10px 5px 0px 5px;
  box-shadow: 2px 0px 4px #80889391;
}

.middle {
  display: grid;
  place-content: center;
  color: var(--mm-custom-color-3);
}

.middle svg {
  transform: rotate(90deg);
}

.conversion-container span#BOB::after {
  content: "Bolivianos";
}

.conversion-container span#EUR::after {
  content: "Euros";
}

.conversion-container span:last-child::after,
.conversion-container span:first-child::after {
  color: var(--td_login_hover_background);
  align-self: end;
  padding-left: 10px;
  border-left: 1px solid #80889391;
  margin: 0 10px;
  text-align: right;
}

.conversion-rate {
  color: var(--mm-custom-color-3);
  font-size: 42px;
}

.conversion-rate #rate {
  font-size: 64px;
  color: #59c4ff;
  font-weight: 800;
}

.pink {
  font-size: 24px;
  color: var(--td_login_hover_background);
  font-weight: 800;
}

@media only screen and (max-width: 700px) {
  .container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .conversion-rate {
    text-align: center;
    font-size: 32px;
  }

  .conversion-container>span {
    font-size: 24px;
  }
}