body {
    margin: 0;
    height: 100vh; /* full viewport height */

    font-family: Verdana, sans-serif;

    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Vertically center */
    align-items: center; /* Horizontally center */
    background-image: url('./River_Sumida.png');
        background-repeat: repeat;
}

a {
    text-decoration: none;
}

img {
    width: 350px;
    margin-bottom: 20px; /* Add space below the image */
}

button {
    font-family: Verdana, sans-serif;
    font-size: 12px;

    background: linear-gradient(#ffffff, #b8b8b8);
    border: 1px solid white;
        border-radius: 3px;
        box-shadow: 0 0 0 1px rgb(70, 70, 70); 

    outline: 2px solid rgba(160, 160, 160, 0.5);
    outline-offset: 1px; 

    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 2px;

    cursor: pointer;
    transition-duration: 0.1s;
}

button:hover {
    background: linear-gradient(#c5eaff, #a3b3bd);
    border: 1px solid rgb(155, 188, 199);
    box-shadow: gray;
}

button:active {
    background: linear-gradient(#b8b8b8, #b8b8b8);
    border: 1px solid white;
    box-shadow: 0 0 0 1px gray;
    transition-duration: 0s;
}

.titlebutton {
    font-size: 10px;

    background: #c9d8ff;
    border-radius: 2px;
    border: 1px solid rgb(50, 66, 87);
    
    padding: 3px;
    outline: none;
    box-shadow: none;

    height: 18px;
    width: 18px;


    transition-duration: 0.1s;
}

.titlebutton:hover {
    background: #98a4c0;
    border-radius: 2px;
    border: 1px solid rgb(50, 66, 87);

    padding: 3px;
    outline: none;
    box-shadow: none;
}

.titlebutton:hover:active {
    background: #c9d8ff;
}

.titleblock {
    font-family: Tahoma, sans-serif;
    font-size: 15px;

    padding: 5px;
    display: flex;
    text-align: center;
    /* text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5); */

    background: linear-gradient(#4F84FF, #B3C9FF);
        border-top: 1px solid black;
        border-right: 1px solid black;
        border-left: 1px solid black;
        border-bottom: none;
        box-shadow: inset 0 0 0 2px #95b3fa;

        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    
    max-width: 500px;
    min-width: 300px;
    width: 80%;
    
    margin-left: 20px;
    margin-right: 20px;
}

.titlecenter {
    margin-top: 2px;
    position: absolute;          /* absolutely position in the title bar */
    left: 50%;                   /* center horizontally */
    transform: translateX(-50%); /* correct offset to truly center */
    text-align: center;
}

.pagemainblock {
    padding: 5px;
    text-align: center;

    background-color: white;
    border-right: 1px solid black;
    border-left: 1px solid black;

    max-width: 500px;
    min-width: 300px;
    width: 80%;
    
    margin-left: 20px;
    margin-right: 20px;
}

.pageblock {
    padding: 5px;
    text-align: center;

    background: linear-gradient(rgb(230, 230, 230), rgb(160, 160, 160));
        border-right: 1px solid black;
        border-left: 1px solid black;
        border-bottom: 1px solid black;

        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        /* box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.7);
        */
    max-width: 500px;
    min-width: 300px;
    width: 80%;
    
    margin-left: 20px;
    margin-right: 20px;
}

.shiftleft {
    text-align: left;
    margin-bottom: 25px;
    margin-top: 0px;
}

.shiftright {
    text-align: right;
    margin: 2px;
}

.bananafloat {
    float: right;
    width: 150px;
    height: 150px;
    margin: 10px 10px -5px 10px;
}