@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Regular.ttf') format('truetype')
}

body {
    font-family: 'Open Sans', sans-serif;
    padding: 0 0 172px;
    margin: 0;
    color: #000;
    background-color: #fff
}

h1,
h2 {
    padding: 5px;
    font-weight: 400;
    color: #000;
    text-align: center
}

h1 {
    height: 50px;
    font-size: 150%;
    padding-bottom: 0;
    top: 0;
    opacity: .9
}

h2 {
    font-size: 130%
}

figcaption,
figure,
p {
    margin: 5px
}

p {
    padding: 0 5px 5px
}

ol,
ul {
    padding-top: 0
}

.bottom,
.top,
ol,
p,
ul {
    margin-top: 0;
    line-height: 150%;
    text-align: justify
}

#content,
ol,
ul {
    padding-right: 5px
}

ol,
ul {
    margin-right: 5px
}

.btn a,
a.btn,
figcaption {
    text-align: center
}

img {
    width: 100%;
    display: block
}

a {
    color: #00796b;
    z-index: 100;
    text-decoration: none
}

#menu a,
.btn a,
a.btn {
    margin-bottom: 10px;
    color: #fff;
    text-decoration: none
}

.btn a,
a.btn {
    margin-top: 5px;
    border-bottom-style: solid;
    border-bottom-color: #000;
    border-bottom-width: 5px;
    border-bottom-color: rgba(0, 0, 0, .1);
    background-color: #eceff1;
    display: block;
    padding: 15px 40px 10px
}

.btn a:hover,
a.btn:hover {
    padding-bottom: 15px;
    border-bottom-width: 0
}

.yellow {
    color: #ffd600
}

.magenta {
    color: magenta
}

.cyan {
    color: cyan
}

.blue {
    color: #2962ff
}

.red {
    color: #d32f2f
}

.green {
    color: #4caf50
}

.white {
    color: #bdbdbd
}

#menu,
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

#menu {
    display: flex;
    flex-direction: row;
    padding: 10px;
    background-color: transparent;
    overflow: auto;
    white-space: nowrap;
    color: #fff
}

#menu a {
    padding: 5px 10px;
    margin-left: 2px;
    margin-right: 2px;
    display: inline-block;
    border-style: solid;
    border-color: rgba(0, 0, 0, .2);
    border-width: 2px;
    background-color: rgba(0, 0, 0, .2)
}

#menu a:hover {
    background-color: rgba(0, 0, 0, .5);
    color: #fff
}

#content {
    position: relative;
    top: 125px;
    padding-left: 5px
}

header {
    z-index: 100;
    margin-top: 0;
    padding-top: 30px;
    image-rendering: auto;
    background-position: center;
    user-select: none;
    text-align: center
}

.main header,
.universe header {
    background-color: #212121;
    background-image: url(img/main.gif);
    background-repeat: no-repeat
}

.universe header {
    background-image: url(img/universe.gif);
    background-color: #2a003f;
    background-size: contain
}

.air header,
.energy header,
.water header {
    background-image: url(img/water.gif);
    background-color: #31abdf;
    background-repeat: no-repeat
}

.air header,
.energy header {
    background-image: url(img/air.gif);
    background-color: #86b9d5
}

.energy header {
    background-image: url(img/energy.gif);
    background-color: #18191b
}

.colors header,
.motion header {
    background-size: contain
}

.motion header {
    background-image: url(img/motion.gif)
}

.colors header {
    background-image: url(img/colors.gif);
    background-color: #202020;
    background-repeat: no-repeat
}

.air h2 {
    color: #29b6f6
}

.water h2 {
    color: #0090c3
}

.energy h2 {
    color: #fbc02c
}

.motion h2 {
    color: #e64a19
}

.universe h2 {
    color: #303f9f
}

.colors h2 {
    color: #8bc34a
}

.btn a.main,
.main .btn a {
    background-color: #d32f2f
}

.btn a.main:hover,
.main .btn a:hover {
    background-color: #b71c1c
}

.about .btn a,
.btn a.about {
    background-color: #212121
}

.about .btn a:hover,
.btn a.about:hover {
    background-color: #000
}

.btn a.water,
.water .btn a {
    background-color: #31abdf
}

.btn a.water:hover,
.water .btn a:hover {
    background-color: #0090c3
}

.air .btn a,
.btn a.air {
    background-color: #81d4fa
}

.air .btn a:hover,
.btn a.air:hover {
    background-color: #4fc3f7
}

.btn a.motion,
.motion .btn a {
    background-color: #ff5722
}

.btn a.motion:hover,
.motion .btn a:hover {
    background-color: #e64a19
}

.btn a.energy,
.energy .btn a {
    background-color: gold
}

.btn a.energy:hover,
.energy .btn a:hover {
    background-color: #fbc02c
}

.btn a.universe,
.universe .btn a {
    background-color: #303f9f
}

.btn a.universe:hover,
.universe .btn a:hover {
    background-color: #1a237e
}

.btn a.colors,
.colors .btn a {
    background-color: #8bc34a
}

.btn a.colors:hover,
.colors .btn a:hover {
    background-color: #689f38
}

header h1 {
    color: #fff;
    text-shadow: 1px 1px #555
}

.bottom,
.fraction,
.top {
    padding: 0 5px
}

.fraction {
    display: inline-block;
    text-align: center
}

.bottom {
    border-top: 1px solid #000;
    display: block
}

#watermark {
    height: 220px;
    width: 167px;
    position: fixed;
    z-index: -1;
    top: 50%;
    left: 50%;
    margin-top: -70px;
    margin-left: -83px
}

#watermark img {
    opacity: .5
}

td,
th {
    border: 1px solid #000;
    padding: 5px 20px
}

figcaption {
    font-weight: 700;
    font-size: 90%
}

.center {
    width: initial;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}