/*
 * Copyright 2024 Thomas Rosenau
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

body {
    margin: 0;
    background: #2170b0;
    overflow: hidden;
}

aside {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

aside button {
    padding: .3em .6em;
    margin: 1em;
    cursor: pointer;
}

main {
    --gap-size: .75vw;
    margin: var(--gap-size);
    height: calc(100vh - 2 * var(--gap-size));
    width: calc(100vw - 2 * var(--gap-size));
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: var(--gap-size);
    line-height: 0;
}

.card {
    max-height: calc((100vh - 5 * var(--gap-size)) / 4);
    max-width: calc((100vw - 14 * var(--gap-size)) / 13);
    margin: auto;
    transition: scale ease-in-out .1s;
}

img {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><text font-size='10' fill='rgba(0, 0, 0, .4)'><tspan x='0' y='40%'>Image not found</tspan><tspan x='0' y='60%'>Mare sure to generate</tspan></text></svg>");
}

.card:hover {
    z-index: 1;
    scale: 1.2;
}