@media screen and (max-width: 67.5rem) {
  .back-to-top {
    display: none;
  }
}

@media screen and (min-width: 67.5rem) {

  .back-to-top {
    position: fixed;
    bottom: 0;
    right: 0;
    width: min-content;
    text-align: center;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    padding: 1rem 1rem 1.5rem;
    border-radius: 0;
    background-color: hsl(198.36deg 100% 42.94% / 100%);
    cursor: pointer;
    opacity: 0;
    text-transform: uppercase;
    transition: opacity 450ms ease-out;
  }

  .back-to-top::before {
    font-family: FontAwesome;
    font-size: 2rem;
    content: '\f077';
    display: block;
    padding: 0 0 1rem;
  }

  .back-to-top.visible {
    display: block;
    transition: opacity 450ms ease-in;
    opacity: 1;
  }

}

@media screen and (min-width: 120rem) {

  .back-to-top {
    right: calc(50vw - 60rem);
  }

}