* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #18beff;
  background: linear-gradient(180deg, #18beff 0%, #0052db 50%, #1d006b 100%)
    no-repeat;
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -mox-osx-font-smoothing: grayscale;
}

.wrapper {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: 30px 16px 45px;
}

@media (min-width: 768px) {
  .wrapper {
    align-items: center;
    height: 100vh;
  }
}

header.app-header {
  text-align: center;
}

header.app-header > img.app-logo {
  max-height: 25px;
  cursor: pointer;
  vertical-align: middle;
  border-style: none;
}

header.app-header > section.header-context {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 45px 0 0;
}

header.app-header > section.header-context > span {
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 27px;
  color: #ffffff;
}

section.app-card {
  /* background: #ffffff; */
  text-align: center;
  padding: 0 25px 25px;
  width: 100%;
}

section.app-card > p {
  letter-spacing: 0;
  line-height: 24px;
  text-align: center;
  /* color: #485158; */
  color: #ffffff;
  font-weight: 300;
  font-size: 16px;
}

section.app-card > p > strong {
  font-weight: 700;
}

section.app-card > p a {
  text-decoration: underline;
  letter-spacing: 0.5px;
  color: #ffffff;
}

section.app-card > p > a:hover,
section.app-card > p > a:focus {
  text-decoration: underline;
  color: #ffffff;
}

section.app-card > p > a:active {
  text-decoration: none;
  color: #ffffff !important;
}

section.app-card > button.visit {
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  color: #ffffff;
  transition: 0.3s all ease-in-out;
  font-size: 18px;
  font-weight: 300;
  font-family: 'Open Sans';
  background: #ff742a;
  background: linear-gradient(
    270deg,
    rgba(255, 52, 95, 1) 0%,
    rgba(255, 126, 42, 1) 50%,
    rgba(255, 52, 95, 1) 100%
  );
  background-size: 200% 100%;
  animation: gradientBG 7s ease infinite;
  border-radius: 0;
  border: none;
  outline: none;
  margin: 0;
  width: 100%;
  max-width: 400px;
  height: 57px;
}

section.app-card > button.visit:hover {
  box-shadow: inset 0px 57px 0px 0px rgb(231, 110, 29);
}

section.app-card > button.visit:active {
  box-shadow: inset 0px 57px 0px 0px rgb(231, 110, 29);
}

section.app-card > button.visit:focus {
  box-shadow: inset 0px 57px 0px 0px rgb(231, 110, 29);
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}