/*  Cascading Style Sheet by Bruce E. Hall, Feb 2026  */
/*  dependencies:  background image "bg1.jpg"  */

body {font-size: 16pt; background-color:rgb(150, 175, 154);}
h1 {font-size: 32px; margin: 0; text-align:center; }
h2 {font-size: 24px; }
h3 {display: none;}

.image-left {float: left; margin-right:20px;}
.image-right {float: right; margin-left: 20px;}
.caption {font-style: italic; margin-top: 0px; font-size: 90%;}
.signature {font-family: 'Courier New', Courier, monospace; font-size: 90%; font-weight: bold;}
.nihongo {word-break: keep-all; line-break: strict; text-wrap: balance;  overflow-wrap: break-word; text-align: center;}

.whiteText {color: white;}
.darkbox {background-color: rgba(36, 31, 31, 0.5); color: white; text-align: center;}
.whitebox {background-color:rgba(250, 250, 250, 0.7);}
.greenbox {background-color: rgba(76, 175, 80, 0.7);}
.darkbox, .whitebox, .greenbox {margin: 10px 0px; padding: 20px; border-radius: 15px; overflow:auto;}

.redNote{background-color: #ffdddd; border-left: 6px solid #f44336;}
.greenNote {background-color: #ddffdd; border-left: 6px solid #04AA6D;}
.blueNote {background-color: #e7f3fe; border-left: 6px solid #2196F3;}
.yellowNote {background-color: #ffffcc; border-left: 6px solid #ffeb3b;}
.redNote,.greenNote,.blueNote,.yellowNote {margin: 25px; padding: 1px 12px;}

.rockgarden {
    background-color:darkgray;
    background-image: url("bg1.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.container {display: flex; flex-wrap: wrap; 
    justify-content:space-evenly; 
    gap: 12px; padding: 15px 0px;}
.container img {width:100%;}
.container div {
    width: 280px;
    border-radius: 15px;
    background-color: rgba(250, 250, 250, 0.7);
    margin: 0px 0px 0px 0px;
    padding: 20px;
    box-sizing: border-box;
}

.card {position:relative;  width:180px; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
    }
.card img {width: 100%;}
.card p {padding:0p; margin: 0px;}
 /* .card:hover {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.7);} */
.card:hover .overlay {opacity: 1;} 
.overlay {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  height: 100%; width: 100%;
  opacity: 0;
  transition: .5s ease;
}


/* top-bar navigation menu */
nav.topnav {position:sticky; top:0; z-index: 1;}

nav.topnav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color:rgba(250, 250, 250, 0.9);
    border-radius: 10px; 
}
nav.topnav ul li a {
    display: block;
    color: #000;
    padding: 10px 10px;
    border-radius: 10px; 
    text-decoration: none;
}
nav.topnav ul li a:hover {
    background-color: rgba(85, 85, 85, 0.7);
    color: white;
}

/* unused side-bar navigation menu */
ul.sidenav {
    list-style-type: none;
    margin: 10px 0px;
    padding: 0;
    width: 120px;
    background-color:rgba(250, 250, 250, 0.7);
    position: fixed;
}
ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
ul.sidenav li a.active {
    background-color: rgba(76, 175, 80, 0.7);
    color: white;
}
ul.sidenav li a:hover:not(.active) {
    background-color: rgba(85, 85, 85, 0.7);
    color: white;
}