:root {
    --backcolor: rgba(253, 252, 220, 0.8);
    --textColor: rgb(34, 34, 34);
    --oddback: rgba(195, 194, 169, 0.9);
    --evenback: rgba(253, 252, 220, 0.9);
    --inputback: #fafafa
}

* {
    font-family: 'Times New Roman', Times, serif;
}

:not(a) {
    color: var(--textColor);
    padding: 0;
    margin: 0;
}

label {
    font-size: 110%;
}

input[type="text"] {
    background-color: var(--inputback);
    color: #666666;
}

legend {
    font-size: 115%;
}

input[type="text"]:focus {
    color: var(--textColor);
}

input[type="checkbox"] {
    opacity: 55%;
}

input[type="checkbox"]:checked {
    opacity: 80%;
}

a.activePage {
    font-weight: bold;
}

input[type="radio"] {
    transform: scale(0.8);
}

select {
    background-color: var(--inputback);
    color: #444444;
}

textarea {
    background-color: var(--inputback);
    color: #666666;
}

textarea:focus {
    color: var(--textColor);
}

input[type="submit"] {
    background-color: #88e;
    width: 70%;
}

body.grid-layout {
    display: grid;
    grid-template-areas: 
        "header header nav"
        "main main main"
        "footer footer footer";
    grid-gap: 0.5em;
}

.grid-layout > header {
    grid-area: header;
}

.grid-layout > nav {
    grid-area: nav;
}

.grid-layout > main {
    grid-area: main;
}

.grid-layout > footer {
    grid-area: footer;
}

h2 {
    grid-area: h2;
}

article.sub-grid-array {
    display: grid;
    grid-template-areas: 
        "h2 h2"
        "storage-intro options"
        "summary summary";
    grid-gap: 0.5em;
}

.sub-grid-array > #storage-intro {
    grid-area: storage-intro;
}

.sub-grid-array > #options {
    grid-area: options;
}

.sub-grid-array > #summary {
    grid-area: summary;
}

article.sub-grid-detail {
    display: grid;
    grid-template-areas: 
        "h2 h2"
        "solar-intro consumer";
    grid-gap: 0.5em;
}

.sub-grid-detail > #solar-intro {
    grid-area: solar-intro;
}

.sub-grid-detail > #consumer {
    grid-area: consumer;
}

article.sub-grid-index {
    display: grid;
    grid-template-areas: 
        "h2 h2 h2"
        "intro list comparison"
        "intro hydrofig description";
    grid-gap: 0.5em;
}

.sub-grid-index > #intro {
    grid-area: intro;
}

.sub-grid-index > #list {
    grid-area: list;
}

.sub-grid-index > #comparison {
    grid-area: comparison;
}

.sub-grid-index > #hydrofig {
    grid-area: hydrofig;
}

.sub-grid-index > #description {
    grid-area: description;
}

header figure {
    float: left;
}

figure {
    text-align: center;
    max-width: 70%;
    border-radius: 10%;
    border: 0.2em solid var(--textColor);
    background-color: var(--backcolor);
    margin: auto;
}

figcaption {
    background-color: var(--backcolor);
    margin: auto;
    width: 60%;
}

img {
    max-width: 100%;
    border-radius: 10%;
    margin: auto;
}

body {
    /*image source: "https://www.science.org/news/2020/05/new-solar-panels-suck-water-air-cool-themselves-down"*/
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 80%;
    margin: auto;
}

a:hover {
    background-color: #fdfcdc;
}

h1 {
    text-transform: uppercase;
}

p {
    text-indent: 4em;
}

cite {
    font-size: xx-small;
}

nav a:link {
    background-color: #fff;
    color: #009;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

nav a {
    display: block;
    font-size: large;
    height: 25%;
}

nav {
    border: thin solid yellow;
    background-color: white;
    text-align: center;
}

li {
    margin-left: 1.2em;
}

li:nth-child(even) {
    background-color: var(--evenback);
}

li:nth-child(odd) {
    background-color: var(--oddback);
}

form p {
    text-indent: 0em;
}

form {
    margin:auto;
    width: 80%;
}

main > * {
    background-color: var(--backcolor);
    border: 0.2em double var(--textColor);
}

table caption {
    background-color: var(--backcolor);

}

table {
    border-width: 0.4em;
    border-style:solid;
    border-color: var(--textColor);
    border-collapse: collapse;
    max-width: 100%;
    margin:auto;
}

td {
    border-width: 0.2em;
    border-style: solid;
    border-color: var(--textColor);
}

th {
    border-width: 0.2em;
    border-style: solid;
    border-color: var(--textColor);
}

tr:nth-child(1) {
    border-bottom: 0.3em double var(--textColor);
}

tr:nth-child(odd) {
    background-color: var(--oddback);
}

tr:nth-child(even) {
    background-color: var(--evenback);
}

header {
    background-color: var(--backcolor);
}

footer {
    background-color: var(--backcolor);
}

header figure img {
    max-height: 4em;
}
.crazy h1 {
    text-shadow: 0.1em 0.1em #333333d3;
}

body.crazy {
    background-image: linear-gradient(-20deg, #5d98ff 0%, #00000000 60%);
    color: #222222;
}

.crazy h2 {
    font-size: medium;
    transition: font-size 2s;
    transition: color 3s;
}

.crazy h2:hover {
    font-size: large;
    color: #ff2159;
}

.crazy #wiggle {
    animation-name: wiggle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes wiggle {
    0%  { transform: rotate(-2deg) scale(1, 1) }
    25% { transform: rotate(2deg) scale(1.2, 1.2) }
    50% { transform: rotate(-2deg) scale(0.8, 0.8) }
    75% { transform: rotate(2deg) scale(1, 1) }
    100%{ transform: rotate(-2deg) scale(1.2, 1.2) }
}