body {
    margin: 0 auto;
    padding: 10px;
    max-width: 75em;
    background-color: #161616;
    background-image: url("../images/xrayback_chandra.gif");
    background-attachment: fixed;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1, h2, h3 {
    font-family: Georgia, serif;
    font-weight: 800;
}

a {
    text-decoration: none;
}

header,
nav,
main,
footer {
    margin: 0;
    padding: 10px;
    width: 100%;
    background-color: #fff;
}

header img {
    padding: 1em;
    float: left;
}

header h1,
header p {
    text-align: center;
}

nav p.select-language {
    text-align: right;
    margin: 0;
}

#navMain {
    background: #080;
}

nav ul {
    margin: 0;
    margin-left: -2.5em;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: wrap;
}

nav li {
    padding: 1em;
    list-style-type: none;
}

#navMain a:hover {
    color: black;
}

#navMain a {
    margin: 0;
    color: white;
}

#active {
    font-weight: bold;
}

article {
    padding: 1em;
    padding-top: 0;
}

article h1 {
    text-align: center;
    font-style: italic;
    font-size: xx-large;
}

article h3 {
    margin-top: 2em;
}

#skyPanel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}

.canvasDiv {
    /*position: relative;*/
    max-width: 48em;
    min-width: 35em;
    flex-grow: 1;
    /*overflow: hidden;*/
/*    display: flex;
    justify-content: center;
    align-items: flex-end;*/
}

#canvas {
/*    position: absolute;*/
    /*bottom: 0;*/
    width: 100%;
    /*min-height: 30em;*/
    background:#fff;
}

#controlPanel {
    margin-top: 0.5em;
    margin-bottom: 1em;
    width: 23em;
    flex-grow: 0;
}

summary {
    font-weight: bold;
}

.control {
    margin-bottom: 0.5em;
    padding: 0.5em;
    /*margin-bottom: 0.5em;*/
    border: 1px solid #ccc;
    background-color: #eee;
    /*flex-grow: 1;*/
}

#locSearch {
    width: 7em;
}

#dateField {
    visibility: hidden;
    position: absolute;
}

#timeButtons {
    display: grid;
    grid-template-columns: repeat(5, 2.0em);
    grid-template-rows: repeat(4, 2.0em);
    gap: 0.5em;
}

#timeButtons label {
    text-align: center;
    line-height: 2.0em;
}

#dateTimeInfo {
    text-align: center;
    line-height: 2.0em;
    grid-column: 1 / -1;    
}

#nowButton {
    grid-column: 1 / 3;
}

#dateButton {
    grid-column: -3 / -1;
}

#controlButtons {
    margin-top: 0.8em;
    display: grid;
    grid-template-columns: 4.5em 2.0em 2.5em 2.0em;
    grid-template-rows: repeat(3, 2.0em);
    gap: 0.5em;
}

#controlButtons output {
    text-align: center;
    line-height: 2.0em;
}

#controlButtons label {
    line-height: 2.0em;
}

#decos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1em;
}

.decoItem label {
    margin-left: 0.5em;
    margin-right: 1em;
}

#widgetAd {
    padding-left: 1em;
    padding-right: 1em;
    border: 1px dashed #666;
}

footer {
    background: #eee;
    text-align: center;
    padding-top: 1em;
}

footer p {
    font-size: 0.8em;
}

.smaller {
    font-size: 0.8em;
}