:root {
  --blue: #02182F;
  --yellow: #F8EFC6;
  --green: #50AAA8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  font: bold 85%/1em Helvetica, Arial, sans-serif;
}

html, body {
  height: 100%
}

body {
  position: relative;
  background: var(--blue)
}

main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50vmin;
  max-width: 40vmax;
  transform: translate(-50%, -50%);
  text-align: center;
}

img {
  width: 100%;
}

a {
  display: inline-block;
  margin: 5vmin 0;
  padding: 1.1em calc(2em - 1ex) 1em 2em;
  border: 1px solid var(--green);
  border-bottom-width: 0.4em;
  border-radius: 3em;
  white-space: nowrap;
  letter-spacing: 1ex;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green);
  transition: border-color 0.5s, color 0.5s, transform 0.65s;
}

  a:hover {
    transform: scale(110%);
    border-color: var(--yellow);
    color: var(--yellow);
  }