@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: 300px;
}
.logo {
  margin-top: 4rem;
  width: 12rem;
  height: 8rem;
  background: url(img/logo.svg) no-repeat;
  background-size: cover;
}
.subtitulo {
  margin-top: 2.5rem;
  margin-bottom: 3rem;
  text-align: center;
  font-size: 0.9rem;
}
.subtitulo strong {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 1.1rem;
  letter-spacing: 1px;
}
.links {
  width: 300px;
}
.links a {
  display: block;
  margin-bottom: 3rem;
  padding: 1.5rem 0;
  color: white;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  background-color: #037cba;
  box-shadow: inset 0px 0px 0px 3px #037cba;
}
.links a:hover {
  color: #037cba;
  background-color: white;
  transition: color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s,
    background-color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
}
.links a img {
  margin-bottom: -3px;
  padding-right: 0.5rem;
  height: 20px;
  filter: invert(1);
}
.links a:hover img {
  filter: invert(30%) sepia(67%) saturate(5014%) hue-rotate(183deg)
    brightness(95%) contrast(98%);
}
@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  5%,
  10% {
    -webkit-transform: scale3d(0.95, 0.95, 0.95) rotate(-1.5deg);
    transform: scale3d(0.95, 0.95, 0.95) rotate(-1.5deg);
  }
  15%,
  25%,
  35%,
  45% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate(1.5deg);
    transform: scale3d(1.05, 1.05, 1.05) rotate(1.5deg);
  }
  20%,
  30%,
  40% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate(-1.5deg);
    transform: scale3d(1.05, 1.05, 1.05) rotate(-1.5deg);
  }
  50% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.tada_link {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}