@font-face { font-family: Exo; src: url("/fonts/Exo-Regular.otf"); }
@font-face { font-family: Orkney; src: url("/fonts/Orkney-Regular.ttf"); }

/* General site style */
body, html {
    height: 100%;
    margin: 0;
    font: 400 16px/1.8 Orkney;
    color: #777;
}

/* Div sections styles */
div.light, div.dark {
    position: relative;
    text-align: center;
    padding-bottom: 70px;
    text-align: justify;
}
div.light {
    color: #777;
    background-color: white;
}
div.dark {
    color: #ddd;
    background-color: #282E34;
}

/* Heading and paragraph styles */
div.light h1, div.dark h1 {
    letter-spacing: 5px;
    text-transform: uppercase;
    font: 26px Comfortaa;
    padding-top: 70px;
    padding-bottom: 16px;
}
div.dark h1, div.dark h2 {
    color: #ddd;
}

div.light p, div.dark p {
    text-align: justify;
}
div.light h1, div.light h2 {
    color: #111;
}
div.light h2, div.dark h2 {
    font: bold 22px Orkney;
    padding-top: 36px;
    padding-bottom: 6px;
}

div.dark:not(#footer) p, h1, h2, div.light p {
    max-width: 960px;
    margin: auto;
}

/* Link styles */
div.dark a {
    color: white;
}
div.light a {
    color: black;
}

/* Flex styles */
div.flex-container {
    display: flex;
    position: relative;
    margin: auto;
    max-width: 960px;
    flex-flow: row wrap;
    justify-content: space-around;
}
div.flex-container > div {
    flex-grow: 1;
    align-self: center;
    flex-basis: 0;
}

/* Horizontal rule style */
hr {
    padding-top: 36px;
    border-top: none;
    border-left: none;
    border-right: none;
/*    border-bottom: 1px solid white;*/
}

/* Image style */
div.light img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}