.center {
    margin-left: auto;
    margin-right: auto;
}

.hfull {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hhalf {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.hquarter {
    width: 25%;
}

.plain {
    /* cell with no background */
    border: none;
    background: none;
    box-shadow: none;
}

.separated-table {
    /* align cells with padding (spaces) */
    border-collapse: separate;
    border-spacing: 8px;
}

:root {
    --bg-color: #f4f6fb;
    --fg-color: #05102e;
    --darkblue: rgb(5%, 10%, 25%);
    --blue: rgb(10%, 20%, 50%);
    --lightblue: rgb(55%, 60%, 75%);
    --lightblue2: rgb(78%, 80%, 88%);
    --lightblue3: rgb(85%, 88%, 92%);
    --orange:  rgb(100%, 77%, 0%);
    --paleorange:  rgba(100%, 77%, 0%, 0.2);
    font-family: "Meiryo", sans-serif;
}

body {
    color: var(--fg-color);
    /* gradient background */
/*    background: linear-gradient(-90deg, var(--lightblue2), white); */
    background: var(--bg-color);
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2%;
    margin-bottom: 2%;
}

h1 {
    color: var(--blue);
    filter: drop-shadow(2px 2px 2px var(--lightblue));
    /* text-shadow: 2px 2px 2px var(--lightblue); */
}

h2 {
    /* define heading bar */
    color: var(--bg-color);
    background: linear-gradient(0deg, var(--darkblue), var(--blue));
    box-shadow: .5em .5em 1em gray;
    padding-left: 1em;
    padding-top: .2em;
    padding-bottom: .2em;
}

h3, h4 {
    color: var(--blue);
    filter: drop-shadow(1px 1px 1px var(--lightblue2));
    border-bottom: 1px solid var(--lightblue2);
}

p {
    margin-top: .75em;
    margin-bottom: .75em;
    line-height: 175%;
}

ul {
    /* outdent the bullet */
    margin-left: -1em;
    margin-top: .5em;
    margin-bottom: .5em;
    line-height: 175%;
}

li {
    font-weight: bold;
}

li li, li p {
    /* revert to the normal face for the second level */
    font-weight: normal;
}

pre {
    /* rounded frame with shadow */
    border-top:#ddddee 1px solid;
    border-bottom:#888899 1px solid;
    border-left:#ddddee 1px solid;
    border-right:#888899 1px solid;
    color: var(--fg-color);
    background: #f0f4ff;
    box-shadow: 2px 2px 4px gray;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-left: 2em;
    margin-right: 2em;
    /* display horizontal scrollbar if too long */
    overflow: auto;
    font-size: 110%;
}

blockquote {
    /* frame with shadow */
    border: solid 1px var(--fg-color);
    background: rgba(100%, 100%, 100%, 0.75);
    box-shadow: 3px 3px 6px gray;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: 5%;
    margin-right: 5%;
}

a:link {
    color: var(--blue);
}

a:visited {
    color: var(--lightblue);
}

a:hover {
    background: var(--paleorange);
}

strong {
    background: var(--paleorange);
}

table {
    /* join bordes of all cells */
    border-collapse: collapse;
}

td, th {
    border: solid 1px var(--fg-color);
    /* vertial gradient background */
    background: linear-gradient(0deg, var(--lightblue3), var(--bg-color));
    box-shadow: 3px 3px 6px gray;
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .5em;
    padding-bottom: .5em;
}

img {
    /* add drop shadow */
    filter: drop-shadow(.2em .2em .4em gray);
    margin: .5em;
}

/* horizontally extend the textarea to fill the space */
input[type="text"], textarea {
/*
    padding: .5em;
    border: none;
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
*/
}
input[type="submit"] {
    padding-left: 1em;
    padding-right: 1em;
}

hr {
  border-style: inset; 
  border-width: 2px;
  border-color: var(--lightblue3);
  margin-top: 1em;
  margin-bottom: 1.5em;
}

/* ---------------- PukiWiki specific */

/* date string for comments */
span.comment_date {
    font-size: 10pt;
    font-weight: normal;
    color: var(--lightblue);
}