* { box-sizing: border-box; }
body, html {
  color: #2f5a5d;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 16pt;
  height: 100%;
  width:100%;
  padding: 0;
  margin: 0;
}
body {
  display: grid;
  grid-template-rows: 1fr min-content;
  background:
    linear-gradient(
      to top left,
      rgba(245, 240, 188, .5),
      rgba(245, 240, 188, .7) 50%, 
      rgba(245, 240, 188, 1) 100%
    );
  background-repeat: no-repeat;
  background-size: cover;
  padding: 2rem;
}

main {
  background: url(./images/undraw_joyride_re_968t.svg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 300px;
}

button {
  align-items: center;
  background: #8BB4B6;
  color: #1C1C1C;
  border-radius: 50%;
  border: solid 1px #73A9AD;
  box-shadow: .125rem .125rem .5rem #333;
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  height: 8rem;
  justify-content: center;
  letter-spacing: .25rem;
  margin: 0 auto 2rem;
  overflow: hidden;
  position: relative;
  text-align: center;
  transition: all ease-in-out 250ms;
  width: 8rem;
}

a:link, a:visited { color: #2f5a5d;}

button:focus {
  outline: none;
}
button span {
  padding-top: 1rem;
}
.phrase {
  font-size: 2.5rem;
  min-height: 3rem;
  text-align: center;
  text-shadow:
  1px 1px 0 #F5F0BB,
  -1px 1px 0 #F5F0BB,
  -1px -1px 0 #F5F0BB,
  1px -1px 0 #F5F0BB;
}
.overlay {
  background-image: radial-gradient(circle at 50% 100%, rgba(250, 250, 250, .25), rgba(250, 250, 250, 0) 100%);
  border-radius: 50%;
  border: solid 1px rgba(250, 250, 250, .2);
  bottom: -8.150rem;
  height: 8rem;
  overflow: hidden;
  position: absolute;
  width: 8rem;
}
button:active {
  box-shadow: none;
  top: 1px;
}
button:active .overlay {
  bottom: -.125rem;
  transition: bottom ease-in-out 250ms;
}

footer ul {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  gap: 1rem;
  flex-wrap: wrap;
}
.created {
  margin-bottom: 0;
  font-size: .75rem;
  text-align: center;
}

.sr-only {
  position: absolute;
  left: -99999rem;
}