body {
  overflow: hidden;
}

main {
  background: #e5ff00;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-left: 0!important;
  padding-right: 0!important;
}

main .page-header {
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

main picture {
  display: block;
  height: 100%;
  width: 100%;
}

main img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding-bottom: 5rem;
}

main a {
  position: fixed;
  z-index: 1;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);

  

  background: #eee;
  color: black;

  background: black;
  color: white;

  padding: .2em 1em;
  border-radius: 2rem;
  white-space: nowrap;
  cursor: pointer;
  line-height: inherit;
  font-size: 1.5rem;
  text-decoration: none;
}

main a:-webkit-direct-focus,
main a:focus,
main a:focus-visible {
  outline: 1px solid #aaa;
}

main a:hover {
  background: white!important;
  color: black!important;
}