:root {
  --white: #ffffff;
  --link-color: #e0588b;
}

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

body {
  height: 100vh;
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  position: relative;
  background-image: url('/assets/bg_image.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: center;
  align-items: flex-end;
}

a {
  display: block;
  margin: 0 0 3rem;
  padding: 6px 0;
  width: 300px;
  color: var(--link-color);
  font-size: 2.5rem;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  background-color: var(--white);
  box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

a:hover {
  animation: bouncyHover 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bouncyHover {
  0% {
    width: 300px;
    box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.5);
  }
  30% {
    width: 260px;
    box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.6);
  }
  50% {
    width: 290px;
    box-shadow: 3px 3px 9px 2px rgba(0, 0, 0, 0.55);
  }
  70% {
    width: 275px;
    box-shadow: 3.5px 3.5px 9.5px 2px rgba(0, 0, 0, 0.58);
  }
  100% {
    width: 280px;
    box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.5);
  }
}

.montserrat-bold {
  font-family: 'Montserrat', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}