quotes.css

@import url("https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;1,400;1,700&family=Open+Sans:ital,wght@1,300;1,400;1,500;1,800&family=Playfair+Display:wght@400;700&display=swap");
body {
  background: url(Media/quotes_bg.png) no-repeat center fixed;
  background-size: cover;
}
@media only screen and (max-width: 480px) {
  .banner img {
    width: 100%;
  }
}
@media only screen and (max-width: 900px) {
  .banner img {
    width: 100%;
  }
}
.heading,
h1 {
  text-align: center;
  font-size: 300%;
  padding-top: 20px;
  font-family: "Playfair Display", serif;
  /* font-family: "Arvo", serif;
  font-family: "Open Sans", sans-serif; */
  padding-bottom: 20px;
  text-shadow: 1px 1px 5px pink;
}
.banner {
  text-align: center;
  width: 75%;
  margin: auto;
  box-shadow: 10px 10px 20px pink;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
}
.main-quote-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 50px 20px 20px 20px;
}
.main-quote-container .quote-container p {
  text-align: left;
  font-family: Georgia, Times, "Times New Roman", serif !important;
  font-style: italic;
  font-weight: 400;
  padding: 5px 20px 0px 20px;
  line-height: 155%;
  font-size: 1.4em !important;
}
.quote-container {
  width: 50%;
  padding-bottom: 10px;
  /* margin-bottom: 50px; */
  text-align: left;
  margin: auto;
  padding: auto;
  background: whitesmoke;

  transition: all 0.2s ease-in-out;
  flex: 1 0 70%;
}
.quote-container:hover {
  background: black;
  color: white;
  transform: skewX(5deg);
  /* transform: scale(1.1); */
  text-shadow: 1px 1px 1px red;
  box-shadow: 10px 10px 40px red;
}
.main-quote-container .quote-container span {
  padding-left: 3%;
  padding-bottom: 1%;
  margin-bottom: 10px;
  vertical-align: middle;
}