body {
  background-image: url("Background_floralblue.png");
  background-size: 200px 200px; 
  background-repeat: repeat;
}

.boris {
  position: absolute;
  bottom: -65px;
  right: -100px;
  width: 400px;
  height: auto;
  z-index: 5;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px;
}

.box {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 250px minmax(0,1fr);
}

.art-page .box {
    grid-template-columns: 1fr 1fr;
}

header,
main,
.about,
.snippet,
.ramble,
.images-notes,
.bottom-list {
  border: 5px solid whitesmoke;
 background-color: #3c4713;
  border-radius: 30px;
  padding: 15px;
}


 header {
    grid-row: 1 / 2 ;
    grid-column: 1 / 3;
    text-align: center;
    border-radius: 30px;
    padding: 5px;
    height: 150px;
 }

 
nav {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    display: flex;
    justify-content: center;
}

.about {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
}

.snippet {
    grid-row: 4 / 5;
    grid-column: 1 / 2;

    gap: 15px;
    align-items: center;
}

.ramble {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    align-items: center;
}

.images-notes {
    grid-row: 4 / 5 ;
    grid-column: 2 / 3;
    align-items: center;
}

.images-notes img {
    max-width: 400px;            /* fiddle with size as needed */
    height: auto;                /* keeps aspect ratio */
    border-radius: 5px;
    align-items: center; }

.scroll-box {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
}

.bottom-list {
    grid-row: 5 / 6;
    grid-column: 1 / 3;

    padding: 10px 20px;
}

.image-links {
    display: flex;              /* arrange side-by-side */
    flex-wrap: wrap;            /* moves the stuff for small screens */
    gap: 10px;                   /* the space between images is gap */
}

.image-links a {
    display: inline-block;       /* no more stretched links */
}

.image-links img {
    display: block;             
    max-width: 150px;            /* fiddle with size as needed */
    height: auto;                /* keeps aspect ratio */
    border-radius: 5px; 
}
.links-page about {
  border: 2px solid whitesmoke;
  background-color: #3c4713;
   grid-row: 3 / 4 ;
   grid-column: 1 / 3;
   text-align: center;
   padding: 20px;
   display: block;
}
.links-page about img {
    width: 100px;


}

.art-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

.art-gallery img {
    height: auto;   /* pick height OR width, not both. Make one auto*/
    max-width: 90%;
    transform: rotate(-2deg);
    transition: transform 0.2s ease;
}

.art-gallery img:nth-child(even) {
    transform: rotate(3deg);
}

.art-gallery img:nth-child(3n) {
    transform: rotate(-4deg);
}

.art-gallery img:hover {
    transform: scale(1.05) rotate(0deg);
    z-index: 10;
}

.art-left {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
}

 .art-right {
    grid-row: 4 / 5;
    grid-column: 2 / 3;
}

.art-top {
    grid-row: 3 / 4;
    grid-column: 1 / 3;
}

header,
.art-left,
.art-right,
.art-top {
  border: 5px solid #626948;
  background-color: #3c4713;
  border-radius: 30px;
  padding: 15px;
}

main {
    background-image: url("Background_floralbluesm.png");
    grid-row: 3 / 4 ;
    grid-column: 2 / 3;
    height: max-content;
    position: relative;
    padding: 20px;
    text-align: center;
 }

 footer {
    color: #626948;
    font-size: 18px ;
    border: 2px solid #ffffff;
    background-color: goldenrod;
    border-radius: 10px;
    padding: 10px;
    width: 250px;
    text-align: center;

}

 h1 {
    color: whitesmoke;
    font-size: 65px;
    text-align: center;

 }
  h2 {
    color: whitesmoke;
    font-size: 35px;
   text-align: center;

 }
p {
    color: whitesmoke;
    font-size: 20px;
}

li {
    color: whitesmoke;
    font-size: 20px;
}

.home-page footer {
    background-color: goldenrod;
}

.art-page footer {
  background-color: #3c4713;
    border-radius: 10px;
    padding: 10px;
    width: 300px;
}


.book-container img {
    width: 80%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.book-container img:hover {
    transform: scale(1.02);
     transition: 0.2s ease;
}