.play {
  position: absolute;
  top: 0;
  background-color: rgb(0,0,0,0.7);
  height: fit-content; 
  width: 100%;
  border-radius: 10%;
  padding: 30px;
  z-index: 50;
  mask-image: linear-gradient(to bottom, black 40%, black 50%);
  mask-size: 100% 0%;
  mask-repeat: no-repeat;
  transition: mask-size 0.5s ease-out;
  /* filter: invert(1); /* stop invert colour dark mode) */
}

#play:target {
  mask-size: 100% 100%;
}

@media only screen and (min-device-width: 768px){
.play {
  top: 5vh;
  padding: 50px 20px 50px 20px;
}}

@media only screen and (min-device-width: 1200px){
.play {
  padding: 50px 40px 50px 40px;
}
.play:hover {
  mask-size: 100% 100%;
}}

.caption {
  font-size: 1.3rem;
  line-height: 51px;
  color: #AFAFAF;
  text-align: center;
}

@media only screen and (min-device-width: 768px){
.caption {
  font-size: 1.4rem;
  line-height: 31px;
}}

@media only screen and (min-device-width: 1200px){
.caption {
  font-size: 1.5rem;
  line-height: 35px;
}}


#show-story-btn, #hide-story-btn {
  position: fixed;
  top: 45dvh; right: 6dvw;
  line-height: 55px;
  z-index: 25;
}
#hide-story-btn {
  display: none;
}

@media only screen and (max-device-width: 1200px) and (orientation: landscape){
#show-story-btn, #hide-story-btn {
  top: 270px; left: 20px;
  line-height: 25px;
}}

@media only screen and (min-device-width: 1200px){
#show-story-btn, #hide-story-btn {
  top: 250px; left: 40px;
  line-height: 25px;
}}


html:has(#play:target) .play {
  mask-size: 100% 100%;
}


html:has(#play:target) #show-story-btn {
  display: none;
}
html:has(#play:target) #hide-story-btn {
  display: inline-block;
}