@font-face {
  font-family: 'rainyhearts';
  src: url('rainyhearts.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  background-image: url("apple.gif");
  font-family: 'rainyhearts', sans-serif;
}
 
  h1 {
  font-size: 45px;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 25px;
}

h5 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

 
 a {
  color: #c33c3c;
}

a:hover {
  color: #e7b1b1; 
  text-decoration: underline;
} 
/*Everything goes inside here.*/
.wrapper {
  width: 900px;
  margin: 0 auto;
  background-color: OldLace;
  }
  
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 25px;
  }
  
  .spaced {
  margin-bottom: 10px;
  display: block;
}

.title, .links, .footer {
  text-align: center;
  }
  
/*Navigation links.*/
.links ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
  
.links li {
  display: inline-block;
  margin-right: 16px;
  }

 .links li:before, .links li:after {
  letter-spacing: 0.1em;
  }
  
/*Basic box code that is used for all content boxes on the page.*/
.box {
  border: 1px solid OldLace;
  padding: 0.5em 1em;
  background-color: OldLace;
  }

/*Prevent image overflow.*/
.box img, .sidebar img {
  max-width: 100%;
  height: auto;
  }
  
/*Wrapper for the sidebar.*/
.sidebar {
  width: 200px;
  float: left;
  }
  
/*Container for the sidebar image.*/
.sidebar-image {
  border: 1px solid OldLace;
  }
  
/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img {
  display: block;
  }
  
/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 225px;
  }
  
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
  columns: 2;
  column-gap: 25px;
  } 

/*Make sure boxes don't spread over multiple columns.*/
.main .box {
  display: inline-block;
  }
  
.single-column {
  columns: 1;
  }
  
.footer {
  margin-bottom: 25px;
  }
    
  .box.blog-entry {
  border: 3px dotted IndianRed;
  border-radius: 10px;
  margin: 1em;
  padding: 1em; /* This will override .box padding */
  }
  
 .box.blog-entry {
  display: block; /* or flex, if you prefer */
} 

.book-gallery {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.book {
  position: relative;
  display: inline-block;
}

.book img {
  width: 150px;
  height: auto;
}

.hover-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.9em;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.book:hover .hover-text {
  opacity: 1;
}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABaElEQVR4AdTSgWlDMQyE4bYrdZ2Ml3U6U4qhHzwOhJzGBFR4/JWsk31Hvj6G/M196M/t9rh+u4FfNdf//6tP3dxEOfm+3z/XJx395Knzddf6cr96TqISQQ46VvMrlfWlvprPObV5nJMoByuF66e/S1oJqHf15uhQf06iXi6JJEcd6XJfp3NOn7RvTqIceXnFdEqXNJd9tXOs7tOnm5eolyPHqI8cP0t6tB/1k3MT7Zyl09N1df+8RCsnfoOnk7Ov2p/vmZcoh8gpZ2rnr9K+3f3zE02n6leTpLcvk3WenJcoZ+nkz/kj+6fqan++Z16iEkon+u9idf/cRCXHGeqj39azpEf7UT85L9EuGY4xHat3z81199o7J1GOOExy1JEu93U65/RJ++YkypGXo/4u6SSi3tWbo0P9OYlKADnoWM1nEvZU886T5nFOoulELRmO9JOnzt2X+9VzE5UQctTRfLLTOe90YxL9BQAA//8UlpHSAAAABklEQVQDAL0RUHM3KUm8AAAAAElFTkSuQmCC") 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid;
}

@media(max-width:915px) {
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }
  }
  
@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    display: block;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
.sidebar img[src$=".gif"] {
  width: 120px !important;
}

  .footer {
    margin-bottom: 25px;
    }
  
  }
  /* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/symbols/sym-7/sym634.ani), url(https://cur.cursors-4u.net/symbols/sym-7/sym634.png), auto !important;} /* End https://www.cursors-4u.com */