/*
;; This file is part of Twenty Pictures.
;;
;; Twenty Pictures is free software: you can redistribute it and/or
;; modify it under the terms of the GNU Affero General Public License
;; as published by the Free Software Foundation, either version 3 of
;; the License, or (at your option) any later version.
;;
;; Twenty Pictures is distributed in the hope that it will be useful,
;; but WITHOUT ANY WARRANTY; without even the implied warranty of
;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
;; Affero General Public License for more details.
;;
;; You should have received a copy of the GNU Affero General Public
;; License along with Twenty Pictures.  If not, see
;; <http://www.gnu.org/licenses/>.
*/

* {
    box-sizing: border-box;
    font-family: 'Lato', 'Alegreya Sans', sans-serif;
}

body, section {
    margin: 0;
    padding: 0;
    background: #202c28;
}

body {
    padding-top: 8vh;
}

body::after {
    content: " ";
    clear: both;
    float: none;
    display: block;
}

h1 {
    height: 8vh;
    width: 100vw;
    color: white;
    font-size: 4vh;
    margin-bottom: 2vh;
    padding: 2vh;
}
h1,h2,h3 {
    width: 100%;
    text-align: center;
}

article {
    height: 88vh;
}

h3 {
    font-size: 2vh;
    height: 4vh;
}

section {
    height: 100%;
    width: 100%;
}

h1,h3 {
    background-color: hsla(0, 0%, 80%, 0.2);
    border-bottom: thin solid white;
    position: absolute;
    text-align: center;
    text-shadow: 0 0 0.2em #444;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 10001;
    width: 100vw;
    color: white;
}

h1 {
    top: 0;
}

h3 {
    padding: 1vh;
    bottom: 0;
}

h3 a {
    color: white;
}

article {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

div.card {
    float: left;
    height: 25%;
    width: 20%;
    padding: 2%;
    cursor: pointer;
}

div.card section {
    background: #d8d8d8;
    background-position: center center;
    border: 0.1875em outset #364a43;
    border-radius: 0.5em;
    box-shadow: 0em 0em 1.75em #364a43;
    color: white;
    font-size: 1.25em;
    font-weight: bolder;
    position: relative;
    text-shadow: 0 0 1em black;
    transform: translateZ(0.1em);
    background-size: cover;
    overflow: hidden;
    position: relative;
}

div.card section img {
    position: relative;
    width: 100%;
    height: 100%;
    outline: thin solid black;

    object-fit: cover;
}

div.toggled {
    width: 80%;
    height: 100%;
    position: relative;
}

div.toggled .reload {
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;
    font-size: 0.8em;
    height: 2em;
    width: 2em;
    border-radius: 25%;
    box-shadow: 0 0 0.25em #888;
}

@media (max-width: 1200px) {
    div.card {
	height: 20%;
	width: 25%;
    }

    div.card.toggled {
	width: 100%;
	height: 80%;
    }
}
    


.error {
    background: red;
    color: white;
    padding: 2em;
}

.help {
    display: none;
    position: fixed;
    text-shadow: 0 0 0.1em black;
    background: hsla(160, 16%, 15%, 0.75);
    padding: 2em;
    width: 100%;
    color: white;
    overflow: hidden;
    z-index: 1;
    
}

.help dl {
    padding: 0 10em;
}

.help dt {
    float: left;
    clear: left;
    padding: 1em 0.2em;
    width: 20%;
    margin: 0;
    text-align: right;
}

.help dd {
    float: right;
    clear: right;
    padding: 1em 0.5em;
    width: 80%;
    margin: 0;
    white-space: nowrap;
}

.help h2 {
    border-bottom: thin solid white;
    padding-bottom: 0.5em;
}

.help.visible {
    display: block;
}

.instructions {
    font-size: 10px;
    margin-right: -5em;
    margin-left: 5em;
}