.div1{
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(Resources/border.png) 30 round;
  font-family: "Courier New", monospace;
}

#b1{
    color: whitesmoke; 
    font-size: 20px;
}

/*The following code is for the first gallery with portrait pictures*/
.scroll_container{
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;

  border-image-source: url("Resources/rolls.png");
  border-image-slice: 30;
  border-image-repeat: repeat;

  background-color: #333;   /*Background colour of the gallery*/
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}


div.scroll-container img {
  padding: 10px;
}

.container{
  display:flex;
  align-content: center;
  background-image: url(Resources/gradient.png);
  background-size: 100% 100%;
}

.cDiv1, .cDiv2, .cDiv3{
  height: 120px;
  width:250px;
  margin:50px;
  padding:10px;
  border-radius: 20px;
  
  background:linear-gradient(rgb(87, 0, 0), rgb(125, 1, 1), rgb(87, 0, 0));
  color:rgb(255, 241, 211);

  font-family:'Times New Roman', Times, serif;
  font-size:15px;
  border: 10px solid transparent;

    transition-duration: 0.5s;
}

div.cDiv1:hover, div.cDiv2:hover, div.cDiv3:hover{
  height: 135px;
  width: 265px;
  background:linear-gradient(rgb(69, 0, 0), rgb(115, 1, 1), rgb(69, 0, 0));
  color:rgb(252, 252, 252);
}

.divButton{
  padding-top: 25px;
  display: flex;
  align-content: center;
  flex-direction: column;
  text-align: center;
  border-radius: 20px;
  color: rgb(82, 0, 0);
  transition-duration: 0.5s;
}

div.divButton:hover{
  background-color: rgb(73, 19, 24);
}

.divButton button{
  align-self: center;
  padding: 25px 70px;
  border-radius: 20px;
  font-size: 14px;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

button#btn1 {
  background-color: rgb(255, 245, 220);
  color: rgb(82, 0, 0);
  border: transparent;
  transition-duration: 0.5s;
}

button#btn1:hover {
  background-color: rgba(82, 0, 0);
  color: rgb(255, 245, 220);
}

#pBtn1{
  color:bisque;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 35px;
  transition-duration: 0.5s;
}
#pBtn2{
  color:rgb(255, 228, 196);
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 35px;
  transition-duration: 0.5s;
}

p#pBtn1:hover, p#pBtn2:hover{
  color:rgb(252, 159, 159);
}

.container2{
  padding-top: 25px;
  display: flex;
  align-content: center;
  text-align: center;
  justify-content: center;
  border-radius: 20px;
  transition-duration: 0.5s;
}

.container2:hover{
  background-color: rgb(92, 0, 0);
}

.poem{
  height:550px;
  width:400px;
  background-color:bisque;
  border-radius: 20px;
  justify-content: center;
  transition-duration: 0.5s;
}

.poem:hover{
  background-color: rgb(250, 215, 173);
  color:rgb(151, 12, 12)
}

#prePoem{
  font-size: 18px;
  color:rgb(94, 2, 2);
}

.heart {
  position: relative;
  height: 160px;
  width: 160px;
  background-color: red;
  transform: rotate(45deg);
  border-radius: 0 0 20px 0; /* Only bottom-right corner */
}

.heart::before {
  content: "";
  position: absolute;
  top: -80px; /* Half the height */
  left: 0;
  height: 160px;
  width: 160px;
  background-color: red;
  transform: rotate(0deg);
  border-radius: 50%; /* Makes it a perfect circle */
}

.heart::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80px; /* Half the width */
  height: 160px;
  width: 160px;
  background-color: red;
  transform: rotate(0deg);
  border-radius: 50%; /* Makes it a perfect circle */
}


/*Removes scrollbar in this use case for most browsers
.scroll_container::-webkit-scrollbar {
  display: none;             
}*/