html,
body {
    height: 100%;
    max-width: 800px;
    margin: 0 auto;
    background-image: url('../Images/wood.png');
    background-repeat: repeat;
    font-family: 'Cedarville Cursive', cursive;
}

div#background {
    /*height: 100%;
    width: 100%;
    background-image: url(http://garchitecture.ca/php/images/headers/wood.jpg);*/
    padding-top: 20px;
}

div#gallery {
    width: 800px;
    margin: auto;
}

#background img {
    height: 175px;
    margin: 0px;
}

#background figure {
    float: left;
    position: relative;
    background-color: white;
    text-align: center;
    font-size: 15px;
    padding: 10px;
    margin: 10px;
    box-shadow: 1px 2px 3px black;
}

.scaled {
    /*transform: scale(0.7);*/ /* Equal to scaleX(0.7) scaleY(0.7) */
}

figure.pic1 {
    $randomNumber: random(14) + 5;
    -webkit-transform: rotate(-10deg);
    z-index: 1;
}

figure.pic2 {
    -webkit-transform: rotate(15deg);    
    z-index: 2;
}

figure.pic3 {
    -webkit-transform: rotate(-25deg);    
    z-index: 1;
}

figure.pic4 {
    -webkit-transform: rotate(5deg);    
    z-index: 1;
}

figure.pic5 {
    -webkit-transform: rotate(5deg);    
    z-index: 1;
}

figure.pic6 {
    -webkit-transform: rotate(-8deg);    
    z-index: 1;
}

figure.pic7 {
    -webkit-transform: rotate(2deg);    
    z-index: 1;
}

figure.pic8 {
    -webkit-transform: rotate(-13deg);    
    z-index: 1;
}

figure.pic9 {
    -webkit-transform: rotate(-7deg);    
    z-index: 1;
}

figure.pic10 {
    -webkit-transform: rotate(2deg);    
    z-index: 1;
}

figure.pic11 {
    -webkit-transform: rotate(-9deg);    
    z-index: 1;
}

figure.pic12 {
    -webkit-transform: rotate(3deg);    
    z-index: 1;
}
figure.pic13 {
    -webkit-transform: rotate(-14deg);    
    z-index: 1;
}
figure.pic14 {
    -webkit-transform: rotate(6deg);    
    z-index: 1;
}
figure.pic15 {
    -webkit-transform: rotate(-2deg);    
    z-index: 1;
}
figure.pic16 {
    -webkit-transform: rotate(5deg);    
    z-index: 1;
}
figure.pic17 {
    -webkit-transform: rotate(-12deg);    
    z-index: 1;
}
figure.pic18 {
    -webkit-transform: rotate(10deg);    
    z-index: 1;
}
figure.pic19 {
    -webkit-transform: rotate(-8deg);    
    z-index: 1;
}
figure.pic20 {
    -webkit-transform: rotate(13deg);    
    z-index: 1;
}
figure.pic21 {
    -webkit-transform: rotate(-6deg);    
    z-index: 1;
}
figure.pic22 {
    -webkit-transform: rotate(4deg);    
    z-index: 1;
}
figure.pic23 {
    -webkit-transform: rotate(-10deg);    
    z-index: 1;
}
figure.pic24 {
    -webkit-transform: rotate(11deg);    
    z-index: 1;
}
figure.pic25 {
    -webkit-transform: rotate(-17deg);    
    z-index: 1;
}
figure.pic26 {
    -webkit-transform: rotate(13deg);    
    z-index: 1;
}
figure.pic27 {
    -webkit-transform: rotate(-4deg);    
    z-index: 1;
}
figure.pic28 {
    -webkit-transform: rotate(8deg);    
    z-index: 1;
}
figure.pic29 {
    -webkit-transform: rotate(-3deg);
    z-index: 1;
}
figure.pic30 {
    -webkit-transform: rotate(8deg);
    z-index: 1;
}
#background figure:hover {
    box-shadow: 5px 10px 100px black;
    -webkit-transform: scale(1.1,1.1);
    z-index: 20;
}

/* --- the GROW hover effect, ported from Gallery.less (the compiled css had
   lost these rules, killing the neat blow-up-on-hover). Hovering a photo in
   the album scales it up smooth over 1s; moving off eases it back down.
   Mark Kiessling 2026-07-10 --- */
.grow img {
    -webkit-transform: rotateY(0deg);
    box-shadow: 5px 10px 100px black;
    transition: 1s ease;
}

.grow img:hover {
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    transform: scale(2.5);
    transition: 1s ease;
}
/* Co-authored by Claude AI */