#share {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100svw;
  height: 100svh;
  transition: bottom 0.4s ease-in-out;
  overflow: hidden;
}
#share > img {
  position: fixed;
  left: 100svw;
}
#share > main {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100svw;
  height: 270px;
  bottom: 0px;
  background-color: white;
  border-radius: 30px 30px 0px 0px;
  overflow: hidden;
}

#share > main > header {
  background-color: #0f2436;
  height: 40px;
}

#share > main > header > svg {
  position: absolute;
  right: 20px;
  top: 5px;
  height: 30px;
}

#share > main > article {
  background-image: url(../images/share-strawberries.png);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position-x: left;
  background-position-y: bottom;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#share > main > article > button {
  padding: 20px;
  margin: 20px;
  width: 70%;
  border: none;
  height: 20px;
  border-radius: 50px;
  font-family: "Avenir-Medium", sans-serif;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#share > main > article > #sharebutton {
  background-color: #e7bc9f;
  color: black;
}

#share > main > article > #shareplayagainbutton {
  background-color: #49485d;
  color: white;
}

#share {
  bottom: 0;
}